@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Play:wght@400;700&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Rose:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* Brand colors */
  --color-primary: #0687F1;
  --color-primary-dark: #013883;
  --color-primary-soft: #F1F9FC;
  --color-secondary: #4AB3FC;
  --color-secondary-dark: #0768CF;
  --color-tertiary: #013482;
  /* Neutral colors */
  --color-dark: #013482;
  --color-dark-soft: #082E5C;
  --color-title: #013482;
  --color-text: #355A7D;
  --color-muted: #6F8DA8;
  --color-white: #FFFFFF;
  --color-off-white: #F6FBFD;
  --color-surface: #F2FAFD;
  --color-border: #D5EAF8;
  --color-success: #0687F1;
  --color-primary: #0687F1;
  --color-primary-dark: #013883;
  --color-primary-soft: #F1F9FC;
  --color-secondary: #4AB3FC;
  --color-secondary-dark: #0768CF;
  --color-tertiary: #013482;
  /* Neutral colors */
  --color-dark: #013482;
  --color-dark-soft: #082E5C;
  --color-title: #013482;
  --color-text: #355A7D;
  --color-muted: #6F8DA8;
  --color-white: #FFFFFF;
  --color-off-white: #F6FBFD;
  --color-surface: #F2FAFD;
  --color-border: #D5EAF8;
  /*** --color-border:#D5EAF8;
  --color-danger: #013883;
  /* Backgrounds */
  --topbar-background: linear-gradient(110deg, #013482 0%, #013883 34%, #0768CF 68%, #0687F1 100%);
  --footer-background: radial-gradient(circle at 85% 10%, rgba(74, 179, 252, .16), transparent 30%), linear-gradient(145deg, #013482 0%, #082E5C 48%, #013883 100%);
  /* Font families */
  --font-body: "Inter", sans-serif;
  --font-heading: "Inter", sans-serif;
  --font-heading: "Big Shoulders", sans-serif;
  --font-body: "Chakra Petch", sans-serif;
  /* Font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* Border radius */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 4px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-round: 50%;
  --radius-pill: 999px;
  /* Shadows */
  --shadow-small: 0 10px 30px rgba(1, 52, 130, .08);
  --shadow-medium: 0 18px 55px rgba(1, 52, 130, .13);
  --shadow-large: 0 30px 90px rgba(1, 52, 130, .19);
  /* Transitions */
  --transition-fast: .2s ease;
  --transition-normal: .35s cubic-bezier(.22, 1, .36, 1);
  /* Layout */
  --mobile-bottom-height: 72px;
  /****************CONTACT*************/
  --contact-color: #A1D7FB;
  --main-font-size: 14px;
  --main-font-size-12:12px;
  --main-font-size-capital: 12px;
  --font-size-h: 15px;
  --color-border-1: #F1F9FC;
  --main-font-size-2: 12px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
}

body.no-scroll {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
}

button {
  border: 0;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  opacity: 0;
  visibility: hidden;
  background: rgba(1, 52, 130, .58);
  backdrop-filter: blur(5px);
  transition: var(--transition-normal);
}

.site-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lj-header {
  position: relative;
  z-index: 1200;
  background: var(--color-white);
}

/* Topbar */

.lj-topbar {
  color: var(--color-white);
  background: var(--topbar-background);
}

.lj-topbar-inner {
  min-height: 43px;
  max-width: 1360px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px 36px;
  align-items: center;
  margin: auto;
}

.lj-topbar-nav,
.lj-topbar-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-topbar-nav:hover,
.lj-topbar-close:hover {
  background: rgba(255, 255, 255, .13);
}

.lj-topbar-nav i,
.lj-topbar-close i {
  font-size: 22px;
}

.lj-topbar-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--main-font-size);
  font-weight: var(--weight-light);
  letter-spacing: .02em;
}

.lj-topbar-label {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--color-dark);
  background: var(--color-secondary);
  border-radius: var(--radius-xs);
  font-weight: var(--weight-semibold);
}

.lj-topbar-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lj-topbar-readmore {
  display: none;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, .13);
  border-radius: var(--radius-round);
  cursor: pointer;
}

/* Main header */

.lj-main-header {
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .97);
}

.lj-main-header-grid {
  min-height: 84px;
  display: grid;
  grid-template-columns: 185px 118px minmax(440px, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.lj-mobile-left,
.lj-mobile-language {
  display: none;
}

.lj-logo {
  display: flex;
  align-items: center;
}

.lj-logo img {
  width: 170px;
  max-height: 62px;
  object-fit: contain;
}

.lj-dropdown-wrap {
  position: relative;
}

.lj-country-button {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--color-title);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.lj-country-button img,
.lj-icon-button img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.lj-country-button span {
  font-size: var(--main-font-size);
  font-weight: var(--weight-medium);
}

/* Search */

.lj-search-form {
  min-width: 0;
  width: 100%;
  height: 50px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 112px;
  align-items: center;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 28px rgba(1, 52, 130, .05);
}

.lj-search-category {
  height: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.lj-search-category-image {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: var(--radius-round);
}

.lj-search-category select {
  min-width: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0;
  outline: 0;
  color: var(--color-title);
  background: transparent;
  font-size: var(--main-font-size);
  font-weight: var(--weight-medium);
}

.lj-search-form>input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  border: 0;
  outline: 0;
  color: var(--color-title);
  background: var(--color-white);
  font-size: 13px;
}

.lj-search-submit {
  height: calc(100% - 8px);
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  transition: var(--transition-fast);
}

.lj-search-submit:hover {
  transform: translateX(-2px);
}

/* Header actions */

.lj-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lj-icon-button,
.lj-avatar-button {
  position: relative;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  color: var(--color-title);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-icon-button:hover,
.lj-avatar-button:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.lj-icon-button i {
  font-size: 20px;
}

.lj-notification-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-round);
}

.lj-avatar-button {
  padding: 3px;
  border-radius: var(--radius-none);
}

.lj-avatar-button img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: var(--radius-none);
}

/* Dropdowns */

.lj-dropdown {
  position: absolute;
  z-index: 1500;
  top: calc(100% + 14px);
  right: 0;
  min-width: 230px;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  transform: translateY(8px);
  transition: var(--transition-normal);
}

.lj-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lj-dropdown-title,
.lj-dropdown-header {
  padding: 5px 6px 11px;
  color: var(--color-title);
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.lj-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lj-dropdown-header a {
  color: var(--color-primary);
  font-size: 10px;
}

.lj-country-dropdown {
  left: 0;
  right: auto;
  width: 286px;
}

.lj-dropdown-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-dropdown-search input {
  width: 100%;
  height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.lj-country-scroll {
  max-height: 350px;
  overflow-y: auto;
}

.lj-country-list {
  margin-top: 8px;
}

.lj-country-list button,
.lj-language-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-size: var(--main-font-size);
}

.lj-country-list button:hover,
.lj-language-dropdown button:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lj-country-list img,
.lj-language-dropdown img {
  width: 23px;
  height: 16px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.lj-notification-dropdown {
  width: 330px;
}

.lj-notification-item {
  display: flex;
  gap: 10px;
  padding: 12px 6px;
  border-top: 1px solid var(--color-border);
}

.lj-notification-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
}

.lj-notification-item strong {
  display: block;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.lj-notification-item small {
  color: var(--color-muted);
  font-size: 10px;
}

.lj-profile-dropdown {
  min-width: 180px;
}

.lj-profile-dropdown a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.lj-profile-dropdown a:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Bottom header */

.lj-bottom-header {
  border-bottom: 1px solid var(--color-border);
}

.lj-bottom-header-grid {
  height: 48px;
  display: grid;
  grid-template-columns: 215px 1px minmax(140px, 1fr) 1px auto;
  align-items: center;
  gap: 18px;
}

.lj-bottom-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

/* =========================================================
   LINJUST CATEGORY NAVIGATION
   CATEGORY -> SUBCATEGORY -> SUB-SUBCATEGORY
========================================================= */

/* =========================================================
   ROOT WRAPPER
========================================================= */

.lj-category-menu-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9990;
}

/* =========================================================
   MAIN CATEGORY TOGGLE
========================================================= */

.lj-category-menu-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 0;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--main-font-size);
  font-weight: var(--weight-semibold);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast);
}

.lj-category-menu-toggle:hover {
  color: var(--color-primary);
}

.lj-category-menu-toggle>i:first-child {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 20px;
}

.lj-category-menu-toggle>span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lj-category-menu-toggle>i:last-child {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--color-title);
  font-size: 16px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* =========================================================
   OPEN TOGGLE
========================================================= */

.lj-category-menu-toggle[ aria-expanded="true"]>i:last-child {
  color: var(--color-primary);
  transform: rotate(180deg);
}

/* =========================================================
   MAIN MEGA MENU
========================================================= */

.lj-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  margin: 0;
  padding: 10px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-medium);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transform-origin: top left;
  overflow: visible;
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
  z-index: 9999;
}

/* =========================================================
   MAIN CATEGORY LIST
========================================================= */

.lj-main-category-list {
  position: relative;
  display: block;
  width: 100%;
  max-height: calc( 100vh - 145px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* =========================================================
   CATEGORY ITEMS
========================================================= */

.lj-category-item,
.lj-subcategory-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   ALL LINKS
========================================================= */

.lj-category-item>a,
.lj-subcategory-menu>a,
.lj-subcategory-item>a,
.lj-subsubcategory-menu>a {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 8px 10px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  outline: 0;
  font-family: var(--font-body);
  font-size: var(--main-font-size);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast), background var(--transition-fast);
}

/* =========================================================
   LINKS WITHOUT CHILDREN
========================================================= */

.lj-subcategory-menu>a,
.lj-subsubcategory-menu>a {
  grid-template-columns: 34px minmax(0, 1fr);
}

/* =========================================================
   TEXT
========================================================= */

.lj-category-item>a>span:not(.lj-category-main-icon),
.lj-subcategory-menu>a>span:not(.lj-category-nav-icon),
.lj-subcategory-item>a>span:not(.lj-category-nav-icon),
.lj-subsubcategory-menu>a>span:not(.lj-category-nav-icon) {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================================
   MAIN CATEGORY IMAGE
========================================================= */

.lj-category-item>a>img {
  display: block;
  width: 29px;
  height: 29px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

/* =========================================================
   CATEGORY ICONS
========================================================= */

.lj-category-main-icon,
.lj-category-nav-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 15px;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.lj-category-nav-icon.is-small {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  font-size: 14px;
}

/* =========================================================
   CATEGORY ARROWS
========================================================= */

.lj-category-item>a>.bx-chevron-right,
.lj-category-arrow {
  justify-self: end;
  color: var(--color-muted);
  font-size: 18px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:992px) {
  /* =====================================================
       MAIN MENU OPEN
    ====================================================== */
  .lj-category-menu-wrap:hover>.lj-mega-menu,
  .lj-category-menu-wrap.is-open>.lj-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  /* =====================================================
       LINK HOVER
    ====================================================== */
  .lj-category-item:hover>a,
  .lj-category-item.is-desktop-open>a,
  .lj-subcategory-menu>a:hover,
  .lj-subcategory-item:hover>a,
  .lj-subcategory-item.is-desktop-open>a,
  .lj-subsubcategory-menu>a:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
  }
  /* =====================================================
       ICON HOVER
    ====================================================== */
  .lj-category-item:hover>a>.lj-category-main-icon,
  .lj-category-item.is-desktop-open>a>.lj-category-main-icon,
  .lj-subcategory-item:hover>a>.lj-category-nav-icon,
  .lj-subcategory-item.is-desktop-open>a>.lj-category-nav-icon {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
  /* =====================================================
       ARROW HOVER
    ====================================================== */
  .lj-category-item:hover>a>.bx-chevron-right,
  .lj-category-item.is-desktop-open>a>.bx-chevron-right,
  .lj-subcategory-item:hover>a>.lj-category-arrow,
  .lj-subcategory-item.is-desktop-open>a>.lj-category-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
  }
  /* =====================================================
       SECOND LEVEL
    ====================================================== */
  .lj-subcategory-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    max-height: calc( 100vh - 16px);
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity .12s ease, visibility .12s ease;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    z-index: 10000;
  }
  /* =====================================================
       OPEN SECOND LEVEL
    ====================================================== */
  .lj-category-item:hover>.lj-subcategory-menu,
  .lj-category-item.is-desktop-open>.lj-subcategory-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* =====================================================
       THIRD LEVEL
    ====================================================== */
  .lj-subsubcategory-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    max-height: calc( 100vh - 16px);
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity .12s ease, visibility .12s ease;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    z-index: 10001;
  }
  /* =====================================================
       OPEN THIRD LEVEL
    ====================================================== */
  .lj-subcategory-item:hover>.lj-subsubcategory-menu,
  .lj-subcategory-item.is-desktop-open>.lj-subsubcategory-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* =========================================================
   SCROLLBARS
========================================================= */

.lj-main-category-list::-webkit-scrollbar,
.lj-subcategory-menu::-webkit-scrollbar,
.lj-subsubcategory-menu::-webkit-scrollbar {
  width: 5px;
  height: 0;
}

.lj-main-category-list::-webkit-scrollbar-track,
.lj-subcategory-menu::-webkit-scrollbar-track,
.lj-subsubcategory-menu::-webkit-scrollbar-track {
  background: transparent;
}

.lj-main-category-list::-webkit-scrollbar-thumb,
.lj-subcategory-menu::-webkit-scrollbar-thumb,
.lj-subsubcategory-menu::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.lj-main-category-list::-webkit-scrollbar-thumb:hover,
.lj-subcategory-menu::-webkit-scrollbar-thumb:hover,
.lj-subsubcategory-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-muted);
}

/* =========================================================
   EMPTY CATEGORY
========================================================= */

.lj-category-navigation-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 110px;
  padding: 20px;
  color: var(--color-muted);
  text-align: center;
}

/* =========================================================
   SMALL DESKTOP
========================================================= */

@media( min-width:992px) and ( max-width:1199.98px) {
  .lj-mega-menu {
    width: 270px;
  }
  .lj-subcategory-menu {
    width: 240px;
  }
  .lj-subsubcategory-menu {
    width: 230px;
  }
}

/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width:991.98px) {
  /* =====================================================
       WRAPPER
    ====================================================== */
  .lj-category-menu-wrap {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  /* =====================================================
       BUTTON
    ====================================================== */
  .lj-category-menu-toggle {
    position: relative;
    min-height: 48px;
    z-index: 20;
  }
  /* =====================================================
       MAIN MENU
       CLOSED BY DEFAULT
    ====================================================== */
  #ljMegaMenu.lj-mega-menu {
    display: none !important;
    /*
         * JavaScript calculates top/left/width.
         *
         * Using fixed makes this independent of the
         * header's overflow and dimensions.
         */
    position: fixed !important;
    top: 0;
    left: 0;
    width: auto;
    min-width: 260px;
    max-width: calc( 100vw - 20px);
    max-height: calc( 100dvh - 20px);
    margin: 0 !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(5px) !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 20px 60px rgba(1, 52, 130, .22) !important;
    z-index: 2147483000 !important;
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease !important;
  }
  /* =====================================================
       MAIN MENU OPEN
    ====================================================== */
  #ljMegaMenu.lj-mega-menu.is-mobile-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  /* =====================================================
       MAIN LIST
    ====================================================== */
  #ljMegaMenu .lj-main-category-list {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: var(--color-white);
    border: 0;
    list-style: none;
  }
  /* =====================================================
       SECOND & THIRD LEVEL
       CLOSED BY DEFAULT
    ====================================================== */
  #ljMegaMenu .lj-subcategory-menu,
  #ljMegaMenu .lj-subsubcategory-menu {
    display: none !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  #ljMegaMenu .lj-subcategory-menu {
    background: var(--color-off-white) !important;
  }
  #ljMegaMenu .lj-subsubcategory-menu {
    background: var(--color-surface) !important;
  }
  /* =====================================================
       OPEN SECOND LEVEL
    ====================================================== */
  #ljMegaMenu .lj-category-item.is-mobile-open>.lj-subcategory-menu {
    display: block !important;
  }
  /* =====================================================
       OPEN THIRD LEVEL
    ====================================================== */
  #ljMegaMenu .lj-subcategory-item.is-mobile-open>.lj-subsubcategory-menu {
    display: block !important;
  }
  /* =====================================================
       MOBILE LINKS
    ====================================================== */
  #ljMegaMenu .lj-category-item>a,
  #ljMegaMenu .lj-subcategory-menu>a,
  #ljMegaMenu .lj-subcategory-item>a,
  #ljMegaMenu .lj-subsubcategory-menu>a {
    min-height: 50px;
  }
  /* =====================================================
       SECOND LEVEL BACKGROUND
    ====================================================== */
  #ljMegaMenu .lj-subcategory-menu>a,
  #ljMegaMenu .lj-subcategory-item>a {
    padding-left: 18px;
    background: var(--color-off-white);
  }
  /* =====================================================
       THIRD LEVEL BACKGROUND
    ====================================================== */
  #ljMegaMenu .lj-subsubcategory-menu>a {
    padding-left: 30px;
    background: var(--color-surface);
  }
  /* =====================================================
       ACTIVE PARENT
    ====================================================== */
  #ljMegaMenu .lj-category-item.is-mobile-open>a,
  #ljMegaMenu .lj-subcategory-item.is-mobile-open>a {
    color: var(--color-primary);
    background: var(--color-primary-soft);
  }
  /* =====================================================
       ACTIVE ICON
    ====================================================== */
  #ljMegaMenu .lj-category-item.is-mobile-open>a>.lj-category-main-icon,
  #ljMegaMenu .lj-subcategory-item.is-mobile-open>a>.lj-category-nav-icon {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
  /* =====================================================
       ACTIVE ARROW
    ====================================================== */
  #ljMegaMenu .lj-category-item.is-mobile-open>a>.bx-chevron-right,
  #ljMegaMenu .lj-subcategory-item.is-mobile-open>a>.lj-category-arrow {
    color: var(--color-primary);
    transform: rotate(90deg);
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:575.98px) {
  .lj-category-menu-toggle {
    min-height: 46px;
  }
  .lj-category-menu-toggle>i:first-child {
    font-size: 18px;
  }
  #ljMegaMenu .lj-category-item>a,
  #ljMegaMenu .lj-subcategory-menu>a,
  #ljMegaMenu .lj-subcategory-item>a,
  #ljMegaMenu .lj-subsubcategory-menu>a {
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    gap: 7px;
    min-height: 48px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: var(--main-font-size-2);
  }
  #ljMegaMenu .lj-subcategory-menu>a,
  #ljMegaMenu .lj-subcategory-item>a {
    padding-left: 16px;
  }
  #ljMegaMenu .lj-subsubcategory-menu>a {
    padding-left: 27px;
  }
  .lj-category-main-icon,
  .lj-category-nav-icon {
    width: 27px;
    height: 27px;
    font-size: 13px;
  }
}

.lj-header-links-swiper {
  width: 100%;
}

.lj-header-links-swiper .swiper-slide {
  width: auto;
}

.lj-header-links-swiper a {
  color: var(--color-title);
  font-size: var(--main-font-size);
  font-weight: var(--weight-regular);
}

.lj-special-header-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lj-special-header-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-title);
  white-space: nowrap;
  font-size: var(--main-font-size);
  font-weight: var(--weight-medium);
}

.lj-special-header-links i {
  color: var(--color-primary);
  font-size: 16px;
}

/* Mobile search popover */

.lj-mobile-search-popover {
  position: fixed;
  z-index: 1600;
  top: 112px;
  left: 14px;
  right: 14px;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-large);
  transform: translateY(-10px);
  transition: var(--transition-normal);
}

.lj-mobile-search-popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lj-mobile-search-pointer {
  position: absolute;
  top: -8px;
  left: 20px;
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  transform: rotate(45deg);
}

.lj-mobile-search-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--color-title);
  cursor: pointer;
}

.lj-mobile-search-popover label {
  display: block;
  margin: 12px 0 7px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.lj-mobile-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-mobile-search-field input,
.lj-mobile-search-field select {
  width: 100%;
  height: 40px;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.lj-mobile-search-submit {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

/* Login modal */

.lj-login-modal {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  background: rgba(1, 52, 130, .65);
  backdrop-filter: blur(6px);
  transition: var(--transition-normal);
}

.lj-login-modal.open {
  opacity: 1;
  visibility: visible;
}

.lj-login-panel {
  position: relative;
  width: min(100%, 560px);
  padding: 30px;
  background: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-large);
  transform: translateY(36px);
  transition: var(--transition-normal);
}

.lj-login-modal.open .lj-login-panel {
  transform: translateY(0);
}

.lj-login-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--color-title);
  background: var(--color-surface);
  border-radius: var(--radius-round);
  cursor: pointer;
}

.lj-login-brand {
  text-align: center;
}

.lj-login-brand img {
  width: 150px;
  max-height: 56px;
  margin: 0 auto 15px;
  object-fit: contain;
}

.lj-login-brand h2 {
  font-family: var(--font-heading);
  font-size: 35px;
  font-weight: var(--weight-bold);
}

.lj-login-brand p {
  max-width: 420px;
  margin: 8px auto 0;
  font-size: 12px;
  line-height: 1.7;
}

.lj-login-form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.lj-login-input {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.lj-login-input>i {
  color: var(--color-primary);
}

.lj-login-input input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.lj-password-toggle {
  cursor: pointer;
}

.lj-login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.lj-login-options a,
.lj-register-text a {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.lj-login-submit {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.lj-register-text {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
}

.lj-login-divider {
  position: relative;
  margin: 20px 0;
  text-align: center;
}

.lj-login-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}

.lj-login-divider span {
  position: relative;
  padding: 0 10px;
  background: var(--color-white);
  font-size: 10px;
}

.lj-social-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lj-social-login button {
  height: 42px;
  color: var(--color-title);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
}

.lj-social-login button:hover {
  border-color: var(--color-primary);
}

.lj-footer {
  color: rgba(255, 255, 255, .69);
  background: var(--footer-background);
}

.lj-footer-main {
  padding: 34px 0 26px;
}

.lj-footer-column {
  position: relative;
}

.lj-footer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  color: var(--color-white);
  cursor: default;
  text-align: left;
}

.lj-footer-toggle>span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: var(--weight-semibold);
}

.lj-footer-toggle>span>i {
  color: var(--color-secondary);
  font-size: 15px;
}

.lj-footer-plus {
  display: none;
}

.lj-footer-contact-list {
  display: grid;
  gap: 15px;
}

.lj-footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lj-footer-contact-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  color: var(--color-secondary);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-round);
}

.lj-footer-contact-list small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .38);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lj-footer-contact-list a,
.lj-footer-contact-list div>span {
  color: rgba(255, 255, 255, .75);
  font-size: var(--main-font-size);
}

.lj-footer-country-flags {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.lj-footer-country-flags img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-round);
}

.lj-footer-links {
  display: grid;
  gap: var(--main-font-size);
}

.lj-footer-links a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--main-font-size);
  transition: var(--transition-fast);
}

.lj-footer-links i {
  color: var(--color-secondary);
}

.lj-footer-links a:hover {
  padding-left: 5px;
  color: var(--color-secondary);
}

.lj-footer-newsletter-text {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.8;
}

.lj-footer-newsletter-form {
  display: grid;
  grid-template-columns: 1fr 44px;
  margin-top: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-pill);
}

.lj-footer-newsletter-form>div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 14px;
}

.lj-footer-newsletter-form input {
  width: 100%;
  height: 46px;
  color: var(--color-white);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.lj-footer-newsletter-form button {
  margin: 4px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-round);
  cursor: pointer;
}

.lj-footer-socials {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.lj-footer-socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius-round);
  transition: var(--transition-fast);
}

.lj-footer-socials a:hover {
  color: var(--color-white);
  background: var(--color-primary);
  transform: translateY(-3px);
}

.lj-footer-bottom {
  padding: 18px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.lj-footer-bottom p {
  margin: 0;
  font-size: var(--main-font-size);
}

.lj-footer-bottom a {
  color: var(--color-secondary);
}

/* Mobile bottom navigation */

.lj-mobile-bottom-nav {
  display: none;
}

@media(max-width:1200px) {
  .lj-main-header-grid {
    grid-template-columns: 150px 105px minmax(330px, 1fr) auto;
    gap: 11px;
  }
  .lj-logo img {
    width: 140px;
  }
  .lj-search-form {
    grid-template-columns: 160px minmax(0, 1fr) 96px;
  }
  .lj-bottom-header-grid {
    grid-template-columns: 190px 1px minmax(120px, 1fr) 1px auto;
    gap: 12px;
  }
}

@media(max-width:991.98px) {
  body {
    padding-bottom: var(--mobile-bottom-height);
  }
  .lj-topbar-inner {
    grid-template-columns: 28px minmax(0, 1fr) 28px 30px;
  }
  .lj-topbar-item {
    justify-content: flex-start;
    font-size: 10px;
  }
  .lj-topbar-label {
    display: none;
  }
  .lj-topbar-text {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .lj-topbar-text.expanded {
    -webkit-line-clamp: unset;
  }
  .lj-topbar-readmore {
    display: grid;
  }
  .lj-main-header-grid {
    min-height: 64px;
    grid-template-columns: 1fr auto 1fr;
    gap: 7px;
  }
  .lj-logo {
    justify-content: center;
  }
  .lj-logo img {
    width: 126px;
    max-height: 48px;
  }
  .lj-desktop-country,
  .lj-search-form,
  .lj-desktop-action {
    display: none;
  }
  .lj-mobile-left {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .lj-mobile-left .lj-icon-button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
  }
  .lj-mobile-left .lj-icon-button i {
    font-size: 18px;
  }
  .lj-header-actions {
    justify-content: flex-end;
    gap: 2px;
  }
  .lj-header-actions .lj-icon-button,
  .lj-avatar-button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
  }
  .lj-mobile-language {
    display: block;
  }
  .lj-bottom-header-grid {
    height: 44px;
    grid-template-columns: 145px 1px minmax(80px, 1fr) 1px auto;
    gap: 8px;
  }
  .lj-category-menu-toggle {
    font-size: 10px;
  }
  .lj-category-menu-toggle i {
    font-size: 17px;
  }
  .lj-header-links-swiper a,
  .lj-special-header-links a {
    font-size: 9px;
  }
  .lj-special-header-links {
    gap: 8px;
  }
  .lj-special-header-links i {
    font-size: 13px;
  }
  .lj-mega-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 65vh;
    overflow-y: auto;
  }
  .lj-subcategory-menu,
  .lj-subsubcategory-menu {
    position: static;
    width: auto;
    min-height: 0;
    display: none;
    margin: 0 8px;
    padding: 0 0 0 14px;
    opacity: 1;
    visibility: visible;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: var(--radius-none);
    box-shadow: none;
    transform: none;
  }
  .lj-category-item.open>.lj-subcategory-menu,
  .lj-subcategory-item.open>.lj-subsubcategory-menu {
    display: block;
  }
  .lj-footer-main {
    padding: 30px 0 15px;
  }
  .lj-footer-column {
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .lj-footer-toggle {
    margin: 0;
    padding: 17px 0;
    cursor: pointer;
  }
  .lj-footer-toggle>span {
    font-size: 21px;
  }
  .lj-footer-plus {
    display: block;
    font-size: 21px;
    transition: var(--transition-fast);
  }
  .lj-footer-content {
    display: none;
    padding: 0 0 20px;
  }
  .lj-footer-column.open .lj-footer-plus {
    transform: rotate(45deg);
  }
  .lj-mobile-bottom-nav {
    position: fixed;
    z-index: 1500;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mobile-bottom-height);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    padding: 8px 8px 7px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 30px rgba(1, 52, 130, .10);
  }
  .lj-mobile-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    color: #0768CF;
    font-size: 9px;
    font-weight: var(--weight-medium);
  }
  .lj-mobile-nav-item>i {
    font-size: 23px;
  }
  .lj-mobile-nav-item.active {
    color: var(--color-primary);
  }
  .lj-mobile-sell-item {
    padding-top: 31px;
  }
  .lj-mobile-sell-circle {
    position: absolute;
    top: -35px;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    color: var(--color-white);
    background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
    border: 6px solid var(--color-white);
    border-radius: var(--radius-round);
    box-shadow: 0 10px 24px rgba(7, 104, 207, .28);
  }
  .lj-mobile-sell-circle i {
    font-size: 30px;
  }
}

@media(max-width:767.98px) {
  .lj-bottom-header-grid {
    grid-template-columns: 135px 1px minmax(65px, 1fr) 1px auto;
    gap: 6px;
  }
  .lj-special-header-links a {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .lj-login-modal {
    padding: 0;
  }
  .lj-login-panel {
    padding: 27px 20px 24px;
  }
}

@media(max-width:575.98px) {
  .lj-topbar-nav {
    display: none;
  }
  .lj-topbar-inner {
    grid-template-columns: minmax(0, 1fr) 30px;
  }
  .lj-topbar-item {
    padding-left: 5px;
  }
  .lj-main-header-grid {
    gap: 2px;
  }
  .lj-logo img {
    width: 112px;
  }
  .lj-mobile-left .lj-icon-button,
  .lj-header-actions .lj-icon-button,
  .lj-avatar-button {
    width: 27px;
    height: 27px;
  }
  .lj-icon-button img {
    width: 18px;
    height: 13px;
  }
  .lj-avatar-button img {
    width: 25px;
    height: 25px;
  }
  .lj-bottom-header-grid {
    grid-template-columns: 105px 1px minmax(45px, 1fr) 1px 65px;
  }
  .lj-special-header-links {
    gap: 5px;
  }
  .lj-special-header-links a {
    max-width: 68px;
    font-size: 8px;
  }
  .lj-social-login {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   DEFINITIVE COMPONENT FIXES
   These rules replace conflicting legacy mobile behavior.
========================================================= */

/* =========================================================
   TOP ANNOUNCEMENT BAR
========================================================= */

.lj-topbar {
  position: relative;
  z-index: 1310;
  overflow: hidden;
}

.lj-topbar-inner {
  width: 100%;
  min-width: 0;
}

.lj-topbar-swiper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.lj-topbar-swiper .swiper-wrapper {
  align-items: center;
}

.lj-topbar-swiper .swiper-slide {
  width: 100%;
  min-width: 0;
  height: auto;
}

.lj-topbar-item {
  width: 100%;
  min-width: 0;
}

/* Read more/read less is intentionally removed. */

.lj-topbar-readmore {
  display: none !important;
}

.lj-topbar-close {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* =========================================================
   HEADER AND ALL-CATEGORIES MENU
========================================================= */

.lj-header,
.lj-main-header,
.lj-bottom-header {
  overflow: visible;
}

.lj-bottom-header {
  position: relative;
  z-index: 1280;
  background: var(--color-white);
}

.lj-bottom-header .container-fluid,
.lj-bottom-header-grid,
.lj-category-menu-wrap {
  overflow: visible;
}

.lj-category-menu-wrap {
  z-index: 20;
}

.lj-mega-menu {
  z-index: 2050;
}

/* =========================================================
   RESPONSIVE LOGIN MODAL
========================================================= */

.lj-login-modal {
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  pointer-events: none;
}

.lj-login-modal.open {
  pointer-events: auto;
}

.lj-login-panel {
  width: min(100%, 440px);
  max-height: calc(100dvh - 32px);
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--topbar-background) border-box;
  border-radius: 6px;
  transform: translateY(18px);
}

.lj-login-modal.open .lj-login-panel {
  transform: translateY(0);
}

.lj-login-brand img {
  width: 118px;
  max-height: 44px;
  margin-bottom: 9px;
}

.lj-login-brand h2 {
  margin: 0;
  font-size: 29px;
  line-height: 1.05;
}

.lj-login-brand p {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.55;
}

.lj-login-form {
  gap: 9px;
  margin-top: 15px;
}

.lj-login-input {
  min-height: 45px;
  height: auto;
}

.lj-login-input input {
  min-width: 0;
  height: 45px;
}

.lj-login-submit {
  min-height: 45px;
  height: auto;
}

.lj-login-options {
  gap: 8px;
  font-size: 12px;
}

.lj-register-text {
  margin-top: 11px;
}

.lj-login-divider {
  margin: 13px 0;
}

.lj-social-login button {
  min-height: 39px;
  height: auto;
}

/* =========================================================
   MOBILE FOOTER ACCORDION
========================================================= */

@media(max-width:991.98px) {
  .lj-footer-toggle {
    position: relative;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .lj-footer-content {
    display: none;
    overflow: hidden;
  }
  .lj-footer-column.open>.lj-footer-content {
    display: block;
  }
  /* =====================================================
       MOBILE ALL-CATEGORIES DROPDOWN
    ===================================================== */
  .lj-category-menu-wrap {
    position: static;
  }
  .lj-category-menu-wrap:hover .lj-mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
  }
  .lj-category-menu-wrap.open .lj-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .lj-mega-menu {
    position: fixed;
    top: var(--lj-mobile-mega-top, 112px);
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100dvh - var(--lj-mobile-mega-top, 112px) - 88px);
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-large);
    -webkit-overflow-scrolling: touch;
  }
  .lj-category-item:hover>.lj-subcategory-menu,
  .lj-subcategory-item:hover>.lj-subsubcategory-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* =====================================================
       STABLE MOBILE BOTTOM NAVIGATION
    ===================================================== */
  html {
    padding-bottom: 0;
  }
  body {
    padding-bottom: calc( var(--mobile-bottom-height) + env(safe-area-inset-bottom)) !important;
  }
  body.no-scroll {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
  .lj-mobile-bottom-nav {
    position: fixed !important;
    z-index: 2200 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: calc( var(--mobile-bottom-height) + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: end !important;
    padding: 8px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
    animation: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 30px rgba(1, 52, 130, .12);
  }
  .lj-mobile-nav-item {
    min-width: 0;
    min-height: 48px;
    padding: 0 2px;
    -webkit-tap-highlight-color: transparent;
  }
  .lj-mobile-sell-circle {
    left: 50%;
    transform: translateX(-50%) !important;
  }
  /* Keep modal above the mobile navigation. */
  .lj-login-modal {
    z-index: 3100;
  }
}

/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media(max-width:575.98px) {
  .lj-topbar-inner {
    min-height: 40px;
    grid-template-columns: 26px minmax(0, 1fr) 26px 30px;
    padding: 0 2px;
  }
  .lj-topbar-nav {
    display: grid;
    width: 26px;
    height: 30px;
  }
  .lj-topbar-item {
    justify-content: center;
    padding: 0 4px;
    text-align: center;
    font-size: 9px;
  }
  .lj-topbar-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .lj-login-modal {
    align-items: center;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .lj-login-panel {
    width: 100%;
    max-height: calc( 100dvh - 16px - env(safe-area-inset-bottom));
    padding: 18px 14px;
    border-radius: var(--radius-md);
  }
  .lj-login-close {
    top: 8px;
    right: 8px;
    width: 29px;
    height: 29px;
  }
  .lj-login-brand {
    padding: 0 26px;
  }
  .lj-login-brand img {
    width: 94px;
    max-height: 36px;
    margin-bottom: 6px;
  }
  .lj-login-brand h2 {
    font-size: 24px;
  }
  .lj-login-brand p {
    font-size: 9px;
    line-height: 1.45;
  }
  .lj-login-form {
    margin-top: 11px;
    gap: 7px;
  }
  .lj-login-input {
    min-height: 39px;
    padding: 0 10px;
  }
  .lj-login-input input {
    height: 37px;
    font-size: 11px;
  }
  .lj-login-submit {
    min-height: 39px;
  }
  .lj-login-options {
    align-items: flex-start;
    font-size: 9px;
  }
  .lj-social-login {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .lj-social-login button {
    min-height: 36px;
    font-size: 9px;
  }
}

@media(max-width:360px) {
  .lj-login-brand p {
    display: none;
  }
  .lj-login-divider {
    margin: 9px 0;
  }
  .lj-register-text {
    margin-top: 8px;
  }
}

@media(max-height:620px) and (max-width:575.98px) {
  .lj-login-panel {
    max-height: calc(100dvh - 10px);
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .lj-login-brand img {
    width: 78px;
    margin-bottom: 3px;
  }
  .lj-login-brand h2 {
    font-size: 21px;
  }
  .lj-login-brand p {
    display: none;
  }
  .lj-login-form {
    margin-top: 8px;
  }
  .lj-login-divider {
    margin: 8px 0;
  }
}

/* =========================================================
   DESKTOP-ONLY RESET
========================================================= */

@media(min-width:992px) {
  body {
    padding-bottom: 0 !important;
  }
  .lj-mobile-bottom-nav {
    display: none !important;
  }
  .lj-footer-content {
    display: block !important;
  }
}

/* =========================================================
   MOBILE COUNTRY AND NOTIFICATION DROPDOWN FIX
========================================================= */

@media(max-width:991.98px) {
  .lj-header,
  .lj-main-header,
  .lj-main-header-grid,
  .lj-mobile-left {
    overflow: visible !important;
  }
  .lj-mobile-left .lj-dropdown {
    position: fixed !important;
    top: var(--lj-mobile-dropdown-top, 72px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--lj-mobile-dropdown-top, 72px) - 82px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 2700 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
  }
  .lj-mobile-left .lj-dropdown.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  #mobileCountryDropdown .lj-country-list {
    max-height: min(55dvh, 420px);
    overflow-y: auto;
  }
  .lj-mobile-notification-dropdown .lj-dropdown-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-white);
  }
  .lj-mobile-notification-dropdown .lj-notification-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100%;
  }
  .lj-mobile-notification-dropdown .lj-notification-item strong {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media(max-width:375px) {
  .lj-mobile-left .lj-dropdown {
    left: 6px !important;
    right: 6px !important;
  }
}

/***************************HOME HERO************/

/* =========================================================
   LINJUST DYNAMIC MARKETPLACE HERO
========================================================= */

.lj-marketplace-hero {
  --hero-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --hero-dark: var( --color-title, var(--titleColor, #013482));
  --hero-white: var( --color-white, #FFFFFF);
  --hero-font-body: var( --font-body, "Inter", sans-serif);
  --hero-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
  background: #013482;
}

.lj-hero-swiper {
  width: 100%;
  height: 100%;
}

.lj-hero-swiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.lj-hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* =========================================================
   HERO IMAGE AND VIDEO BACKGROUND
========================================================= */

.lj-hero-media {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.03);
}

.lj-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* =========================================================
   IMAGE ZOOM ANIMATION
========================================================= */

.lj-hero-slide.is-image .lj-hero-media {
  animation: ljHeroZoomOut 12s ease-in-out both;
}

.lj-hero-slide.is-image.swiper-slide-active .lj-hero-media {
  animation: ljHeroZoomIn 12s ease-in-out both;
}

@keyframes ljHeroZoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.12);
  }
}

@keyframes ljHeroZoomOut {
  0% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

/* =========================================================
   DYNAMIC OVERLAY
========================================================= */

.lj-hero-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var( --lj-hero-overlay, linear-gradient( 90deg, rgba(1, 52, 130, .90), rgba(1, 52, 130, .50), rgba(1, 52, 130, .15)));
  opacity: var( --lj-hero-overlay-opacity, 1);
  pointer-events: none;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.lj-hero-container {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.lj-hero-content {
  width: min(100%, 760px);
  padding: 130px 0 100px;
  color: var(--hero-white);
}

.lj-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 17px;
  padding: 8px 13px;
  color: var(--hero-white);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 35px rgba(1, 52, 130, .14);
}

.lj-hero-eyebrow i {
  color: #4AB3FC;
  font-size: 17px;
}

.lj-hero-content h2 {
  max-width: 730px;
  margin: 0;
  color: var(--hero-white);
  font-family: var(--font-body);
  font-size: clamp(54px, 5.7vw, 92px);
  font-weight: 700;
  line-height: .91;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 12px 45px rgba(1, 52, 130, .30);
}

.lj-hero-content h2 span {
  display: block;
  color: #4AB3FC;
  font-style: italic;
}

.lj-hero-description {
  max-width: 650px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, .85);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
}

/* =========================================================
   LUXURY MARKETPLACE BUTTONS
========================================================= */

.lj-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  margin-top: 32px;
}

.lj-hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 25px;
  overflow: hidden;
  color: var(--hero-white);
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .075em;
  text-decoration: none;
  text-transform: uppercase;
  isolation: isolate;
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.lj-hero-btn::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: -120%;
  width: 90%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: skewX(-18deg);
  transition: left .65s ease;
}

.lj-hero-btn:hover::before {
  left: 130%;
}

.lj-hero-btn:hover {
  color: var(--hero-white);
  transform: translateY(-3px);
}

.lj-hero-btn i {
  flex: 0 0 auto;
  font-size: 19px;
  transition: transform .35s ease;
}

.lj-hero-btn:hover i {
  transform: translateX(4px);
}

.lj-hero-btn-primary {
  background: linear-gradient( 135deg, #0687F1 0%, var(--hero-primary) 46%, #013883 100%);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 16px 40px rgba(7, 104, 207, .34), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.lj-hero-btn-primary:hover {
  box-shadow: 0 20px 50px rgba(7, 104, 207, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.lj-hero-btn-outline {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 15px 35px rgba(1, 52, 130, .12);
}

.lj-hero-btn-outline:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .68);
}

/* =========================================================
   CONTENT ENTRANCE ANIMATION
========================================================= */

.lj-hero-content>* {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}

.swiper-slide-active .lj-hero-content>* {
  opacity: 1;
  transform: translateY(0);
}

.swiper-slide-active .lj-hero-content> :nth-child(1) {
  transition-delay: .12s;
}

.swiper-slide-active .lj-hero-content> :nth-child(2) {
  transition-delay: .22s;
}

.swiper-slide-active .lj-hero-content> :nth-child(3) {
  transition-delay: .32s;
}

.swiper-slide-active .lj-hero-content> :nth-child(4) {
  transition-delay: .42s;
}

/* =========================================================
   MEDIA TYPE PAGINATION
========================================================= */

.lj-hero-pagination {
  position: absolute !important;
  z-index: 20;
  right: 32px !important;
  bottom: 28px !important;
  left: auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto !important;
}

.lj-hero-pagination .swiper-pagination-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0;
  opacity: 1;
  color: rgba(255, 255, 255, .72);
  background: rgba(1, 52, 130, .35);
  border: 1px solid rgba(255, 255, 255, .23);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: width .35s ease, color .35s ease, background .35s ease, border-color .35s ease, transform .35s ease;
}

.lj-hero-pagination .swiper-pagination-bullet i {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.lj-hero-pagination .swiper-pagination-bullet-active {
  width: 54px;
  color: var(--hero-white);
  background: var(--hero-primary);
  border-color: rgba(255, 255, 255, .35);
  border-radius: 999px;
  box-shadow: 0 9px 24px rgba(7, 104, 207, .34);
}

/* =========================================================
   TABLET RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-marketplace-hero {
    min-height: 590px;
  }
  .lj-hero-content {
    width: min(100%, 690px);
  }
  .lj-hero-content h2 {
    font-size: clamp(48px, 7vw, 76px);
  }
}

/* =========================================================
   MOBILE RESPONSIVENESS
========================================================= */

@media(max-width:991.98px) {
  .lj-marketplace-hero {
    width: 100vw;
    height: 80vh;
    min-height: 570px;
    max-height: 820px;
  }
  .lj-hero-media {
    background-position: center;
  }
  .lj-hero-container {
    align-items: center;
    justify-content: center;
  }
  .lj-hero-content {
    width: min(100%, 680px);
    margin: 0 auto;
    padding: 90px 18px 100px;
    text-align: center;
  }
  .lj-hero-eyebrow {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }
  .lj-hero-content h2 {
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(43px, 8.6vw, 68px);
    line-height: .95;
  }
  .lj-hero-description {
    max-width: 590px;
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
    line-height: 1.75;
  }
  .lj-hero-buttons {
    justify-content: center;
  }
  .lj-hero-pagination {
    right: 18px !important;
    bottom: 20px !important;
  }
}

/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media(max-width:575.98px) {
  .lj-marketplace-hero {
    min-height: 540px;
  }
  .lj-hero-content {
    padding: 78px 12px 88px;
  }
  .lj-hero-eyebrow {
    max-width: 100%;
    padding: 7px 10px;
    font-size: 9px;
    letter-spacing: .09em;
  }
  .lj-hero-content h2 {
    font-size: clamp(38px, 12vw, 52px);
    line-height: .93;
  }
  .lj-hero-description {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.7;
  }
  .lj-hero-buttons {
    gap: 9px;
    margin-top: 24px;
  }
  .lj-hero-btn {
    min-height: 47px;
    padding: 0 16px;
    font-size: 9px;
    letter-spacing: .06em;
  }
  .lj-hero-btn i {
    font-size: 17px;
  }
  .lj-hero-pagination {
    right: 50% !important;
    bottom: 15px !important;
    justify-content: center;
    transform: translateX(50%);
  }
  .lj-hero-pagination .swiper-pagination-bullet {
    width: 32px;
    height: 32px;
  }
  .lj-hero-pagination .swiper-pagination-bullet-active {
    width: 46px;
  }
}

/* =========================================================
   EXTRA-SMALL DEVICES
========================================================= */

@media(max-width:370px) {
  .lj-marketplace-hero {
    min-height: 520px;
  }
  .lj-hero-content h2 {
    font-size: 36px;
  }
  .lj-hero-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .lj-hero-btn {
    width: 100%;
  }
}

/* =========================================================
   SHORT MOBILE SCREENS
========================================================= */

@media(max-height:650px) and (max-width:991.98px) {
  .lj-marketplace-hero {
    height: 88vh;
    min-height: 500px;
  }
  .lj-hero-content {
    padding-top: 65px;
    padding-bottom: 75px;
  }
  .lj-hero-description {
    margin-top: 14px;
  }
  .lj-hero-buttons {
    margin-top: 18px;
  }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-hero-slide.is-image .lj-hero-media,
  .lj-hero-slide.is-image.swiper-slide-active .lj-hero-media {
    animation: none;
    transform: scale(1);
  }
  .lj-hero-content>*,
  .lj-hero-btn,
  .lj-hero-btn::before {
    transition: none;
  }
}

/************************************SIGN UP**********************************/

/* =========================================================
   LINJUST LUXURY SIGNUP PAGE
========================================================= */

.lj-signup-section {
  --signup-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --signup-primary-dark: var( --color-primary-dark, #013883);
  --signup-title: var( --color-title, var(--titleColor, #013482));
  --signup-text: var( --color-text, var(--paraColor, #082E5C));
  --signup-white: var( --color-white, #FFFFFF);
  --signup-light: var( --color-off-white, #F6FBFD);
  --signup-border: var( --color-border, #6F8DA8);
  --signup-font-body: var( --font-body, "Inter", sans-serif);
  --signup-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  min-height: 80vh;
  overflow: hidden;
  background: var(--signup-light);
  font-family: var(--font-body);
  box-shadow: 0 12px 35px rgba(1, 52, 130, 0.08), 0 3px 12px rgba(7, 104, 207, 0.05);
}

.lj-signup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr);
  width: 100%;
  min-height: 100vh;
}

/* =========================================================
   LEFT SHOWCASE
========================================================= */

.lj-signup-showcase {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 70px clamp(40px, 6vw, 100px);
  overflow: hidden;
  color: var(--signup-white);
  background: radial-gradient( circle at 20% 20%, rgba(255, 255, 255, .16), transparent 28%), radial-gradient( circle at 80% 75%, rgba(74, 179, 252, .18), transparent 30%), linear-gradient( 135deg, #013482 0%, #013883 40%, var(--signup-primary) 72%, #0687F1 100%);
  isolation: isolate;
}

.lj-signup-showcase::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .24;
  background-image: linear-gradient( rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient( 135deg, #013482, transparent 78%);
}

.lj-signup-showcase-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient( 90deg, rgba(1, 52, 130, .15), rgba(1, 52, 130, .04));
}

.lj-signup-showcase-content {
  position: relative;
  z-index: 3;
  width: min(100%, 700px);
}

.lj-signup-showcase-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 55px;
}

.lj-signup-showcase-logo img {
  width: clamp(145px, 12vw, 205px);
  height: auto;
  filter: brightness(0) invert(1);
}

.lj-signup-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 19px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-signup-badge i {
  font-size: 16px;
  color: #4AB3FC;
}

.lj-signup-showcase h1 {
  max-width: 700px;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(55px, 5.6vw, 92px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lj-signup-showcase h1 span {
  display: block;
  color: #4AB3FC;
  font-style: italic;
}

.lj-signup-showcase-content>p {
  max-width: 610px;
  margin: 27px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.85;
}

.lj-signup-benefits {
  display: grid;
  gap: 15px;
  margin-top: 40px;
}

.lj-signup-benefit {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 510px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 45px rgba(1, 52, 130, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.lj-signup-benefit:hover {
  transform: translateX(7px);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
}

.lj-signup-benefit>span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(1, 52, 130, .12);
}

.lj-signup-benefit>span i {
  font-size: 23px;
}

.lj-signup-benefit h3 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
}

.lj-signup-benefit p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.5;
}

.lj-signup-showcase-decoration span {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}

.lj-signup-showcase-decoration span:nth-child(1) {
  right: -130px;
  bottom: -160px;
  width: 440px;
  height: 440px;
  animation: ljSignupFloat 8s ease-in-out infinite;
}

.lj-signup-showcase-decoration span:nth-child(2) {
  right: 45px;
  top: 65px;
  width: 130px;
  height: 130px;
  animation: ljSignupFloat 6s ease-in-out infinite reverse;
}

.lj-signup-showcase-decoration span:nth-child(3) {
  left: -65px;
  top: 35%;
  width: 170px;
  height: 170px;
  animation: ljSignupFloat 10s ease-in-out infinite;
}

/* =========================================================
   RIGHT FORM PANEL
========================================================= */

.lj-signup-form-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 25px clamp(25px, 3vw, 35px);
  background: radial-gradient( circle at 80% 10%, rgba(7, 104, 207, .06), transparent 30%), var(--signup-white);
}

.lj-signup-form-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px;
  height: 210px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .07), transparent 70%);
  pointer-events: none;
}

.lj-signup-form-wrapper {
  width: min(100%, 520px);
  padding: 15px 0;
}

.lj-signup-form-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

.lj-signup-form-logo img {
  width: 155px;
  height: auto;
}

.lj-signup-heading {
  margin-bottom: 30px;
  text-align: center;
}

.lj-signup-heading>span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--signup-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-signup-heading h2 {
  margin: 0;
  color: var(--signup-title);
  font-family: var(--font-body);
  font-size: clamp(39px, 4vw, 53px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}

.lj-signup-heading p {
  margin: 12px auto 0;
  color: var(--signup-text);
  font-size: 13px;
  line-height: 1.65;
}

/* =========================================================
   FORM FIELDS
========================================================= */

.lj-signup-form {
  width: 100%;
}

.lj-signup-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.lj-signup-form-group {
  margin-bottom: 6px;
}

.lj-signup-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--signup-title);
  font-size: 12px;
  font-weight: 700;
}

.lj-signup-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lj-signup-input-wrap>i {
  position: absolute;
  z-index: 2;
  left: 16px;
  color: #355A7D;
  font-size: 20px;
  pointer-events: none;
  transition: color .3s ease;
}

.lj-signup-input-wrap input {
  width: 100%;
  height: 56px;
  padding: 0 50px 0 48px;
  color: var(--signup-title);
  background: #FFFFFF;
  border: 1px solid var(--signup-border);
  border-radius: 5px;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(1, 52, 130, .025), inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.lj-signup-input-wrap input::placeholder {
  color: #355A7D;
}

.lj-signup-input-wrap input:focus {
  border-color: rgba(7, 104, 207, .58);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07), 0 15px 35px rgba(1, 52, 130, .05);
}

.lj-signup-input-wrap:focus-within>i {
  color: var(--signup-primary);
}

.lj-signup-password-toggle {
  position: absolute;
  z-index: 3;
  right: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: #0687F1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .3s ease, background .3s ease;
}

.lj-signup-password-toggle:hover {
  color: var(--signup-primary);
  background: rgba(7, 104, 207, .06);
}

.lj-signup-password-toggle i {
  font-size: 20px;
}

.lj-signup-password-hint {
  display: block;
  margin-top: 7px;
  color: #355A7D;
  font-size: 10px;
  line-height: 1.5;
}

.lj-signup-password-strength {
  width: 100%;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  background: #D5EAF8;
  border-radius: 999px;
}

.lj-signup-password-strength span {
  display: block;
  width: 0;
  height: 100%;
  background: #0768CF;
  border-radius: inherit;
  transition: width .35s ease, background .35s ease;
}

.lj-signup-error,
.lj-signup-terms-error {
  display: block;
  min-height: 14px;
  margin-top: 5px;
  color: #0768CF;
  font-size: 10px;
  line-height: 1.4;
}

.lj-signup-form-group.has-error input {
  border-color: #0768CF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-signup-form-group.has-success input {
  border-color: #0687F1;
}

/* =========================================================
   TERMS
========================================================= */

.lj-signup-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: var(--signup-text);
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
}

.lj-signup-terms input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lj-signup-checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 1px solid var(--signup-border);
  border-radius: 3px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-signup-checkmark i {
  opacity: 0;
  font-size: 15px;
  transform: scale(.6);
  transition: opacity .25s ease, transform .25s ease;
}

.lj-signup-terms input:checked+.lj-signup-checkmark {
  background: var(--signup-primary);
  border-color: var(--signup-primary);
  box-shadow: 0 6px 16px rgba(7, 104, 207, .18);
}

.lj-signup-terms input:checked+.lj-signup-checkmark i {
  opacity: 1;
  transform: scale(1);
}

.lj-signup-terms a {
  color: var(--signup-primary);
  font-weight: 700;
  text-decoration: none;
}

.lj-signup-terms a:hover {
  text-decoration: underline;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-signup-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 57px;
  margin-top: 14px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0768CF, var(--signup-primary) 48%, var(--signup-primary-dark));
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 5px;
  box-shadow: 0 17px 38px rgba(7, 104, 207, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}

.lj-signup-submit::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}

.lj-signup-submit:hover::before {
  left: 130%;
}

.lj-signup-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 45px rgba(7, 104, 207, .33), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.lj-signup-submit i {
  font-size: 20px;
  transition: transform .3s ease;
}

.lj-signup-submit:hover i {
  transform: translateX(4px);
}

/* =========================================================
   SOCIAL SIGNUP
========================================================= */

.lj-signup-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 27px 0 20px;
}

.lj-signup-divider::before,
.lj-signup-divider::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--signup-border);
}

.lj-signup-divider span {
  padding: 0 13px;
  color: #355A7D;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lj-signup-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lj-signup-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  color: var(--signup-title);
  background: #FFFFFF;
  border: 1px solid var(--signup-border);
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(1, 52, 130, .035);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-signup-social-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 104, 207, .32);
  box-shadow: 0 14px 32px rgba(1, 52, 130, .07);
}

.lj-signup-social-btn .fa-google {
  color: #0687F1;
}

.lj-signup-social-btn .fa-facebook-f {
  color: #0687F1;
}

.lj-signup-login-link {
  margin: 24px 0 0;
  color: var(--signup-text);
  font-size: 12px;
  text-align: center;
}

.lj-signup-login-link a {
  color: var(--signup-primary);
  font-weight: 800;
  text-decoration: none;
}

.lj-signup-login-link a:hover {
  text-decoration: underline;
}

/* =========================================================
   CLEAN ENTRANCE ANIMATIONS
========================================================= */

.lj-signup-showcase-content>*,
.lj-signup-form-wrapper>* {
  opacity: 0;
  transform: translateY(22px);
  animation: ljSignupReveal .75s ease forwards;
}

.lj-signup-showcase-content> :nth-child(1) {
  animation-delay: .08s;
}

.lj-signup-showcase-content> :nth-child(2) {
  animation-delay: .16s;
}

.lj-signup-showcase-content> :nth-child(3) {
  animation-delay: .24s;
}

.lj-signup-showcase-content> :nth-child(4) {
  animation-delay: .32s;
}

.lj-signup-showcase-content> :nth-child(5) {
  animation-delay: .40s;
}

.lj-signup-form-wrapper> :nth-child(1) {
  animation-delay: .10s;
}

.lj-signup-form-wrapper> :nth-child(2) {
  animation-delay: .18s;
}

.lj-signup-form-wrapper> :nth-child(3) {
  animation-delay: .26s;
}

.lj-signup-form-wrapper> :nth-child(4) {
  animation-delay: .34s;
}

.lj-signup-form-wrapper> :nth-child(5) {
  animation-delay: .42s;
}

.lj-signup-form-wrapper> :nth-child(6) {
  animation-delay: .50s;
}

@keyframes ljSignupReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ljSignupFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -18px, 0);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1199.98px) {
  .lj-signup-layout {
    grid-template-columns: minmax(0, 1fr) minmax(480px, .95fr);
  }
  .lj-signup-showcase {
    padding-right: 45px;
    padding-left: 45px;
  }
  .lj-signup-showcase h1 {
    font-size: clamp(50px, 5.8vw, 72px);
  }
}

/* =========================================================
   MOBILE AND SMALL TABLETS
========================================================= */

@media(max-width:991.98px) {
  .lj-signup-layout {
    display: block;
  }
  .lj-signup-showcase {
    display: none;
  }
  .lj-signup-form-panel {
    min-height: 100vh;
    padding: calc(35px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  }
  .lj-signup-form-wrapper {
    width: min(100%, 570px);
  }
  .lj-signup-form-logo img {
    width: 145px;
  }
}

/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media(max-width:575.98px) {
  .lj-signup-form-panel {
    align-items: flex-start;
    padding-right: 14px;
    padding-left: 14px;
  }
  .lj-signup-form-wrapper {
    padding-top: 6px;
  }
  .lj-signup-form-logo {
    margin-bottom: 21px;
  }
  .lj-signup-heading {
    margin-bottom: 24px;
  }
  .lj-signup-heading h2 {
    font-size: 39px;
  }
  .lj-signup-name-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .lj-signup-input-wrap input {
    height: 53px;
  }
  .lj-signup-socials {
    gap: 9px;
  }
  .lj-signup-social-btn {
    min-height: 48px;
  }
}

/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media(max-width:360px) {
  .lj-signup-heading h2 {
    font-size: 34px;
  }
  .lj-signup-socials {
    grid-template-columns: 1fr;
  }
  .lj-signup-submit {
    min-height: 54px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-signup-showcase-content>*,
  .lj-signup-form-wrapper>*,
  .lj-signup-showcase-decoration span {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .lj-signup-submit,
  .lj-signup-submit::before,
  .lj-signup-benefit,
  .lj-signup-social-btn {
    transition: none;
  }
}

/***************************LOGIN****************************/

/* =========================================================
   LINJUST LUXURY SIGN-IN PAGE
========================================================= */

.lj-signin-section {
  --signin-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --signin-primary-dark: var( --color-primary-dark, #013883);
  --signin-title: var( --color-title, var(--titleColor, #013482));
  --signin-text: var( --color-text, var(--paraColor, #082E5C));
  --signin-white: var( --color-white, #FFFFFF);
  --signin-light: var( --color-off-white, #F6FBFD);
  --signin-border: var( --color-border, #6F8DA8);
  --signin-font-body: var( --font-body, "Inter", sans-serif);
  --signin-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--signin-light);
  font-family: var(--font-body);
  box-shadow: 0 20px 55px rgba(1, 52, 130, .08), 0 6px 20px rgba(7, 104, 207, .05);
}

.lj-signin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr);
  width: 100%;
  min-height: 100vh;
}

/* =========================================================
   LEFT SHOWCASE PANEL
========================================================= */

.lj-signin-showcase {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 70px clamp(40px, 6vw, 100px);
  overflow: hidden;
  color: var(--signin-white);
  background: radial-gradient( circle at 20% 20%, rgba(255, 255, 255, .16), transparent 28%), radial-gradient( circle at 80% 75%, rgba(74, 179, 252, .18), transparent 30%), linear-gradient( 135deg, #013482 0%, #013883 40%, var(--signin-primary) 72%, #0687F1 100%);
  isolation: isolate;
}

.lj-signin-showcase::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .24;
  background-image: linear-gradient( rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient( 135deg, #013482, transparent 78%);
}

.lj-signin-showcase-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient( 90deg, rgba(1, 52, 130, .15), rgba(1, 52, 130, .04));
}

.lj-signin-showcase-content {
  position: relative;
  z-index: 3;
  width: min(100%, 700px);
}

.lj-signin-showcase-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 55px;
}

.lj-signin-showcase-logo img {
  width: clamp(145px, 12vw, 205px);
  height: auto;
  filter: brightness(0) invert(1);
}

.lj-signin-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 19px;
  padding: 8px 14px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-signin-badge i {
  color: #4AB3FC;
  font-size: 16px;
}

.lj-signin-showcase h1 {
  max-width: 700px;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(55px, 5.6vw, 92px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lj-signin-showcase h1 span {
  display: block;
  color: #4AB3FC;
  font-style: italic;
}

.lj-signin-showcase-content>p {
  max-width: 610px;
  margin: 27px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.85;
}

.lj-signin-benefits {
  display: grid;
  gap: 15px;
  margin-top: 40px;
}

.lj-signin-benefit {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 520px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 45px rgba(1, 52, 130, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.lj-signin-benefit:hover {
  transform: translateX(7px);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
}

.lj-signin-benefit>span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(1, 52, 130, .12);
}

.lj-signin-benefit>span i {
  font-size: 23px;
}

.lj-signin-benefit h3 {
  margin: 0 0 3px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}

.lj-signin-benefit p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.5;
}

.lj-signin-showcase-decoration span {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}

.lj-signin-showcase-decoration span:nth-child(1) {
  right: -130px;
  bottom: -160px;
  width: 440px;
  height: 440px;
  animation: ljSigninFloat 8s ease-in-out infinite;
}

.lj-signin-showcase-decoration span:nth-child(2) {
  right: 45px;
  top: 65px;
  width: 130px;
  height: 130px;
  animation: ljSigninFloat 6s ease-in-out infinite reverse;
}

.lj-signin-showcase-decoration span:nth-child(3) {
  left: -65px;
  top: 35%;
  width: 170px;
  height: 170px;
  animation: ljSigninFloat 10s ease-in-out infinite;
}

/* =========================================================
   RIGHT FORM PANEL
========================================================= */

.lj-signin-form-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px clamp(25px, 3vw, 40px);
  background: radial-gradient( circle at 80% 10%, rgba(7, 104, 207, .06), transparent 30%), var(--signin-white);
}

.lj-signin-form-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px;
  height: 210px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .07), transparent 70%);
  pointer-events: none;
}

.lj-signin-form-wrapper {
  width: min(100%, 520px);
  padding: 15px 0;
}

.lj-signin-form-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

.lj-signin-form-logo img {
  width: 155px;
  height: auto;
}

.lj-signin-heading {
  margin-bottom: 31px;
  text-align: center;
}

.lj-signin-heading>span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--signin-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-signin-heading h2 {
  margin: 0;
  color: var(--signin-title);
  font-family: var(--font-body);
  font-size: clamp(42px, 4vw, 57px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}

.lj-signin-heading p {
  max-width: 440px;
  margin: 12px auto 0;
  color: var(--signin-text);
  font-size: 13px;
  line-height: 1.65;
}

/* =========================================================
   FORM FIELDS
========================================================= */

.lj-signin-form {
  width: 100%;
}

.lj-signin-form-group {
  margin-bottom: 5px;
}

.lj-signin-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--signin-title);
  font-size: 12px;
  font-weight: 700;
}

.lj-signin-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lj-signin-input-wrap>i {
  position: absolute;
  z-index: 2;
  left: 16px;
  color: #355A7D;
  font-size: 20px;
  pointer-events: none;
  transition: color .3s ease;
}

.lj-signin-input-wrap input {
  width: 100%;
  height: 56px;
  padding: 0 50px 0 48px;
  color: var(--signin-title);
  background: #FFFFFF;
  border: 1px solid var(--signin-border);
  border-radius: 5px;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(1, 52, 130, .025), inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.lj-signin-input-wrap input::placeholder {
  color: #355A7D;
}

.lj-signin-input-wrap input:focus {
  border-color: rgba(7, 104, 207, .58);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07), 0 15px 35px rgba(1, 52, 130, .05);
}

.lj-signin-input-wrap:focus-within>i {
  color: var(--signin-primary);
}

.lj-signin-password-toggle {
  position: absolute;
  z-index: 3;
  right: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: #0687F1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .3s ease, background .3s ease;
}

.lj-signin-password-toggle:hover {
  color: var(--signin-primary);
  background: rgba(7, 104, 207, .06);
}

.lj-signin-password-toggle i {
  font-size: 20px;
}

.lj-signin-error {
  display: block;
  min-height: 14px;
  margin-top: 5px;
  color: #0768CF;
  font-size: 10px;
  line-height: 1.4;
}

.lj-signin-form-group.has-error input {
  border-color: #0768CF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-signin-form-group.has-success input {
  border-color: #0687F1;
}

/* =========================================================
   REMEMBER AND FORGOT PASSWORD
========================================================= */

.lj-signin-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 21px;
}

.lj-signin-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--signin-text);
  font-size: 11px;
  cursor: pointer;
}

.lj-signin-remember input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lj-signin-checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 1px solid var(--signin-border);
  border-radius: 3px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-signin-checkmark i {
  opacity: 0;
  font-size: 15px;
  transform: scale(.6);
  transition: opacity .25s ease, transform .25s ease;
}

.lj-signin-remember input:checked+.lj-signin-checkmark {
  background: var(--signin-primary);
  border-color: var(--signin-primary);
  box-shadow: 0 6px 16px rgba(7, 104, 207, .18);
}

.lj-signin-remember input:checked+.lj-signin-checkmark i {
  opacity: 1;
  transform: scale(1);
}

.lj-signin-forgot-link {
  color: var(--signin-primary);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.lj-signin-forgot-link:hover {
  text-decoration: underline;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-signin-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 57px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0768CF, var(--signin-primary) 48%, var(--signin-primary-dark));
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 5px;
  box-shadow: 0 17px 38px rgba(7, 104, 207, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}

.lj-signin-submit::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}

.lj-signin-submit:hover::before {
  left: 130%;
}

.lj-signin-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 45px rgba(7, 104, 207, .33), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.lj-signin-submit i {
  font-size: 20px;
  transition: transform .3s ease;
}

.lj-signin-submit:hover i {
  transform: translateX(4px);
}

.lj-signin-submit:disabled {
  opacity: .75;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   DIVIDER AND SOCIAL SIGN-IN
========================================================= */

.lj-signin-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px 0 20px;
}

.lj-signin-divider::before,
.lj-signin-divider::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--signin-border);
}

.lj-signin-divider span {
  padding: 0 13px;
  color: #355A7D;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lj-signin-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lj-signin-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  color: var(--signin-title);
  background: #FFFFFF;
  border: 1px solid var(--signin-border);
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(1, 52, 130, .035);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-signin-social-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 104, 207, .32);
  box-shadow: 0 14px 32px rgba(1, 52, 130, .07);
}

.lj-signin-social-btn .fa-google {
  color: #0687F1;
}

.lj-signin-social-btn .fa-facebook-f {
  color: #0687F1;
}

.lj-signin-register-link {
  margin: 24px 0 0;
  color: var(--signin-text);
  font-size: 12px;
  text-align: center;
}

.lj-signin-register-link a {
  color: var(--signin-primary);
  font-weight: 800;
  text-decoration: none;
}

.lj-signin-register-link a:hover {
  text-decoration: underline;
}

/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

.lj-signin-showcase-content>*,
.lj-signin-form-wrapper>* {
  opacity: 0;
  transform: translateY(22px);
  animation: ljSigninReveal .75s ease forwards;
}

.lj-signin-showcase-content> :nth-child(1) {
  animation-delay: .08s;
}

.lj-signin-showcase-content> :nth-child(2) {
  animation-delay: .16s;
}

.lj-signin-showcase-content> :nth-child(3) {
  animation-delay: .24s;
}

.lj-signin-showcase-content> :nth-child(4) {
  animation-delay: .32s;
}

.lj-signin-showcase-content> :nth-child(5) {
  animation-delay: .40s;
}

.lj-signin-form-wrapper> :nth-child(1) {
  animation-delay: .10s;
}

.lj-signin-form-wrapper> :nth-child(2) {
  animation-delay: .18s;
}

.lj-signin-form-wrapper> :nth-child(3) {
  animation-delay: .26s;
}

.lj-signin-form-wrapper> :nth-child(4) {
  animation-delay: .34s;
}

.lj-signin-form-wrapper> :nth-child(5) {
  animation-delay: .42s;
}

.lj-signin-form-wrapper> :nth-child(6) {
  animation-delay: .50s;
}

@keyframes ljSigninReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ljSigninFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -18px, 0);
  }
}

/* =========================================================
   TABLET RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-signin-layout {
    grid-template-columns: minmax(0, 1fr) minmax(480px, .95fr);
  }
  .lj-signin-showcase {
    padding-right: 45px;
    padding-left: 45px;
  }
  .lj-signin-showcase h1 {
    font-size: clamp(50px, 5.8vw, 72px);
  }
}

/* =========================================================
   MOBILE AND SMALL TABLETS
========================================================= */

@media(max-width:991.98px) {
  .lj-signin-layout {
    display: block;
  }
  .lj-signin-showcase {
    display: none;
  }
  .lj-signin-form-panel {
    min-height: 100vh;
    padding: calc(35px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  }
  .lj-signin-form-wrapper {
    width: min(100%, 570px);
  }
  .lj-signin-form-logo img {
    width: 145px;
  }
}

/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media(max-width:575.98px) {
  .lj-signin-form-panel {
    align-items: flex-start;
    padding-right: 14px;
    padding-left: 14px;
  }
  .lj-signin-form-wrapper {
    padding-top: 6px;
  }
  .lj-signin-form-logo {
    margin-bottom: 21px;
  }
  .lj-signin-heading {
    margin-bottom: 24px;
  }
  .lj-signin-heading h2 {
    font-size: 40px;
  }
  .lj-signin-input-wrap input {
    height: 53px;
  }
  .lj-signin-options {
    align-items: flex-start;
  }
  .lj-signin-socials {
    gap: 9px;
  }
  .lj-signin-social-btn {
    min-height: 48px;
  }
}

/* =========================================================
   EXTRA-SMALL DEVICES
========================================================= */

@media(max-width:360px) {
  .lj-signin-heading h2 {
    font-size: 35px;
  }
  .lj-signin-options {
    flex-direction: column;
    gap: 10px;
  }
  .lj-signin-socials {
    grid-template-columns: 1fr;
  }
  .lj-signin-submit {
    min-height: 54px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-signin-showcase-content>*,
  .lj-signin-form-wrapper>*,
  .lj-signin-showcase-decoration span {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-signin-submit,
  .lj-signin-submit::before,
  .lj-signin-benefit,
  .lj-signin-social-btn {
    transition: none;
  }
}

/***************************TERMS & PRIVACY & FAQ********************/

/* =========================================================
   LINJUST LEGAL AND FAQ PAGES
========================================================= */

.lj-info-page {
  --info-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --info-primary-dark: var( --color-primary-dark, #013883);
  --info-title: var( --color-title, var(--titleColor, #013482));
  --info-text: var( --color-text, var(--paraColor, #082E5C));
  --info-white: var( --color-white, #FFFFFF);
  --info-light: var( --color-off-white, #F6FBFD);
  --info-border: var( --color-border, #6F8DA8);
  --info-muted: var( --color-muted, #355A7D);
  --info-font-body: var( --font-body, "Inter", sans-serif);
  --info-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--info-light);
  font-family: var(--font-body);
}

/* =========================================================
   PAGE HERO
========================================================= */

.lj-info-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 230px;
  padding: 20px 0 20px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 15% 25%, rgba(255, 255, 255, .16), transparent 25%), radial-gradient( circle at 85% 75%, rgba(74, 179, 252, .14), transparent 28%), linear-gradient( 135deg, #013482 0%, #013883 42%, var(--info-primary) 74%, #0687F1 100%);
  isolation: isolate;
}

.lj-info-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .20;
  background-image: linear-gradient( rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 55px 55px;
}

.lj-info-hero::after {
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 440px;
  height: 440px;
  content: "";
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255, 255, 255, .025), 0 0 0 90px rgba(255, 255, 255, .018);
}

.lj-info-hero-inner {
  position: relative;
  z-index: 3;
  width: min(100%, 850px);
}

.lj-info-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 14px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-info-hero-badge i {
  color: #4AB3FC;
  font-size: 16px;
}

.lj-info-hero h1 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(54px, 6vw, 92px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lj-info-hero h1 span {
  /**display:block;***/
  color: #4AB3FC;
  font-style: italic;
}

.lj-info-hero p {
  max-width: 720px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.85;
}

.lj-info-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px 22px;
  margin-top: 27px;
}

.lj-info-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
}

.lj-info-hero-meta i {
  color: #4AB3FC;
  font-size: 17px;
}

/* =========================================================
   PAGE BODY
========================================================= */

.lj-info-body {
  position: relative;
  padding: 80px 0 95px;
}

.lj-info-layout {
  display: grid;
  grid-template-columns: minmax(235px, 290px) minmax(0, 1fr);
  align-items: start;
  gap: 38px;
}

/* =========================================================
   SIDEBAR
========================================================= */

.lj-info-sidebar {
  position: sticky;
  top: 110px;
}

.lj-info-sidebar-card {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .07), 0 4px 14px rgba(7, 104, 207, .035);
}

.lj-info-sidebar-header {
  padding: 21px 22px 17px;
  border-bottom: 1px solid var(--info-border);
  background: linear-gradient( 135deg, rgba(7, 104, 207, .055), rgba(255, 255, 255, .95));
}

.lj-info-sidebar-header span {
  display: block;
  margin-bottom: 4px;
  color: var(--info-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-info-sidebar-header h3 {
  margin: 0;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.lj-info-nav {
  display: grid;
  padding: 10px;
}

.lj-info-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  color: var(--info-text);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color .3s ease, background .3s ease, transform .3s ease;
}

.lj-info-nav a span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lj-info-nav a i {
  font-size: 17px;
}

.lj-info-nav a:hover,
.lj-info-nav a.active {
  color: var(--info-primary);
  background: rgba(7, 104, 207, .055);
  transform: translateX(3px);
}

.lj-info-sidebar-help {
  margin-top: 20px;
  padding: 22px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #013883, var(--info-primary));
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(7, 104, 207, .20);
}

.lj-info-sidebar-help i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 15px;
  color: var(--info-primary);
  background: #FFFFFF;
  border-radius: 50%;
  font-size: 23px;
}

.lj-info-sidebar-help h4 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: 700;
}

.lj-info-sidebar-help p {
  margin: 8px 0 17px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  line-height: 1.65;
}

.lj-info-sidebar-help a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lj-info-sidebar-help a i {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  color: #FFFFFF;
  background: transparent;
  font-size: 17px;
}

/* =========================================================
   CONTENT PANEL
========================================================= */

.lj-info-content {
  min-width: 0;
}

.lj-info-card {
  padding: clamp(26px, 4vw, 48px);
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 8px;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .065), 0 4px 14px rgba(7, 104, 207, .03);
}

.lj-info-intro {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 35px;
  padding: 20px;
  background: linear-gradient( 135deg, rgba(7, 104, 207, .055), rgba(255, 255, 255, .94));
  border: 1px solid rgba(7, 104, 207, .10);
  border-left: 4px solid var(--info-primary);
  border-radius: 5px;
}

.lj-info-intro-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--info-primary-dark));
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(7, 104, 207, .20);
}

.lj-info-intro-icon i {
  font-size: 23px;
}

.lj-info-intro h2 {
  margin: 0 0 6px;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.lj-info-intro p {
  margin: 0;
  color: var(--info-text);
  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   LEGAL CONTENT SECTIONS
========================================================= */

.lj-legal-section {
  scroll-margin-top: 125px;
  padding: 30px 0;
  border-bottom: 1px solid var(--info-border);
}

.lj-legal-section:first-of-type {
  padding-top: 0;
}

.lj-legal-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lj-legal-section-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.lj-legal-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: var(--info-primary);
  background: rgba(7, 104, 207, .065);
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
}

.lj-legal-section h2 {
  margin: 2px 0 0;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 37px);
  font-weight: 700;
  line-height: 1.05;
}

.lj-legal-section h3 {
  margin: 22px 0 10px;
  color: var(--info-title);
  font-size: 14px;
  font-weight: 800;
}

.lj-legal-section p {
  margin: 0 0 15px;
  color: var(--info-text);
  font-size: 13px;
  line-height: 1.85;
}

.lj-legal-section ul,
.lj-legal-section ol {
  display: grid;
  gap: 10px;
  margin: 17px 0;
  padding: 0;
  list-style: none;
}

.lj-legal-section li {
  position: relative;
  padding-left: 27px;
  color: var(--info-text);
  font-size: 13px;
  line-height: 1.75;
}

.lj-legal-section ul li::before {
  position: absolute;
  top: 7px;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--info-primary);
  border: 3px solid rgba(7, 104, 207, .13);
  border-radius: 50%;
  box-sizing: content-box;
}

.lj-legal-section ol {
  counter-reset: legal-list;
}

.lj-legal-section ol li {
  counter-increment: legal-list;
  padding-left: 35px;
}

.lj-legal-section ol li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  content: counter(legal-list);
  color: #FFFFFF;
  background: var(--info-primary);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.lj-legal-highlight {
  margin: 22px 0;
  padding: 20px;
  background: #F6FBFD;
  border: 1px solid #A1D7FB;
  border-left: 4px solid var(--info-primary);
  border-radius: 5px;
}

.lj-legal-highlight strong {
  display: block;
  margin-bottom: 7px;
  color: var(--info-title);
  font-size: 13px;
}

.lj-legal-highlight p {
  margin: 0;
  font-size: 12px;
}

.lj-legal-table-wrap {
  width: 100%;
  margin: 22px 0;
  overflow-x: auto;
  border: 1px solid var(--info-border);
  border-radius: 6px;
}

.lj-legal-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.lj-legal-table th,
.lj-legal-table td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--info-border);
  text-align: left;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.65;
}

.lj-legal-table th {
  color: var(--info-title);
  background: #F6FBFD;
  font-weight: 800;
}

.lj-legal-table td {
  color: var(--info-text);
}

.lj-legal-table tr:last-child td {
  border-bottom: 0;
}

/* =========================================================
   FAQ SEARCH
========================================================= */

.lj-faq-search {
  position: relative;
  margin-bottom: 28px;
}

.lj-faq-search i {
  position: absolute;
  top: 50%;
  left: 18px;
  color: var(--info-muted);
  font-size: 21px;
  transform: translateY(-50%);
  pointer-events: none;
}

.lj-faq-search input {
  width: 100%;
  height: 58px;
  padding: 0 52px 0 50px;
  color: var(--info-title);
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 6px;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(1, 52, 130, .035);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.lj-faq-search input:focus {
  border-color: rgba(7, 104, 207, .45);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06), 0 15px 35px rgba(1, 52, 130, .055);
}

.lj-faq-search-clear {
  position: absolute;
  top: 50%;
  right: 13px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--info-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.lj-faq-search-clear:hover {
  color: var(--info-primary);
  background: rgba(7, 104, 207, .055);
}

/* =========================================================
   FAQ CATEGORIES
========================================================= */

.lj-faq-category {
  scroll-margin-top: 125px;
  margin-bottom: 36px;
}

.lj-faq-category:last-child {
  margin-bottom: 0;
}

.lj-faq-category-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.lj-faq-category-heading span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--info-primary-dark));
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(7, 104, 207, .18);
}

.lj-faq-category-heading i {
  font-size: 21px;
}

.lj-faq-category-heading h2 {
  margin: 0;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: 33px;
  font-weight: 700;
}

.lj-faq-list {
  display: grid;
  gap: 12px;
}

.lj-faq-item {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 6px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.lj-faq-item:hover {
  border-color: rgba(7, 104, 207, .20);
  box-shadow: 0 12px 30px rgba(1, 52, 130, .05);
}

.lj-faq-item.active {
  border-color: rgba(7, 104, 207, .25);
  box-shadow: 0 15px 35px rgba(1, 52, 130, .065);
}

.lj-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 19px 20px;
  color: var(--info-title);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.lj-faq-question>span:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lj-faq-question-number {
  color: var(--info-primary);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
}

.lj-faq-question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: var(--info-primary);
  background: rgba(7, 104, 207, .055);
  border-radius: 50%;
  transition: color .3s ease, background .3s ease, transform .35s ease;
}

.lj-faq-item.active .lj-faq-question-icon {
  color: #FFFFFF;
  background: var(--info-primary);
  transform: rotate(45deg);
}

.lj-faq-answer {
  display: none;
  padding: 0 20px 20px 53px;
}

.lj-faq-answer p {
  margin: 0;
  color: var(--info-text);
  font-size: 12px;
  line-height: 1.8;
}

.lj-faq-answer ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.lj-faq-answer li {
  position: relative;
  padding-left: 20px;
  color: var(--info-text);
  font-size: 12px;
  line-height: 1.7;
}

.lj-faq-answer li::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--info-primary);
  border-radius: 50%;
}

.lj-faq-empty {
  display: none;
  padding: 35px 20px;
  color: var(--info-text);
  background: #FFFFFF;
  border: 1px dashed var(--info-border);
  border-radius: 6px;
  text-align: center;
}

.lj-faq-empty i {
  display: block;
  margin-bottom: 10px;
  color: var(--info-primary);
  font-size: 34px;
}

.lj-faq-empty h3 {
  margin: 0 0 7px;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: 28px;
}

.lj-faq-empty p {
  margin: 0;
  font-size: 12px;
}

/* =========================================================
   CONTACT CTA
========================================================= */

.lj-info-contact-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 35px;
  padding: 30px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 85% 30%, rgba(255, 255, 255, .15), transparent 28%), linear-gradient( 135deg, #013482, var(--info-primary));
  border-radius: 8px;
  box-shadow: 0 20px 45px rgba(7, 104, 207, .20);
}

.lj-info-contact-cta::after {
  position: absolute;
  right: -65px;
  bottom: -95px;
  width: 220px;
  height: 220px;
  content: "";
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
}

.lj-info-contact-cta-content {
  position: relative;
  z-index: 2;
}

.lj-info-contact-cta span {
  display: block;
  margin-bottom: 7px;
  color: #4AB3FC;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-info-contact-cta h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
}

.lj-info-contact-cta p {
  max-width: 560px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .77);
  font-size: 12px;
  line-height: 1.7;
}

.lj-info-contact-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 49px;
  padding: 0 21px;
  color: var(--info-primary);
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(1, 52, 130, .12);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease;
}

.lj-info-contact-btn:hover {
  color: var(--info-primary);
  transform: translateY(-3px);
  box-shadow: 0 17px 35px rgba(1, 52, 130, .17);
}

/* =========================================================
   MOBILE SIDEBAR TOGGLE
========================================================= */

.lj-info-mobile-nav {
  display: none;
  margin-bottom: 20px;
}

.lj-info-mobile-nav-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 0 17px;
  color: var(--info-title);
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(1, 52, 130, .04);
}

.lj-info-mobile-nav-button span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lj-info-mobile-nav-button i {
  color: var(--info-primary);
  font-size: 19px;
}

.lj-info-mobile-nav-menu {
  display: none;
  margin-top: 8px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 6px;
  box-shadow: 0 15px 35px rgba(1, 52, 130, .07);
}

.lj-info-mobile-nav-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  color: var(--info-text);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.lj-info-mobile-nav-menu a:hover,
.lj-info-mobile-nav-menu a.active {
  color: var(--info-primary);
  background: rgba(7, 104, 207, .055);
}

/* =========================================================
   ANIMATIONS
========================================================= */

.lj-info-hero-inner>*,
.lj-info-card,
.lj-info-sidebar-card,
.lj-info-sidebar-help {
  opacity: 0;
  transform: translateY(20px);
  animation: ljInfoReveal .75s ease forwards;
}

.lj-info-hero-inner> :nth-child(1) {
  animation-delay: .08s;
}

.lj-info-hero-inner> :nth-child(2) {
  animation-delay: .16s;
}

.lj-info-hero-inner> :nth-child(3) {
  animation-delay: .24s;
}

.lj-info-hero-inner> :nth-child(4) {
  animation-delay: .32s;
}

.lj-info-sidebar-card {
  animation-delay: .18s;
}

.lj-info-sidebar-help {
  animation-delay: .27s;
}

.lj-info-card {
  animation-delay: .22s;
}

@keyframes ljInfoReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-info-layout {
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 28px;
  }
  .lj-info-hero {
    min-height: 200px;
  }
}

@media(max-width:991.98px) {
  .lj-info-hero {
    min-height: 370px;
    padding: 75px 0 65px;
  }
  .lj-info-hero-inner {
    width: min(100%, 760px);
  }
  .lj-info-layout {
    display: block;
  }
  .lj-info-sidebar {
    display: none;
  }
  .lj-info-mobile-nav {
    display: block;
  }
  .lj-info-body {
    padding: 55px 0 75px;
  }
  .lj-info-card {
    padding: 30px;
  }
}

@media(max-width:767.98px) {
  .lj-info-hero {
    min-height: 350px;
    text-align: center;
  }
  .lj-info-hero-inner {
    margin: 0 auto;
  }
  .lj-info-hero-badge {
    margin-right: auto;
    margin-left: auto;
  }
  .lj-info-hero p {
    margin-right: auto;
    margin-left: auto;
    font-size: 13px;
  }
  .lj-info-hero-meta {
    justify-content: center;
  }
  .lj-info-card {
    padding: 23px 18px;
  }
  .lj-info-intro {
    padding: 17px;
  }
  .lj-info-contact-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 25px 22px;
  }
  .lj-info-contact-btn {
    width: 100%;
  }
  .lj-faq-answer {
    padding-right: 17px;
    padding-left: 17px;
  }
  .lj-faq-question {
    padding: 17px;
  }
}

@media(max-width:575.98px) {
  .lj-info-hero {
    min-height: 325px;
    padding: 62px 0 56px;
  }
  .lj-info-hero h1 {
    font-size: clamp(45px, 14vw, 63px);
  }
  .lj-info-hero p {
    font-size: 12px;
    line-height: 1.75;
  }
  .lj-info-hero-meta {
    flex-direction: column;
    gap: 8px;
  }
  .lj-info-body {
    padding: 40px 0 60px;
  }
  .lj-info-intro {
    gap: 13px;
  }
  .lj-info-intro-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }
  .lj-info-intro h2 {
    font-size: 27px;
  }
  .lj-legal-section {
    padding: 25px 0;
  }
  .lj-legal-section-header {
    gap: 11px;
  }
  .lj-legal-number {
    flex-basis: 35px;
    width: 35px;
    height: 35px;
    font-size: 17px;
  }
  .lj-legal-section h2 {
    font-size: 27px;
  }
  .lj-legal-section p,
  .lj-legal-section li {
    font-size: 12px;
  }
  .lj-faq-search input {
    height: 54px;
    font-size: 12px;
  }
  .lj-faq-category-heading h2 {
    font-size: 29px;
  }
  .lj-faq-question {
    gap: 12px;
    font-size: 12px;
  }
  .lj-faq-question-number {
    display: none;
  }
  .lj-faq-answer {
    padding-bottom: 18px;
  }
}

@media(max-width:360px) {
  .lj-info-card {
    padding-right: 14px;
    padding-left: 14px;
  }
  .lj-info-intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .lj-faq-category-heading span {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-info-hero-inner>*,
  .lj-info-card,
  .lj-info-sidebar-card,
  .lj-info-sidebar-help {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-faq-item,
  .lj-faq-question-icon,
  .lj-info-nav a,
  .lj-info-contact-btn {
    transition: none;
  }
}

/***********************************CONTACT US*****************************/

/* =========================================================
   LINJUST SIMPLE CONTACT PAGE
========================================================= */

.lj-simple-contact {
  --contact-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --contact-primary-dark: var( --color-primary-dark, #013883);
  --contact-title: var( --color-title, var(--titleColor, #013482));
  --contact-text: var( --color-text, var(--paraColor, #082E5C));
  --contact-white: var( --color-white, #FFFFFF);
  --contact-light: var( --color-off-white, #F6FBFD);
  --contact-border: var( --color-border, #6F8DA8);
  --contact-font-body: var( --font-body, "Inter", sans-serif);
  --contact-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--contact-text);
  background: var(--contact-light);
  font-family: var(--font-body);
}

/* =========================================================
   HERO
========================================================= */

.lj-simple-contact-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 230px;
  padding: 25px 0 20px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 18% 30%, rgba(255, 255, 255, .15), transparent 27%), radial-gradient( circle at 85% 75%, rgba(74, 179, 252, .13), transparent 28%), linear-gradient( 135deg, #013482 0%, #013883 43%, var(--contact-primary) 76%, #0687F1 100%);
  isolation: isolate;
}

.lj-simple-contact-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .18;
  background-image: linear-gradient( rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 55px 55px;
}

.lj-simple-contact-hero::after {
  position: absolute;
  right: -150px;
  bottom: -220px;
  width: 500px;
  height: 500px;
  content: "";
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(255, 255, 255, .022), 0 0 0 100px rgba(255, 255, 255, .015);
}

.lj-simple-contact-hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 820px);
}

.lj-simple-contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 14px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-simple-contact-badge i {
  color: var(--contact-color);
  font-size: 17px;
}

.lj-simple-contact-hero h1 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(54px, 6vw, 88px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.035em;
}

.lj-simple-contact-hero h1 span {
  /****display:block;*****/
  color: var(--contact-color);
  font-style: italic;
}

.lj-simple-contact-hero p {
  max-width: 700px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.85;
}

.lj-simple-contact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 22px;
  margin-top: 27px;
}

.lj-simple-contact-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .80);
  font-size: 11px;
}

.lj-simple-contact-meta i {
  color: var(--contact-color);
  font-size: 17px;
}

/* =========================================================
   SHARED HEADING
========================================================= */

.lj-simple-section-heading {
  width: min(100%, 720px);
  margin: 0 auto 40px;
  text-align: center;
}

.lj-simple-section-heading>span {
  display: block;
  margin-bottom: 8px;
  color: var(--contact-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-simple-section-heading h2 {
  margin: 0;
  color: var(--contact-title);
  font-family: var(--font-body);
  font-size: clamp(42px, 5vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.lj-simple-section-heading p {
  margin: 13px 0 0;
  color: var(--contact-text);
  font-size: 13px;
  line-height: 1.8;
}

/* =========================================================
   CONTACT INFORMATION
========================================================= */

.lj-simple-contact-info {
  position: relative;
  padding: 80px 0 90px;
  background: radial-gradient( circle at 10% 20%, rgba(7, 104, 207, .04), transparent 25%), var(--contact-light);
}

.lj-simple-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.lj-simple-location-card {
  grid-column: 1 / -1;
}

.lj-simple-contact-card {
  position: relative;
  min-width: 0;
  padding: clamp(24px, 3vw, 35px);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--contact-border);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .065), 0 4px 14px rgba(7, 104, 207, .035);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.lj-simple-contact-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient( 90deg, var(--contact-primary-dark), var(--contact-primary), #0687F1);
}

.lj-simple-contact-card::after {
  position: absolute;
  top: -90px;
  right: -90px;
  width: 220px;
  height: 220px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .07), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .45s ease;
}

.lj-simple-contact-card:hover {
  transform: translateY(-7px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 27px 65px rgba(1, 52, 130, .09), 0 7px 20px rgba(7, 104, 207, .06);
}

.lj-simple-contact-card:hover::after {
  transform: scale(1.15);
}

.lj-simple-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.lj-simple-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--contact-primary-dark));
  border-radius: 50%;
  box-shadow: 0 13px 28px rgba(7, 104, 207, .22);
  transition: transform .35s ease, box-shadow .35s ease;
}

.lj-simple-contact-card:hover .lj-simple-card-icon {
  transform: rotate(-5deg) scale(1.05);
  box-shadow: 0 17px 35px rgba(7, 104, 207, .27);
}

.lj-simple-card-icon i {
  font-size: 25px;
}

.lj-simple-card-top span {
  display: block;
  margin-bottom: 5px;
  color: var(--contact-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-simple-card-top h3 {
  margin: 0;
  color: var(--contact-title);
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   LOCATION ITEMS
========================================================= */

.lj-simple-address-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.lj-simple-address-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 19px;
  background: #F6FBFD;
  border: 1px solid #6F8DA8;
  border-radius: 6px;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

.lj-simple-address-item:hover {
  transform: translateY(-4px);
  background: #FFFFFF;
  border-color: rgba(7, 104, 207, .18);
}

.lj-simple-item-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  color: var(--contact-primary);
  background: rgba(7, 104, 207, .07);
  border: 1px solid rgba(7, 104, 207, .11);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
}

.lj-simple-address-item h4 {
  margin: 1px 0 7px;
  color: var(--contact-title);
  font-size: 12px;
  font-weight: 800;
}

.lj-simple-address-item address {
  margin: 0;
  color: var(--contact-text);
  font-size: 11px;
  font-style: normal;
  line-height: 1.75;
}

/* =========================================================
   PHONE AND EMAIL LIST
========================================================= */

.lj-simple-contact-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 11px;
}

.lj-simple-contact-list>a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  color: var(--contact-title);
  background: #F6FBFD;
  border: 1px solid #6F8DA8;
  border-radius: 6px;
  text-decoration: none;
  transition: transform .3s ease, color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-simple-contact-list>a:hover {
  transform: translateX(5px);
  color: var(--contact-primary);
  background: #FFFFFF;
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 10px 23px rgba(1, 52, 130, .045);
}

.lj-simple-list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--contact-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
}

.lj-simple-list-icon i {
  font-size: 19px;
}

.lj-simple-list-content {
  min-width: 0;
}

.lj-simple-list-content small {
  display: block;
  margin-bottom: 3px;
  color: var(--contact-text);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-simple-list-content strong {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.lj-simple-contact-list>a>i {
  color: #355A7D;
  font-size: 17px;
  transition: color .3s ease, transform .3s ease;
}

.lj-simple-contact-list>a:hover>i {
  color: var(--contact-primary);
  transform: translateX(3px);
}

/* =========================================================
   FORM SECTION
========================================================= */

.lj-simple-form-section {
  position: relative;
  padding: 90px 0 105px;
  background: #FFFFFF;
}

.lj-simple-form-section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: linear-gradient( 90deg, transparent, var(--contact-border), transparent);
}

.lj-simple-form-container {
  position: relative;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 60px);
  overflow: hidden;
  background: radial-gradient( circle at 100% 0, rgba(7, 104, 207, .055), transparent 27%), #FFFFFF;
  border: 1px solid var(--contact-border);
  border-radius: 10px;
  box-shadow: 0 25px 70px rgba(1, 52, 130, .09), 0 6px 20px rgba(7, 104, 207, .04);
}

.lj-simple-form-container::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient( 90deg, var(--contact-primary-dark), var(--contact-primary), #0687F1);
}

.lj-simple-form-heading {
  width: min(100%, 650px);
  margin: 0 auto 36px;
  text-align: center;
}

.lj-simple-form-heading>span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--contact-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-simple-form-heading>span i {
  font-size: 17px;
}

.lj-simple-form-heading h2 {
  margin: 0;
  color: var(--contact-title);
  font-family: var(--font-body);
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.lj-simple-form-heading p {
  margin: 13px 0 0;
  color: var(--contact-text);
  font-size: 12px;
  line-height: 1.8;
}

.lj-simple-form {
  width: 100%;
}

.lj-simple-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lj-simple-form-group {
  margin-bottom: 18px;
}

.lj-simple-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--contact-title);
  font-size: 10px;
  font-weight: 800;
}

.lj-simple-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lj-simple-input-wrap>i:first-child {
  position: absolute;
  z-index: 2;
  left: 16px;
  color: #355A7D;
  font-size: 19px;
  pointer-events: none;
  transition: color .3s ease;
}

.lj-simple-input-wrap input,
.lj-simple-input-wrap select,
.lj-simple-input-wrap textarea {
  width: 100%;
  color: var(--contact-title);
  background: #FFFFFF;
  border: 1px solid var(--contact-border);
  border-radius: 5px;
  outline: none;
  font-family: var(--font-body);
  font-size: 12px;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.lj-simple-input-wrap input,
.lj-simple-input-wrap select {
  height: 55px;
  padding: 0 47px;
}

.lj-simple-input-wrap textarea {
  min-height: 170px;
  padding: 17px 17px 17px 48px;
  resize: vertical;
  line-height: 1.7;
}

.lj-simple-input-wrap select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.lj-simple-input-wrap input::placeholder,
.lj-simple-input-wrap textarea::placeholder {
  color: #355A7D;
}

.lj-simple-input-wrap input:focus,
.lj-simple-input-wrap select:focus,
.lj-simple-input-wrap textarea:focus {
  background: #FFFFFF;
  border-color: rgba(7, 104, 207, .50);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06), 0 12px 30px rgba(1, 52, 130, .04);
}

.lj-simple-input-wrap:focus-within>i:first-child {
  color: var(--contact-primary);
}

.lj-simple-select-icon {
  position: absolute;
  right: 15px;
  color: #0687F1;
  font-size: 19px;
  pointer-events: none;
}

.lj-simple-textarea-wrap {
  align-items: flex-start;
}

.lj-simple-textarea-wrap>i:first-child {
  top: 18px;
}

.lj-simple-error,
.lj-simple-consent-error {
  display: block;
  min-height: 14px;
  margin-top: 5px;
  color: #0768CF;
  font-size: 9px;
  line-height: 1.4;
}

.lj-simple-form-group.has-error input,
.lj-simple-form-group.has-error select,
.lj-simple-form-group.has-error textarea {
  border-color: #0768CF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .055);
}

.lj-simple-form-group.has-success input,
.lj-simple-form-group.has-success select,
.lj-simple-form-group.has-success textarea {
  border-color: #0687F1;
}

.lj-simple-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.lj-simple-message-meta>span {
  flex: 0 0 auto;
  margin-top: 5px;
  color: #355A7D;
  font-size: 9px;
}

/* =========================================================
   CONSENT
========================================================= */

.lj-simple-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--contact-text);
  font-size: 10px;
  line-height: 1.65;
  cursor: pointer;
}

.lj-simple-consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lj-simple-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 1px solid var(--contact-border);
  border-radius: 3px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-simple-checkbox i {
  opacity: 0;
  font-size: 14px;
  transform: scale(.6);
  transition: opacity .25s ease, transform .25s ease;
}

.lj-simple-consent input:checked+.lj-simple-checkbox {
  background: var(--contact-primary);
  border-color: var(--contact-primary);
  box-shadow: 0 6px 15px rgba(7, 104, 207, .17);
}

.lj-simple-consent input:checked+.lj-simple-checkbox i {
  opacity: 1;
  transform: scale(1);
}

.lj-simple-consent a {
  color: var(--contact-primary);
  font-weight: 800;
  text-decoration: none;
}

.lj-simple-consent a:hover {
  text-decoration: underline;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-simple-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 13px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--contact-primary) 50%, var(--contact-primary-dark));
  border: 0;
  border-radius: 5px;
  box-shadow: 0 16px 36px rgba(7, 104, 207, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.lj-simple-submit::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .27), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}

.lj-simple-submit:hover::before {
  left: 130%;
}

.lj-simple-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 21px 43px rgba(7, 104, 207, .31), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.lj-simple-submit i {
  font-size: 18px;
  transition: transform .3s ease;
}

.lj-simple-submit:hover i {
  transform: translate(3px, -2px);
}

.lj-simple-submit:disabled {
  opacity: .72;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

.lj-simple-contact-hero-content>*,
.lj-simple-section-heading,
.lj-simple-contact-card,
.lj-simple-form-container {
  opacity: 0;
  transform: translateY(22px);
  animation: ljSimpleContactReveal .75s ease forwards;
}

.lj-simple-contact-hero-content> :nth-child(1) {
  animation-delay: .07s;
}

.lj-simple-contact-hero-content> :nth-child(2) {
  animation-delay: .14s;
}

.lj-simple-contact-hero-content> :nth-child(3) {
  animation-delay: .21s;
}

.lj-simple-contact-hero-content> :nth-child(4) {
  animation-delay: .28s;
}

.lj-simple-section-heading {
  animation-delay: .10s;
}

.lj-simple-contact-card:nth-child(1) {
  animation-delay: .16s;
}

.lj-simple-contact-card:nth-child(2) {
  animation-delay: .24s;
}

.lj-simple-contact-card:nth-child(3) {
  animation-delay: .32s;
}

.lj-simple-form-container {
  animation-delay: .14s;
}

@keyframes ljSimpleContactReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   RESPONSIVENESS
========================================================= */

@media(max-width:991.98px) {
  .lj-simple-contact-hero {
    min-height: 375px;
    padding: 75px 0 65px;
  }
  .lj-simple-address-grid {
    grid-template-columns: 1fr;
  }
  .lj-simple-contact-info {
    padding: 65px 0 75px;
  }
  .lj-simple-form-section {
    padding: 75px 0 85px;
  }
}

@media(max-width:767.98px) {
  .lj-simple-contact-hero {
    min-height: 350px;
    text-align: center;
  }
  .lj-simple-contact-hero-content {
    margin: 0 auto;
  }
  .lj-simple-contact-hero p {
    margin-right: auto;
    margin-left: auto;
    font-size: 13px;
  }
  .lj-simple-contact-meta {
    justify-content: center;
  }
  .lj-simple-contact-grid {
    grid-template-columns: 1fr;
  }
  .lj-simple-location-card {
    grid-column: auto;
  }
  .lj-simple-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media(max-width:575.98px) {
  .lj-simple-contact-hero {
    min-height: 205px;
    padding: 20px 0 18px;
  }
  .lj-simple-contact-hero h1 {
    font-size: clamp(35px, 10vw, 42px);
  }
  .lj-simple-contact-hero p {
    font-size: 12px;
    line-height: 1.75;
  }
  .lj-simple-contact-meta {
    flex-direction: row;
    gap: 8px;
  }
  .lj-simple-contact-info {
    padding: 50px 0 60px;
  }
  .lj-simple-section-heading {
    margin-bottom: 30px;
  }
  .lj-simple-section-heading h2,
  .lj-simple-form-heading h2 {
    font-size: 39px;
  }
  .lj-simple-contact-card {
    padding: 23px 17px;
  }
  .lj-simple-card-top h3 {
    font-size: 30px;
  }
  .lj-simple-address-item {
    padding: 16px 13px;
  }
  .lj-simple-contact-list>a {
    grid-template-columns: 39px minmax(0, 1fr) 20px;
    gap: 9px;
    padding: 11px;
  }
  .lj-simple-list-icon {
    width: 39px;
    height: 39px;
  }
  .lj-simple-form-section {
    padding: 60px 0 70px;
  }
  .lj-simple-form-container {
    padding: 32px 17px;
    border-radius: 8px;
  }
  .lj-simple-form-heading {
    margin-bottom: 28px;
  }
  .lj-simple-input-wrap input,
  .lj-simple-input-wrap select {
    height: 53px;
  }
}

@media(max-width:360px) {
  .lj-simple-contact-list>a {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .lj-simple-contact-list>a>i {
    display: none;
  }
  .lj-simple-card-top {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-simple-contact-hero-content>*,
  .lj-simple-section-heading,
  .lj-simple-contact-card,
  .lj-simple-form-container {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-simple-contact-card,
  .lj-simple-contact-card::after,
  .lj-simple-card-icon,
  .lj-simple-address-item,
  .lj-simple-contact-list>a,
  .lj-simple-submit,
  .lj-simple-submit::before {
    transition: none;
  }
}

/********************************CONTACT ENDS HERE****************************/

/*******************************ABOUT US************************************/

/* =========================================================
   LINJUST MODERN LUXURY ABOUT PAGE
========================================================= */

.lj-about-page {
  --about-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --about-primary-dark: var( --color-primary-dark, #013883);
  --about-title: var( --color-title, var(--titleColor, #013482));
  --about-text: var( --color-text, var(--paraColor, #082E5C));
  --about-white: var( --color-white, #FFFFFF);
  --about-light: var( --color-off-white, #F6FBFD);
  --about-soft: #F6FBFD;
  --about-border: var( --color-border, #6F8DA8);
  --about-font-body: var( --font-body, "Inter", sans-serif);
  --about-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  overflow: hidden;
  color: var(--about-text);
  background: #FFFFFF;
  font-family: var(--font-body);
}

.lj-about-page *,
.lj-about-page *::before,
.lj-about-page *::after {
  box-sizing: border-box;
}

.lj-about-page img {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   SECTION 1: INTRODUCTION
========================================================= */

.lj-about-intro {
  position: relative;
  padding: 55px 0;
  overflow: hidden;
  background: radial-gradient( circle at 8% 18%, rgba(7, 104, 207, .055), transparent 25%), radial-gradient( circle at 90% 82%, rgba(7, 104, 207, .035), transparent 25%), #FFFFFF;
}

.lj-about-intro::before {
  position: absolute;
  top: -160px;
  left: -160px;
  width: 380px;
  height: 380px;
  content: "";
  border: 1px solid rgba(7, 104, 207, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(7, 104, 207, .018), 0 0 0 90px rgba(7, 104, 207, .012);
}

.lj-about-intro-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  align-items: center;
  gap: clamp(55px, 8vw, 110px);
}

.lj-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--about-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-about-eyebrow i {
  font-size: 18px;
}

.lj-about-intro-content h1 {
  max-width: 760px;
  margin: 0;
  color: var(--about-title);
  font-family: var(--font-body);
  font-size: clamp(54px, 6vw, 88px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.045em;
}

.lj-about-intro-content h1 span {
  display: block;
  color: var(--about-primary);
  font-style: italic;
}

.lj-about-lead {
  max-width: 690px;
  margin: 27px 0 14px;
  color: #013883;
  font-size: 15px;
  line-height: 1.9;
}

.lj-about-intro-content>p:not(.lj-about-lead) {
  max-width: 690px;
  margin: 0;
  color: var(--about-text);
  font-size: 13px;
  line-height: 1.85;
}

/* Introduction image */

.lj-about-intro-visual {
  position: relative;
  min-width: 0;
  padding: 30px 25px 40px;
}

.lj-about-image-card {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  background: #D5EAF8;
  border: 1px solid var(--about-border);
  border-radius: 14px;
  box-shadow: 0 35px 80px rgba(1, 52, 130, .14), 0 10px 28px rgba(7, 104, 207, .055);
}

.lj-about-image-card img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  transition: transform 1s ease;
}

.lj-about-image-card:hover img {
  transform: scale(1.045);
}

.lj-about-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient( to top, rgba(1, 52, 130, .83), rgba(1, 52, 130, .10) 60%, transparent);
}

.lj-about-image-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 36px;
  color: #FFFFFF;
}

.lj-about-image-caption>span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: #4AB3FC;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-about-image-caption h3 {
  max-width: 440px;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.05;
}

.lj-about-floating-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
  padding: 14px 17px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(1, 52, 130, .14);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  animation: ljAboutFloat 5s ease-in-out infinite;
}

.lj-about-floating-card>i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--about-primary), var(--about-primary-dark));
  border-radius: 50%;
  font-size: 20px;
}

.lj-about-floating-card strong {
  display: block;
  color: var(--about-title);
  font-size: 11px;
  font-weight: 800;
}

.lj-about-floating-card span {
  display: block;
  margin-top: 3px;
  color: var(--about-text);
  font-size: 8px;
}

.lj-about-floating-card-one {
  top: 80px;
  left: -15px;
}

.lj-about-floating-card-two {
  right: -20px;
  bottom: 85px;
  animation-delay: -2.5s;
}

/* =========================================================
   ACCORDION
========================================================= */

.lj-about-accordion {
  display: grid;
  gap: 10px;
  margin-top: 32px;
}

.lj-about-accordion-item {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--about-border);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(1, 52, 130, .035);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.lj-about-accordion-item.active {
  border-color: rgba(7, 104, 207, .22);
  box-shadow: 0 13px 32px rgba(1, 52, 130, .06);
}

.lj-about-accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 58px;
  padding: 14px 17px;
  color: var(--about-title);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
}

.lj-about-accordion-button>span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
}

.lj-about-accordion-button>span i {
  color: var(--about-primary);
  font-size: 19px;
}

.lj-about-accordion-button>i {
  color: var(--about-primary);
  font-size: 18px;
}

.lj-about-accordion-content {
  display: none;
  padding: 0 17px 17px 46px;
}

.lj-about-accordion-item.active .lj-about-accordion-content {
  display: block;
}

.lj-about-accordion-content p {
  margin: 0;
  color: var(--about-text);
  font-size: 11px;
  line-height: 1.75;
}

/* =========================================================
   SHARED TWO-COLUMN SECTIONS
========================================================= */

.lj-about-story,
.lj-about-purpose,
.lj-about-safety,
.lj-about-why {
  position: relative;
  padding: 70px 0;
}

.lj-about-story,
.lj-about-safety {
  background: var(--about-light);
}

.lj-about-purpose,
.lj-about-why {
  background: #FFFFFF;
}

.lj-about-two-column {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(55px, 8vw, 110px);
}

.lj-about-two-column-reverse {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
}

.lj-about-section-label {
  display: inline-block;
  margin-bottom: 13px;
  color: var(--about-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-about-section-content h2 {
  max-width: 720px;
  margin: 0;
  color: var(--about-title);
  font-family: var(--font-body);
  font-size: clamp(46px, 5vw, 68px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
}

.lj-about-section-content h2 span {
  /***display:block;****/
  color: var(--about-primary);
  font-style: italic;
}

.lj-about-section-content>p {
  max-width: 700px;
  margin: 22px 0 0;
  color: var(--about-text);
  font-size: var(--main-font-size);
  line-height: 1.88;
}

.lj-about-section-visual {
  position: relative;
  min-width: 0;
}

.lj-about-visual-frame {
  position: relative;
  min-height: 530px;
  overflow: hidden;
  background: #D5EAF8;
  border: 1px solid var(--about-border);
  border-radius: 12px;
  box-shadow: 0 28px 65px rgba(1, 52, 130, .11);
}

.lj-about-visual-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient( to top, rgba(1, 52, 130, .24), transparent 48%);
  pointer-events: none;
}

.lj-about-visual-frame img {
  width: 100%;
  height: 530px;
  object-fit: cover;
  transition: transform .9s ease;
}

.lj-about-visual-frame:hover img {
  transform: scale(1.045);
}

.lj-about-visual-number {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .86);
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 700;
}

/* =========================================================
   STORY FEATURES
========================================================= */

.lj-about-feature-list {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.lj-about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px;
  background: #FFFFFF;
  border: 1px solid var(--about-border);
  border-radius: 7px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-about-story .lj-about-feature-item {
  background: rgba(255, 255, 255, .75);
}

.lj-about-feature-item:hover {
  transform: translateX(6px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 12px 28px rgba(1, 52, 130, .055);
}

.lj-about-feature-item>span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: var(--about-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
}

.lj-about-feature-item>span i {
  font-size: 20px;
}

.lj-about-feature-item h3 {
  margin: 1px 0 4px;
  color: var(--about-title);
  font-size: var(--main-font-size);
  font-weight: 800;
}

.lj-about-feature-item p {
  margin: 0;
  color: var(--about-text);
  font-size: var(--main-font-size);
  line-height: 1.65;
}

/* =========================================================
   BUTTONS
========================================================= */

.lj-about-button,
.lj-about-button-outline,
.lj-about-light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease, color .3s ease, background .3s ease, border-color .3s ease;
}

.lj-about-button {
  margin-top: 27px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--about-primary), var(--about-primary-dark));
  box-shadow: 0 15px 32px rgba(7, 104, 207, .24);
}

.lj-about-button:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .31);
}

.lj-about-button i,
.lj-about-button-outline i,
.lj-about-light-button i {
  font-size: 17px;
}

.lj-about-button-outline {
  color: var(--about-primary);
  background: transparent;
  border: 1px solid rgba(7, 104, 207, .28);
}

.lj-about-button-outline:hover {
  color: #FFFFFF;
  background: var(--about-primary);
  border-color: var(--about-primary);
  transform: translateY(-3px);
}

.lj-about-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.lj-about-button-group .lj-about-button {
  margin-top: 0;
}

/* =========================================================
   PROCESS SECTION
========================================================= */

.lj-about-process-list {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 33px;
}

.lj-about-process-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 15px;
  padding-bottom: 24px;
}

.lj-about-process-item:not(:last-child)::before {
  position: absolute;
  top: 43px;
  left: 22px;
  width: 1px;
  height: calc(100% - 28px);
  content: "";
  background: linear-gradient( to bottom, rgba(7, 104, 207, .35), rgba(7, 104, 207, .05));
}

.lj-about-process-number {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--about-primary), var(--about-primary-dark));
  border: 5px solid #F6FBFD;
  border-radius: 50%;
  box-shadow: 0 9px 20px rgba(7, 104, 207, .16);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
}

.lj-about-process-item h3 {
  margin: 4px 0 5px;
  color: var(--about-title);
  font-size: var(--main-font-size);
  font-weight: 800;
}

.lj-about-process-item p {
  max-width: 580px;
  margin: 0;
  color: var(--about-text);
  font-size: var(--main-font-size);
  line-height: 1.7;
}

/* =========================================================
   SAFETY CARDS
========================================================= */

.lj-about-safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.lj-about-safety-card {
  padding: 20px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--about-border);
  border-radius: 7px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.lj-about-safety-card:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 104, 207, .19);
  box-shadow: 0 16px 35px rgba(1, 52, 130, .07);
}

.lj-about-safety-card>i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-bottom: 15px;
  color: var(--about-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
  font-size: 21px;
}

.lj-about-safety-card h3 {
  margin: 0 0 7px;
  color: var(--about-title);
  font-size: 12px;
  font-weight: 800;
}

.lj-about-safety-card p {
  margin: 0;
  color: var(--about-text);
  font-size: 10px;
  line-height: 1.65;
}

/* =========================================================
   VALUE LIST
========================================================= */

.lj-about-value-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.lj-about-value-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px;
  background: var(--about-soft);
  border: 1px solid #D5EAF8;
  border-radius: 7px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.lj-about-value-item:hover {
  transform: translateY(-5px);
  background: #FFFFFF;
  border-color: rgba(7, 104, 207, .18);
}

.lj-about-value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--about-primary), var(--about-primary-dark));
  border-radius: 50%;
  box-shadow: 0 9px 20px rgba(7, 104, 207, .16);
}

.lj-about-value-icon i {
  font-size: 19px;
}

.lj-about-value-item h3 {
  margin: 1px 0 5px;
  color: var(--about-title);
  font-size: 11px;
  font-weight: 800;
}

.lj-about-value-item p {
  margin: 0;
  color: var(--about-text);
  font-size: 9px;
  line-height: 1.65;
}

.lj-about-premium-tag {
  position: absolute;
  right: -20px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 260px;
  padding: 15px 18px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #013482, var(--about-primary-dark));
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 7px;
  box-shadow: 0 18px 45px rgba(1, 52, 130, .24);
}

.lj-about-premium-tag>i {
  color: #4AB3FC;
  font-size: 27px;
}

.lj-about-premium-tag small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .65);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-about-premium-tag strong {
  display: block;
  font-size: 11px;
}

/* =========================================================
   FINAL CTA
========================================================= */

.lj-about-final-cta {
  padding: 90px 0 105px;
  background: var(--about-light);
}

.lj-about-final-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  min-height: 220px;
  padding: 42px 48px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 12% 25%, rgba(255, 255, 255, .14), transparent 25%), linear-gradient( 135deg, #013482, #013883 45%, var(--about-primary));
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(1, 52, 130, .20);
  isolation: isolate;
}

.lj-about-final-decoration {
  position: absolute;
  z-index: -1;
  right: -130px;
  bottom: -210px;
  width: 450px;
  height: 450px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255, 255, 255, .02), 0 0 0 95px rgba(255, 255, 255, .014);
}

.lj-about-final-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
  border-radius: 50%;
  box-shadow: 0 15px 35px rgba(1, 52, 130, .14);
}

.lj-about-final-icon i {
  font-size: 31px;
}

.lj-about-final-content>span {
  display: block;
  margin-bottom: 7px;
  color: #4AB3FC;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-about-final-content h2 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(35px, 4vw, 52px);
  font-weight: 700;
  line-height: 1;
}

.lj-about-final-content p {
  max-width: 650px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .75);
  font-size: 11px;
  line-height: 1.75;
}

.lj-about-final-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.lj-about-light-button {
  color: var(--about-primary);
  background: #FFFFFF;
  box-shadow: 0 13px 30px rgba(1, 52, 130, .13);
}

.lj-about-light-button:hover {
  color: var(--about-primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(1, 52, 130, .18);
}

.lj-about-text-button {
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.lj-about-text-button:hover {
  color: #4AB3FC;
}

/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

.lj-about-intro-content,
.lj-about-intro-visual,
.lj-about-section-content,
.lj-about-section-visual,
.lj-about-final-card {
  opacity: 0;
  transform: translateY(28px);
  animation: ljAboutReveal .8s ease forwards;
}

.lj-about-intro-visual,
.lj-about-section-visual {
  animation-delay: .12s;
}

@keyframes ljAboutReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ljAboutFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* =========================================================
   TABLET RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-about-intro-grid,
  .lj-about-two-column,
  .lj-about-two-column-reverse {
    gap: 55px;
  }
  .lj-about-intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(370px, .85fr);
  }
  .lj-about-two-column,
  .lj-about-two-column-reverse {
    grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr);
  }
  .lj-about-final-card {
    grid-template-columns: 65px minmax(0, 1fr);
  }
  .lj-about-final-actions {
    grid-column: 2;
  }
}

@media(max-width:991.98px) {
  .lj-about-intro,
  .lj-about-story,
  .lj-about-purpose,
  .lj-about-safety,
  .lj-about-why {
    padding: 80px 0;
  }
  .lj-about-intro-grid,
  .lj-about-two-column,
  .lj-about-two-column-reverse {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .lj-about-intro-visual {
    width: min(100%, 650px);
    margin: 0 auto;
  }
  .lj-about-two-column-reverse .lj-about-section-content {
    order: 2;
  }
  .lj-about-two-column-reverse .lj-about-section-visual {
    order: 1;
  }
  .lj-about-section-visual {
    width: min(100%, 680px);
    margin: 0 auto;
  }
  .lj-about-image-card,
  .lj-about-image-card img {
    height: 560px;
    min-height: 560px;
  }
  .lj-about-visual-frame,
  .lj-about-visual-frame img {
    height: 500px;
    min-height: 500px;
  }
}

/* =========================================================
   MOBILE RESPONSIVENESS
========================================================= */

@media(max-width:767.98px) {
  .lj-about-intro {
    padding: 65px 0;
  }
  .lj-about-story,
  .lj-about-purpose,
  .lj-about-safety,
  .lj-about-why {
    padding: 70px 0;
  }
  .lj-about-intro-content {
    text-align: center;
  }
  .lj-about-intro-content h1 {
    margin-right: auto;
    margin-left: auto;
  }
  .lj-about-intro-content>p {
    margin-right: auto;
    margin-left: auto;
  }
  .lj-about-accordion {
    text-align: left;
  }
  .lj-about-image-card,
  .lj-about-image-card img {
    height: 500px;
    min-height: 500px;
  }
  .lj-about-section-content h2 {
    font-size: 49px;
  }
  .lj-about-safety-grid,
  .lj-about-value-list {
    grid-template-columns: 1fr;
  }
  .lj-about-final-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 38px 30px;
    text-align: center;
  }
  .lj-about-final-icon {
    margin: 0 auto;
  }
  .lj-about-final-actions {
    grid-column: auto;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media(max-width:575.98px) {
  .lj-about-intro {
    padding: 55px 0 60px;
  }
  .lj-about-intro-content h1 {
    font-size: clamp(47px, 13vw, 62px);
  }
  .lj-about-lead {
    font-size: 13px;
  }
  .lj-about-intro-content>p:not(.lj-about-lead),
  .lj-about-section-content>p {
    font-size: 11px;
  }
  .lj-about-intro-visual {
    padding: 15px 0 35px;
  }
  .lj-about-image-card,
  .lj-about-image-card img {
    height: 430px;
    min-height: 430px;
  }
  .lj-about-image-caption {
    padding: 25px 20px;
  }
  .lj-about-image-caption h3 {
    font-size: 29px;
  }
  .lj-about-floating-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    animation: none;
  }
  .lj-about-section-content h2 {
    font-size: 42px;
  }
  .lj-about-visual-frame,
  .lj-about-visual-frame img {
    height: 390px;
    min-height: 390px;
  }
  .lj-about-visual-number {
    right: 16px;
    bottom: 16px;
    width: 53px;
    height: 53px;
    font-size: 22px;
  }
  .lj-about-premium-tag {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    margin-top: 13px;
  }
  .lj-about-button-group {
    flex-direction: column;
  }
  .lj-about-button-group a {
    width: 100%;
  }
  .lj-about-final-cta {
    padding: 60px 0 70px;
  }
  .lj-about-final-card {
    padding: 32px 20px;
    border-radius: 8px;
  }
  .lj-about-final-content h2 {
    font-size: 37px;
  }
  .lj-about-final-actions {
    flex-direction: column;
  }
  .lj-about-light-button {
    width: 100%;
  }
}

@media(max-width:360px) {
  .lj-about-accordion-button {
    padding-right: 13px;
    padding-left: 13px;
  }
  .lj-about-accordion-button>span {
    font-size: 10px;
  }
  .lj-about-feature-item,
  .lj-about-value-item {
    align-items: flex-start;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-about-intro-content,
  .lj-about-intro-visual,
  .lj-about-section-content,
  .lj-about-section-visual,
  .lj-about-final-card,
  .lj-about-floating-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-about-page *,
  .lj-about-page *::before,
  .lj-about-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/*******************************ABOUT US ENDS HERE**************************/

/***************************************how to  sell **************************************************/

/* =========================================================
   LINJUST HOW TO SELL PAGE
========================================================= */

.lj-sell-guide-page {
  --sell-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --sell-primary-dark: var( --color-primary-dark, #013883);
  --sell-primary-soft: rgba(7, 104, 207, .07);
  --sell-title: var( --color-title, var(--titleColor, #013482));
  --sell-text: var( --color-text, var(--paraColor, #082E5C));
  --sell-white: var( --color-white, #FFFFFF);
  --sell-light: var( --color-off-white, #F6FBFD);
  --sell-soft: #F6FBFD;
  --sell-border: var( --color-border, #6F8DA8);
  --sell-font-body: var( --font-body, "Inter", sans-serif);
  --sell-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--sell-text);
  background: var(--sell-white);
  font-family: var(--font-body);
}

.lj-sell-guide-page *,
.lj-sell-guide-page *::before,
.lj-sell-guide-page *::after {
  box-sizing: border-box;
}

.lj-sell-guide-page a {
  text-decoration: none;
}

/* =========================================================
   MAIN SELLING SECTION
========================================================= */

.lj-sell-guide-main {
  position: relative;
  padding: 65px 0 70px;
  overflow: hidden;
  background: radial-gradient( circle at 7% 12%, rgba(7, 104, 207, .055), transparent 23%), radial-gradient( circle at 92% 36%, rgba(7, 104, 207, .035), transparent 25%), linear-gradient( to bottom, #FFFFFF, #F6FBFD 45%, #FFFFFF);
  isolation: isolate;
}

.lj-sell-guide-decoration {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(7, 104, 207, .07);
  border-radius: 50%;
  pointer-events: none;
}

.lj-sell-guide-decoration-one {
  top: -180px;
  left: -170px;
  width: 430px;
  height: 430px;
  box-shadow: 0 0 0 50px rgba(7, 104, 207, .014), 0 0 0 100px rgba(7, 104, 207, .009);
}

.lj-sell-guide-decoration-two {
  top: 38%;
  right: -230px;
  width: 520px;
  height: 520px;
  box-shadow: 0 0 0 60px rgba(7, 104, 207, .012), 0 0 0 120px rgba(7, 104, 207, .008);
}

/* =========================================================
   PAGE HEADING
========================================================= */

.lj-sell-guide-heading {
  width: min(100%, 930px);
  margin: 0 auto;
  text-align: center;
}

.lj-sell-guide-badge,
.lj-sell-video-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 15px;
  color: var(--sell-primary);
  background: var(--sell-primary-soft);
  border: 1px solid rgba(7, 104, 207, .13);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lj-sell-guide-badge i,
.lj-sell-video-badge i {
  font-size: 18px;
}

.lj-sell-guide-heading h1 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: clamp(58px, 7vw, 96px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
}

.lj-sell-guide-heading h1 span {
  /** display:block; **/
  color: var(--sell-primary);
  font-style: italic;
}

.lj-sell-guide-heading>p {
  width: min(100%, 780px);
  margin: 26px auto 0;
  color: var(--sell-text);
  font-size: 14px;
  line-height: 1.9;
}

.lj-sell-guide-heading-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 26px;
}

.lj-sell-guide-heading-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #013883;
  font-size: 10px;
  font-weight: 700;
}

.lj-sell-guide-heading-meta i {
  color: var(--sell-primary);
  font-size: 17px;
}

/* =========================================================
   INTRODUCTION CARD
========================================================= */

.lj-sell-guide-intro {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 65px;
  padding: 32px 35px;
  overflow: hidden;
  background: radial-gradient( circle at 100% 0, rgba(7, 104, 207, .06), transparent 30%), #FFFFFF;
  border: 1px solid var(--sell-border);
  border-radius: 12px;
  box-shadow: 0 25px 65px rgba(1, 52, 130, .08), 0 6px 20px rgba(7, 104, 207, .035);
}

.lj-sell-guide-intro::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient( 90deg, var(--sell-primary-dark), var(--sell-primary), #0687F1);
}

.lj-sell-guide-intro-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--sell-primary), var(--sell-primary-dark));
  border-radius: 50%;
  box-shadow: 0 15px 34px rgba(7, 104, 207, .23);
}

.lj-sell-guide-intro-icon i {
  font-size: 29px;
}

.lj-sell-guide-intro-content>span {
  display: block;
  margin-bottom: 6px;
  color: var(--sell-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-sell-guide-intro-content h2 {
  max-width: 750px;
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.08;
}

.lj-sell-guide-intro-content p {
  max-width: 780px;
  margin: 10px 0 0;
  color: var(--sell-text);
  font-size: 11px;
  line-height: 1.75;
}

.lj-sell-guide-intro-button,
.lj-sell-guide-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 23px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--sell-primary), var(--sell-primary-dark));
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(7, 104, 207, .23);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .3s ease, box-shadow .3s ease;
}

.lj-sell-guide-intro-button:hover,
.lj-sell-guide-cta-button:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 19px 38px rgba(7, 104, 207, .31);
}

.lj-sell-guide-intro-button i,
.lj-sell-guide-cta-button i {
  font-size: 17px;
  transition: transform .3s ease;
}

.lj-sell-guide-intro-button:hover i,
.lj-sell-guide-cta-button:hover i {
  transform: translateX(4px);
}

/* =========================================================
   PROCESS HEADING
========================================================= */

.lj-sell-guide-process {
  margin-top: 105px;
}

.lj-sell-guide-process-heading {
  width: min(100%, 800px);
  margin: 0 auto 55px;
  text-align: center;
}

.lj-sell-guide-process-heading>span {
  display: block;
  margin-bottom: 11px;
  color: var(--sell-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-sell-guide-process-heading h2 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: clamp(45px, 5vw, 67px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
}

.lj-sell-guide-process-heading h2 em {
  display: block;
  color: var(--sell-primary);
  font-weight: 700;
}

.lj-sell-guide-process-heading p {
  width: min(100%, 680px);
  margin: 17px auto 0;
  color: var(--sell-text);
  font-size: 12px;
  line-height: 1.8;
}

/* =========================================================
   TIMELINE
========================================================= */

.lj-sell-guide-timeline {
  position: relative;
  display: grid;
  gap: 22px;
  width: min(100%, 1050px);
  margin: 0 auto;
}

.lj-sell-guide-timeline::before {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 39px;
  width: 2px;
  content: "";
  background: linear-gradient( to bottom, rgba(7, 104, 207, .55), rgba(7, 104, 207, .12), rgba(7, 104, 207, .55));
}

.lj-sell-guide-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

.lj-sell-guide-step-marker {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(1, 52, 130, .08);
}

.lj-sell-guide-step-marker span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--sell-primary-dark));
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 700;
}

.lj-sell-guide-step-card {
  position: relative;
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: 22px;
  padding: 30px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--sell-border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .06);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.lj-sell-guide-step-card::after {
  position: absolute;
  top: -85px;
  right: -85px;
  width: 210px;
  height: 210px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .065), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .5s ease;
}

.lj-sell-guide-step:hover .lj-sell-guide-step-card {
  transform: translateY(-6px);
  border-color: rgba(7, 104, 207, .19);
  box-shadow: 0 26px 60px rgba(1, 52, 130, .09), 0 6px 18px rgba(7, 104, 207, .045);
}

.lj-sell-guide-step:hover .lj-sell-guide-step-card::after {
  transform: scale(1.18);
}

.lj-sell-guide-step-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  color: var(--sell-primary);
  background: var(--sell-primary-soft);
  border: 1px solid rgba(7, 104, 207, .11);
  border-radius: 50%;
  transition: color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.lj-sell-guide-step-icon i {
  font-size: 28px;
}

.lj-sell-guide-step:hover .lj-sell-guide-step-icon {
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--sell-primary), var(--sell-primary-dark));
  transform: rotate(-5deg) scale(1.05);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .20);
}

.lj-sell-guide-step-content {
  position: relative;
  z-index: 2;
}

.lj-sell-guide-step-label {
  display: block;
  margin-bottom: 5px;
  color: var(--sell-primary);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-sell-guide-step-content h3 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
}

.lj-sell-guide-step-content>p {
  max-width: 780px;
  margin: 11px 0 0;
  color: var(--sell-text);
  font-size: 11px;
  line-height: 1.78;
}

.lj-sell-guide-step-content ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 20px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.lj-sell-guide-step-content li {
  position: relative;
  padding-left: 17px;
  color: #013883;
  font-size: 9px;
  font-weight: 650;
}

.lj-sell-guide-step-content li::before {
  position: absolute;
  top: 2px;
  left: 0;
  content: "\ea41";
  color: var(--sell-primary);
  font-family: var(--font-body);
  font-size: 13px;
}

/* =========================================================
   SELLER CTA
========================================================= */

.lj-sell-guide-cta {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 25px;
  margin-top: 85px;
  padding: 42px 45px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 15% 25%, rgba(255, 255, 255, .14), transparent 25%), linear-gradient( 135deg, #013482, #013883 45%, var(--sell-primary));
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(1, 52, 130, .20);
  isolation: isolate;
}

.lj-sell-guide-cta-decoration {
  position: absolute;
  z-index: -1;
  right: -130px;
  bottom: -210px;
  width: 450px;
  height: 450px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(255, 255, 255, .02), 0 0 0 100px rgba(255, 255, 255, .014);
}

.lj-sell-guide-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
  border-radius: 50%;
  box-shadow: 0 16px 35px rgba(1, 52, 130, .14);
}

.lj-sell-guide-cta-icon i {
  font-size: 31px;
}

.lj-sell-guide-cta-content>span {
  display: block;
  margin-bottom: 7px;
  color: #4AB3FC;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-sell-guide-cta-content h2 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
}

.lj-sell-guide-cta-content p {
  max-width: 690px;
  margin: 11px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 10px;
  line-height: 1.75;
}

.lj-sell-guide-cta-button {
  color: var(--sell-primary);
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(1, 52, 130, .14);
}

.lj-sell-guide-cta-button:hover {
  color: var(--sell-primary-dark);
  background: #F6FBFD;
  box-shadow: 0 19px 38px rgba(1, 52, 130, .20);
}

/* =========================================================
   VIDEO SECTION
========================================================= */

.lj-sell-video-section {
  position: relative;
  padding: 105px 0 115px;
  overflow: hidden;
  background: radial-gradient( circle at 50% 5%, rgba(7, 104, 207, .045), transparent 30%), var(--sell-light);
}

.lj-sell-video-heading {
  width: min(100%, 800px);
  margin: 0 auto 45px;
  text-align: center;
}

.lj-sell-video-heading h2 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
}

.lj-sell-video-heading h2 em {
  /***display:block;***/
  color: var(--sell-primary);
  font-weight: 700;
}

.lj-sell-video-heading>p {
  width: min(100%, 690px);
  margin: 17px auto 0;
  color: var(--sell-text);
  font-size: 12px;
  line-height: 1.82;
}

.lj-sell-video-card {
  width: min(100%, 1100px);
  margin: 0 auto;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--sell-border);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(1, 52, 130, .12), 0 8px 25px rgba(7, 104, 207, .04);
}

.lj-sell-video-frame {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: linear-gradient( 135deg, #013482, #013482);
}

.lj-sell-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lj-sell-video-information {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 35px;
  padding: 32px 38px;
}

.lj-sell-video-information-main>span {
  display: block;
  margin-bottom: 6px;
  color: var(--sell-primary);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-sell-video-information-main h3 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
}

.lj-sell-video-information-main p {
  max-width: 660px;
  margin: 9px 0 0;
  color: var(--sell-text);
  font-size: 10px;
  line-height: 1.72;
}

.lj-sell-video-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 390px;
}

.lj-sell-video-features span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  color: #013883;
  background: var(--sell-soft);
  border: 1px solid #6F8DA8;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

.lj-sell-video-features i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #FFFFFF;
  background: var(--sell-primary);
  border-radius: 50%;
  font-size: 12px;
}

/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

.lj-sell-guide-heading>*,
.lj-sell-guide-intro,
.lj-sell-guide-process-heading,
.lj-sell-guide-step,
.lj-sell-guide-cta,
.lj-sell-video-heading,
.lj-sell-video-card {
  opacity: 0;
  transform: translateY(25px);
  animation: ljSellGuideReveal .8s ease forwards;
}

.lj-sell-guide-heading> :nth-child(1) {
  animation-delay: .05s;
}

.lj-sell-guide-heading> :nth-child(2) {
  animation-delay: .12s;
}

.lj-sell-guide-heading> :nth-child(3) {
  animation-delay: .19s;
}

.lj-sell-guide-heading> :nth-child(4) {
  animation-delay: .26s;
}

.lj-sell-guide-intro {
  animation-delay: .20s;
}

.lj-sell-guide-process-heading {
  animation-delay: .10s;
}

.lj-sell-guide-step:nth-child(1) {
  animation-delay: .10s;
}

.lj-sell-guide-step:nth-child(2) {
  animation-delay: .16s;
}

.lj-sell-guide-step:nth-child(3) {
  animation-delay: .22s;
}

.lj-sell-guide-step:nth-child(4) {
  animation-delay: .28s;
}

.lj-sell-guide-step:nth-child(5) {
  animation-delay: .34s;
}

.lj-sell-guide-step:nth-child(6) {
  animation-delay: .40s;
}

.lj-sell-guide-step:nth-child(7) {
  animation-delay: .46s;
}

.lj-sell-guide-step:nth-child(8) {
  animation-delay: .52s;
}

.lj-sell-video-card {
  animation-delay: .15s;
}

@keyframes ljSellGuideReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   TABLET RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-sell-guide-intro {
    grid-template-columns: 62px minmax(0, 1fr);
  }
  .lj-sell-guide-intro-button {
    grid-column: 2;
    justify-self: start;
  }
  .lj-sell-guide-cta {
    grid-template-columns: 65px minmax(0, 1fr);
  }
  .lj-sell-guide-cta-button {
    grid-column: 2;
    justify-self: start;
  }
  .lj-sell-video-information {
    grid-template-columns: 1fr;
  }
  .lj-sell-video-features {
    justify-content: flex-start;
    max-width: none;
  }
}

@media(max-width:991.98px) {
  .lj-sell-guide-main {
    padding: 85px 0 90px;
  }
  .lj-sell-guide-process {
    margin-top: 85px;
  }
  .lj-sell-video-section {
    padding: 85px 0 95px;
  }
  .lj-sell-guide-timeline {
    width: 100%;
  }
}

/* =========================================================
   MOBILE RESPONSIVENESS
========================================================= */

@media(max-width:767.98px) {
  .lj-sell-guide-main {
    padding: 70px 0 75px;
  }
  .lj-sell-guide-heading h1 {
    font-size: clamp(52px, 14vw, 72px);
  }
  .lj-sell-guide-heading>p {
    font-size: 12px;
  }
  .lj-sell-guide-heading-meta {
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }
  .lj-sell-guide-intro {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    text-align: center;
  }
  .lj-sell-guide-intro-icon {
    margin: 0 auto;
  }
  .lj-sell-guide-intro-button {
    grid-column: auto;
    justify-self: center;
  }
  .lj-sell-guide-process-heading {
    margin-bottom: 42px;
  }
  .lj-sell-guide-timeline::before {
    left: 29px;
  }
  .lj-sell-guide-step {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 15px;
  }
  .lj-sell-guide-step-marker {
    width: 60px;
    height: 60px;
    padding: 6px;
  }
  .lj-sell-guide-step-marker span {
    font-size: 18px;
  }
  .lj-sell-guide-step-card {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 25px 21px;
  }
  .lj-sell-guide-step-icon {
    width: 56px;
    height: 56px;
  }
  .lj-sell-guide-step-icon i {
    font-size: 24px;
  }
  .lj-sell-guide-step-content ul {
    display: grid;
    gap: 8px;
  }
  .lj-sell-guide-cta {
    grid-template-columns: 1fr;
    padding: 35px 28px;
    text-align: center;
  }
  .lj-sell-guide-cta-icon {
    margin: 0 auto;
  }
  .lj-sell-guide-cta-button {
    grid-column: auto;
    justify-self: center;
  }
  .lj-sell-video-section {
    padding: 70px 0 80px;
  }
  .lj-sell-video-information {
    padding: 27px 24px;
  }
  .lj-sell-video-information-main {
    text-align: center;
  }
  .lj-sell-video-features {
    justify-content: center;
  }
}

@media(max-width:575.98px) {
  .lj-sell-guide-main {
    padding: 58px 0 65px;
  }
  .lj-sell-guide-heading h1 {
    font-size: clamp(46px, 14vw, 62px);
  }
  .lj-sell-guide-heading>p {
    font-size: 11px;
    line-height: 1.8;
  }
  .lj-sell-guide-intro {
    margin-top: 45px;
    padding: 25px 17px;
    border-radius: 8px;
  }
  .lj-sell-guide-intro-content h2 {
    font-size: 30px;
  }
  .lj-sell-guide-process {
    margin-top: 68px;
  }
  .lj-sell-guide-process-heading h2 {
    font-size: 41px;
  }
  .lj-sell-guide-timeline::before {
    display: none;
  }
  .lj-sell-guide-step {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lj-sell-guide-step-marker {
    width: 57px;
    height: 57px;
    margin-left: 14px;
  }
  .lj-sell-guide-step-card {
    padding: 23px 17px;
    border-radius: 8px;
  }
  .lj-sell-guide-step-content h3 {
    font-size: 27px;
  }
  .lj-sell-guide-step-content>p {
    font-size: 10px;
  }
  .lj-sell-guide-cta {
    margin-top: 60px;
    padding: 31px 19px;
    border-radius: 8px;
  }
  .lj-sell-guide-cta-content h2 {
    font-size: 35px;
  }
  .lj-sell-video-section {
    padding: 60px 0 70px;
  }
  .lj-sell-video-heading h2 {
    font-size: 43px;
  }
  .lj-sell-video-card {
    border-radius: 8px;
  }
  .lj-sell-video-information {
    padding: 24px 17px;
  }
  .lj-sell-video-information-main h3 {
    font-size: 28px;
  }
  .lj-sell-video-features {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .lj-sell-video-features span {
    justify-content: flex-start;
    width: 100%;
    border-radius: 5px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-sell-guide-heading>*,
  .lj-sell-guide-intro,
  .lj-sell-guide-process-heading,
  .lj-sell-guide-step,
  .lj-sell-guide-cta,
  .lj-sell-video-heading,
  .lj-sell-video-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-sell-guide-step-card,
  .lj-sell-guide-step-card::after,
  .lj-sell-guide-step-icon,
  .lj-sell-guide-intro-button,
  .lj-sell-guide-cta-button {
    transition: none;
  }
}

/**************************************how to sell ends*****************/

/*************************** PACKAGES***********************************/

/* =========================================================
   LINJUST SUBSCRIPTION PACKAGES
========================================================= */

.lj-subscription-page {
  --subscription-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --subscription-primary-dark: var( --color-primary-dark, #013883);
  --subscription-title: var( --color-title, var(--titleColor, #013482));
  --subscription-text: var( --color-text, var(--paraColor, #082E5C));
  --subscription-white: var( --color-white, #FFFFFF);
  --subscription-light: var( --color-off-white, #F6FBFD);
  --subscription-soft: #F6FBFD;
  --subscription-border: var( --color-border, #6F8DA8);
  --subscription-font-body: var( --font-body, "Inter", sans-serif);
  --subscription-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--subscription-text);
  background: var(--subscription-white);
  font-family: var(--font-body);
}

.lj-subscription-page *,
.lj-subscription-page *::before,
.lj-subscription-page *::after {
  box-sizing: border-box;
}

.lj-subscription-page a {
  text-decoration: none;
}

/* =========================================================
   SECTION
========================================================= */

.lj-subscription-section {
  position: relative;
  padding: 60px 0 65px;
  overflow: hidden;
  background: radial-gradient( circle at 8% 12%, rgba(7, 104, 207, .055), transparent 23%), radial-gradient( circle at 92% 40%, rgba(7, 104, 207, .035), transparent 27%), linear-gradient( to bottom, #FFFFFF, #F6FBFD 50%, #FFFFFF);
  isolation: isolate;
}

.lj-subscription-decoration {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(7, 104, 207, .07);
  border-radius: 50%;
  pointer-events: none;
}

.lj-subscription-decoration-one {
  top: -190px;
  left: -190px;
  width: 450px;
  height: 450px;
  box-shadow: 0 0 0 55px rgba(7, 104, 207, .013), 0 0 0 110px rgba(7, 104, 207, .008);
}

.lj-subscription-decoration-two {
  right: -240px;
  bottom: 10%;
  width: 530px;
  height: 530px;
  box-shadow: 0 0 0 65px rgba(7, 104, 207, .011), 0 0 0 130px rgba(7, 104, 207, .007);
}

/* =========================================================
   HEADING
========================================================= */

.lj-subscription-heading {
  width: min(100%, 930px);
  margin: 0 auto;
  text-align: center;
}

.lj-subscription-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 15px;
  color: var(--subscription-primary);
  background: rgba(7, 104, 207, .065);
  border: 1px solid rgba(7, 104, 207, .13);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lj-subscription-badge i {
  font-size: 18px;
}

.lj-subscription-heading h1 {
  margin: 0;
  color: var(--subscription-title);
  font-family: var(--font-body);
  font-size: clamp(53px, 6vw, 86px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.05em;
}

.lj-subscription-heading h1 span {
  /*** display:block; ***/
  color: var(--subscription-primary);
  font-style: italic;
}

.lj-subscription-heading p {
  width: min(100%, 760px);
  margin: 25px auto 0;
  color: var(--subscription-text);
  font-size: 13px;
  line-height: 1.9;
}

/* =========================================================
   SUBSCRIPTION TABS
========================================================= */

.lj-subscription-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 850px);
  margin: 55px auto 0;
  padding: 9px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--subscription-border);
  border-radius: 12px;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.lj-subscription-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 65px;
  padding: 10px 14px;
  overflow: hidden;
  color: #013883;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.lj-subscription-tab::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}

.lj-subscription-tab:hover::before {
  left: 130%;
}

.lj-subscription-tab:hover {
  color: var(--subscription-primary);
  background: var(--subscription-soft);
  border-color: rgba(7, 104, 207, .10);
}

.lj-subscription-tab.active {
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--subscription-primary) 50%, var(--subscription-primary-dark));
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 13px 30px rgba(7, 104, 207, .24);
  transform: translateY(-2px);
}

.lj-subscription-tab>i {
  flex: 0 0 auto;
  font-size: 22px;
}

.lj-subscription-tab span {
  display: block;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.lj-subscription-tab small {
  display: block;
  margin-bottom: 3px;
  color: inherit;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .08em;
  opacity: .68;
  text-transform: uppercase;
}

.lj-subscription-selected-period {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 17px;
  color: #0768CF;
  font-size: 10px;
}

.lj-subscription-selected-period i {
  color: var(--subscription-primary);
  font-size: 16px;
}

.lj-subscription-selected-period p {
  margin: 0;
}

.lj-subscription-selected-period strong {
  color: var(--subscription-title);
}

/* =========================================================
   PACKAGES GRID
========================================================= */

.lj-subscription-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin-top: 50px;
}

/* =========================================================
   PACKAGE CARD
========================================================= */

.lj-subscription-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: 29px 23px 24px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--subscription-border);
  border-radius: 12px;
  box-shadow: 0 19px 50px rgba(1, 52, 130, .07), 0 5px 16px rgba(7, 104, 207, .025);
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
  isolation: isolate;
}

.lj-subscription-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient( 90deg, var(--subscription-primary-dark), var(--subscription-primary), #0687F1);
}

.lj-subscription-card::after {
  position: absolute;
  z-index: -1;
  top: -115px;
  right: -115px;
  width: 250px;
  height: 250px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .075), transparent 70%);
  border-radius: 50%;
  transition: transform .55s ease;
}

.lj-subscription-card:hover {
  transform: translateY(-11px);
  border-color: rgba(7, 104, 207, .20);
  box-shadow: 0 32px 75px rgba(1, 52, 130, .12), 0 8px 22px rgba(7, 104, 207, .055);
}

.lj-subscription-card:hover::after {
  transform: scale(1.2) translate(-5px, 5px);
}

.lj-subscription-card-shine {
  position: absolute;
  top: 0;
  left: -130%;
  width: 80%;
  height: 100%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .48), transparent);
  pointer-events: none;
  transform: skewX(-20deg);
  transition: left .9s ease;
}

.lj-subscription-card:hover .lj-subscription-card-shine {
  left: 145%;
}

/* Featured package */

.lj-subscription-card-featured {
  color: rgba(255, 255, 255, .78);
  background: radial-gradient( circle at 85% 5%, rgba(255, 255, 255, .14), transparent 25%), linear-gradient( 145deg, #013482, #013883 47%, var(--subscription-primary));
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 27px 70px rgba(1, 52, 130, .22);
  transform: translateY(-14px);
}

.lj-subscription-card-featured::before {
  background: linear-gradient( 90deg, #4AB3FC, #FFFFFF, #4AB3FC);
}

.lj-subscription-card-featured::after {
  background: radial-gradient( circle, rgba(255, 255, 255, .14), transparent 70%);
}

.lj-subscription-card-featured:hover {
  transform: translateY(-22px);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 38px 85px rgba(1, 52, 130, .28);
}

.lj-subscription-popular-label {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  color: #013883;
  background: linear-gradient( 135deg, #FFFFFF, #A1D7FB);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(1, 52, 130, .12);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-subscription-popular-label i {
  font-size: 13px;
}

/* =========================================================
   CARD HEADER
========================================================= */

.lj-subscription-card-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 0;
}

.lj-subscription-card-featured .lj-subscription-card-header {
  padding-top: 25px;
}

.lj-subscription-package-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 53px;
  width: 53px;
  height: 53px;
  color: var(--subscription-primary);
  background: rgba(7, 104, 207, .07);
  border: 1px solid rgba(7, 104, 207, .11);
  border-radius: 50%;
  transition: color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.lj-subscription-package-icon i {
  font-size: 24px;
}

.lj-subscription-card:hover .lj-subscription-package-icon {
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--subscription-primary), var(--subscription-primary-dark));
  transform: rotate(-6deg) scale(1.05);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .22);
}

.lj-subscription-card-featured .lj-subscription-package-icon {
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #A1D7FB);
  border-color: rgba(255, 255, 255, .32);
}

.lj-subscription-package-title span {
  display: block;
  margin-bottom: 4px;
  color: var(--subscription-primary);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-subscription-package-title h2 {
  margin: 0;
  color: var(--subscription-title);
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.lj-subscription-card-featured .lj-subscription-package-title span {
  color: #4AB3FC;
}

.lj-subscription-card-featured .lj-subscription-package-title h2 {
  color: #FFFFFF;
}

.lj-subscription-package-description {
  position: relative;
  z-index: 2;
  min-height: 69px;
  margin: 20px 0 0;
  color: var(--subscription-text);
  font-size: 9px;
  line-height: 1.72;
}

.lj-subscription-card-featured .lj-subscription-package-description {
  color: rgba(255, 255, 255, .70);
}

/* =========================================================
   PRICE
========================================================= */

.lj-subscription-price {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 22px;
  color: var(--subscription-title);
}

.lj-subscription-currency {
  align-self: flex-start;
  margin-top: 8px;
  margin-right: 3px;
  color: var(--subscription-primary);
  font-size: 18px;
  font-weight: 800;
}

.lj-subscription-price-value {
  font-family: var(--font-body);
  font-size: 43px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  transition: opacity .22s ease, transform .22s ease;
}

.lj-subscription-price-value.is-changing {
  opacity: 0;
  transform: translateY(8px);
}

.lj-subscription-price-period {
  margin: 0 0 3px 6px;
  color: var(--subscription-text);
  font-size: 8px;
  font-weight: 700;
}

.lj-subscription-card-featured .lj-subscription-price {
  color: #FFFFFF;
}

.lj-subscription-card-featured .lj-subscription-currency {
  color: #4AB3FC;
}

.lj-subscription-card-featured .lj-subscription-price-period {
  color: rgba(255, 255, 255, .62);
}

.lj-subscription-divider {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 1px;
  margin: 25px 0 22px;
  background: linear-gradient( 90deg, transparent, var(--subscription-border), transparent);
}

.lj-subscription-card-featured .lj-subscription-divider {
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .25), transparent);
}

/* =========================================================
   FEATURES
========================================================= */

.lj-subscription-features {
  position: relative;
  z-index: 2;
}

.lj-subscription-feature-label {
  display: block;
  margin-bottom: 14px;
  color: var(--subscription-title);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.lj-subscription-card-featured .lj-subscription-feature-label {
  color: #FFFFFF;
}

.lj-subscription-features ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lj-subscription-features li {
  position: relative;
  min-height: 18px;
  padding-left: 26px;
  color: #013883;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.55;
}

.lj-subscription-features li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  content: "\ea41";
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--subscription-primary), var(--subscription-primary-dark));
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 12px;
  box-shadow: 0 5px 12px rgba(7, 104, 207, .14);
}

.lj-subscription-card-featured .lj-subscription-features li {
  color: rgba(255, 255, 255, .78);
}

.lj-subscription-card-featured .lj-subscription-features li::before {
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
}

/* Hidden features */

.lj-subscription-features li.lj-feature-hidden {
  display: none;
}

/* =========================================================
   READ MORE BUTTON
========================================================= */

.lj-subscription-toggle {
  position: relative;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 9px;
  width: max-content;
  margin: 18px 0 0;
  padding: 0;
  color: var(--subscription-primary);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
  cursor: pointer;
  text-transform: uppercase;
}

.lj-subscription-toggle.visible {
  display: flex;
}

.lj-subscription-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--subscription-primary);
  background: rgba(7, 104, 207, .035);
  border: 1px dashed rgba(7, 104, 207, .55);
  border-radius: 50%;
  transition: color .3s ease, background .3s ease, transform .3s ease;
}

.lj-subscription-toggle-icon i {
  font-size: 17px;
}

.lj-subscription-toggle:hover .lj-subscription-toggle-icon {
  color: #FFFFFF;
  background: var(--subscription-primary);
  transform: rotate(90deg);
}

.lj-subscription-card-featured .lj-subscription-toggle {
  color: #4AB3FC;
}

.lj-subscription-card-featured .lj-subscription-toggle-icon {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .55);
}

.lj-subscription-card-featured .lj-subscription-toggle:hover .lj-subscription-toggle-icon {
  color: #013883;
  background: #FFFFFF;
}

/* =========================================================
   GET STARTED BUTTON
========================================================= */

.lj-subscription-button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  margin-top: 27px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--subscription-primary) 50%, var(--subscription-primary-dark));
  border-radius: 5px;
  box-shadow: 0 15px 32px rgba(7, 104, 207, .22);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease;
}

.lj-subscription-button::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: skewX(-20deg);
  transition: left .75s ease;
}

.lj-subscription-button:hover::before {
  left: 130%;
}

.lj-subscription-button:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 21px 41px rgba(7, 104, 207, .31);
}

.lj-subscription-button span,
.lj-subscription-button i {
  position: relative;
  z-index: 2;
}

.lj-subscription-button i {
  font-size: 17px;
  transition: transform .3s ease;
}

.lj-subscription-button:hover i {
  transform: translateX(4px);
}

.lj-subscription-card-featured .lj-subscription-button {
  color: var(--subscription-primary-dark);
  background: linear-gradient( 135deg, #FFFFFF, #A1D7FB);
  box-shadow: 0 15px 32px rgba(1, 52, 130, .14);
}

.lj-subscription-card-featured .lj-subscription-button:hover {
  color: var(--subscription-primary-dark);
  box-shadow: 0 21px 41px rgba(1, 52, 130, .20);
}

/* =========================================================
   SUBSCRIPTION NOTE
========================================================= */

.lj-subscription-note {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 45px;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid var(--subscription-border);
  border-radius: 9px;
  box-shadow: 0 15px 40px rgba(1, 52, 130, .055);
}

.lj-subscription-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  color: var(--subscription-primary);
  background: rgba(7, 104, 207, .065);
  border-radius: 50%;
}

.lj-subscription-note-icon i {
  font-size: 25px;
}

.lj-subscription-note h3 {
  margin: 0 0 5px;
  color: var(--subscription-title);
  font-size: 12px;
  font-weight: 850;
}

.lj-subscription-note p {
  max-width: 780px;
  margin: 0;
  color: var(--subscription-text);
  font-size: 9px;
  line-height: 1.7;
}

.lj-subscription-note>a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--subscription-primary);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lj-subscription-note>a i {
  font-size: 17px;
  transition: transform .3s ease;
}

.lj-subscription-note>a:hover i {
  transform: translateX(4px);
}

/* =========================================================
   ANIMATIONS
========================================================= */

.lj-subscription-heading>*,
.lj-subscription-tabs,
.lj-subscription-selected-period,
.lj-subscription-card,
.lj-subscription-note {
  opacity: 0;
  transform: translateY(24px);
  animation: ljSubscriptionReveal .8s ease forwards;
}

.lj-subscription-heading> :nth-child(1) {
  animation-delay: .05s;
}

.lj-subscription-heading> :nth-child(2) {
  animation-delay: .12s;
}

.lj-subscription-heading> :nth-child(3) {
  animation-delay: .19s;
}

.lj-subscription-tabs {
  animation-delay: .24s;
}

.lj-subscription-selected-period {
  animation-delay: .30s;
}

.lj-subscription-card:nth-child(1) {
  animation-delay: .12s;
}

.lj-subscription-card:nth-child(2) {
  animation-delay: .20s;
}

.lj-subscription-card:nth-child(3) {
  animation-delay: .28s;
}

.lj-subscription-card:nth-child(4) {
  animation-delay: .36s;
}

.lj-subscription-note {
  animation-delay: .25s;
}

@keyframes ljSubscriptionReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1199.98px) {
  .lj-subscription-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lj-subscription-card-featured {
    transform: none;
  }
  .lj-subscription-card-featured:hover {
    transform: translateY(-11px);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-subscription-section {
    padding: 85px 0 95px;
  }
  .lj-subscription-tabs {
    width: min(100%, 720px);
  }
  .lj-subscription-note {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .lj-subscription-note>a {
    grid-column: 2;
    justify-self: start;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-subscription-section {
    padding: 70px 0 80px;
  }
  .lj-subscription-heading h1 {
    font-size: clamp(48px, 13vw, 65px);
  }
  .lj-subscription-heading p {
    font-size: 11px;
  }
  .lj-subscription-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 42px;
  }
  .lj-subscription-grid {
    grid-template-columns: 1fr;
    width: min(100%, 560px);
    margin-right: auto;
    margin-left: auto;
  }
  .lj-subscription-card {
    padding: 28px 24px 24px;
  }
  .lj-subscription-package-description {
    min-height: auto;
  }
}

@media(max-width:575.98px) {
  .lj-subscription-section {
    padding: 58px 0 68px;
  }
  .lj-subscription-heading h1 {
    font-size: clamp(43px, 13vw, 58px);
  }
  .lj-subscription-tabs {
    gap: 8px;
    padding: 7px;
    border-radius: 9px;
  }
  .lj-subscription-tab {
    min-height: 59px;
    gap: 7px;
    padding: 8px 9px;
  }
  .lj-subscription-tab>i {
    font-size: 19px;
  }
  .lj-subscription-tab span {
    font-size: 9px;
  }
  .lj-subscription-selected-period {
    align-items: flex-start;
    text-align: center;
  }
  .lj-subscription-grid {
    margin-top: 38px;
  }
  .lj-subscription-card {
    padding: 26px 18px 21px;
    border-radius: 9px;
  }
  .lj-subscription-package-title h2 {
    font-size: 31px;
  }
  .lj-subscription-price-value {
    font-size: 40px;
  }
  .lj-subscription-note {
    grid-template-columns: 1fr;
    padding: 23px 19px;
    text-align: center;
  }
  .lj-subscription-note-icon {
    margin: 0 auto;
  }
  .lj-subscription-note>a {
    grid-column: auto;
    justify-self: center;
  }
}

@media(max-width:380px) {
  .lj-subscription-tabs {
    grid-template-columns: 1fr;
  }
  .lj-subscription-tab {
    justify-content: flex-start;
    padding-right: 18px;
    padding-left: 18px;
  }
  .lj-subscription-card-header {
    align-items: flex-start;
  }
  .lj-subscription-popular-label {
    position: relative;
    top: auto;
    right: auto;
    width: max-content;
    margin: 0 0 17px;
  }
  .lj-subscription-card-featured .lj-subscription-card-header {
    padding-top: 0;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-subscription-heading>*,
  .lj-subscription-tabs,
  .lj-subscription-selected-period,
  .lj-subscription-card,
  .lj-subscription-note {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-subscription-tab,
  .lj-subscription-tab::before,
  .lj-subscription-card,
  .lj-subscription-card::after,
  .lj-subscription-card-shine,
  .lj-subscription-package-icon,
  .lj-subscription-toggle-icon,
  .lj-subscription-button,
  .lj-subscription-button::before,
  .lj-subscription-price-value {
    transition: none;
  }
}

/*****************************JOB LISTING CSS***********************************
/* LinJust job listing page — page-specific CSS only */

.lj-jobs-page {
  --jobs-primary: var(--colorPrimary, var(--color-primary, #0768CF));
  --jobs-primary-dark: var(--colorPrimaryDark, var(--color-primary-dark, #013883));
  --jobs-title: var(--titleColor, var(--color-title, #013482));
  --jobs-text: var(--paraColor, var(--color-text, #082E5C));
  --jobs-white: var(--whiteColor, var(--color-white, #FFFFFF));
  --jobs-light: var(--sectionBg, var(--color-off-white, #F6FBFD));
  --jobs-border: var(--borderColor, var(--color-border, #6F8DA8));
  --jobs-success: #0687F1;
  --jobs-danger: #0768CF;
  --jobs-font-body: var(--bodyFont, var(--font-body, "Inter", sans-serif));
  --jobs-font-display: var(--headingFont, var(--font-heading, "Cormorant Garamond", serif));
  color: var(--jobs-text);
  background: var(--jobs-white);
  font-family: var(--jobs-font-body)
}

.lj-jobs-page *,
.lj-jobs-page *::before,
.lj-jobs-page *::after {
  box-sizing: border-box
}

.lj-jobs-page a {
  text-decoration: none
}

.lj-jobs-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 330px;
  max-height: 500px;
  padding: 48px 0;
  overflow: hidden;
  color: #FFFFFF;
  isolation: isolate
}

.lj-jobs-hero-bg,
.lj-jobs-hero-overlay,
.lj-jobs-hero-pattern {
  position: absolute;
  inset: 0
}

.lj-jobs-hero-bg {
  z-index: -4;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.03)
}

.lj-jobs-hero-overlay {
  z-index: -3
}

.lj-jobs-hero-pattern {
  z-index: -2;
  opacity: .22;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to right, #013482, transparent 90%)
}

.lj-jobs-hero::after {
  position: absolute;
  right: -150px;
  bottom: -245px;
  z-index: -1;
  width: 530px;
  height: 530px;
  content: "";
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .016)
}

.lj-jobs-hero-content {
  width: min(100%, 930px)
}

.lj-jobs-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 14px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase
}

.lj-jobs-hero-badge i {
  color: #4AB3FC;
  font-size: 18px
}

.lj-jobs-hero-title {
  min-height: 116px;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(50px, 6vw, 80px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance
}

.lj-jobs-type-caret {
  display: inline-block;
  width: 3px;
  height: .85em;
  margin-left: 5px;
  vertical-align: -.08em;
  background: #4AB3FC;
  animation: ljJobsCaret .8s steps(1) infinite
}

.lj-jobs-hero-content>p {
  max-width: 720px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.8
}

.lj-jobs-hero-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 930px);
  min-height: 68px;
  margin-top: 27px;
  padding: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: 10px;
  box-shadow: 0 22px 55px rgba(1, 52, 130, .22);
  backdrop-filter: blur(18px)
}

.lj-jobs-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  color: var(--jobs-primary);
  font-size: 23px
}

.lj-jobs-hero-search input {
  min-width: 0;
  flex: 1;
  height: 52px;
  padding: 0 12px 0 0;
  color: var(--jobs-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-body);
  font-size: 13px
}

.lj-jobs-hero-search input::placeholder {
  color: #355A7D
}

.lj-jobs-hero-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 158px;
  height: 52px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0687F1, var(--jobs-primary) 52%, var(--jobs-primary-dark));
  border: 0;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(7, 104, 207, .25);
  font: 850 9px var(--jobs-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer
}

.lj-jobs-hero-search button i {
  font-size: 18px;
  transition: transform .3s
}

.lj-jobs-hero-search button:hover i {
  transform: translateX(4px)
}

.lj-jobs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 22px;
  margin-top: 21px
}

.lj-jobs-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .74);
  font-size: 9px;
  font-weight: 700
}

.lj-jobs-hero-meta i {
  color: #4AB3FC;
  font-size: 16px
}

.lj-jobs-content-section {
  position: relative;
  padding: 75px 0 95px;
  background: radial-gradient(circle at 8% 8%, rgba(7, 104, 207, .035), transparent 23%), var(--jobs-light)
}

.lj-jobs-layout {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  align-items: start;
  gap: 28px
}

.lj-jobs-mobile-actions {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px
}

.lj-jobs-mobile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jobs-primary), var(--jobs-primary-dark));
  border: 0;
  border-radius: 6px;
  box-shadow: 0 12px 26px rgba(7, 104, 207, .20);
  font: 800 10px var(--jobs-font-body);
  text-transform: uppercase
}

.lj-jobs-mobile-filter-btn i {
  font-size: 19px
}

.lj-jobs-mobile-filter-btn strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  color: var(--jobs-primary);
  background: #FFFFFF;
  border-radius: 999px;
  font-size: 9px
}

.lj-jobs-mobile-result-count {
  text-align: right
}

.lj-jobs-mobile-result-count strong {
  display: block;
  color: var(--jobs-title);
  font: 700 25px/0.9 var(--jobs-font-display)
}

.lj-jobs-mobile-result-count span {
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase
}

.lj-jobs-hero-content {
  margin: 10px auto;
  text-align: center;
}

.lj-jobs-sidebar {
  position: sticky;
  top: 100px;
  z-index: 40;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 10px;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .075)
}

.lj-jobs-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 24px 22px 18px;
  border-bottom: 1px solid var(--jobs-border)
}

.lj-jobs-sidebar-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--jobs-primary);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase
}

.lj-jobs-sidebar-head h3 {
  margin: 0;
  color: var(--jobs-title);
  font: 700 28px/1 var(--jobs-font-display)
}

.lj-jobs-sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--jobs-title);
  background: #F6FBFD;
  border: 1px solid var(--jobs-border);
  border-radius: 50%;
  font-size: 22px
}

.lj-jobs-sidebar-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
  color: #0768CF;
  background: #F6FBFD;
  border-bottom: 1px solid var(--jobs-border);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-jobs-sidebar-summary span {
  display: flex;
  align-items: center;
  gap: 6px
}

.lj-jobs-sidebar-summary i {
  color: var(--jobs-primary);
  font-size: 15px
}

.lj-jobs-sidebar-summary strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  color: #FFFFFF;
  background: var(--jobs-primary);
  border-radius: 50%;
  font-size: 9px
}

.lj-jobs-filter-group {
  border-bottom: 1px solid var(--jobs-border)
}

.lj-jobs-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 55px;
  padding: 13px 21px;
  color: var(--jobs-title);
  background: #FFFFFF;
  border: 0;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left
}

.lj-jobs-filter-heading>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 850
}

.lj-jobs-filter-heading>span i {
  color: var(--jobs-primary);
  font-size: 18px
}

.lj-jobs-filter-heading>i {
  color: var(--jobs-primary);
  font-size: 17px
}

.lj-jobs-filter-body {
  display: none;
  padding: 0 21px 18px
}

.lj-jobs-filter-group.active .lj-jobs-filter-body {
  display: block
}

.lj-jobs-check {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  cursor: pointer
}

.lj-jobs-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.lj-jobs-check-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 1px solid #6F8DA8;
  border-radius: 4px;
  transition: .25s
}

.lj-jobs-check-box i {
  opacity: 0;
  font-size: 14px;
  transform: scale(.5);
  transition: .2s
}

.lj-jobs-check input:checked+.lj-jobs-check-box {
  background: var(--jobs-primary);
  border-color: var(--jobs-primary);
  box-shadow: 0 5px 12px rgba(7, 104, 207, .18)
}

.lj-jobs-check input:checked+.lj-jobs-check-box i {
  opacity: 1;
  transform: scale(1)
}

.lj-jobs-check-label {
  color: #0768CF;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35
}

.lj-jobs-check small {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 23px;
  height: 21px;
  padding: 0 5px;
  color: #0687F1;
  background: #D5EAF8;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800
}

.lj-jobs-clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 42px);
  min-height: 45px;
  margin: 20px 21px;
  color: var(--jobs-primary);
  background: #F6FBFD;
  border: 1px dashed rgba(7, 104, 207, .35);
  border-radius: 5px;
  font: 850 8px var(--jobs-font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s
}

.lj-jobs-clear-filters:hover {
  color: #FFFFFF;
  background: var(--jobs-primary);
  border-style: solid
}

.lj-jobs-clear-filters i {
  font-size: 17px
}

.lj-jobs-drawer-backdrop {
  display: none
}

.lj-jobs-main {
  min-width: 0
}

.lj-jobs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 9px;
  box-shadow: 0 14px 40px rgba(1, 52, 130, .055)
}

.lj-jobs-location-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(145px, 1fr));
  gap: 10px;
  flex: 1
}

.lj-jobs-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0
}

.lj-jobs-select-wrap>i:first-child {
  position: absolute;
  left: 13px;
  z-index: 2;
  color: var(--jobs-primary);
  font-size: 17px;
  pointer-events: none
}

.lj-jobs-select-wrap>i:last-child {
  position: absolute;
  right: 11px;
  color: #0687F1;
  font-size: 18px;
  pointer-events: none
}

.lj-jobs-select-wrap select {
  width: 100%;
  height: 47px;
  padding: 0 37px;
  color: #013883;
  background: #F6FBFD;
  border: 1px solid var(--jobs-border);
  border-radius: 5px;
  outline: 0;
  appearance: none;
  font: 700 9px var(--jobs-font-body);
  cursor: pointer
}

.lj-jobs-select-wrap select:focus {
  border-color: rgba(7, 104, 207, .42);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .055)
}

.lj-jobs-toolbar-right {
  display: flex;
  align-items: center;
  gap: 13px
}

.lj-jobs-result-text {
  min-width: 85px;
  text-align: right
}

.lj-jobs-result-text strong {
  display: block;
  color: var(--jobs-title);
  font: 700 27px/.9 var(--jobs-font-display)
}

.lj-jobs-result-text span {
  color: #082E5C;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-jobs-view-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jobs-primary), var(--jobs-primary-dark));
  border: 0;
  border-radius: 5px;
  box-shadow: 0 11px 25px rgba(7, 104, 207, .20);
  font-size: 21px;
  cursor: pointer;
  transition: .3s
}

.lj-jobs-view-toggle:hover {
  transform: translateY(-2px)
}

.lj-jobs-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px
}

.lj-jobs-active-chips:empty {
  display: none
}

.lj-jobs-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 10px;
  color: #0768CF;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 999px;
  box-shadow: 0 7px 18px rgba(1, 52, 130, .035);
  font-size: 8px;
  font-weight: 750
}

.lj-jobs-filter-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  color: #FFFFFF;
  background: var(--jobs-primary);
  border: 0;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer
}

.lj-jobs-list {
  display: grid;
  gap: 18px
}

.lj-job-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .065);
  transition: transform .35s, border-color .35s, box-shadow .35s
}

.lj-job-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--jobs-primary-dark), var(--jobs-primary), #0687F1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s
}

.lj-job-card:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 104, 207, .20);
  box-shadow: 0 28px 65px rgba(1, 52, 130, .10)
}

.lj-job-card:hover::before {
  transform: scaleX(1)
}

.lj-job-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase
}

.lj-job-status-active {
  color: var(--jobs-success);
  background: #D5EAF8;
  border: 1px solid #A1D7FB
}

.lj-job-status-expired {
  color: var(--jobs-danger);
  background: #D5EAF8;
  border: 1px solid #4AB3FC
}

.lj-job-logo {
  flex: 0 0 auto;
  overflow: hidden;
  background: #D5EAF8;
  border: 1px solid var(--jobs-border);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(1, 52, 130, .08)
}

.lj-job-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-job-company {
  margin-bottom: 6px;
  color: var(--jobs-success);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase
}

.lj-job-card-content h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.06
}

.lj-job-card-content h3 a {
  color: var(--jobs-title);
  transition: color .25s
}

.lj-job-card-content h3 a:hover {
  color: var(--jobs-primary)
}

.lj-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 17px;
  color: #0768CF
}

.lj-job-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  font-weight: 650
}

.lj-job-meta i {
  color: var(--jobs-primary);
  font-size: 16px
}

.lj-job-description {
  margin: 13px 0 0;
  color: var(--jobs-text);
  font-size: 9px;
  line-height: 1.72
}

.lj-job-read-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 5px;
  padding: 0;
  color: var(--jobs-primary);
  background: transparent;
  border: 0;
  font: 850 8px var(--jobs-font-body);
  cursor: pointer
}

.lj-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px
}

.lj-job-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  color: #0768CF;
  background: #F6FBFD;
  border: 1px solid #6F8DA8;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 750
}

.lj-job-tags span:nth-child(2) {
  color: #0768CF;
  background: #D5EAF8;
  border-color: #A1D7FB
}

.lj-job-tags span:nth-child(3) {
  color: #0768CF;
  background: #D5EAF8;
  border-color: #A1D7FB
}

.lj-job-tags span:nth-child(4) {
  color: #0768CF;
  background: #F6FBFD;
  border-color: #A1D7FB
}

.lj-job-card-actions {
  display: flex;
  align-items: center
}

.lj-job-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0687F1;
  font-size: 8px;
  font-weight: 700
}

.lj-job-views i {
  color: var(--jobs-primary);
  font-size: 16px
}

.lj-job-apply-btn,
.lj-job-expired-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase
}

.lj-job-apply-btn {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jobs-primary), var(--jobs-primary-dark));
  box-shadow: 0 10px 23px rgba(7, 104, 207, .20)
}

.lj-job-apply-btn:hover {
  color: #FFFFFF;
  transform: translateY(-2px)
}

.lj-job-apply-btn i {
  font-size: 16px
}

.lj-job-expired-btn {
  color: #0687F1;
  background: #D5EAF8;
  border: 1px solid #6F8DA8
}

.lj-job-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--jobs-primary);
  background: #F6FBFD;
  border: 1px solid rgba(7, 104, 207, .17);
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
  transition: .3s
}

.lj-job-save-btn:hover,
.lj-job-save-btn.is-saved {
  color: #FFFFFF;
  background: var(--jobs-primary);
  border-color: var(--jobs-primary);
  transform: translateY(-2px)
}

.lj-jobs-list.is-list-view {
  grid-template-columns: 1fr
}

.is-list-view .lj-job-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 25px 24px 20px
}

.is-list-view .lj-job-card-status {
  position: absolute;
  top: 18px;
  right: 20px
}

.is-list-view .lj-job-card-main {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding-right: 90px
}

.is-list-view .lj-job-logo {
  width: 78px;
  height: 78px
}

.is-list-view .lj-job-card-content {
  min-width: 0;
  flex: 1
}

.is-list-view .lj-job-card-content h3 {
  padding-right: 15px;
  font-size: 26px
}

.is-list-view .lj-job-meta {
  margin-top: 10px
}

.is-list-view .lj-job-card-actions {
  grid-column: 1/-1;
  justify-content: flex-end;
  gap: 11px;
  padding-top: 16px;
  border-top: 1px solid var(--jobs-border)
}

.is-list-view .lj-job-views {
  margin-right: auto
}

.lj-jobs-list.is-grid-view {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.is-grid-view .lj-job-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 27px 23px 20px;
  text-align: center
}

.is-grid-view .lj-job-card-status {
  position: absolute;
  top: 15px;
  left: 15px
}

.is-grid-view .lj-job-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0
}

.is-grid-view .lj-job-logo {
  width: 92px;
  height: 92px;
  margin-top: 25px;
  border-radius: 50%
}

.is-grid-view .lj-job-card-content {
  width: 100%;
  min-width: 0;
  margin-top: 18px
}

.is-grid-view .lj-job-card-content h3 {
  font-size: 28px
}

.is-grid-view .lj-job-meta {
  justify-content: center;
  margin-top: 13px
}

.is-grid-view .lj-job-description {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto
}

.is-grid-view .lj-job-tags {
  justify-content: center
}

.is-grid-view .lj-job-card-actions {
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--jobs-border)
}

.is-grid-view .lj-job-apply-btn,
.is-grid-view .lj-job-expired-btn {
  margin-left: auto
}

.lj-jobs-empty {
  display: none;
  padding: 70px 25px;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .06);
  text-align: center
}

.lj-jobs-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 17px;
  color: var(--jobs-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
  font-size: 32px
}

.lj-jobs-empty h3 {
  margin: 0;
  color: var(--jobs-title);
  font: 700 34px var(--jobs-font-display)
}

.lj-jobs-empty p {
  max-width: 490px;
  margin: 10px auto 0;
  font-size: 10px;
  line-height: 1.75
}

.lj-jobs-empty button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 43px;
  margin-top: 20px;
  padding: 0 17px;
  color: #FFFFFF;
  background: var(--jobs-primary);
  border: 0;
  border-radius: 5px;
  font: 850 8px var(--jobs-font-body);
  text-transform: uppercase;
  cursor: pointer
}

.lj-jobs-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 35px
}

.lj-jobs-pagination:empty {
  display: none
}

.lj-jobs-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 11px;
  color: #0768CF;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 5px;
  box-shadow: 0 8px 20px rgba(1, 52, 130, .04);
  font: 800 9px var(--jobs-font-body);
  cursor: pointer;
  transition: .3s
}

.lj-jobs-page-btn:hover,
.lj-jobs-page-btn.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jobs-primary), var(--jobs-primary-dark));
  border-color: var(--jobs-primary);
  box-shadow: 0 12px 25px rgba(7, 104, 207, .20);
  transform: translateY(-2px)
}

.lj-jobs-page-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none
}

@media(max-width:1199.98px) {
  .lj-jobs-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px
  }
  .lj-jobs-location-filters {
    grid-template-columns: repeat(3, minmax(125px, 1fr))
  }
  .is-list-view .lj-job-card-main {
    padding-right: 70px
  }
}

@media(max-width:991.98px) {
  body.lj-jobs-drawer-open {
    overflow: hidden
  }
  .lj-jobs-hero {
    min-height: 400px;
    padding: 65px 0
  }
  .lj-jobs-content-section {
    padding: 55px 0 75px
  }
  .lj-jobs-mobile-actions {
    display: flex
  }
  .lj-jobs-layout {
    display: block
  }
  .lj-jobs-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1002;
    width: min(88vw, 340px);
    overflow-y: auto;
    border-radius: 0 12px 12px 0;
    transform: translateX(-105%);
    transition: transform .36s cubic-bezier(.4, 0, .2, 1)
  }
  .lj-jobs-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-jobs-sidebar-close {
    display: flex
  }
  .lj-jobs-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: block;
    visibility: hidden;
    opacity: 0;
    background: rgba(1, 52, 130, .55);
    backdrop-filter: blur(4px);
    transition: .3s
  }
  .lj-jobs-drawer-backdrop.is-visible {
    visibility: visible;
    opacity: 1
  }
  .lj-jobs-toolbar {
    align-items: stretch;
    flex-direction: column
  }
  .lj-jobs-toolbar-right {
    justify-content: space-between
  }
  .lj-jobs-result-text {
    text-align: left
  }
}

@media(max-width:767.98px) {
  .lj-jobs-hero {
    min-height: 390px;
    max-height: none;
    padding: 58px 0;
    text-align: center
  }
  .lj-jobs-hero-title {
    min-height: 126px;
    font-size: clamp(43px, 12vw, 61px)
  }
  .lj-jobs-hero-content>p {
    margin-right: auto;
    margin-left: auto;
    font-size: 11px
  }
  .lj-jobs-hero-search {
    margin-right: auto;
    margin-left: auto
  }
  .lj-jobs-hero-meta {
    justify-content: center
  }
  .lj-jobs-location-filters {
    grid-template-columns: 1fr
  }
  .lj-jobs-view-toggle {
    display: none
  }
  .lj-jobs-list,
  .lj-jobs-list.is-list-view,
  .lj-jobs-list.is-grid-view {
    grid-template-columns: 1fr
  }
  .lj-jobs-list .lj-job-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 26px 20px 18px;
    text-align: center
  }
  .lj-jobs-list .lj-job-card-status {
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto
  }
  .lj-jobs-list .lj-job-card-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 0
  }
  .lj-jobs-list .lj-job-logo {
    width: 88px;
    height: 88px;
    margin-top: 24px;
    border-radius: 50%
  }
  .lj-jobs-list .lj-job-card-content {
    width: 100%;
    margin-top: 17px
  }
  .lj-jobs-list .lj-job-card-content h3 {
    padding: 0;
    font-size: 27px
  }
  .lj-jobs-list .lj-job-meta {
    justify-content: center;
    margin-top: 12px
  }
  .lj-jobs-list .lj-job-tags {
    justify-content: center
  }
  .lj-jobs-list .lj-job-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--jobs-border)
  }
  .lj-jobs-list .lj-job-views {
    justify-self: start;
    margin: 0
  }
  .lj-jobs-list .lj-job-save-btn {
    grid-column: 2;
    grid-row: 1
  }
  .lj-jobs-list .lj-job-apply-btn,
  .lj-jobs-list .lj-job-expired-btn {
    grid-column: 1/-1;
    width: 100%;
    margin: 0
  }
}

@media(max-width:575.98px) {
  .lj-jobs-hero {
    min-height: 420px;
    padding: 50px 0
  }
  .lj-jobs-hero-title {
    min-height: 142px;
    font-size: clamp(39px, 12vw, 53px)
  }
  .lj-jobs-hero-search {
    min-height: auto;
    padding: 6px;
    border-radius: 8px
  }
  .lj-jobs-search-icon {
    flex-basis: 43px
  }
  .lj-jobs-hero-search input {
    height: 49px;
    font-size: 10px
  }
  .lj-jobs-hero-search button {
    min-width: 52px;
    width: 52px;
    height: 49px
  }
  .lj-jobs-hero-search button span {
    display: none
  }
  .lj-jobs-hero-meta {
    flex-direction: row;
    align-items: center;
    gap: 7px
  }
  .lj-jobs-content-section {
    padding: 43px 0 60px
  }
  .lj-jobs-toolbar {
    padding: 11px
  }
  .lj-job-card-content h3 {
    font-size: 25px !important
  }
  .lj-job-description {
    font-size: 8.5px
  }
  .lj-job-tags span {
    min-height: 25px;
    padding: 0 8px
  }
  .lj-jobs-pagination {
    gap: 5px
  }
  .lj-jobs-page-btn {
    min-width: 38px;
    height: 38px
  }
}

@media(max-width:360px) {
  .lj-jobs-mobile-actions {
    align-items: flex-start
  }
  .lj-jobs-mobile-filter-btn {
    padding: 0 12px
  }
  .lj-job-meta {
    flex-direction: row;
    align-items: center;
    gap: 7px
  }
}

@keyframes ljJobsCaret {
  0%,
  45% {
    opacity: 1
  }
  46%,
  100% {
    opacity: 0
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-jobs-type-caret {
    animation: none
  }
  .lj-jobs-page *,
  .lj-jobs-page *::before,
  .lj-jobs-page *::after {
    scroll-behavior: auto !important;
    transition: none !important
  }
}

/********************************JOB DETAILS********************************/

.lj-job-details-page {
  --jd-primary: var(--colorPrimary, var(--color-primary, #0768CF));
  --jd-primary-dark: var(--colorPrimaryDark, var(--color-primary-dark, #013883));
  --jd-title: var(--titleColor, var(--color-title, #013482));
  --jd-text: var(--paraColor, var(--color-text, #082E5C));
  --jd-light: var(--sectionBg, var(--color-off-white, #F6FBFD));
  --jd-border: var(--borderColor, var(--color-border, #6F8DA8));
  --jd-success: #0687F1;
  --jd-danger: #0768CF;
  --jd-font-body: var(--bodyFont, var(--font-body, "Inter", sans-serif));
  --jd-font-display: var(--headingFont, var(--font-heading, "Cormorant Garamond", serif));
  color: var(--jd-text);
  background: var(--jd-light);
  font-family: var(--jd-font-body)
}

.lj-job-details-page *,
.lj-job-details-page *::before,
.lj-job-details-page *::after {
  box-sizing: border-box
}

.lj-job-details-page a {
  text-decoration: none
}

.lj-job-details-section {
  padding: 75px 0 95px;
  background: radial-gradient(circle at 8% 8%, rgba(7, 104, 207, .035), transparent 23%), var(--jd-light)
}

.lj-job-details-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  align-items: start;
  gap: 28px
}

.lj-job-recruiter-mobile-slot {
  display: none
}

.lj-job-details-main,
.lj-job-details-sidebar {
  display: grid;
  gap: 22px
}

.lj-job-details-sidebar {
  position: sticky;
  top: 100px
}

.lj-job-details-card,
.lj-job-side-card {
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 11px;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .075)
}

.lj-job-details-card {
  padding: 30px
}

.lj-job-primary-card {
  position: relative;
  overflow: hidden
}

.lj-job-primary-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--jd-primary-dark), var(--jd-primary), #0687F1)
}

.lj-job-card-topline,
.lj-job-action-row,
.lj-job-status-group {
  display: flex;
  align-items: center
}

.lj-job-card-topline,
.lj-job-action-row {
  justify-content: space-between;
  gap: 16px
}

.lj-job-status-group {
  flex-wrap: wrap;
  gap: 10px
}

.lj-job-status,
.lj-job-posted-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  font-weight: 800
}

.lj-job-status {
  padding: 7px 11px;
  border-radius: 999px;
  text-transform: uppercase
}

.lj-job-status-active {
  color: var(--jd-success);
  background: #D5EAF8;
  border: 1px solid #A1D7FB
}

.lj-job-posted-time {
  color: #0687F1
}

.lj-job-save-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  color: var(--jd-primary);
  background: #F6FBFD;
  border: 1px solid rgba(7, 104, 207, .18);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: .3s
}

.lj-job-save-action:hover,
.lj-job-save-action.is-saved {
  color: #FFFFFF;
  background: var(--jd-primary);
  border-color: var(--jd-primary);
  transform: translateY(-2px)
}

.lj-job-heading-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 24px
}

.lj-job-heading-logo {
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border: 1px solid var(--jd-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(1, 52, 130, .09)
}

.lj-job-heading-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-job-company-name {
  display: block;
  margin-bottom: 6px;
  color: var(--jd-success);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase
}

.lj-job-heading-block h1 {
  margin: 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: clamp(38px, 5vw, 58px);
  line-height: .98;
  letter-spacing: -.035em
}

.lj-job-heading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 14px
}

.lj-job-heading-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0768CF;
  font-size: 9px;
  font-weight: 650
}

.lj-job-heading-meta i {
  color: var(--jd-primary);
  font-size: 16px
}

.lj-job-action-row {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--jd-border)
}

.lj-job-view-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0768CF;
  font-size: 9px
}

.lj-job-view-count i {
  color: var(--jd-primary);
  font-size: 19px
}

.lj-job-view-count strong {
  color: var(--jd-title)
}

.lj-job-main-apply-btn,
.lj-job-open-application,
.lj-job-submit-application,
.lj-job-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 22px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0687F1, var(--jd-primary) 52%, var(--jd-primary-dark));
  border: 0;
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(7, 104, 207, .22);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s
}

.lj-job-main-apply-btn:hover,
.lj-job-open-application:hover,
.lj-job-submit-application:hover,
.lj-job-login-button:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .30)
}

.lj-job-card-heading {
  margin-bottom: 24px
}

.lj-job-card-heading>span {
  display: block;
  margin-bottom: 7px;
  color: var(--jd-primary);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase
}

.lj-job-card-heading h2 {
  margin: 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 40px;
  line-height: 1
}

.lj-job-card-heading p {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.7
}

.lj-job-detail-accordion {
  overflow: hidden;
  border: 1px solid var(--jd-border);
  border-radius: 8px
}

.lj-job-detail-accordion+.lj-job-detail-accordion {
  margin-top: 13px
}

.lj-job-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  min-height: 59px;
  padding: 14px 18px;
  color: var(--jd-title);
  background: #F6FBFD;
  border: 0;
  font-family: var(--font-body);
  cursor: pointer
}

.lj-job-detail-toggle>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 850
}

.lj-job-detail-toggle>span i,
.lj-job-detail-toggle>i {
  color: var(--jd-primary);
  font-size: 19px
}

.lj-job-detail-content {
  padding: 18px;
  border-top: 1px solid var(--jd-border)
}

.lj-job-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.lj-job-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 7px;
  transition: .3s
}

.lj-job-feature-item:hover {
  transform: translateY(-3px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 12px 26px rgba(1, 52, 130, .05)
}

.lj-job-feature-item>i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  color: var(--jd-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
  font-size: 18px
}

.lj-job-feature-item span {
  min-width: 0
}

.lj-job-feature-item small,
.lj-job-feature-item strong {
  display: block
}

.lj-job-feature-item small {
  margin-bottom: 4px;
  color: #0687F1;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase
}

.lj-job-feature-item strong {
  color: var(--jd-title);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere
}

.lj-job-content-more,
.lj-job-text-more {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  color: var(--jd-primary);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer
}

.lj-job-content-more i,
.lj-job-text-more i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px dashed rgba(7, 104, 207, .45);
  border-radius: 50%;
  font-size: 16px
}

.lj-job-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.lj-job-skill-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 11px;
  color: #013883;
  background: #F6FBFD;
  border: 1px solid #6F8DA8;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 750
}

.lj-job-skill-list i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: #FFFFFF;
  background: var(--jd-primary);
  border-radius: 50%;
  font-size: 12px
}

.lj-job-rich-text p,
.lj-job-icon-list li {
  color: var(--jd-text);
  font-size: 10px;
  line-height: 1.78
}

.lj-job-rich-text p {
  margin: 0
}

.lj-job-rich-text p+p {
  margin-top: 12px
}

.lj-job-icon-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none
}

.lj-job-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px
}

.lj-job-icon-list i {
  margin-top: 2px;
  color: var(--jd-primary);
  font-size: 17px
}

.lj-job-application-gate {
  text-align: center
}

.lj-job-application-message {
  display: none;
  margin-bottom: 18px;
  padding: 15px 17px;
  color: var(--jd-danger);
  background: #D5EAF8;
  border: 1px solid #4AB3FC;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.6
}

.lj-job-application-form {
  display: grid;
  gap: 18px
}

.lj-job-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.lj-job-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--jd-title);
  font-size: 9px;
  font-weight: 800
}

.lj-job-input-wrap {
  position: relative;
  display: flex;
  align-items: center
}

.lj-job-input-wrap>i:first-child {
  position: absolute;
  left: 15px;
  z-index: 2;
  color: #355A7D;
  font-size: 19px;
  pointer-events: none
}

.lj-job-input-wrap input,
.lj-job-input-wrap select,
.lj-job-input-wrap textarea {
  width: 100%;
  color: var(--jd-title);
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 5px;
  outline: 0;
  font-family: var(--font-body);
  font-size: 10px
}

.lj-job-input-wrap input,
.lj-job-input-wrap select {
  height: 54px;
  padding: 0 44px
}

.lj-job-input-wrap textarea {
  min-height: 145px;
  padding: 16px 16px 16px 45px;
  resize: vertical;
  line-height: 1.7
}

.lj-job-input-wrap input:focus,
.lj-job-input-wrap select:focus,
.lj-job-input-wrap textarea:focus {
  border-color: rgba(7, 104, 207, .45);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .055)
}

.lj-job-input-wrap:focus-within>i:first-child {
  color: var(--jd-primary)
}

.lj-job-input-wrap select {
  appearance: none
}

.lj-job-select-arrow {
  position: absolute;
  right: 13px;
  color: #0687F1;
  pointer-events: none
}

.lj-job-textarea-wrap {
  align-items: flex-start
}

.lj-job-textarea-wrap>i:first-child {
  top: 17px
}

.lj-job-file-dropzone {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 170px;
  padding: 25px;
  color: var(--jd-text);
  background: #F6FBFD;
  border: 1px dashed rgba(7, 104, 207, .38);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: .3s
}

.lj-job-file-dropzone:hover,
.lj-job-file-dropzone.is-dragging {
  background: #F6FBFD;
  border-color: var(--jd-primary);
  transform: translateY(-2px)
}

.lj-job-file-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.lj-job-dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark));
  border-radius: 50%;
  box-shadow: 0 14px 30px rgba(7, 104, 207, .20)
}

.lj-job-dropzone-icon i {
  font-size: 27px
}

.lj-job-dropzone-copy {
  text-align: left
}

.lj-job-dropzone-copy strong,
.lj-job-dropzone-copy small {
  display: block
}

.lj-job-dropzone-copy strong {
  color: var(--jd-title);
  font-size: 11px
}

.lj-job-dropzone-copy small {
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.5
}

.lj-job-selected-files {
  display: grid;
  gap: 7px;
  margin-top: 9px
}

.lj-job-file-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 0 10px;
  color: #0768CF;
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 5px;
  font-size: 8px
}

.lj-job-file-chip i {
  color: var(--jd-primary)
}

.lj-job-side-card {
  padding: 24px
}

.lj-job-recruiter-card {
  position: relative;
  overflow: hidden;
  text-align: center
}

.lj-job-recruiter-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--jd-primary-dark), var(--jd-primary), #0687F1)
}

.lj-job-recruiter-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 7px
}

.lj-job-verified-badge,
.lj-job-member-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-verified-badge {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark))
}

.lj-job-member-badge {
  color: #0768CF;
  background: #F6FBFD;
  border: 1px solid #6F8DA8
}

.lj-job-recruiter-logo {
  width: 96px;
  height: 96px;
  margin: 24px auto 16px;
  overflow: hidden;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 15px 35px rgba(1, 52, 130, .13)
}

.lj-job-recruiter-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-job-recruiter-name>span {
  display: block;
  margin-bottom: 5px;
  color: var(--jd-primary);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-recruiter-name h3 {
  margin: 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 31px
}

.lj-job-recruiter-name p {
  margin: 5px 0 0;
  font-size: 8px
}

.lj-job-recruiter-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--jd-border);
  border-radius: 7px
}

.lj-job-recruiter-stats div {
  padding: 14px 8px
}

.lj-job-recruiter-stats div+div {
  border-left: 1px solid var(--jd-border)
}

.lj-job-recruiter-stats strong,
.lj-job-recruiter-stats span {
  display: block
}

.lj-job-recruiter-stats strong {
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 25px
}

.lj-job-recruiter-stats span {
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase
}

.lj-job-recruiter-info {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  text-align: left
}

.lj-job-recruiter-info p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 8px;
  line-height: 1.5
}

.lj-job-recruiter-info i {
  color: var(--jd-primary);
  font-size: 16px
}

.lj-job-recruiter-socials {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px
}

.lj-job-recruiter-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--jd-primary);
  background: #F6FBFD;
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: 50%;
  font-size: 17px;
  transition: .3s
}

.lj-job-recruiter-socials a:hover {
  color: #FFFFFF;
  background: var(--jd-primary);
  transform: translateY(-3px)
}

.lj-job-profile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  margin-top: 18px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark));
  border-radius: 5px;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-action-card {
  display: grid;
  gap: 13px
}

.lj-job-side-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 24px
}

.lj-job-side-icon.whatsapp {
  background: #1F9EFC
}

.lj-job-side-icon.phone {
  background: linear-gradient(135deg, #0687F1, var(--jd-primary-dark))
}

.lj-job-side-icon.message {
  background: linear-gradient(135deg, #0768CF, #013883)
}

.lj-job-action-card>div>span {
  display: block;
  margin-bottom: 5px;
  color: var(--jd-primary);
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-action-card h3 {
  margin: 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 27px
}

.lj-job-action-card p {
  margin: 7px 0 0;
  font-size: 8px;
  line-height: 1.6
}

.lj-job-side-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 43px;
  color: var(--jd-primary);
  background: #F6FBFD;
  border: 1px solid rgba(7, 104, 207, .18);
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer
}

.lj-job-phone-reveal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 7px
}

.lj-job-phone-reveal input {
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  color: var(--jd-title);
  background: #F6FBFD;
  border: 1px solid var(--jd-border);
  border-radius: 5px;
  font-size: 9px
}

.lj-job-phone-reveal button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: var(--jd-primary);
  border: 0;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer
}

.lj-job-feedback-card {
  padding: 0;
  overflow: hidden
}

.lj-job-feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  color: var(--jd-title);
  background: #FFFFFF;
  border: 0;
  cursor: pointer
}

.lj-job-feedback-header>span {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left
}

.lj-job-feedback-header>span>i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark));
  border-radius: 50%;
  font-size: 20px
}

.lj-job-feedback-header small,
.lj-job-feedback-header strong {
  display: block
}

.lj-job-feedback-header small {
  margin-bottom: 3px;
  color: var(--jd-primary);
  font-size: 7px;
  text-transform: uppercase
}

.lj-job-feedback-header strong {
  font-size: 10px
}

.lj-job-feedback-header>i {
  color: var(--jd-primary);
  font-size: 19px
}

.lj-job-feedback-body {
  display: none;
  padding: 0 20px 20px;
  border-top: 1px solid var(--jd-border)
}

.lj-job-feedback-form {
  display: grid;
  gap: 10px;
  padding-top: 17px
}

.lj-job-feedback-form button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  color: #FFFFFF;
  background: var(--jd-primary);
  border: 0;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer
}

.lj-job-feedback-list {
  display: grid;
  gap: 15px;
  margin-top: 20px
}

.lj-job-feedback-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--jd-border)
}

.lj-job-feedback-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%
}

.lj-job-feedback-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px
}

.lj-job-feedback-meta strong {
  color: var(--jd-title);
  font-size: 9px
}

.lj-job-feedback-meta span {
  color: #355A7D;
  font-size: 7px
}

.lj-job-feedback-comment {
  margin: 6px 0 0;
  font-size: 8px;
  line-height: 1.6
}

.lj-job-feedback-more {
  padding: 0;
  color: var(--jd-primary);
  background: transparent;
  border: 0;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer
}

.lj-job-login-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: .3s
}

.lj-job-login-modal.is-visible {
  visibility: visible;
  opacity: 1
}

.lj-job-login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 52, 130, .62);
  backdrop-filter: blur(5px)
}

.lj-job-login-dialog {
  position: relative;
  z-index: 2;
  width: min(92vw, 430px);
  padding: 35px 30px;
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(1, 52, 130, .24);
  text-align: center;
  transform: translateY(20px) scale(.97);
  transition: .3s
}

.lj-job-login-modal.is-visible .lj-job-login-dialog {
  transform: none
}

.lj-job-login-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--jd-title);
  background: #F6FBFD;
  border: 1px solid var(--jd-border);
  border-radius: 50%;
  font-size: 21px;
  cursor: pointer
}

.lj-job-login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  margin: 0 auto 16px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark));
  border-radius: 50%;
  font-size: 28px
}

.lj-job-login-label {
  color: var(--jd-primary);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-login-dialog h2 {
  margin: 8px 0 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 37px
}

.lj-job-login-dialog p {
  margin: 10px 0 22px;
  font-size: 10px;
  line-height: 1.7
}

@media(max-width:991.98px) {
  .lj-job-details-layout {
    grid-template-columns: 1fr
  }
  .lj-job-recruiter-mobile-slot {
    display: block;
    order: 1
  }
  .lj-job-details-main {
    order: 2
  }
  .lj-job-details-sidebar {
    position: static;
    order: 3
  }
  .lj-job-recruiter-desktop-slot {
    display: none
  }
}

@media(min-width:992px) {
  .lj-job-recruiter-mobile-slot .lj-job-recruiter-card {
    display: none
  }
}

@media(max-width:767.98px) {
  .lj-job-details-section {
    padding: 50px 0 70px
  }
  .lj-job-details-card {
    padding: 22px 18px
  }
  .lj-job-heading-block {
    flex-direction: column;
    text-align: center
  }
  .lj-job-heading-logo {
    margin: 0 auto
  }
  .lj-job-heading-meta {
    justify-content: center
  }
  .lj-job-action-row {
    flex-direction: column
  }
  .lj-job-main-apply-btn {
    width: 100%
  }
  .lj-job-feature-grid,
  .lj-job-form-grid {
    grid-template-columns: 1fr
  }
  .lj-job-detail-accordion .lj-job-detail-content {
    display: none
  }
  .lj-job-detail-accordion.active .lj-job-detail-content {
    display: block
  }
  .lj-job-card-heading h2 {
    font-size: 35px
  }
  .lj-job-file-dropzone {
    flex-direction: column
  }
  .lj-job-dropzone-copy {
    text-align: center
  }
}

@media(max-width:575.98px) {
  .lj-job-heading-block h1 {
    font-size: 39px
  }
  .lj-job-card-topline {
    align-items: flex-start
  }
  .lj-job-status-group {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-job-feature-item {
    padding: 12px
  }
  .lj-job-recruiter-badges {
    justify-content: center
  }
}

/* =========================================================
   JOB DETAILS REFINEMENTS V2
========================================================= */

.lj-job-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px
}

.lj-job-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--jd-border);
  border-radius: 0;
  box-shadow: none
}

.lj-job-feature-item:hover {
  transform: none;
  border-color: var(--jd-border);
  box-shadow: none
}

.lj-job-feature-item>i {
  flex: 0 0 34px;
  width: 34px;
  height: 34px
}

.lj-job-feature-item small {
  font-size: 7px
}

.lj-job-feature-item strong {
  font-size: 9px
}

.lj-job-detail-toggle {
  background: #FFFFFF;
  padding: 17px 0;
  border-bottom: 1px solid var(--jd-border)
}

.lj-job-detail-content {
  padding: 16px 0 5px;
  border-top: 0
}

.lj-job-detail-accordion {
  border: 0;
  border-radius: 0
}

.lj-job-detail-accordion+.lj-job-detail-accordion {
  margin-top: 3px
}

/* Recruiter social media brand colours */

.lj-job-recruiter-socials a {
  background: #FFFFFF;
  border: 1px solid var(--jd-border)
}

.lj-job-recruiter-socials a[aria-label="Facebook"] {
  color: #0687F1
}

.lj-job-recruiter-socials a[aria-label="Instagram"] {
  color: #0687F1
}

.lj-job-recruiter-socials a[aria-label="LinkedIn"] {
  color: #0768CF
}

.lj-job-recruiter-socials a[aria-label="TikTok"] {
  color: #013482
}

.lj-job-recruiter-socials a[aria-label="YouTube"] {
  color: #0687F1
}

.lj-job-recruiter-socials a[aria-label="Facebook"]:hover {
  background: #0687F1
}

.lj-job-recruiter-socials a[aria-label="Instagram"]:hover {
  background: linear-gradient(135deg, #0768CF, #0687F1, #4AB3FC)
}

.lj-job-recruiter-socials a[aria-label="LinkedIn"]:hover {
  background: #0768CF
}

.lj-job-recruiter-socials a[aria-label="TikTok"]:hover {
  background: #013482
}

.lj-job-recruiter-socials a[aria-label="YouTube"]:hover {
  background: #0687F1
}

.lj-job-recruiter-socials a:hover {
  color: #FFFFFF;
  border-color: transparent
}

/* Button-like sidebar action cards */

.lj-job-quick-action-card {
  padding: 0;
  overflow: hidden;
  border: 0
}

.lj-job-quick-action {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 88px;
  padding: 15px;
  color: #FFFFFF;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: .35s ease
}

.lj-job-whatsapp-card .lj-job-quick-action {
  background: linear-gradient(135deg, #0687F1, #1F9EFC)
}

.lj-job-phone-card .lj-job-quick-action {
  background: linear-gradient(135deg, #0687F1, var(--jd-primary-dark))
}

.lj-job-message-card .lj-job-quick-action {
  background: linear-gradient(135deg, #0768CF, #013883)
}

.lj-job-quick-action:hover {
  transform: translateY(-3px);
  filter: saturate(1.08);
  box-shadow: 0 20px 45px rgba(1, 52, 130, .18)
}

.lj-job-quick-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  font-size: 25px
}

.lj-job-quick-action-copy small,
.lj-job-quick-action-copy strong,
.lj-job-quick-action-copy em {
  display: block;
  color: #FFFFFF
}

.lj-job-quick-action-copy small {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .76
}

.lj-job-quick-action-copy strong {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1
}

.lj-job-quick-action-copy em {
  margin-top: 6px;
  font-size: 8px;
  font-style: normal;
  opacity: .78
}

.lj-job-quick-action-arrow {
  font-size: 22px;
  transition: transform .3s ease
}

.lj-job-quick-action:hover .lj-job-quick-action-arrow {
  transform: translateX(5px)
}

.lj-job-phone-card .lj-job-phone-reveal {
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-top: 0
}

@media(max-width:767.98px) {
  .lj-job-feature-grid {
    grid-template-columns: 1fr
  }
  .lj-job-detail-toggle {
    padding: 15px 0
  }
  .lj-login-panel {
    padding: 30px 20px
  }
  .lj-social-login {
    grid-template-columns: 1fr
  }
}

.section-container {
  max-width: 1200px;
  margin: 70px auto;
}

.body-bg {
  background: var(--color-surface) !important;
}

/*************************************events********************************/

/* =========================================================
   LINJUST EVENTS PAGE
   Page-specific styles only.
   Uses the existing LinJust global variables.
========================================================= */

.lj-events-page {
  background: radial-gradient(circle at 8% 22%, rgba(7, 104, 207, .045), transparent 28rem), var(--color-off-white);
  color: var(--color-text);
  font-family: var(--font-body);
}

.lj-events-page *,
.lj-events-page *::before,
.lj-events-page *::after {
  box-sizing: border-box;
}

.lj-events-page button,
.lj-events-page input,
.lj-events-page select {
  font-family: var(--font-body);
}

.lj-events-page button {
  cursor: pointer;
}

.lj-events-page a {
  text-decoration: none;
}

/* =========================================================
   HERO SECTION
========================================================= */

.lj-events-hero {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: hidden;
  background: var(--color-dark);
  isolation: isolate;
}

.lj-events-hero-swiper,
.lj-events-hero-swiper .swiper-wrapper,
.lj-events-hero-swiper .swiper-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lj-events-hero-swiper {
  z-index: 1;
}

.lj-events-hero-slide {
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lj-events-hero-slide::before {
  position: absolute;
  inset: -5%;
  content: "";
  background: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
}

.lj-events-hero-slide.swiper-slide-active[data-ev-type="image"]::before {
  animation: ljEventsHeroZoom 9s ease-in-out infinite alternate;
}

.lj-events-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
}

.lj-events-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lj-events-hero>.container {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: 500px;
}

.lj-events-hero-content {
  width: min(820px, 100%);
  padding: 80px 0 92px;
}

.lj-events-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-events-hero-kicker i {
  font-size: 20px;
}

.lj-events-typing-heading {
  min-height: 138px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(46px, 6vw, 78px);
  font-weight: var(--weight-semibold);
  line-height: .98;
  letter-spacing: -.035em;
}

.lj-events-typing-cursor {
  display: inline-block;
  width: 2px;
  height: .88em;
  margin-left: 6px;
  background: var(--color-secondary);
  vertical-align: -.06em;
  animation: ljEventsCursorBlink .85s steps(1, end) infinite;
}

.lj-events-hero-content>p {
  width: min(670px, 100%);
  margin: 22px 0 30px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: 1.8;
}

.lj-events-search-form {
  width: min(760px, 100%);
}

.lj-events-search-field {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 68px;
  padding: 7px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-large);
  backdrop-filter: blur(14px);
}

.lj-events-search-field>i {
  margin-left: 16px;
  color: var(--color-primary);
  font-size: 23px;
}

.lj-events-search-field input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.lj-events-search-field input::placeholder {
  color: var(--color-muted);
}

.lj-events-search-field button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: .03em;
  transition: var(--transition-normal);
}

.lj-events-search-field button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .28);
}

.lj-events-hero-pagination {
  position: absolute !important;
  right: max(18px, calc((100vw - 1320px)/2)) !important;
  bottom: 28px !important;
  left: auto !important;
  z-index: 5 !important;
  display: flex;
  justify-content: flex-end;
  width: auto !important;
  gap: 9px;
}

.lj-events-hero-pagination .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  margin: 0 !important;
  opacity: 1;
  background: rgba(255, 255, 255, .38);
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  transition: var(--transition-normal);
}

.lj-events-hero-pagination .swiper-pagination-bullet-active {
  width: 25px;
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 5px rgba(31, 158, 252, .16);
}

/* =========================================================
   LISTING LAYOUT
========================================================= */

.lj-events-listing-section {
  position: relative;
  padding: 78px 0 100px;
}

.lj-events-layout {
  display: grid;
  grid-template-columns: minmax(250px, 295px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* =========================================================
   FILTER SIDEBAR
========================================================= */

.lj-events-sidebar {
  position: sticky;
  top: 110px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
}

.lj-events-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 24px;
  color: var(--color-white);
  background: var(--topbar-background);
}

.lj-events-sidebar-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-events-sidebar-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--weight-semibold);
}

.lj-events-filter-close {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-round);
  font-size: 23px;
}

.lj-events-filter-group {
  border-bottom: 1px solid var(--color-border);
}

.lj-events-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 19px 22px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  text-align: left;
}

.lj-events-filter-heading>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.lj-events-filter-heading>span i {
  color: var(--color-primary);
  font-size: 19px;
}

.lj-events-filter-heading>i {
  color: var(--color-primary);
  font-size: 18px;
}

.lj-events-filter-body {
  display: grid;
  gap: 13px;
  padding: 0 22px 21px;
}

.lj-events-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.lj-events-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lj-events-checkbox-mark {
  position: relative;
  display: block;
  width: 19px;
  height: 19px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  transition: var(--transition-fast);
}

.lj-events-checkbox-mark::after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  content: "";
  opacity: 0;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4);
  transition: var(--transition-fast);
}

.lj-events-checkbox input:checked+.lj-events-checkbox-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .08);
}

.lj-events-checkbox input:checked+.lj-events-checkbox-mark::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.lj-events-checkbox>span:nth-of-type(2) {
  color: var(--color-text);
  font-size: 12px;
}

.lj-events-checkbox small {
  min-width: 25px;
  padding: 4px 6px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-align: center;
}

.lj-events-clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 44px);
  min-height: 44px;
  margin: 22px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-events-clear-filters:hover {
  color: var(--color-white);
  background: var(--color-primary);
}

/* =========================================================
   TOOLBAR
========================================================= */

.lj-events-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.lj-events-filter-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  color: var(--color-white);
  background: var(--color-dark);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.lj-events-location-select {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 0 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-small);
  transition: var(--transition-fast);
}

.lj-events-location-select:focus-within {
  border-color: rgba(7, 104, 207, .55);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-events-location-select>i:first-child {
  color: var(--color-primary);
  font-size: 19px;
}

.lj-events-location-select>i:last-child {
  color: var(--color-muted);
  font-size: 18px;
  pointer-events: none;
}

.lj-events-location-select select {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 10px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  font-size: 12px;
  font-weight: var(--weight-medium);
}

/* =========================================================
   RESULT BAR
========================================================= */

.lj-events-result-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.lj-events-result-bar span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-events-result-bar h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: var(--weight-semibold);
}

.lj-events-result-bar p {
  margin: 0;
  color: var(--color-text);
  font-size: 11px;
}

.lj-events-result-bar strong {
  color: var(--color-primary);
}

/* =========================================================
   EVENT GRID AND CARDS
========================================================= */

.lj-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lj-event-card {
  min-width: 0;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal);
}

.lj-event-card:hover {
  transform: translateY(-8px);
  border-color: rgba(7, 104, 207, .2);
  box-shadow: var(--shadow-medium);
}

.lj-event-card.is-filter-hidden {
  display: none;
}

.lj-event-media {
  position: relative;
  height: 230px;
  overflow: hidden;
  background: var(--color-dark);
}

.lj-event-card-swiper,
.lj-event-card-swiper .swiper-wrapper,
.lj-event-card-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.lj-event-card-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lj-event-card-swiper .swiper-slide[data-media-type="image"]::before {
  position: absolute;
  inset: -4%;
  content: "";
  background: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
}

.lj-event-card:hover .swiper-slide-active[data-media-type="image"]::before {
  animation: ljEventCardZoom 6s ease-in-out infinite alternate;
}

.lj-event-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
}

.lj-event-card-swiper .swiper-pagination {
  bottom: 11px !important;
}

.lj-event-card-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 3px !important;
  opacity: .55;
  background: var(--color-white);
  transition: var(--transition-fast);
}

.lj-event-card-swiper .swiper-pagination-bullet-active {
  width: 16px;
  opacity: 1;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
}

.lj-event-save {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--radius-round);
  box-shadow: 0 10px 25px rgba(1, 52, 130, .18);
  font-size: 20px;
  transition: var(--transition-normal);
}

.lj-event-save:hover,
.lj-event-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  transform: translateY(-2px);
}

.lj-event-verified {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  color: var(--color-white);
  background: rgba(1, 52, 130, .76);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  font-size: 8px;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.lj-event-verified i {
  color: var(--color-secondary);
  font-size: 15px;
}

.lj-event-card-body {
  padding: 19px 18px 17px;
}

.lj-event-price-title>span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.lj-event-price-title h3 {
  min-height: 51px;
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: var(--weight-semibold);
  line-height: 1.08;
}

.lj-event-card-meta {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.lj-event-card-meta span {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--color-text);
  font-size: 10px;
  line-height: 1.45;
}

.lj-event-card-meta i {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 16px;
}

.lj-event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.lj-event-countdown {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.lj-event-countdown>span {
  display: grid;
  justify-items: center;
  min-width: 29px;
}

.lj-event-countdown strong {
  color: var(--color-title);
  font-size: 12px;
  line-height: 1;
}

.lj-event-countdown small {
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 6px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.lj-event-countdown>b {
  align-self: flex-start;
  color: var(--color-primary);
  font-size: 11px;
}

.lj-event-book-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 39px;
  padding: 0 13px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 8px;
  font-weight: var(--weight-bold);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: var(--transition-normal);
}

.lj-event-book-button:hover {
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(7, 104, 207, .2);
}

.lj-event-book-button.is-expired {
  color: rgba(255, 255, 255, .7);
  background: var(--color-muted);
  pointer-events: none;
  box-shadow: none;
}

/* =========================================================
   EMPTY STATE AND PAGINATION
========================================================= */

.lj-events-empty-state {
  padding: 55px 25px;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.lj-events-empty-state>i {
  color: var(--color-primary);
  font-size: 58px;
}

.lj-events-empty-state h3 {
  margin: 14px 0 7px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 30px;
}

.lj-events-empty-state p {
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
}

.lj-events-empty-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 17px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: var(--weight-bold);
}

.lj-events-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 38px;
}

.lj-events-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-events-pagination button:hover,
.lj-events-pagination button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.lj-events-pagination button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   MOBILE FILTER DRAWER
========================================================= */

.lj-events-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(1, 52, 130, .58);
  border: 0;
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity var(--transition-normal);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes ljEventsHeroZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.13)
  }
}

@keyframes ljEventCardZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.11)
  }
}

@keyframes ljEventsCursorBlink {
  0%,
  45% {
    opacity: 1
  }
  46%,
  100% {
    opacity: 0
  }
}

/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

@media(max-width:1199.98px) {
  .lj-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:991.98px) {
  .lj-events-layout {
    grid-template-columns: 1fr;
  }
  .lj-events-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: min(88vw, 350px);
    height: 100dvh;
    overflow-y: auto;
    border: 0;
    border-radius: var(--radius-none);
    transform: translateX(-105%);
    transition: transform var(--transition-normal);
  }
  .lj-events-sidebar.is-open {
    transform: translateX(0);
  }
  .lj-events-filter-close {
    display: flex;
  }
  .lj-events-filter-backdrop.is-visible {
    display: block;
    opacity: 1;
  }
  .lj-events-toolbar {
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
  }
  .lj-events-filter-trigger {
    display: flex;
    min-width: 52px;
  }
}

@media(max-width:767.98px) {
  .lj-events-hero,
  .lj-events-hero>.container {
    min-height: 520px;
  }
  .lj-events-hero-content {
    padding: 78px 0 94px;
    text-align: center;
  }
  .lj-events-hero-kicker {
    justify-content: center;
  }
  .lj-events-typing-heading {
    min-height: 115px;
    font-size: clamp(39px, 11vw, 57px);
  }
  .lj-events-hero-content>p {
    margin-right: auto;
    margin-left: auto;
    font-size: 13px;
  }
  .lj-events-search-field {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 6px;
  }
  .lj-events-search-field button {
    grid-column: 1/-1;
    width: 100%;
    min-height: 48px;
    margin-top: 3px;
  }
  .lj-events-search-field input {
    height: 48px;
    padding-right: 8px;
    font-size: 12px;
  }
  .lj-events-hero-pagination {
    right: 50% !important;
    bottom: 24px !important;
    transform: translateX(50%);
  }
  .lj-events-listing-section {
    padding: 52px 0 75px;
  }
  .lj-events-toolbar {
    grid-template-columns: 44px repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .lj-events-filter-trigger {
    min-width: 44px;
    min-height: 48px;
    padding: 0;
  }
  .lj-events-filter-trigger span {
    display: none;
  }
  .lj-events-location-select {
    min-height: 48px;
    padding: 0 8px;
  }
  .lj-events-location-select>i:first-child {
    font-size: 16px;
  }
  .lj-events-location-select>i:last-child {
    display: none;
  }
  .lj-events-location-select select {
    height: 46px;
    padding: 0 4px;
    font-size: 9px;
  }
  .lj-events-result-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .lj-events-result-bar h2 {
    font-size: 34px;
  }
  .lj-events-grid {
    grid-template-columns: 1fr;
  }
  .lj-event-media {
    height: 250px;
  }
  .lj-event-price-title h3 {
    min-height: 0;
    font-size: 26px;
  }
}

@media(max-width:430px) {
  .lj-events-toolbar {
    grid-template-columns: 42px repeat(3, minmax(0, 1fr));
  }
  .lj-events-location-select {
    padding: 0 5px;
  }
  .lj-events-location-select>i:first-child {
    display: none;
  }
  .lj-events-location-select select {
    font-size: 8px;
    text-align: center;
  }
  .lj-event-card-footer {
    padding: 13px 12px;
  }
  .lj-event-book-button {
    padding: 0 10px;
    font-size: 7px;
  }
  .lj-event-countdown {
    gap: 3px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-events-page *,
  .lj-events-page *::before,
  .lj-events-page *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/***********************************HOME EVENTS************************************/

/* =========================================================
   LINJUST HOME EVENTS SLIDESHOW
   Uses the existing project CSS variables.
========================================================= */

.lj-home-events {
  position: relative;
  width: 100%;
  padding: 70px 0;
  overflow: hidden;
  background: radial-gradient( circle at 10% 20%, rgba(7, 104, 207, .045), transparent 24rem), var(--color-off-white);
  font-family: var(--font-body);
}

.lj-home-events *,
.lj-home-events *::before,
.lj-home-events *::after {
  box-sizing: border-box;
}

/* =========================================================
   OUTER SECTION CARD
========================================================= */

.lj-home-events-shell {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
}

/* =========================================================
   SECTION HEADER
========================================================= */

.lj-home-events-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 48px;
  padding: 9px 15px;
  color: var(--color-white);
  overflow: hidden;
}

.lj-home-events-header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--home-events-header-bg, var(--topbar-background));
}

.lj-home-events-header::after {
  position: absolute;
  top: -80px;
  right: 14%;
  z-index: -1;
  width: 220px;
  height: 220px;
  content: "";
  background: rgba(255, 255, 255, .08);
  border-radius: var(--radius-round);
  filter: blur(2px);
}

.lj-home-events-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.lj-home-events-heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-round);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .06);
  font-size: 15px;
}

.lj-home-events-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-home-events-heading h2 {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(29px, 3vw, 40px);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.lj-home-events-heading p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: var(--weight-light);
}

.lj-home-events-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 10px;
  min-height: 45px;
  padding: 0 16px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-home-events-view-all i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  color: var(--color-primary);
  background: var(--color-white);
  border-radius: var(--radius-round);
  transition: var(--transition-normal);
}

.lj-home-events-view-all:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, .18);
  transform: translateY(-2px);
}

.lj-home-events-view-all:hover i {
  transform: translateX(3px);
}

/* =========================================================
   OUTER SWIPER
========================================================= */

.lj-home-events-slider-wrap {
  position: relative;
  padding: 14px 10px 8px;
}

.lj-home-events-swiper {
  width: 100%;
  overflow: hidden;
}

.lj-home-events-swiper>.swiper-wrapper {
  align-items: stretch;
}

.lj-home-events-swiper>.swiper-wrapper>.swiper-slide {
  height: auto;
}

.lj-home-events-swiper>.swiper-wrapper>.swiper-slide>article {
  height: 100%;
}

/* =========================================================
   EVENT CARD
========================================================= */

.lj-home-event-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal);
}

.lj-home-event-card:hover {
  transform: translateY(-7px);
  border-color: rgba(7, 104, 207, .2);
  box-shadow: var(--shadow-medium);
}

/* =========================================================
   CARD MEDIA SLIDESHOW
========================================================= */

.lj-home-event-media {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--color-dark);
}

.lj-home-event-media-swiper,
.lj-home-event-media-swiper .swiper-wrapper,
.lj-home-event-media-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.lj-home-event-media-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lj-home-event-media-swiper .swiper-slide[data-event-media-type="image"]::before {
  position: absolute;
  inset: -4%;
  content: "";
  background: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
}

.lj-home-event-card:hover .lj-home-event-media-swiper .swiper-slide-active[data-event-media-type="image"]::before {
  animation: ljHomeEventMediaZoom 6s ease-in-out infinite alternate;
}

.lj-home-event-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
}

.lj-home-event-media-swiper .swiper-pagination {
  bottom: 12px !important;
}

.lj-home-event-media-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 3px !important;
  opacity: .55;
  background: var(--color-white);
  transition: var(--transition-fast);
}

.lj-home-event-media-swiper .swiper-pagination-bullet-active {
  width: 16px;
  opacity: 1;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
}

/* =========================================================
   SAVE AND VERIFIED BADGES
========================================================= */

.lj-home-event-save {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  box-shadow: 0 10px 24px rgba(1, 52, 130, .17);
  font-size: 18px;
  transition: var(--transition-normal);
}

.lj-home-event-save:hover,
.lj-home-event-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  transform: translateY(-2px);
}

.lj-home-event-verified {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  color: var(--color-dark);
  background: rgba(74, 179, 252, .95);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(1, 52, 130, .14);
  backdrop-filter: blur(8px);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-home-event-verified i {
  color: var(--color-dark);
  font-size: 13px;
}

/* =========================================================
   CARD BODY
========================================================= */

.lj-home-event-body {
  flex: 1 1 auto;
  padding: 18px 17px 16px;
}

.lj-home-event-price {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-home-event-body h3 {
  min-height: 49px;
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  line-height: 1.08;
}

.lj-home-event-body h3 a {
  color: inherit;
  transition: var(--transition-fast);
}

.lj-home-event-body h3 a:hover {
  color: var(--color-primary);
}

.lj-home-event-meta {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.lj-home-event-meta span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text);
  font-size: 10px;
  line-height: 1.45;
}

.lj-home-event-meta i {
  flex: 0 0 auto;
  width: 14px;
  color: var(--color-primary);
  font-size: 14px;
  text-align: center;
}

/* =========================================================
   CARD FOOTER
========================================================= */

.lj-home-event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 15px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.lj-home-event-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lj-home-event-countdown>span {
  display: grid;
  justify-items: center;
  min-width: 27px;
}

.lj-home-event-countdown strong {
  color: var(--color-primary);
  font-size: 11px;
  line-height: 1;
}

.lj-home-event-countdown small {
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 5px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-home-event-countdown>b {
  align-self: flex-start;
  color: var(--color-border);
  font-size: 10px;
}

.lj-home-event-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  transition: var(--transition-normal);
}

.lj-home-event-book:hover {
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 11px 22px rgba(7, 104, 207, .23);
}

.lj-home-event-book.is-expired {
  color: rgba(255, 255, 255, .75);
  background: var(--color-muted);
  pointer-events: none;
  box-shadow: none;
}

/* =========================================================
   OUTER NAVIGATION
========================================================= */

.lj-home-events-nav {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 58px;
  padding: 0;
  color: var(--color-white);
  background: rgba(1, 52, 130, .75);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-xs);
  box-shadow: 0 12px 30px rgba(1, 52, 130, .16);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  transition: var(--transition-normal);
}

.lj-home-events-nav:hover {
  background: var(--color-primary);
  transform: translateY(-50%) scale(1.04);
}

.lj-home-events-prev {
  left: 10px;
}

.lj-home-events-next {
  right: 10px;
}

.lj-home-events-nav.swiper-button-disabled {
  opacity: .3;
  cursor: not-allowed;
}

/* =========================================================
   OUTER PAGINATION
========================================================= */

.lj-home-events-pagination {
  position: relative !important;
  inset: auto !important;
  display: flex;
  justify-content: center;
  gap: 7px;
  width: auto !important;
  padding: 20px 20px 25px;
}

.lj-home-events-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 !important;
  opacity: 1;
  background: var(--color-border);
  transition: var(--transition-normal);
}

.lj-home-events-pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* =========================================================
   MEDIA ANIMATION
========================================================= */

@keyframes ljHomeEventMediaZoom {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.12);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-home-events-header {
    min-height: 48px;
    padding: 8px 10px;
  }
  .lj-home-events-heading-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .lj-home-events-heading p {
    display: none;
  }
  .lj-home-events-slider-wrap {
    padding-right: 38px;
    padding-left: 38px;
  }
  .lj-home-event-media {
    height: 210px;
  }
}

/* =========================================================
   MOBILE
   Exactly two event cards per row in the slider.
========================================================= */

@media(max-width:767.98px) {
  .lj-home-events {
    padding: 50px 0;
  }
  .lj-home-events-shell {
    border-radius: var(--radius-sm);
  }
  .lj-home-events-header {
    min-height: 46px;
    padding: 7px 10px;
  }
  .lj-home-events-heading {
    gap: 11px;
  }
  .lj-home-events-heading-icon {
    flex-basis: 45px;
    width: 45px;
    height: 45px;
    font-size: 19px;
  }
  .lj-home-events-kicker {
    font-size: 7px;
  }
  .lj-home-events-heading h2 {
    font-size: 24px;
  }
  .lj-home-events-view-all {
    min-height: 38px;
    padding: 0 8px;
    gap: 5px;
    font-size: 8px;
  }
  .lj-home-events-view-all i {
    width: 23px;
    height: 23px;
    font-size: 9px;
  }
  .lj-home-events-slider-wrap {
    padding: 20px 8px 4px;
  }
  .lj-home-events-nav {
    top: 46%;
    width: 30px;
    height: 48px;
    font-size: 11px;
  }
  .lj-home-events-prev {
    left: 3px;
  }
  .lj-home-events-next {
    right: 3px;
  }
  .lj-home-event-card {
    border-radius: var(--radius-sm);
  }
  .lj-home-event-media {
    height: 150px;
  }
  .lj-home-event-save {
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .lj-home-event-verified {
    top: 8px;
    right: 8px;
    gap: 3px;
    padding: 6px 7px;
    font-size: 6px;
  }
  .lj-home-event-verified i {
    font-size: 10px;
  }
  .lj-home-event-body {
    padding: 13px 10px 11px;
  }
  .lj-home-event-price {
    margin-bottom: 5px;
    font-size: 8px;
  }
  .lj-home-event-body h3 {
    min-height: 38px;
    font-size: 17px;
  }
  .lj-home-event-meta {
    gap: 6px;
    margin-top: 10px;
  }
  .lj-home-event-meta span {
    gap: 5px;
    font-size: 7px;
  }
  .lj-home-event-meta i {
    width: 10px;
    font-size: 10px;
  }
  .lj-home-event-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 8px;
  }
  .lj-home-event-countdown {
    justify-content: center;
    gap: 2px;
  }
  .lj-home-event-countdown>span {
    min-width: 23px;
  }
  .lj-home-event-countdown strong {
    font-size: 9px;
  }
  .lj-home-event-countdown small {
    font-size: 4px;
  }
  .lj-home-event-countdown>b {
    font-size: 8px;
  }
  .lj-home-event-book {
    width: 100%;
    min-height: 32px;
    padding: 0 7px;
    font-size: 7px;
  }
  .lj-home-events-pagination {
    padding: 16px 10px 20px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:420px) {
  .lj-home-events-header {
    padding: 14px 11px;
  }
  .lj-home-events-heading-icon {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
    font-size: 16px;
  }
  .lj-home-events-heading h2 {
    font-size: 20px;
  }
  .lj-home-events-view-all span {
    display: none;
  }
  .lj-home-events-view-all {
    width: 35px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .lj-home-events-view-all i {
    width: 32px;
    height: 32px;
  }
  .lj-home-event-media {
    height: 130px;
  }
  .lj-home-event-body h3 {
    font-size: 15px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-home-events *,
  .lj-home-events *::before,
  .lj-home-events *::after {
    animation: none !important;
    transition: none !important;
  }
}

/*******************REAL ESTATE***************/

/* LINJUST REAL ESTATE PAGE — page-specific CSS only */

.lj-real-estate-page {
  background: radial-gradient(circle at 10% 16%, rgba(7, 104, 207, .045), transparent 28rem), var(--color-off-white);
  color: var(--color-text);
  font-family: var(--font-body)
}

.lj-real-estate-page *,
.lj-real-estate-page *:before,
.lj-real-estate-page *:after {
  box-sizing: border-box
}

.lj-real-estate-page button,
.lj-real-estate-page input,
.lj-real-estate-page select {
  font-family: var(--font-body)
}

.lj-real-estate-page button {
  cursor: pointer
}

.lj-real-estate-page a {
  text-decoration: none
}

/* Hero */

.lj-re-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  isolation: isolate
}

.lj-re-hero-swiper,
.lj-re-hero-swiper .swiper-wrapper,
.lj-re-hero-swiper .swiper-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.lj-re-hero-swiper {
  z-index: 1
}

.lj-re-hero-slide {
  overflow: hidden;
  background: center/cover no-repeat
}

.lj-re-hero-slide:before {
  position: absolute;
  inset: -5%;
  content: "";
  background: inherit;
  background-position: center;
  background-size: cover;
  transform: scale(1.04)
}

.lj-re-hero-slide.swiper-slide-active[data-re-type="image"]:before {
  animation: ljReHeroZoom 9s ease-in-out infinite alternate
}

/* =========================================================
   HERO VIDEO BACKGROUND
========================================================= */

.lj-re-hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-dark);
  /*
     * The video is decorative and must not intercept
     * search, pagination or hero content interactions.
     */
  pointer-events: none;
  /*
     * Prevent unwanted selection and dragging.
     */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.lj-re-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none
}

.lj-re-hero>.container {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
}

.lj-re-hero-content {
  width: min(930px, 100%);
  padding: 46px 0 56px;
  margin: 5px auto;
}

.lj-re-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-re-typing-heading {
  min-height: 145px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(46px, 6vw, 80px);
  font-weight: var(--weight-semibold);
  line-height: .98;
  letter-spacing: -.035em
}

.lj-re-typing-cursor {
  display: inline-block;
  width: 2px;
  height: .88em;
  margin-left: 6px;
  background: var(--color-secondary);
  vertical-align: -.06em;
  animation: ljReCursorBlink .85s steps(1, end) infinite
}

.lj-re-hero-content>p {
  width: min(680px, 100%);
  margin: 22px 0 30px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: 1.8
}

.lj-re-search-form {
  width: min(930px, 100%)
}

.lj-re-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 68px;
  padding: 7px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-large)
}

.lj-re-search-field>i {
  margin-left: 16px;
  color: var(--color-primary);
  font-size: 22px
}

.lj-re-search-field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px
}

.lj-re-search-field button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal)
}

.lj-re-search-field button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .28)
}

.lj-re-hero-pagination {
  position: absolute !important;
  right: max(18px, calc((100vw - 1320px)/2)) !important;
  bottom: 29px !important;
  left: auto !important;
  z-index: 5 !important;
  display: flex;
  width: auto !important;
  gap: 9px
}

.lj-re-hero-pagination .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  margin: 0 !important;
  opacity: 1;
  background: rgba(255, 255, 255, .38);
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  transition: var(--transition-normal)
}

.lj-re-hero-pagination .swiper-pagination-bullet-active {
  width: 25px;
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 5px rgba(31, 158, 252, .16)
}

/* Layout and sidebar */

.lj-re-listing-section {
  padding: 78px 0 100px
}

.lj-re-layout {
  display: grid;
  grid-template-columns: minmax(250px, 295px) minmax(0, 1fr);
  gap: 30px;
  align-items: start
}

.lj-re-sidebar {
  position: sticky;
  top: 110px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-re-sidebar-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 24px;
  color: var(--color-white);
  background: var(--topbar-background)
}

.lj-re-sidebar-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-re-sidebar-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px
}

.lj-re-filter-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-round)
}

.lj-re-filter-group {
  border-bottom: 1px solid var(--color-border)
}

.lj-re-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 19px 22px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  text-align: left
}

.lj-re-filter-heading>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: var(--weight-bold)
}

.lj-re-filter-heading>span i,
.lj-re-filter-heading>i {
  color: var(--color-primary)
}

.lj-re-filter-body {
  display: grid;
  gap: 13px;
  padding: 0 22px 21px
}

.lj-re-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  cursor: pointer
}

.lj-re-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.lj-re-checkbox-mark {
  position: relative;
  width: 19px;
  height: 19px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-re-checkbox-mark:after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  content: "";
  opacity: 0;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4)
}

.lj-re-checkbox input:checked+.lj-re-checkbox-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .08)
}

.lj-re-checkbox input:checked+.lj-re-checkbox-mark:after {
  opacity: 1;
  transform: rotate(45deg)
}

.lj-re-checkbox>span:nth-of-type(2) {
  font-size: 12px
}

.lj-re-checkbox small {
  min-width: 25px;
  padding: 4px 6px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  font-size: 9px;
  text-align: center
}

.lj-re-conditional-group[hidden] {
  display: none !important
}

.lj-re-clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 44px);
  min-height: 44px;
  margin: 22px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold)
}

/* Toolbar and results */

.lj-re-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px
}

.lj-re-filter-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  color: var(--color-white);
  background: var(--color-dark);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold)
}

.lj-re-location-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
  padding: 0 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-small)
}

.lj-re-location-select>i:first-child {
  color: var(--color-primary)
}

.lj-re-location-select>i:last-child {
  color: var(--color-muted);
  font-size: 13px
}

.lj-re-location-select select {
  width: 100%;
  height: 52px;
  padding: 0 10px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  font-size: 12px
}

.lj-re-results-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px
}

.lj-re-results-panel span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-re-results-panel h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 38px
}

.lj-re-results-panel p {
  margin: 0;
  font-size: 11px
}

.lj-re-results-panel strong {
  color: var(--color-primary)
}

.lj-re-active-filters-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-re-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.lj-re-active-filter,
.lj-re-filter-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold)
}

/* Cards */

.lj-re-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.lj-property-card {
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal)
}

.lj-property-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-medium)
}

.lj-property-card.is-filter-hidden {
  display: none
}

.lj-property-media {
  position: relative;
  height: 238px;
  overflow: hidden;
  background: var(--color-dark)
}

.lj-property-media-swiper,
.lj-property-media-swiper .swiper-wrapper,
.lj-property-media-swiper .swiper-slide {
  width: 100%;
  height: 100%
}

.lj-property-media-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
  background: center/cover no-repeat
}

.lj-property-media-swiper .swiper-slide[data-media-type="image"]:before {
  position: absolute;
  inset: -4%;
  content: "";
  background: inherit;
  background-position: center;
  background-size: cover;
  transform: scale(1.04)
}

.lj-property-card:hover .swiper-slide-active[data-media-type="image"]:before {
  animation: ljReCardZoom 6s ease-in-out infinite alternate
}

.lj-property-video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-property-media-swiper .swiper-pagination {
  bottom: 11px !important
}

.lj-property-media-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 3px !important;
  opacity: .55;
  background: var(--color-white)
}

.lj-property-media-swiper .swiper-pagination-bullet-active {
  width: 16px;
  opacity: 1;
  background: var(--color-secondary);
  border-radius: var(--radius-pill)
}

.lj-property-save {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  box-shadow: 0 10px 24px rgba(1, 52, 130, .17)
}

.lj-property-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary)
}

.lj-property-badge-stack {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: grid;
  justify-items: end;
  gap: 7px
}

.lj-property-verified,
.lj-property-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-property-verified {
  color: var(--color-dark);
  background: rgba(74, 179, 252, .96)
}

.lj-property-category-badge {
  color: var(--color-white);
  background: rgba(1, 52, 130, .74)
}

.lj-property-media-stat {
  position: absolute;
  bottom: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: var(--color-white);
  background: rgba(1, 52, 130, .72);
  border-radius: var(--radius-pill);
  font-size: 9px
}

.lj-property-media-stat.is-left {
  left: 14px
}

.lj-property-media-stat.is-right {
  right: 14px
}

.lj-property-card-body {
  padding: 19px 18px 17px
}

.lj-property-price {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: var(--weight-bold)
}

.lj-property-card-body h3 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 23px;
  line-height: 1.08
}

.lj-property-location {
  display: flex;
  gap: 7px;
  margin-top: 14px;
  font-size: 10px
}

.lj-property-location i {
  color: var(--color-primary)
}

.lj-property-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border)
}

.lj-property-agent {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0
}

.lj-property-agent img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-round)
}

.lj-property-agent small {
  display: block;
  color: var(--color-muted);
  font-size: 7px;
  text-transform: uppercase
}

.lj-property-agent a {
  display: block;
  max-width: 120px;
  overflow: hidden;
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap
}

.lj-property-view-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 13px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

/* Empty, pagination, drawer */

.lj-re-empty-state {
  padding: 55px 25px;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center
}

.lj-re-empty-state>i {
  color: var(--color-primary);
  font-size: 58px
}

.lj-re-empty-state h3 {
  margin: 14px 0 7px;
  font-family: var(--font-heading);
  font-size: 30px
}

.lj-re-empty-reset {
  min-height: 44px;
  margin-top: 18px;
  padding: 0 17px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs)
}

.lj-re-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 38px
}

.lj-re-pagination button {
  min-width: 40px;
  height: 40px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-re-pagination button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-re-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  background: rgba(1, 52, 130, .58);
  border: 0;
  opacity: 0
}

@keyframes ljReHeroZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.13)
  }
}

@keyframes ljReCardZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.11)
  }
}

@keyframes ljReCursorBlink {
  0%,
  45% {
    opacity: 1
  }
  46%,
  100% {
    opacity: 0
  }
}

@media(max-width:1199.98px) {
  .lj-re-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:991.98px) {
  .lj-re-layout {
    grid-template-columns: 1fr
  }
  .lj-re-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: min(88vw, 360px);
    height: 100dvh;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    transform: translateX(-105%);
    transition: var(--transition-normal)
  }
  .lj-re-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-re-filter-close {
    display: flex
  }
  .lj-re-filter-backdrop.is-visible {
    display: block;
    opacity: 1
  }
  .lj-re-toolbar {
    grid-template-columns: auto repeat(3, minmax(0, 1fr))
  }
  .lj-re-filter-trigger {
    display: flex;
    min-width: 52px
  }
}

@media(max-width:767.98px) {
  .lj-re-hero,
  .lj-re-hero>.container {
    min-height: 530px
  }
  .lj-re-hero-content {
    padding: 82px 0 98px;
    text-align: center
  }
  .lj-re-hero-kicker {
    justify-content: center
  }
  .lj-re-typing-heading {
    min-height: 118px;
    font-size: clamp(39px, 11vw, 58px)
  }
  .lj-re-hero-content>p {
    margin-left: auto;
    margin-right: auto;
    font-size: 13px
  }
  .lj-re-search-field {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 6px
  }
  .lj-re-search-field button {
    grid-column: 1/-1;
    width: 100%;
    margin-top: 3px
  }
  .lj-re-hero-pagination {
    right: 50% !important;
    transform: translateX(50%)
  }
  .lj-re-toolbar {
    grid-template-columns: 44px repeat(3, minmax(0, 1fr));
    gap: 6px
  }
  .lj-re-filter-trigger span {
    display: none
  }
  .lj-re-location-select {
    padding: 0 8px
  }
  .lj-re-location-select>i:last-child {
    display: none
  }
  .lj-re-location-select select {
    padding: 0 4px;
    font-size: 9px
  }
  .lj-re-results-panel {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-re-active-filters-wrap {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-re-grid {
    grid-template-columns: 1fr
  }
  .lj-property-media {
    height: 260px
  }
  .lj-property-card-body h3 {
    min-height: 0;
    font-size: 26px
  }
}

@media(max-width:430px) {
  .lj-re-location-select>i:first-child {
    display: none
  }
  .lj-re-location-select select {
    font-size: 8px;
    text-align: center
  }
  .lj-property-card-footer {
    padding: 13px 12px
  }
}

/******************************************STORE PAGE************************/

/* LINJUST ELECTRONICS STORE PAGE — page-specific CSS only */

.lj-electronics-page {
  background: radial-gradient(circle at 10% 16%, rgba(7, 104, 207, .045), transparent 28rem), var(--color-off-white);
  color: var(--color-text);
  font-family: var(--font-body)
}

.lj-electronics-page *,
.lj-electronics-page *:before,
.lj-electronics-page *:after {
  box-sizing: border-box
}

.lj-electronics-page button,
.lj-electronics-page input,
.lj-electronics-page select {
  font-family: var(--font-body)
}

.lj-electronics-page button {
  cursor: pointer
}

.lj-electronics-page a {
  text-decoration: none
}

/* Hero */

.lj-es-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  isolation: isolate
}

.lj-es-hero-swiper {
  position: absolute;
  inset: 0;
  z-index: auto
}

.lj-es-hero-swiper,
.lj-es-hero-swiper .swiper-wrapper,
.lj-es-hero-swiper .swiper-slide {
  width: 100%;
  height: 100%
}

.lj-es-hero-swiper .swiper-wrapper {
  z-index: 1
}

.lj-es-hero-slide {
  overflow: hidden;
  background: center/cover no-repeat
}

.lj-es-hero-slide:before {
  position: absolute;
  inset: -5%;
  content: "";
  background: inherit;
  background-position: center;
  background-size: cover;
  transform: scale(1.04)
}

.lj-es-hero-slide.swiper-slide-active[data-re-type="image"]:before {
  animation: ljEsHeroZoom 9s ease-in-out infinite alternate
}

.lj-es-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
  pointer-events: none
}

.lj-es-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none
}

.lj-es-hero>.container {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
}

.lj-es-hero-content {
  width: min(930px, 100%);
  padding: 46px 0 46px;
  margin: 10px auto;
  text-align: center;
}

.lj-es-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-es-typing-heading {
  min-height: 145px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(46px, 6vw, 80px);
  font-weight: var(--weight-semibold);
  line-height: .98;
  letter-spacing: -.035em
}

.lj-es-typing-cursor {
  display: inline-block;
  width: 2px;
  height: .88em;
  margin-left: 6px;
  background: var(--color-secondary);
  vertical-align: -.06em;
  animation: ljEsCursorBlink .85s steps(1, end) infinite
}

.lj-es-hero-content>p {
  width: min(680px, 100%);
  margin: 22px 0 30px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: 1.8
}

.lj-es-search-form {
  width: min(930px, 100%)
}

.lj-es-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 68px;
  padding: 7px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-large)
}

.lj-es-search-field>i {
  margin-left: 16px;
  color: var(--color-primary);
  font-size: 22px
}

.lj-es-search-field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px
}

.lj-es-search-field button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal)
}

.lj-es-search-field button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .28)
}

.lj-es-hero-pagination {
  position: absolute !important;
  right: max(18px, calc((100vw - 1320px)/2)) !important;
  bottom: 29px !important;
  left: auto !important;
  z-index: 7 !important;
  display: flex;
  width: auto !important;
  gap: 9px;
  pointer-events: auto
}

.lj-es-hero-pagination .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  margin: 0 !important;
  opacity: 1;
  background: rgba(255, 255, 255, .38);
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  transition: var(--transition-normal)
}

.lj-es-hero-pagination .swiper-pagination-bullet-active {
  width: 25px;
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 5px rgba(31, 158, 252, .16)
}

/* Layout/sidebar */

.lj-es-listing-section {
  padding: 40px 0 60px
}

.lj-es-layout {
  display: grid;
  grid-template-columns: minmax(250px, 295px) minmax(0, 1fr);
  gap: 30px;
  align-items: start
}

.lj-es-sidebar {
  position: sticky;
  top: 110px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-es-sidebar-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 24px;
  color: var(--color-white);
  background: var(--topbar-background)
}

.lj-es-sidebar-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-es-sidebar-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px
}

.lj-es-filter-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-round)
}

.lj-es-filter-group {
  border-bottom: 1px solid var(--color-border)
}

.lj-es-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 19px 22px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  text-align: left
}

.lj-es-filter-heading>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--font-size-h);
  font-weight: var(--weight-bold)
}

.lj-es-filter-heading>span i,
.lj-es-filter-heading>i {
  color: var(--color-primary)
}

.lj-es-filter-body {
  display: grid;
  gap: 13px;
  padding: 0 22px 21px
}

.lj-es-subcategory-group[hidden] {
  display: none !important
}

/* Image checkboxes */

.lj-es-image-option-list {
  gap: 10px
}

.lj-es-image-checkbox {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 11px;
  cursor: pointer
}

.lj-es-image-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.lj-es-image-check {
  position: relative;
  width: 35px;
  height: 35px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-xs);
  transition: var(--transition-normal)
}

.lj-es-image-check:after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "✓";
  opacity: 0;
  color: var(--color-white);
  background: rgba(7, 104, 207, .72);
  font-size: 15px;
  font-weight: var(--weight-bold);
  transition: var(--transition-fast)
}

.lj-es-image-checkbox input:checked+.lj-es-image-check {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .08)
}

.lj-es-image-checkbox input:checked+.lj-es-image-check:after {
  opacity: 1
}

.lj-es-brand-check {
  background-size: contain;
  background-color: var(--color-white)
}

.lj-es-image-checkbox>span:last-child {
  font-size: var(--main-font-size);
  font-weight: var(--weight-medium);
  color: var(--color-text)
}

/* Standard checkboxes */

.lj-es-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer
}

.lj-es-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.lj-es-checkbox-mark {
  position: relative;
  width: 19px;
  height: 19px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-es-checkbox-mark:after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  content: "";
  opacity: 0;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4)
}

.lj-es-checkbox input:checked+.lj-es-checkbox-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .08)
}

.lj-es-checkbox input:checked+.lj-es-checkbox-mark:after {
  opacity: 1;
  transform: rotate(45deg)
}

.lj-es-checkbox>span:last-child {
  font-size: var(--main-font-size)
}

/* Price range */

.lj-es-price-values {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px
}

.lj-es-price-values span {
  display: grid;
  gap: 4px;
  color: var(--color-muted);
  font-size: 9px;
  text-transform: uppercase
}

.lj-es-price-values span:last-child {
  text-align: right
}

.lj-es-price-values strong {
  color: var(--color-title);
  font-size: 13px
}

.lj-es-range-slider {
  position: relative;
  height: 28px
}

.lj-es-range-track,
.lj-es-range-progress {
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: var(--radius-pill)
}

.lj-es-range-track {
  background: var(--color-border)
}

.lj-es-range-progress {
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
  left: 0;
  right: 0
}

.lj-es-range-slider input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none
}

.lj-es-range-slider input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border: 5px solid var(--color-primary);
  border-radius: var(--radius-round);
  box-shadow: 0 4px 12px rgba(7, 104, 207, .2);
  pointer-events: auto;
  appearance: none
}

.lj-es-range-slider input::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--color-white);
  border: 5px solid var(--color-primary);
  border-radius: var(--radius-round);
  pointer-events: auto
}

.lj-es-clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 44px);
  min-height: 44px;
  margin: 22px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold)
}

/* Toolbar/results */

.lj-es-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px
}

.lj-es-filter-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  color: var(--color-white);
  background: var(--color-dark);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold)
}

.lj-es-location-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
  padding: 0 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-small)
}

.lj-es-location-select>i:first-child {
  color: var(--color-primary)
}

.lj-es-location-select>i:last-child {
  color: var(--color-muted);
  font-size: 13px
}

.lj-es-location-select select {
  width: 100%;
  height: 52px;
  padding: 0 10px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  font-size: 12px
}

.lj-es-results-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px
}

.lj-es-results-panel span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-es-results-panel h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 38px
}

.lj-es-results-panel p {
  margin: 0;
  font-size: 11px
}

.lj-es-results-panel strong {
  color: var(--color-primary)
}

.lj-es-active-filters-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-es-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.lj-es-active-filter,
.lj-es-filter-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold)
}

/* Product cards */

.lj-es-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px
}

.lj-es-product-card {
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal)
}

.lj-es-product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-medium)
}

.lj-es-product-card.is-filter-hidden {
  display: none
}

.lj-es-product-media {
  position: relative;
  height: 238px;
  overflow: hidden;
  background: var(--color-dark)
}

.lj-es-product-swiper,
.lj-es-product-swiper .swiper-wrapper,
.lj-es-product-swiper .swiper-slide {
  width: 100%;
  height: 100%
}

.lj-es-product-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
  background: center/cover no-repeat
}

.lj-es-product-swiper .swiper-slide[data-media-type="image"]:before {
  position: absolute;
  inset: -4%;
  content: "";
  background: inherit;
  background-position: center;
  background-size: cover;
  transform: scale(1.04)
}

.lj-es-product-card:hover .swiper-slide-active[data-media-type="image"]:before {
  animation: ljEsCardZoom 6s ease-in-out infinite alternate
}

.lj-es-product-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark)
}

.lj-es-product-swiper .swiper-pagination {
  bottom: 11px !important
}

.lj-es-product-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 3px !important;
  opacity: .55;
  background: var(--color-white)
}

.lj-es-product-swiper .swiper-pagination-bullet-active {
  width: 16px;
  opacity: 1;
  background: var(--color-secondary);
  border-radius: var(--radius-pill)
}

.lj-es-product-save {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: 38px;
  height: 38px;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  box-shadow: 0 10px 24px rgba(1, 52, 130, .17)
}

.lj-es-product-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary)
}

.lj-es-product-badges {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: grid;
  justify-items: end;
  gap: 7px
}

.lj-es-verified,
.lj-es-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-es-verified {
  color: var(--color-dark);
  background: rgba(74, 179, 252, .96)
}

.lj-es-category-badge {
  color: var(--color-white);
  background: rgba(1, 52, 130, .74)
}

.lj-es-product-body {
  padding: 19px 18px 17px
}

.lj-es-product-price {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: var(--weight-bold)
}

.lj-es-product-body h3 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 23px;
  line-height: 1.08
}

.lj-es-product-location {
  display: flex;
  gap: 7px;
  margin-top: 14px;
  font-size: 13px
}

.lj-es-product-location i {
  color: var(--color-primary)
}

.lj-es-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border)
}

.lj-es-seller {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0
}

.lj-es-seller img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-round)
}

.lj-es-seller small {
  display: block;
  color: var(--color-muted);
  font-size: 7px;
  text-transform: uppercase
}

.lj-es-seller a {
  display: block;
  max-width: 120px;
  overflow: hidden;
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap
}

.lj-es-view-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 13px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

/* Empty/pagination/drawer */

.lj-es-empty-state {
  padding: 55px 25px;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center
}

.lj-es-empty-state>i {
  color: var(--color-primary);
  font-size: 58px
}

.lj-es-empty-state h3 {
  margin: 14px 0 7px;
  font-family: var(--font-heading);
  font-size: 30px
}

.lj-es-empty-reset {
  min-height: 44px;
  margin-top: 18px;
  padding: 0 17px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs)
}

.lj-es-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 38px
}

.lj-es-pagination button {
  min-width: 40px;
  height: 40px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-es-pagination button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-es-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  background: rgba(1, 52, 130, .58);
  border: 0;
  opacity: 0
}

@keyframes ljEsHeroZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.13)
  }
}

@keyframes ljEsCardZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.11)
  }
}

@keyframes ljEsCursorBlink {
  0%,
  45% {
    opacity: 1
  }
  46%,
  100% {
    opacity: 0
  }
}

@media(max-width:1199.98px) {
  .lj-es-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:991.98px) {
  .lj-es-layout {
    grid-template-columns: 1fr
  }
  .lj-es-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: min(88vw, 360px);
    height: 100dvh;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    transform: translateX(-105%);
    transition: var(--transition-normal)
  }
  .lj-es-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-es-filter-close {
    display: flex
  }
  .lj-es-filter-backdrop.is-visible {
    display: block;
    opacity: 1
  }
  .lj-es-toolbar {
    grid-template-columns: auto repeat(3, minmax(0, 1fr))
  }
  .lj-es-filter-trigger {
    display: flex;
    min-width: 52px
  }
}

@media(max-width:767.98px) {
  .lj-es-hero,
  .lj-es-hero>.container {
    min-height: 530px
  }
  .lj-es-hero-content {
    padding: 82px 0 98px;
    text-align: center
  }
  .lj-es-hero-kicker {
    justify-content: center
  }
  .lj-es-typing-heading {
    min-height: 118px;
    font-size: clamp(39px, 11vw, 58px)
  }
  .lj-es-hero-content>p {
    margin-left: auto;
    margin-right: auto;
    font-size: 13px
  }
  .lj-es-search-field {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 6px
  }
  .lj-es-search-field button {
    grid-column: 1/-1;
    width: 100%;
    margin-top: 3px
  }
  .lj-es-hero-pagination {
    right: 50% !important;
    transform: translateX(50%)
  }
  .lj-es-toolbar {
    grid-template-columns: 44px repeat(3, minmax(0, 1fr));
    gap: 6px
  }
  .lj-es-filter-trigger span {
    display: none
  }
  .lj-es-location-select {
    padding: 0 8px
  }
  .lj-es-location-select>i:last-child {
    display: none
  }
  .lj-es-location-select select {
    padding: 0 4px;
    font-size: 9px
  }
  .lj-es-results-panel {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-es-active-filters-wrap {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-es-grid {
    grid-template-columns: 1fr
  }
  .lj-es-product-media {
    height: 260px
  }
  .lj-es-product-body h3 {
    min-height: 0;
    font-size: 26px
  }
}

@media(max-width:430px) {
  .lj-es-location-select>i:first-child {
    display: none
  }
  .lj-es-location-select select {
    font-size: 8px;
    text-align: center
  }
  .lj-es-product-footer {
    padding: 13px 12px
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-electronics-page *,
  .lj-electronics-page *:before,
  .lj-electronics-page *:after {
    animation: none !important;
    transition: none !important
  }
}

/*****************************PRODUCT DETAILS********************/

/* LINJUST PRODUCT DETAILS — additional page CSS only */

/* =========================================================
   LINJUST PRODUCT DETAILS PAGE
   Additional page styles only.
   Existing global CSS variables are retained.
========================================================= */

.lj-pd-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-off-white);
  font-family: var(--font-body);
}

.lj-pd-page *,
.lj-pd-page *::before,
.lj-pd-page *::after {
  box-sizing: border-box;
}

.lj-pd-page button,
.lj-pd-page input,
.lj-pd-page select,
.lj-pd-page textarea {
  font-family: var(--font-body);
}

.lj-pd-page button {
  cursor: pointer;
}

.lj-pd-page a {
  text-decoration: none;
}

/* =========================================================
   PAGE LAYOUT
========================================================= */

.lj-pd-section {
  position: relative;
  padding: 48px 0 90px;
}

.lj-pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 26px;
  align-items: start;
}

.lj-pd-main,
.lj-pd-sidebar {
  display: grid;
  min-width: 0;
  gap: 22px;
}

.lj-pd-card {
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
}

/* =========================================================
   PRODUCT GALLERY CARD
========================================================= */

.lj-pd-product-card {
  min-width: 0;
  padding: 22px;
}

.lj-pd-frame {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-pd-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lj-pd-stage img,
.lj-pd-stage video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.lj-pd-stage img {
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--transition-normal);
}

.lj-pd-stage.is-zoomed {
  cursor: zoom-out;
}

.lj-pd-stage.is-zoomed img {
  transform: scale(1.65);
}

.lj-pd-media-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--color-muted);
  text-align: center;
}

.lj-pd-media-empty i {
  font-size: 52px;
}

.lj-pd-media-empty p {
  margin: 0;
  font-size: 12px;
}

/* =========================================================
   PRODUCT VIDEO
========================================================= */

.lj-pd-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-dark);
}

.lj-pd-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-dark);
  cursor: pointer;
}

.lj-pd-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-round);
  box-shadow: 0 18px 40px rgba(1, 52, 130, .30);
  font-size: 25px;
  transform: translate(-50%, -50%);
  transition: var(--transition-normal);
}

.lj-pd-video-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* =========================================================
   MEDIA BADGES
========================================================= */

.lj-pd-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: grid;
  gap: 7px;
  pointer-events: none;
}

.lj-pd-badges span,
.lj-pd-badges small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-pd-badges span {
  color: var(--color-dark);
  background: var(--color-secondary);
}

.lj-pd-badges small {
  color: var(--color-white);
  background: rgba(1, 52, 130, .75);
  backdrop-filter: blur(8px);
}

/* =========================================================
   MEDIA FRAME TOOLS
========================================================= */

.lj-pd-frame-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: grid;
  gap: 8px;
}

.lj-pd-frame-tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal);
}

.lj-pd-frame-tools button:hover,
.lj-pd-frame-tools button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  transform: translateY(-2px);
}

/* =========================================================
   THUMBNAIL SWIPER
========================================================= */

.lj-pd-thumbs-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 10px;
  margin-top: 14px;
}

.lj-pd-thumbs {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.lj-pd-thumbs .swiper-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: auto;
  box-sizing: content-box;
}

.lj-pd-thumbs .swiper-slide {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 100px;
}

.lj-pd-thumb {
  position: relative;
  height: 100px;
  overflow: hidden;
  background-color: var(--color-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition-normal);
}

.lj-pd-thumb::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient( 180deg, transparent, rgba(1, 52, 130, .12));
  pointer-events: none;
}

.lj-pd-thumb:hover {
  border-color: rgba(7, 104, 207, .42);
  transform: translateY(-2px);
}

.lj-pd-thumb.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(7, 104, 207, .08);
}

.lj-pd-thumb.is-video-thumb::after,
.lj-pd-thumb[data-type="video"]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  content: "\f144";
  color: var(--color-white);
  background: rgba(1, 52, 130, .75);
  border-radius: var(--radius-round);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.lj-pd-thumb-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 54px;
  padding: 0;
  color: var(--color-white);
  background: var(--color-dark);
  border: 0;
  border-radius: var(--radius-xs);
  transition: var(--transition-normal);
}

.lj-pd-thumb-nav:hover {
  background: var(--color-primary);
}

.lj-pd-thumb-nav.swiper-button-disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* =========================================================
   PRODUCT HEADING
========================================================= */

.lj-pd-heading {
  padding: 25px 2px 4px;
}

.lj-pd-heading>span {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-pd-heading h1 {
  margin: 8px 0 18px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
}

.lj-pd-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lj-pd-price-row>strong {
  color: var(--color-primary);
  font-size: 26px;
  font-weight: var(--weight-bold);
}

.lj-pd-price-row>div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lj-pd-price-row span {
  color: var(--color-text);
  font-size: 11px;
}

.lj-pd-save {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  transition: var(--transition-normal);
}

.lj-pd-save:hover,
.lj-pd-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   PRODUCT TABS
========================================================= */

.lj-pd-tabs {
  margin-top: 20px;
}

.lj-pd-tab-list {
  display: flex;
  width: 100%;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
}

.lj-pd-tab-list::-webkit-scrollbar {
  display: none;
}

.lj-pd-tab-list button {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 15px 16px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.lj-pd-tab-list button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: transparent;
}

.lj-pd-tab-list button.is-active {
  color: var(--color-primary);
}

.lj-pd-tab-list button.is-active::after {
  background: var(--color-primary);
}

.lj-pd-tab-panel {
  padding: 24px 2px 4px;
  font-size: 14px;
  line-height: 1.8;
}

.lj-pd-tab-panel[hidden] {
  display: none !important;
}

.lj-pd-tab-panel p {
  margin: 0 0 14px;
}

/* =========================================================
   FEATURES TAB
========================================================= */

.lj-pd-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lj-pd-features li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px;
  /* background:var(--color-surface);
    border:1px solid var(--color-border); */
  font-size: 12px;
}

.lj-pd-features i {
  color: var(--color-primary);
}

/* =========================================================
   SOCIAL VIDEO TAB
========================================================= */

.lj-pd-social-video {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background: var(--color-dark);
}

.lj-pd-social-video iframe,
.lj-pd-social-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}

.lj-pd-video-fallback {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 30px;
  color: var(--color-white);
  text-align: center;
}

.lj-pd-video-fallback a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 10px;
  padding: 0 15px;
  color: var(--color-white);
  background: var(--color-primary);
}

/* =========================================================
   STORE AND DELIVERY TABS
========================================================= */

.lj-pd-store {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

.lj-pd-store p {
  padding: 14px;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.lj-pd-store span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary);
  font-size: 10px;
  text-transform: uppercase;
}

.lj-pd-map {
  height: 320px;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.lj-pd-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lj-pd-delivery {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.lj-pd-delivery i {
  margin-right: 7px;
  color: var(--color-success);
}

/* =========================================================
   ACTION CARD
========================================================= */

.lj-pd-action-card,
.lj-pd-share-card,
.lj-pd-report-card {
  padding: 20px;
}

.lj-pd-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.lj-pd-call-wrap {
  position: relative;
  min-width: 0;
}

.lj-pd-big-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  gap: 9px;
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-xs);
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-pd-big-btn:hover {
  transform: translateY(-2px);
}

.lj-pd-big-btn.call {
  background: linear-gradient( 135deg, var(--color-dark), var(--color-dark-soft));
}

.lj-pd-big-btn.offer {
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
}

/* =========================================================
   PHONE DROPDOWNS
========================================================= */

.lj-pd-phone-dropdown,
.lj-pd-seller-phones {
  position: relative;
  z-index: 20;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-medium);
}

.lj-pd-phone-dropdown[hidden],
.lj-pd-seller-phones[hidden] {
  display: none;
}

.lj-pd-phone-dropdown>div,
.lj-pd-seller-phones>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}

.lj-pd-phone-dropdown>div:last-of-type,
.lj-pd-seller-phones>div:last-of-type {
  border-bottom: 0;
}

.lj-pd-phone-dropdown button,
.lj-pd-seller-phones button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 0;
  border-radius: var(--radius-xs);
}

.lj-pd-phone-dropdown p,
.lj-pd-seller-phones p {
  margin: 9px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

/* =========================================================
   SHARE CARD
========================================================= */

.lj-pd-share-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lj-pd-share-card span,
.lj-pd-report-card span,
.lj-pd-disclaimer span {
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-pd-share-card h2,
.lj-pd-report-card h2 {
  margin: 5px 0 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 25px;
}

.lj-pd-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lj-pd-share-list button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-none);
  transition: var(--transition-normal);
}

.lj-pd-share-list button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-small);
}

.lj-pd-share-list .facebook {
  background: #0687F1;
}

.lj-pd-share-list .whatsapp {
  background: #1F9EFC;
}

.lj-pd-share-list .twitter {
  background: #013482;
}

.lj-pd-share-list .pinterest {
  background: #0768CF;
}

.lj-pd-share-list .linkedin {
  background: #0768CF;
}

.lj-pd-share-list .copy {
  background: #082E5C;
}

/* =========================================================
   REPORT CARD
========================================================= */

.lj-pd-report-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lj-pd-report-card>div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lj-pd-report-card>div>i {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-round);
  font-size: 22px;
}

.lj-pd-report-card>button {
  min-height: 44px;
  padding: 0 15px;
  color: var(--color-white);
  background: var(--color-danger);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   SELLER CARD
========================================================= */

.lj-pd-seller-card {
  padding: 22px;
}

.lj-pd-seller-top {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.lj-pd-avatar {
  position: relative;
  flex: 0 0 auto;
}

.lj-pd-avatar img {
  display: block;
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.lj-pd-avatar span {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 15px;
  height: 15px;
  background: var(--color-muted);
  border: 3px solid var(--color-white);
  border-radius: var(--radius-round);
}

.lj-pd-avatar span.is-online {
  background: #1F9EFC;
  animation: ljPdPulse 1.5s infinite;
}

.lj-pd-seller-top h2 {
  margin: 3px 0 7px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 25px;
}

.lj-pd-rating {
  margin: 0;
  color: var(--color-secondary-dark);
}

.lj-pd-rating small {
  color: var(--color-muted);
}

.lj-pd-seller-badges {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.lj-pd-seller-badges span {
  font-size: 11px;
}

.lj-pd-seller-actions {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin-top: 20px;
}

.lj-pd-seller-actions>button,
.lj-pd-seller-actions>a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  gap: 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold);
}

.lj-pd-seller-actions>button {
  border: 0;
}

.lj-pd-seller-actions>button:first-child {
  color: var(--color-white);
  background: var(--color-dark);
}

.lj-pd-seller-actions>button:nth-of-type(2) {
  color: var(--color-white);
  background: var(--color-primary);
}

.lj-pd-seller-actions>a {
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

/* =========================================================
   FEEDBACK CARD
========================================================= */

.lj-pd-feedback-card {
  min-width: 0;
  overflow: hidden;
}

.lj-pd-feedback-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 20px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  text-align: left;
}

.lj-pd-feedback-head span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-bold);
}

.lj-pd-feedback-head strong {
  color: var(--color-primary);
}

.lj-pd-feedback-body {
  display: block;
  padding: 18px;
  border-top: 1px solid var(--color-border);
}

.lj-pd-feedback-body[hidden] {
  display: none;
}

.lj-pd-feedback-body textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 12px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  outline: 0;
  resize: vertical;
}

.lj-pd-feedback-body textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-pd-feedback-body form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  gap: 7px;
  margin-top: 10px;
  padding: 0 14px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs);
}

.lj-pd-comments {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.lj-pd-comments article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
}

.lj-pd-comments img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-round);
}

.lj-pd-comments article>div>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lj-pd-comments span {
  color: var(--color-muted);
  font-size: 9px;
}

.lj-pd-comment {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.lj-pd-readmore {
  display: inline;
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  border: 0;
  font-size: 10px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   WHATSAPP CARD
========================================================= */

.lj-pd-whatsapp-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 15px;
  color: var(--color-white);
  background: linear-gradient( 135deg, #0687F1, #4AB3FC);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  cursor: pointer;
  transition: var(--transition-normal);
}

.lj-pd-whatsapp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.lj-pd-whatsapp-card>span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--radius-round);
  font-size: 27px;
}

.lj-pd-whatsapp-card small {
  font-size: 8px;
  text-transform: uppercase;
}

.lj-pd-whatsapp-card h3 {
  margin: 3px 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 23px;
}

.lj-pd-whatsapp-card p {
  margin: 0;
  font-size: 10px;
}

/* =========================================================
   DISCLAIMER
========================================================= */

.lj-pd-disclaimer {
  display: flex;
  gap: 13px;
  padding: 20px;
}

.lj-pd-disclaimer>i {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 24px;
}

.lj-pd-disclaimer h3 {
  margin: 6px 0;
  color: var(--color-title);
  font-size: 15px;
}

.lj-pd-disclaimer p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

/* =========================================================
   SELLER POSITION SLOTS
========================================================= */

.lj-pd-mobile-seller-slot {
  display: none;
}

.lj-pd-desktop-seller-slot {
  min-width: 0;
}

/* =========================================================
   LIGHTBOX
========================================================= */

.lj-pd-lightbox,
.offer_m_modal,
.lj-pd-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  background: rgba(1, 52, 130, .88);
  backdrop-filter: blur(8px);
}

.lj-pd-lightbox.is-open,
.offer_m_modal.is-open,
.lj-pd-modal.is-open {
  display: flex;
}

.lj-pd-lightbox {
  align-items: center;
  justify-content: center;
}

.lj-pd-lightbox-stage {
  display: grid;
  place-items: center;
  width: min(1100px, 88vw);
  height: min(760px, 82vh);
}

.lj-pd-lightbox-stage img,
.lj-pd-lightbox-stage video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lj-pd-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-dark);
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-round);
}

.lj-pd-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 70px;
  padding: 0;
  color: var(--color-white);
  background: rgba(255, 255, 255, .15);
  border: 0;
  transform: translateY(-50%);
}

.lj-pd-lightbox-nav.prev {
  left: 18px;
}

.lj-pd-lightbox-nav.next {
  right: 18px;
}

.lj-pd-lightbox-count {
  position: absolute;
  bottom: 20px;
  color: var(--color-white);
}

/* =========================================================
   MODALS
========================================================= */

.offer_m_modal,
.lj-pd-modal {
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.offer_m_panel,
.lj-pd-modal-panel {
  position: relative;
  width: min(500px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-large);
}

.offer_m_close,
.lj-pd-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 0;
  border-radius: var(--radius-round);
}

.offer_m_panel>span,
.lj-pd-modal-panel>span {
  color: var(--color-primary);
  font-size: 9px;
  text-transform: uppercase;
}

.offer_m_panel h2,
.lj-pd-modal-panel h2 {
  margin: 6px 0 20px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 30px;
}

.offer_m_panel form,
.lj-pd-modal-panel form {
  display: grid;
  gap: 14px;
}

.offer_m_panel label,
.lj-pd-modal-panel label {
  display: grid;
  gap: 7px;
  font-size: 11px;
  font-weight: var(--weight-bold);
}

.offer_m_panel label>div,
.lj-pd-modal-panel label>div {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
}

.lj-pd-modal-panel .textarea {
  align-items: flex-start;
  padding-top: 12px;
}

.offer_m_panel label i,
.lj-pd-modal-panel label i {
  margin-right: 9px;
  color: var(--color-primary);
}

.offer_m_panel input,
.lj-pd-modal-panel input,
.lj-pd-modal-panel select,
.lj-pd-modal-panel textarea {
  width: 100%;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
}

.lj-pd-modal-panel textarea {
  resize: vertical;
}

.offer_m_panel form>button,
.lj-pd-modal-panel form>button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: 8px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs);
  font-weight: var(--weight-bold);
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes ljPdPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 158, 252, .50);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(31, 158, 252, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(31, 158, 252, 0);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-pd-layout {
    grid-template-columns: 1fr;
  }
  .lj-pd-mobile-seller-slot {
    display: block;
    margin-bottom: 22px;
  }
  .lj-pd-desktop-seller-slot {
    display: none;
  }
  .lj-pd-mobile-seller-slot .lj-pd-seller-card {
    width: 100%;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-pd-section {
    padding: 24px 0 65px;
  }
  .lj-pd-product-card {
    padding: 12px;
  }
  .lj-pd-frame {
    height: 360px;
  }
  .lj-pd-thumbs-row {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 7px;
  }
  .lj-pd-thumb-nav {
    width: 34px;
    height: 48px;
  }
  .lj-pd-thumb,
  .lj-pd-thumbs .swiper-slide {
    height: 68px;
  }
  .lj-pd-tab-list button {
    padding: 12px 10px;
    font-size: 9px;
  }
  .lj-pd-features {
    grid-template-columns: 1fr;
  }
  .lj-pd-store {
    grid-template-columns: 1fr;
  }
  .lj-pd-action-grid {
    grid-template-columns: 1fr;
  }
  .lj-pd-share-card,
  .lj-pd-report-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .lj-pd-price-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .lj-pd-lightbox-stage {
    width: 100vw;
    height: 78vh;
    padding: 15px;
  }
  .lj-pd-lightbox-nav {
    width: 38px;
    height: 58px;
  }
  .lj-pd-lightbox-nav.prev {
    left: 5px;
  }
  .lj-pd-lightbox-nav.next {
    right: 5px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:430px) {
  .lj-pd-frame {
    height: 300px;
  }
  .lj-pd-heading h1 {
    font-size: 29px;
  }
  .lj-pd-tab-list button span {
    font-size: 8px;
  }
  .lj-pd-whatsapp-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .lj-pd-whatsapp-card>i:last-child {
    display: none;
  }
  .lj-pd-seller-top {
    align-items: center;
  }
  .lj-pd-avatar img {
    width: 70px;
    height: 70px;
  }
  .lj-pd-report-card>button {
    width: 100%;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-pd-page *,
  .lj-pd-page *::before,
  .lj-pd-page *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/********************************************USER DASHBOARD*************************/

/* =========================================================
   LINJUST USER DASHBOARD
   Additional page styles only.
========================================================= */

.lj-dashboard-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: radial-gradient(circle at 8% 10%, rgba(7, 104, 207, .045), transparent 26rem), var(--color-off-white);
  font-family: var(--font-body)
}

.lj-dashboard-page *,
.lj-dashboard-page *::before,
.lj-dashboard-page *::after {
  box-sizing: border-box
}

.lj-dashboard-page button,
.lj-dashboard-page input,
.lj-dashboard-page select {
  font-family: var(--font-body)
}

.lj-dashboard-page button {
  cursor: pointer
}

.lj-dashboard-page a {
  text-decoration: none
}

.lj-dashboard-section {
  padding: 46px 0 90px
}

.lj-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(0, 3fr);
  gap: 26px;
  align-items: start
}

.lj-dashboard-card {
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-dashboard-sidebar {
  position: sticky;
  top: 105px;
  display: grid;
  gap: 18px;
  min-width: 0
}

/* Profile */

.lj-dashboard-profile-card {
  position: relative;
  padding: 28px 20px 22px;
  text-align: center
}

.lj-dashboard-sidebar-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-round)
}

.lj-dashboard-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 14px
}

.lj-dashboard-avatar {
  display: block;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 4px solid var(--color-white);
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 2px var(--color-secondary), 0 14px 32px rgba(1, 52, 130, .16)
}

.lj-dashboard-avatar-edit {
  position: absolute;
  right: 0;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-white);
  background: var(--color-primary);
  border: 3px solid var(--color-white);
  border-radius: var(--radius-round);
  font-size: 12px
}

.lj-dashboard-profile-card h2 {
  margin: 0 0 10px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--weight-semibold)
}

.lj-dashboard-verification {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-dashboard-verification.is-verified {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10)
}

.lj-dashboard-verification.is-pending {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .15)
}

.lj-dashboard-account-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 11px;
  font-weight: var(--weight-semibold)
}

.lj-dashboard-account-state.is-active {
  color: var(--color-success)
}

.lj-dashboard-account-state.is-inactive {
  color: var(--color-danger)
}

.lj-dashboard-state-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round)
}

.is-active .lj-dashboard-state-dot {
  background: var(--color-success);
  animation: ljDashboardGreenWave 1.6s infinite
}

.is-inactive .lj-dashboard-state-dot {
  background: var(--color-danger);
  animation: ljDashboardRedWave 1.6s infinite
}

.lj-dashboard-account-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  margin-top: 19px;
  padding: 13px;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-dashboard-account-code span {
  grid-column: 1/-1;
  color: var(--color-muted);
  font-size: 8px;
  text-transform: uppercase
}

.lj-dashboard-account-code strong {
  color: var(--color-title);
  font-size: 17px;
  letter-spacing: .12em
}

.lj-dashboard-account-code button {
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 0;
  border-radius: var(--radius-xs)
}

/* Menu */

.lj-dashboard-menu-card {
  padding: 12px
}

.lj-dashboard-menu {
  display: grid;
  gap: 4px
}

.lj-dashboard-menu-link,
.lj-dashboard-menu-dropdown-toggle,
.lj-dashboard-add-listing,
.lj-dashboard-logout {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 48px;
  gap: 8px;
  padding: 0 13px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-align: left;
  transition: var(--transition-normal)
}

.lj-dashboard-menu-link>i,
.lj-dashboard-menu-dropdown-toggle span>i,
.lj-dashboard-add-listing>i,
.lj-dashboard-logout>i {
  color: var(--color-primary);
  font-size: 15px
}

.lj-dashboard-menu-link:hover,
.lj-dashboard-menu-link.is-active,
.lj-dashboard-menu-dropdown-toggle:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft)
}

.lj-dashboard-menu-dropdown-toggle {
  display: flex;
  justify-content: space-between
}

.lj-dashboard-menu-dropdown-toggle>span {
  display: flex;
  align-items: center;
  gap: 8px
}

.lj-dashboard-menu-dropdown-toggle>i {
  font-size: 10px;
  transition: var(--transition-normal)
}

.lj-dashboard-menu-dropdown-toggle.is-open>i {
  transform: rotate(180deg)
}

.lj-dashboard-menu-submenu {
  display: grid;
  gap: 3px;
  margin: 4px 0 5px 31px;
  padding-left: 10px;
  border-left: 1px dashed var(--color-border)
}

.lj-dashboard-menu-submenu[hidden] {
  display: none
}

.lj-dashboard-menu-submenu a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 41px;
  gap: 7px;
  padding: 0 10px;
  color: var(--color-text);
  border-radius: var(--radius-xs);
  font-size: 10px
}

.lj-dashboard-menu-submenu a:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft)
}

.lj-dashboard-menu-submenu i {
  color: var(--color-primary)
}

.lj-dashboard-menu-submenu small,
.lj-dashboard-menu-badge {
  min-width: 24px;
  padding: 4px 6px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  font-size: 8px;
  text-align: center
}

.lj-dashboard-add-listing {
  margin-top: 7px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark))
}

.lj-dashboard-add-listing>i {
  color: var(--color-white)
}

.lj-dashboard-logout {
  margin-top: 5px;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .06)
}

.lj-dashboard-logout>i {
  color: var(--color-danger)
}

/* Content */

.lj-dashboard-content {
  display: grid;
  min-width: 0;
  gap: 22px
}

.lj-dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px
}

.lj-dashboard-heading span,
.lj-dashboard-card-heading span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-dashboard-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: var(--weight-semibold);
  line-height: 1
}

.lj-dashboard-heading p {
  max-width: 680px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7
}

.lj-dashboard-heading-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 38px;
  gap: 8px;
  padding: 0 16px;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-xs);
  font-size: var(--main-font-size);
  font-weight: var(--weight-bold)
}

/* Alerts */

.lj-dashboard-alerts {
  display: grid;
  gap: 12px
}

.lj-dashboard-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 17px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-small)
}

.lj-dashboard-alert>i {
  margin-top: 2px;
  font-size: 20px
}

.lj-dashboard-alert strong {
  display: block;
  color: var(--color-title);
  font-size: 12px
}

.lj-dashboard-alert p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.6
}

.lj-dashboard-alert.is-success {
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .20)
}

.lj-dashboard-alert.is-warning {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .12);
  border-color: rgba(31, 158, 252, .30)
}

.lj-dashboard-alert.is-danger {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .20)
}

.lj-dashboard-alert-close {
  width: 30px;
  height: 30px;
  padding: 0;
  color: currentColor;
  background: transparent;
  border: 0
}

/* Widgets */

.lj-dashboard-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px
}

.lj-dashboard-widget {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 15px;
  overflow: hidden;
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal)
}

.lj-dashboard-widget::after {
  position: absolute;
  top: -40px;
  right: -35px;
  width: 110px;
  height: 110px;
  content: "";
  background: rgba(7, 104, 207, .035);
  border-radius: var(--radius-round)
}

.lj-dashboard-widget:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: var(--shadow-medium)
}

.lj-dashboard-widget-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-size: 21px
}

.lj-dashboard-widget-icon.jobs {
  background: linear-gradient(135deg, #0687F1, #1F9EFC)
}

.lj-dashboard-widget-icon.products {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark))
}

.lj-dashboard-widget-icon.events {
  background: linear-gradient(135deg, var(--color-secondary-dark), var(--color-secondary))
}

.lj-dashboard-widget>div:last-child {
  position: relative;
  z-index: 2;
  min-width: 0
}

.lj-dashboard-widget span {
  display: block;
  font-size: 10px
}

.lj-dashboard-widget strong {
  display: block;
  margin: 3px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 31px;
  line-height: 1
}

.lj-dashboard-widget small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-success);
  font-size: 8px
}

/* Chart and shared headings */

.lj-dashboard-chart-card,
.lj-dashboard-table-card {
  padding: 22px
}

.lj-dashboard-card-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px
}

.lj-dashboard-card-heading h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: var(--weight-semibold)
}

.lj-dashboard-card-heading select {
  min-height: 42px;
  padding: 0 34px 0 12px;
  color: var(--color-title);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  outline: 0;
  font-size: 10px
}

.lj-dashboard-chart-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(210px, .7fr);
  align-items: center;
  gap: 25px
}

.lj-dashboard-chart-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 320px
}

.lj-dashboard-chart-canvas-wrap canvas {
  width: 100% !important;
  height: 320px !important
}

.lj-dashboard-chart-legend {
  display: grid;
  gap: 11px
}

.lj-dashboard-chart-legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-dashboard-chart-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-round)
}

.lj-dashboard-chart-legend-item span {
  font-size: 10px
}

.lj-dashboard-chart-legend-item strong {
  color: var(--color-title);
  font-size: 12px
}

/* Table */

.lj-dashboard-table-view-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold)
}

.lj-dashboard-table-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
  gap: 12px;
  margin-bottom: 17px
}

.lj-dashboard-table-search,
.lj-dashboard-table-filter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-dashboard-table-search i,
.lj-dashboard-table-filter i {
  color: var(--color-primary)
}

.lj-dashboard-table-search input,
.lj-dashboard-table-filter select {
  width: 100%;
  height: 46px;
  padding: 0 10px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 10px
}

.lj-dashboard-table-responsive {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-dashboard-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse
}

.lj-dashboard-table th,
.lj-dashboard-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap
}

.lj-dashboard-table th {
  color: var(--color-title);
  background: var(--color-surface);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer
}

.lj-dashboard-table th:last-child {
  cursor: default
}

.lj-dashboard-table td {
  font-size: 10px
}

.lj-dashboard-table tbody tr {
  transition: var(--transition-fast)
}

.lj-dashboard-table tbody tr:hover {
  background: rgba(7, 104, 207, .025)
}

.lj-dashboard-table tbody tr:last-child td {
  border-bottom: 0
}

.lj-dashboard-product-cell {
  display: flex;
  align-items: center;
  gap: 10px
}

.lj-dashboard-product-cell img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border)
}

.lj-dashboard-product-cell strong {
  display: block;
  max-width: 180px;
  overflow: hidden;
  color: var(--color-title);
  font-size: 10px;
  text-overflow: ellipsis
}

.lj-dashboard-product-cell small {
  color: var(--color-muted);
  font-size: 8px
}

.lj-dashboard-status {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-dashboard-status.is-active {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10)
}

.lj-dashboard-status.is-pending {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .16)
}

.lj-dashboard-status.is-inactive {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .10)
}

.lj-dashboard-table-actions {
  display: flex;
  align-items: center;
  gap: 6px
}

.lj-dashboard-table-actions a,
.lj-dashboard-table-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 10px;
  transition: var(--transition-fast)
}

.lj-dashboard-table-actions a:hover,
.lj-dashboard-table-actions button:hover {
  transform: translateY(-2px)
}

.lj-dashboard-table-actions .edit {
  color: #0687F1;
  background: #F6FBFD
}

.lj-dashboard-table-actions .view {
  color: #0768CF;
  background: #D5EAF8
}

.lj-dashboard-table-actions .add {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10)
}

.lj-dashboard-table-actions .link {
  color: var(--color-tertiary);
  background: rgba(1, 52, 130, .08)
}

.lj-dashboard-table-actions .delete {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .09)
}

.lj-dashboard-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 16px
}

.lj-dashboard-table-footer p {
  margin: 0;
  font-size: 9px
}

.lj-dashboard-table-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.lj-dashboard-table-pagination button {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 9px
}

.lj-dashboard-table-pagination button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

/* Mobile drawer */

.lj-dashboard-mobile-trigger {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 62px;
  padding: 0;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-medium);
  transform: translateY(-50%)
}

.lj-dashboard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1085;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(1, 52, 130, .60);
  border: 0;
  opacity: 0;
  backdrop-filter: blur(4px)
}

@keyframes ljDashboardGreenWave {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, .48)
  }
  70% {
    box-shadow: 0 0 0 8px rgba(7, 104, 207, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, 0)
  }
}

@keyframes ljDashboardRedWave {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, .48)
  }
  70% {
    box-shadow: 0 0 0 8px rgba(7, 104, 207, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, 0)
  }
}

@media(max-width:1199.98px) {
  .lj-dashboard-layout {
    grid-template-columns: 270px minmax(0, 1fr)
  }
  .lj-dashboard-widget {
    padding: 17px
  }
  .lj-dashboard-widget-icon {
    flex-basis: 50px;
    width: 50px;
    height: 50px
  }
}

@media(max-width:991.98px) {
  .lj-dashboard-layout {
    grid-template-columns: 1fr
  }
  .lj-dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1090;
    width: min(88vw, 360px);
    height: 100dvh;
    padding: 14px;
    overflow-y: auto;
    background: var(--footer-background);
    transform: translateX(-106%);
    transition: transform var(--transition-normal)
  }
  .lj-dashboard-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-dashboard-sidebar-close {
    display: flex
  }
  .lj-dashboard-mobile-trigger {
    display: flex
  }
  .lj-dashboard-backdrop.is-visible {
    display: block;
    opacity: 1
  }
  .lj-dashboard-chart-layout {
    grid-template-columns: 1fr
  }
  .lj-dashboard-chart-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:767.98px) {
  .lj-dashboard-section {
    padding: 28px 0 70px
  }
  .lj-dashboard-heading {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-dashboard-heading-action {
    width: 100%
  }
  .lj-dashboard-widget-grid {
    grid-template-columns: 1fr
  }
  .lj-dashboard-widget {
    min-height: 95px
  }
  .lj-dashboard-chart-card,
  .lj-dashboard-table-card {
    padding: 15px
  }
  .lj-dashboard-card-heading {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-dashboard-table-toolbar {
    grid-template-columns: 1fr
  }
  .lj-dashboard-table-responsive {
    overflow: visible;
    border: 0
  }
  .lj-dashboard-table {
    display: block;
    min-width: 0
  }
  .lj-dashboard-table thead {
    display: none
  }
  .lj-dashboard-table tbody {
    display: grid;
    gap: 14px
  }
  .lj-dashboard-table tr {
    display: grid;
    gap: 0;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-small)
  }
  .lj-dashboard-table td {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--color-border);
    white-space: normal
  }
  .lj-dashboard-table td::before {
    content: attr(data-label);
    color: var(--color-title);
    font-size: 8px;
    font-weight: var(--weight-bold);
    text-transform: uppercase
  }
  .lj-dashboard-table td:last-child {
    border-bottom: 0
  }
  .lj-dashboard-product-cell strong {
    max-width: none
  }
  .lj-dashboard-table-footer {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-dashboard-chart-legend {
    grid-template-columns: 1fr
  }
}

@media(max-width:430px) {
  .lj-dashboard-table td {
    grid-template-columns: 82px minmax(0, 1fr)
  }
  .lj-dashboard-chart-canvas-wrap {
    min-height: 270px
  }
  .lj-dashboard-chart-canvas-wrap canvas {
    height: 270px !important
  }
  .lj-dashboard-product-cell img {
    width: 42px;
    height: 42px
  }
  .lj-dashboard-table-actions {
    flex-wrap: wrap
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-dashboard-page *,
  .lj-dashboard-page *::before,
  .lj-dashboard-page *::after {
    animation: none !important;
    transition: none !important
  }
}

.lj-profile-dashboard-page {
  position: relative;
  overflow-x: hidden;
  background: radial-gradient(circle at 8% 10%, rgba(7, 104, 207, .045), transparent 26rem), var(--color-off-white);
  color: var(--color-text);
  font-family: var(--font-body)
}

.lj-profile-dashboard-page *,
.lj-profile-dashboard-page *:before,
.lj-profile-dashboard-page *:after {
  box-sizing: border-box
}

.lj-profile-dashboard-page button,
.lj-profile-dashboard-page input,
.lj-profile-dashboard-page select,
.lj-profile-dashboard-page textarea {
  font-family: var(--font-body)
}

.lj-profile-dashboard-page button {
  cursor: pointer
}

.lj-profile-dashboard-page a {
  text-decoration: none
}

.lj-profile-dashboard-section {
  padding: 46px 0 90px
}

.lj-profile-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(0, 3fr);
  gap: 26px;
  align-items: start
}

.lj-profile-dashboard-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-profile-dashboard-sidebar {
  position: sticky;
  top: 65px;
  display: grid;
  gap: 18px
}

.lj-profile-summary-card {
  position: relative;
  padding: 28px 20px 22px;
  text-align: center
}

.lj-profile-sidebar-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, .1);
  color: #FFFFFF
}

.lj-profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 14px
}

.lj-profile-avatar {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 4px solid #FFFFFF;
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 2px var(--color-secondary), 0 14px 32px rgba(1, 52, 130, .16)
}

.lj-profile-avatar-edit {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 34px;
  height: 34px;
  border: 3px solid #FFFFFF;
  border-radius: var(--radius-round);
  background: var(--color-primary);
  color: #FFFFFF
}

.lj-profile-summary-card h2 {
  margin: 0 0 10px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 28px
}

.lj-profile-verification {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-profile-verification.is-verified {
  color: var(--color-success);
  background: rgba(7, 104, 207, .1)
}

.lj-profile-verification.is-pending {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .15)
}

.lj-profile-account-state {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 11px;
  font-weight: var(--weight-semibold)
}

.lj-profile-account-state.is-active {
  color: var(--color-success)
}

.lj-profile-account-state.is-inactive {
  color: var(--color-danger)
}

.lj-profile-state-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round)
}

.is-active .lj-profile-state-dot {
  background: var(--color-success);
  animation: ljProfileGreenWave 1.6s infinite
}

.is-inactive .lj-profile-state-dot {
  background: var(--color-danger);
  animation: ljProfileRedWave 1.6s infinite
}

.lj-profile-account-code {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  align-items: center;
  margin-top: 19px;
  padding: 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  text-align: left
}

.lj-profile-account-code span {
  grid-column: 1/-1;
  color: var(--color-muted);
  font-size: 8px;
  text-transform: uppercase
}

.lj-profile-account-code strong {
  color: var(--color-title);
  font-size: 17px;
  letter-spacing: .12em
}

.lj-profile-account-code button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--color-primary-soft);
  color: var(--color-primary)
}

.lj-profile-menu-card {
  padding: 12px
}

.lj-profile-menu {
  display: grid;
  gap: 4px
}

.lj-profile-menu-link,
.lj-profile-menu-dropdown-toggle,
.lj-profile-add-listing,
.lj-profile-logout {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 48px;
  gap: 8px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text);
  font-size: var(--main-font-size);
  font-weight: var(--weight-semibold);
  text-align: left;
  transition: var(--transition-normal)
}

.lj-profile-menu-link>i,
.lj-profile-menu-dropdown-toggle span>i,
.lj-profile-add-listing>i,
.lj-profile-logout>i {
  color: var(--color-primary);
  font-size: 15px
}

.lj-profile-menu-link:hover,
.lj-profile-menu-link.is-active,
.lj-profile-menu-dropdown-toggle:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary)
}

.lj-profile-menu-dropdown-toggle {
  display: flex;
  justify-content: space-between
}

.lj-profile-menu-dropdown-toggle>span {
  display: flex;
  align-items: center;
  gap: 8px
}

.lj-profile-menu-dropdown-toggle>i {
  font-size: 10px;
  transition: var(--transition-normal)
}

.lj-profile-menu-dropdown-toggle.is-open>i {
  transform: rotate(180deg)
}

.lj-profile-menu-submenu {
  display: grid;
  gap: 3px;
  margin: 4px 0 5px 31px;
  padding-left: 10px;
  border-left: 1px dashed var(--color-border)
}

.lj-profile-menu-submenu[hidden] {
  display: none
}

.lj-profile-menu-submenu a {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  min-height: 41px;
  gap: 7px;
  padding: 0 10px;
  color: var(--color-text);
  font-size: 10px
}

.lj-profile-menu-submenu a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary)
}

.lj-profile-menu-submenu i {
  color: var(--color-primary)
}

.lj-profile-menu-submenu small,
.lj-profile-menu-badge {
  min-width: 24px;
  padding: 4px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 8px;
  text-align: center
}

.lj-profile-add-listing {
  margin-top: 7px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #FFFFFF
}

.lj-profile-add-listing>i {
  color: #FFFFFF
}

.lj-profile-logout {
  margin-top: 5px;
  background: rgba(7, 104, 207, .06);
  color: var(--color-danger)
}

.lj-profile-logout>i {
  color: var(--color-danger)
}

.lj-profile-dashboard-content {
  display: grid;
  gap: 22px;
  min-width: 0
}

.lj-profile-dashboard-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px
}

.lj-profile-dashboard-heading span,
.lj-profile-card-heading>div>span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-profile-dashboard-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1
}

.lj-profile-dashboard-heading p {
  max-width: 680px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7
}

.lj-profile-preview-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: #FFFFFF;
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-bold)
}

.lj-profile-dashboard-alerts {
  display: grid;
  gap: 12px
}

.lj-profile-dashboard-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: start;
  padding: 16px 17px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-small)
}

.lj-profile-dashboard-alert>i {
  margin-top: 2px;
  font-size: 20px
}

.lj-profile-dashboard-alert strong {
  display: block;
  color: var(--color-title);
  font-size: 12px
}

.lj-profile-dashboard-alert p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.6
}

.lj-profile-dashboard-alert.is-success {
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .2)
}

.lj-profile-dashboard-alert.is-warning {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .12);
  border-color: rgba(31, 158, 252, .3)
}

.lj-profile-dashboard-alert.is-danger {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .2)
}

.lj-profile-alert-close {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: currentColor
}

.lj-profile-form-card {
  padding: 24px
}

.lj-profile-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px
}

.lj-profile-card-heading h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 32px
}

.lj-profile-card-heading p {
  margin: 6px 0 0;
  font-size: 10px
}

.lj-profile-completion {
  width: min(260px, 100%)
}

.lj-profile-completion>span {
  font-size: 9px
}

.lj-profile-completion>strong {
  float: right;
  color: var(--color-primary);
  font-size: 12px
}

.lj-profile-completion-track {
  clear: both;
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-border)
}

.lj-profile-completion-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transition: width var(--transition-normal)
}

.lj-profile-form {
  display: grid;
  gap: 22px
}

.lj-profile-form-group {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #FFFFFF
}

.lj-profile-form-group legend {
  display: flex;
  align-items: center;
  gap: 11px;
  width: auto;
  margin: 0 0 18px;
  padding: 0 8px 0 0;
  color: var(--color-title)
}

.lj-profile-form-group legend>span:last-child {
  display: grid
}

.lj-profile-form-group legend strong {
  font-family: var(--font-heading);
  font-size: 22px
}

.lj-profile-form-group legend small {
  color: var(--color-text);
  font-size: 9px
}

.lj-profile-form-group-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--color-primary-soft);
  color: var(--color-primary)
}

.lj-profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.lj-profile-field {
  display: grid;
  gap: 7px
}

.lj-profile-field>span {
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold)
}

.lj-profile-field-full {
  grid-column: 1/-1
}

.lj-profile-input-wrap,
.lj-profile-textarea-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-off-white);
  transition: var(--transition-fast)
}

.lj-profile-textarea-wrap {
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-top: 13px
}

.lj-profile-input-wrap:focus-within,
.lj-profile-textarea-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06)
}

.lj-profile-input-wrap>i:first-child,
.lj-profile-textarea-wrap>i {
  margin-right: 10px;
  color: var(--color-primary)
}

.lj-profile-input-wrap>i:last-child {
  color: var(--color-muted);
  font-size: 10px
}

.lj-profile-input-wrap input,
.lj-profile-input-wrap select,
.lj-profile-textarea-wrap textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-title);
  font-size: 11px
}

.lj-profile-input-wrap select {
  appearance: none
}

.lj-profile-textarea-wrap textarea {
  resize: vertical
}

.lj-profile-field-error {
  min-height: 12px;
  color: var(--color-danger);
  font-size: 8px
}

.lj-profile-field.has-error .lj-profile-input-wrap,
.lj-profile-field.has-error .lj-profile-textarea-wrap {
  border-color: var(--color-danger)
}

.lj-profile-textarea-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.lj-profile-textarea-meta>span {
  font-size: 8px
}

.lj-profile-switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.lj-profile-switch {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-off-white);
  cursor: pointer
}

.lj-profile-switch input {
  position: absolute;
  opacity: 0
}

.lj-profile-switch-control {
  position: relative;
  width: 42px;
  height: 23px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: var(--transition-fast)
}

.lj-profile-switch-control:after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  content: "";
  border-radius: var(--radius-round);
  background: #FFFFFF;
  box-shadow: var(--shadow-small);
  transition: var(--transition-fast)
}

.lj-profile-switch input:checked+.lj-profile-switch-control {
  background: var(--color-primary)
}

.lj-profile-switch input:checked+.lj-profile-switch-control:after {
  transform: translateX(19px)
}

.lj-profile-switch>span:last-child {
  display: grid;
  gap: 3px
}

.lj-profile-switch strong {
  color: var(--color-title);
  font-size: 10px
}

.lj-profile-switch small {
  font-size: 8px;
  line-height: 1.5
}

.lj-profile-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px
}

.lj-profile-form-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: var(--weight-bold)
}

.lj-profile-reset-button {
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: var(--color-title)
}

.lj-profile-save-button {
  border: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #FFFFFF
}

.lj-profile-mobile-trigger {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1080;
  display: none;
  width: 44px;
  height: 62px;
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #FFFFFF;
  box-shadow: var(--shadow-medium);
  transform: translateY(-50%)
}

.lj-profile-dashboard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1085;
  display: none;
  border: 0;
  background: rgba(1, 52, 130, .6);
  opacity: 0;
  backdrop-filter: blur(4px)
}

@keyframes ljProfileGreenWave {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, .48)
  }
  70% {
    box-shadow: 0 0 0 8px rgba(7, 104, 207, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, 0)
  }
}

@keyframes ljProfileRedWave {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, .48)
  }
  70% {
    box-shadow: 0 0 0 8px rgba(7, 104, 207, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, 0)
  }
}

@media(max-width:1199.98px) {
  .lj-profile-dashboard-layout {
    grid-template-columns: 270px minmax(0, 1fr)
  }
}

@media(max-width:991.98px) {
  .lj-profile-dashboard-layout {
    grid-template-columns: 1fr
  }
  .lj-profile-dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1090;
    width: min(88vw, 360px);
    height: 100dvh;
    padding: 14px;
    overflow-y: auto;
    background: var(--footer-background);
    transform: translateX(-106%);
    transition: transform var(--transition-normal)
  }
  .lj-profile-dashboard-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-profile-sidebar-close {
    display: block
  }
  .lj-profile-mobile-trigger {
    display: block
  }
  .lj-profile-dashboard-backdrop.is-visible {
    display: block;
    opacity: 1
  }
  .lj-profile-card-heading {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-profile-completion {
    width: 100%
  }
}

@media(max-width:767.98px) {
  .lj-profile-dashboard-section {
    padding: 28px 0 70px
  }
  .lj-profile-dashboard-heading {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-profile-preview-button {
    width: 100%;
    justify-content: center
  }
  .lj-profile-form-card {
    padding: 14px
  }
  .lj-profile-form-group {
    padding: 15px
  }
  .lj-profile-form-grid,
  .lj-profile-switch-grid {
    grid-template-columns: 1fr
  }
  .lj-profile-field-full {
    grid-column: auto
  }
  .lj-profile-form-actions {
    flex-direction: column-reverse
  }
  .lj-profile-form-actions button {
    width: 100%
  }
}

@media(max-width:430px) {
  .lj-profile-dashboard-alert {
    grid-template-columns: auto 1fr
  }
  .lj-profile-alert-close {
    grid-column: 2;
    justify-self: end
  }
  .lj-profile-form-group legend strong {
    font-size: 19px
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-profile-dashboard-page *,
  .lj-profile-dashboard-page *:before,
  .lj-profile-dashboard-page *:after {
    animation: none !important;
    transition: none !important
  }
}

/* =========================================================
   PROFESSIONAL MOBILE PROFILE SIDE NAVIGATION DRAWER
   Add this AFTER the existing profile dashboard CSS
========================================================= */

@media (max-width:991.98px) {
  /* =====================================================
       PAGE / DRAWER LAYERING
    ====================================================== */
  .lj-profile-dashboard-page {
    overflow-x: hidden;
  }
  /*
     * Drawer must sit above the header, page content,
     * cards, floating controls and normal components.
     */
  .lj-profile-dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    width: min(90vw, 380px);
    height: 100dvh;
    /*
         * Important:
         * remove desktop spacing between the two cards.
         */
    gap: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-white);
    border: 0;
    border-right: 1px solid rgba(1, 52, 130, .08);
    box-shadow: 18px 0 60px rgba(1, 52, 130, .24), 4px 0 18px rgba(1, 52, 130, .08);
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
    opacity: 0;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility .25s ease;
    /*
         * Improves scrolling on iOS.
         */
    -webkit-overflow-scrolling: touch;
    /*
         * Keep movement smooth.
         */
    will-change: transform;
  }
  /* =====================================================
       OPEN DRAWER
    ====================================================== */
  .lj-profile-dashboard-sidebar.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
  }
  /* =====================================================
       BACKDROP
    ====================================================== */
  .lj-profile-dashboard-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(1, 52, 130, .62);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity .3s ease, visibility .3s ease;
    pointer-events: none;
  }
  .lj-profile-dashboard-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* =====================================================
       SUMMARY CARD
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-summary-card {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: max(42px, env(safe-area-inset-top)) 22px 24px;
    background: radial-gradient( circle at 90% 0, rgba(31, 158, 252, .15), transparent 32%), linear-gradient( 145deg, var(--color-white), var(--color-off-white));
    /*
         * Join the summary card directly to menu card.
         */
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
  }
  /* =====================================================
       MENU CARD
       NO SPACE BETWEEN SUMMARY AND MENU
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-card {
    flex: 1 0 auto;
    margin: 0;
    padding: 10px 12px 24px;
    background: var(--color-white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /*
     * Explicitly remove any inherited margins that could
     * create space between both cards.
     */
  .lj-profile-dashboard-sidebar .lj-profile-summary-card+.lj-profile-menu-card {
    margin-top: 0;
  }
  /* =====================================================
       SIDEBAR CLOSE BUTTON
    ====================================================== */
  .lj-profile-sidebar-close {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: 5;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, .94);
    color: var(--color-title);
    box-shadow: var(--shadow-small);
    transition: var(--transition-fast);
  }
  .lj-profile-sidebar-close:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: rotate(90deg);
  }
  .lj-profile-sidebar-close i {
    font-size: 18px;
  }
  /* =====================================================
       PROFILE AVATAR AREA
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-avatar-wrap {
    margin-bottom: 14px;
  }
  .lj-profile-dashboard-sidebar .lj-profile-avatar {
    width: 100px;
    height: 100px;
    border-width: 4px;
    box-shadow: 0 0 0 2px var(--color-secondary), 0 12px 30px rgba(1, 52, 130, .13);
  }
  .lj-profile-dashboard-sidebar .lj-profile-avatar-edit {
    width: 32px;
    height: 32px;
  }
  .lj-profile-dashboard-sidebar .lj-profile-summary-card h2 {
    font-size: 25px;
  }
  /* =====================================================
       MENU
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu {
    display: grid;
    gap: 3px;
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-link,
  .lj-profile-dashboard-sidebar .lj-profile-menu-dropdown-toggle,
  .lj-profile-dashboard-sidebar .lj-profile-add-listing,
  .lj-profile-dashboard-sidebar .lj-profile-logout {
    min-height: 50px;
    padding: 0 14px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  }
  /* =====================================================
       NORMAL MENU HOVER / ACTIVE
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-link:hover,
  .lj-profile-dashboard-sidebar .lj-profile-menu-link.is-active,
  .lj-profile-dashboard-sidebar .lj-profile-menu-dropdown-toggle:hover,
  .lj-profile-dashboard-sidebar .lj-profile-menu-dropdown-toggle.is-open {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-link.is-active {
    position: relative;
    font-weight: var(--weight-bold);
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-link.is-active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  }
  /* =====================================================
       MENU ICONS
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-link>i,
  .lj-profile-dashboard-sidebar .lj-profile-menu-dropdown-toggle span>i,
  .lj-profile-dashboard-sidebar .lj-profile-add-listing>i,
  .lj-profile-dashboard-sidebar .lj-profile-logout>i {
    font-size: 15px;
  }
  /* =====================================================
       LISTINGS SUBMENU
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-submenu {
    margin: 3px 0 6px 31px;
    padding: 3px 0 3px 11px;
    border-left: 1px solid var(--color-border);
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-submenu a {
    min-height: 42px;
    padding: 0 10px;
    border-radius: var(--radius-xs);
    transition: var(--transition-fast);
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-submenu a:hover {
    padding-left: 13px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  /* =====================================================
       MESSAGE BADGE
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-badge {
    min-width: 24px;
    padding: 4px 7px;
    background: var(--color-primary);
    color: var(--color-white);
  }
  /* =====================================================
       ADD LISTING
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-add-listing {
    margin-top: 10px;
    background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    box-shadow: 0 10px 25px rgba(7, 104, 207, .17);
  }
  .lj-profile-dashboard-sidebar .lj-profile-add-listing:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(7, 104, 207, .22);
  }
  /* =====================================================
       LOGOUT
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-logout {
    margin-top: 6px;
    background: rgba(7, 104, 207, .06);
    color: var(--color-danger);
  }
  .lj-profile-dashboard-sidebar .lj-profile-logout:hover {
    background: rgba(7, 104, 207, .11);
  }
  /* =====================================================
       FLOATING OPEN BUTTON
    ====================================================== */
  .lj-profile-mobile-trigger {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 99990;
    display: grid;
    width: 44px;
    height: 62px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: linear-gradient( 145deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    box-shadow: 8px 8px 25px rgba(1, 52, 130, .18);
    transform: translateY(-50%);
    transition: var(--transition-normal);
  }
  .lj-profile-mobile-trigger:hover {
    width: 49px;
  }
  .lj-profile-mobile-trigger i {
    font-size: 17px;
  }
  /*
     * Optional:
     * Hide the floating trigger while the drawer is open.
     */
  .lj-profile-dashboard-sidebar.is-open~.lj-profile-mobile-trigger {
    pointer-events: none;
  }
}

/************************EMAIL VERIFICATION******************/

/* =========================================================
   LINJUST EMAIL VERIFICATION PAGE
   Additional page styles only.
========================================================= */

.lj-email-verification-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: radial-gradient(circle at 12% 16%, rgba(7, 104, 207, .06), transparent 26rem), radial-gradient(circle at 88% 82%, rgba(31, 158, 252, .09), transparent 24rem), var(--color-off-white);
  font-family: var(--font-body);
}

.lj-email-verification-page *,
.lj-email-verification-page *::before,
.lj-email-verification-page *::after {
  box-sizing: border-box;
}

.lj-email-verification-page button,
.lj-email-verification-page input {
  font-family: var(--font-body);
}

.lj-email-verification-page button {
  cursor: pointer;
}

.lj-email-verification-page a {
  text-decoration: none;
}

/* =========================================================
   CENTERED SECTION
========================================================= */

.lj-email-verification-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - var(--mobile-bottom-height));
  padding: 70px 0;
}

.lj-email-verification-card {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  overflow: hidden;
  padding: 44px 38px 36px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

.lj-email-verification-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  content: "";
  background: var(--topbar-background);
}

.lj-email-verification-card::after {
  position: absolute;
  top: -110px;
  right: -110px;
  width: 220px;
  height: 220px;
  content: "";
  background: rgba(7, 104, 207, .045);
  border-radius: var(--radius-round);
  pointer-events: none;
}

/* =========================================================
   ICON AND HEADING
========================================================= */

.lj-email-verification-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 22px;
  color: var(--color-white);
  background: linear-gradient( 145deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 10px rgba(7, 104, 207, .07), 0 18px 35px rgba(7, 104, 207, .22);
  font-size: 32px;
}

.lj-email-verification-heading {
  position: relative;
  z-index: 2;
}

.lj-email-verification-heading>span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-email-verification-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(34px, 6vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.lj-email-verification-heading p {
  max-width: 440px;
  margin: 17px auto 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.75;
}

.lj-email-verification-heading strong {
  color: var(--color-title);
}

/* =========================================================
   VERIFICATION FORM
========================================================= */

.lj-email-verification-form {
  margin-top: 30px;
}

.lj-email-code-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.lj-email-code-input {
  width: 100%;
  min-width: 0;
  height: 64px;
  padding: 0;
  color: var(--color-title);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: 0;
  font-size: 26px;
  font-weight: var(--weight-bold);
  text-align: center;
  transition: var(--transition-normal);
}

.lj-email-code-input:hover {
  border-color: rgba(7, 104, 207, .28);
}

.lj-email-code-input:focus,
.lj-email-code-input.is-filled {
  color: var(--color-primary);
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
  transform: translateY(-2px);
}

.lj-email-code-input.is-invalid {
  color: var(--color-danger);
  border-color: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
}

.lj-email-verification-message {
  display: none;
  margin-top: 15px;
  padding: 11px 13px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  line-height: 1.5;
}

.lj-email-verification-message.is-error {
  display: block;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

.lj-email-verification-message.is-success {
  display: block;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

.lj-email-verification-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  gap: 9px;
  margin-top: 20px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 15px 30px rgba(7, 104, 207, .20);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-email-verification-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .27);
}

.lj-email-verification-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   COUNTDOWN AND RESEND
========================================================= */

.lj-email-verification-timer-wrap {
  margin-top: 23px;
}

.lj-email-verification-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text);
  font-size: 10px;
}

.lj-email-verification-timer i {
  color: var(--color-primary);
}

.lj-email-verification-timer strong {
  color: var(--color-title);
  font-size: 11px;
  letter-spacing: .04em;
}

.lj-email-resend-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 8px;
  padding: 0 15px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px dashed rgba(7, 104, 207, .28);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-email-resend-button[hidden] {
  display: none;
}

.lj-email-resend-button:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   HELP TEXT
========================================================= */

.lj-email-verification-help {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.lj-email-verification-help p {
  margin: 0 0 11px;
  color: var(--color-muted);
  font-size: 9px;
  line-height: 1.6;
}

.lj-email-verification-help a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:767.98px) {
  .lj-email-verification-section {
    min-height: calc(100vh - var(--mobile-bottom-height));
    padding: 35px 0 90px;
  }
  .lj-email-verification-card {
    padding: 36px 20px 28px;
    border-radius: var(--radius-md);
  }
  .lj-email-verification-icon {
    width: 74px;
    height: 74px;
    font-size: 27px;
  }
  .lj-email-code-grid {
    gap: 7px;
  }
  .lj-email-code-input {
    height: 55px;
    font-size: 22px;
  }
}

@media(max-width:430px) {
  .lj-email-verification-card {
    padding-right: 15px;
    padding-left: 15px;
  }
  .lj-email-code-grid {
    gap: 5px;
  }
  .lj-email-code-input {
    height: 50px;
    border-radius: var(--radius-xs);
    font-size: 20px;
  }
  .lj-email-verification-heading p {
    font-size: 11px;
  }
}

@media(max-width:360px) {
  .lj-email-code-grid {
    gap: 4px;
  }
  .lj-email-code-input {
    height: 45px;
    font-size: 18px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-email-verification-page *,
  .lj-email-verification-page *::before,
  .lj-email-verification-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/*****************FORGOT PASSWORD************/

/* =========================================================
   LINJUST FORGOT PASSWORD PAGE
   Additional page styles only.
========================================================= */

.lj-forgot-password-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: radial-gradient(circle at 12% 18%, rgba(7, 104, 207, .06), transparent 26rem), radial-gradient(circle at 88% 82%, rgba(31, 158, 252, .09), transparent 24rem), var(--color-off-white);
  font-family: var(--font-body);
}

.lj-forgot-password-page *,
.lj-forgot-password-page *::before,
.lj-forgot-password-page *::after {
  box-sizing: border-box;
}

.lj-forgot-password-page button,
.lj-forgot-password-page input {
  font-family: var(--font-body);
}

.lj-forgot-password-page button {
  cursor: pointer;
}

.lj-forgot-password-page a {
  text-decoration: none;
}

/* =========================================================
   CENTERED SECTION
========================================================= */

.lj-forgot-password-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - var(--mobile-bottom-height));
  padding: 70px 0;
}

.lj-forgot-password-card {
  position: relative;
  width: min(540px, 100%);
  margin: 0 auto;
  overflow: hidden;
  padding: 44px 38px 34px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

.lj-forgot-password-card::before {
  position: absolute;
  top: -110px;
  right: -110px;
  width: 220px;
  height: 220px;
  content: "";
  background: rgba(7, 104, 207, .045);
  border-radius: var(--radius-round);
  pointer-events: none;
}

.lj-forgot-password-card::after {
  position: absolute;
  bottom: -120px;
  left: -120px;
  width: 240px;
  height: 240px;
  content: "";
  background: rgba(31, 158, 252, .06);
  border-radius: var(--radius-round);
  pointer-events: none;
}

.lj-forgot-password-accent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--topbar-background);
}

/* =========================================================
   ICON
========================================================= */

.lj-forgot-password-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 22px;
  color: var(--color-white);
  background: linear-gradient( 145deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 10px rgba(7, 104, 207, .07), 0 18px 35px rgba(7, 104, 207, .22);
  font-size: 30px;
}

/* =========================================================
   HEADING
========================================================= */

.lj-forgot-password-heading {
  position: relative;
  z-index: 2;
}

.lj-forgot-password-heading>span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-forgot-password-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(34px, 6vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.lj-forgot-password-heading p {
  max-width: 430px;
  margin: 17px auto 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   FORM
========================================================= */

.lj-forgot-password-form {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 17px;
  margin-top: 30px;
  text-align: left;
}

.lj-forgot-password-field {
  display: grid;
  gap: 8px;
}

.lj-forgot-password-field>span {
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.lj-forgot-password-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 56px;
  padding: 0 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

.lj-forgot-password-input-wrap:focus-within {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
  transform: translateY(-1px);
}

.lj-forgot-password-input-wrap>i {
  color: var(--color-primary);
  font-size: 15px;
}

.lj-forgot-password-input-wrap input {
  width: 100%;
  height: 54px;
  padding: 0 12px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.lj-forgot-password-input-wrap input::placeholder {
  color: var(--color-muted);
}

.lj-forgot-password-input-wrap.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
}

.lj-forgot-password-error {
  min-height: 14px;
  color: var(--color-danger);
  font-size: 9px;
}

/* =========================================================
   FORM MESSAGE
========================================================= */

.lj-forgot-password-message {
  display: none;
  padding: 11px 13px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  line-height: 1.5;
}

.lj-forgot-password-message.is-error {
  display: block;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

.lj-forgot-password-message.is-success {
  display: block;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-forgot-password-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  gap: 9px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 15px 30px rgba(7, 104, 207, .20);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-forgot-password-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .27);
}

.lj-forgot-password-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   LOGIN LINK
========================================================= */

.lj-forgot-password-login {
  position: relative;
  z-index: 2;
  margin-top: 21px;
}

.lj-forgot-password-login a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  transition: var(--transition-fast);
}

.lj-forgot-password-login a:hover {
  gap: 11px;
}

/* =========================================================
   SECURITY NOTE
========================================================= */

.lj-forgot-password-note {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  text-align: left;
  border-top: 1px solid var(--color-border);
}

.lj-forgot-password-note i {
  margin-top: 1px;
  color: var(--color-secondary-dark);
}

.lj-forgot-password-note p {
  margin: 0;
  color: var(--color-muted);
  font-size: 9px;
  line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:767.98px) {
  .lj-forgot-password-section {
    min-height: calc(100vh - var(--mobile-bottom-height));
    padding: 35px 0 90px;
  }
  .lj-forgot-password-card {
    padding: 36px 20px 28px;
    border-radius: var(--radius-md);
  }
  .lj-forgot-password-icon {
    width: 74px;
    height: 74px;
    font-size: 26px;
  }
}

@media(max-width:430px) {
  .lj-forgot-password-card {
    padding-right: 15px;
    padding-left: 15px;
  }
  .lj-forgot-password-heading p {
    font-size: 11px;
  }
  .lj-forgot-password-input-wrap {
    min-height: 52px;
  }
  .lj-forgot-password-input-wrap input {
    height: 50px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-forgot-password-page *,
  .lj-forgot-password-page *::before,
  .lj-forgot-password-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/*********************************PASSWORD RESET************************/

/* =========================================================
   LINJUST PASSWORD RESET PAGE
   Additional page styles only.
========================================================= */

.lj-password-reset-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: radial-gradient(circle at 12% 18%, rgba(7, 104, 207, .06), transparent 26rem), radial-gradient(circle at 88% 82%, rgba(31, 158, 252, .09), transparent 24rem), var(--color-off-white);
  font-family: var(--font-body);
}

.lj-password-reset-page *,
.lj-password-reset-page *::before,
.lj-password-reset-page *::after {
  box-sizing: border-box;
}

.lj-password-reset-page button,
.lj-password-reset-page input {
  font-family: var(--font-body);
}

.lj-password-reset-page button {
  cursor: pointer;
}

.lj-password-reset-page a {
  text-decoration: none;
}

/* =========================================================
   CENTERED SECTION
========================================================= */

.lj-password-reset-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - var(--mobile-bottom-height));
  padding: 70px 0;
}

.lj-password-reset-card {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  overflow: hidden;
  padding: 44px 38px 34px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

.lj-password-reset-card::before {
  position: absolute;
  top: -110px;
  right: -110px;
  width: 220px;
  height: 220px;
  content: "";
  background: rgba(7, 104, 207, .045);
  border-radius: var(--radius-round);
  pointer-events: none;
}

.lj-password-reset-card::after {
  position: absolute;
  bottom: -120px;
  left: -120px;
  width: 240px;
  height: 240px;
  content: "";
  background: rgba(31, 158, 252, .06);
  border-radius: var(--radius-round);
  pointer-events: none;
}

.lj-password-reset-accent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--topbar-background);
}

/* =========================================================
   ICON
========================================================= */

.lj-password-reset-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 22px;
  color: var(--color-white);
  background: linear-gradient( 145deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 10px rgba(7, 104, 207, .07), 0 18px 35px rgba(7, 104, 207, .22);
  font-size: 30px;
}

/* =========================================================
   HEADING
========================================================= */

.lj-password-reset-heading {
  position: relative;
  z-index: 2;
}

.lj-password-reset-heading>span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-password-reset-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(34px, 6vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.lj-password-reset-heading p {
  max-width: 450px;
  margin: 17px auto 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   FORM
========================================================= */

.lj-password-reset-form {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 17px;
  margin-top: 30px;
  text-align: left;
}

.lj-password-reset-field {
  display: grid;
  gap: 8px;
}

.lj-password-reset-field>span {
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.lj-password-reset-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 56px;
  padding: 0 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

.lj-password-reset-input-wrap:focus-within {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
  transform: translateY(-1px);
}

.lj-password-reset-input-wrap>i {
  color: var(--color-primary);
  font-size: 15px;
}

.lj-password-reset-input-wrap input {
  width: 100%;
  height: 54px;
  padding: 0 12px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.lj-password-reset-input-wrap input::placeholder {
  color: var(--color-muted);
}

.lj-password-reset-input-wrap.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
}

.lj-password-reset-input-wrap.is-valid {
  border-color: var(--color-success);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-password-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-round);
}

.lj-password-toggle:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lj-password-reset-error {
  min-height: 14px;
  color: var(--color-danger);
  font-size: 9px;
}

/* =========================================================
   PASSWORD MATCH STATUS
========================================================= */

.lj-password-match-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 10px;
}

.lj-password-match-status.is-matching {
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .18);
}

.lj-password-match-status.is-not-matching {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .18);
}

/* =========================================================
   PASSWORD STRENGTH
========================================================= */

.lj-password-strength {
  display: grid;
  gap: 8px;
}

.lj-password-strength-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
}

.lj-password-strength-heading span {
  color: var(--color-text);
}

.lj-password-strength-heading strong {
  color: var(--color-title);
}

.lj-password-strength-track {
  width: 100%;
  height: 7px;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
}

.lj-password-strength-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-danger);
  border-radius: inherit;
  transition: var(--transition-normal);
}

/* =========================================================
   PASSWORD REQUIREMENTS
========================================================= */

.lj-password-requirements {
  padding: 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-password-requirements p {
  margin: 0 0 10px;
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.lj-password-requirements ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lj-password-requirements li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text);
  font-size: 9px;
}

.lj-password-requirements li i {
  color: var(--color-muted);
  font-size: 7px;
}

.lj-password-requirements li.is-valid {
  color: var(--color-success);
}

.lj-password-requirements li.is-valid i {
  color: var(--color-success);
}

/* =========================================================
   FORM MESSAGE
========================================================= */

.lj-password-reset-message {
  display: none;
  padding: 11px 13px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  line-height: 1.5;
}

.lj-password-reset-message.is-error {
  display: block;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

.lj-password-reset-message.is-success {
  display: block;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-password-reset-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  gap: 9px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 15px 30px rgba(7, 104, 207, .20);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-password-reset-submit:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .27);
}

.lj-password-reset-submit:disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.25);
}

/* =========================================================
   LOGIN LINK AND SECURITY NOTE
========================================================= */

.lj-password-reset-login {
  position: relative;
  z-index: 2;
  margin-top: 21px;
}

.lj-password-reset-login a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  transition: var(--transition-fast);
}

.lj-password-reset-login a:hover {
  gap: 11px;
}

.lj-password-reset-note {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  text-align: left;
  border-top: 1px solid var(--color-border);
}

.lj-password-reset-note i {
  margin-top: 1px;
  color: var(--color-secondary-dark);
}

.lj-password-reset-note p {
  margin: 0;
  color: var(--color-muted);
  font-size: 9px;
  line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:767.98px) {
  .lj-password-reset-section {
    min-height: calc(100vh - var(--mobile-bottom-height));
    padding: 35px 0 90px;
  }
  .lj-password-reset-card {
    padding: 36px 20px 28px;
    border-radius: var(--radius-md);
  }
  .lj-password-reset-icon {
    width: 74px;
    height: 74px;
    font-size: 26px;
  }
  .lj-password-requirements ul {
    grid-template-columns: 1fr;
  }
}

@media(max-width:430px) {
  .lj-password-reset-card {
    padding-right: 15px;
    padding-left: 15px;
  }
  .lj-password-reset-heading p {
    font-size: 11px;
  }
  .lj-password-reset-input-wrap {
    min-height: 52px;
  }
  .lj-password-reset-input-wrap input {
    height: 50px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-password-reset-page *,
  .lj-password-reset-page *::before,
  .lj-password-reset-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/***************************SIGNUP RULES******************/

/* =========================================================
   SIGNUP PASSWORD REQUIREMENTS
========================================================= */

.lj-signup-password-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}

.lj-signup-password-rules li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-text);
  font-size: 10px;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  transition: var(--transition-fast);
}

.lj-signup-password-rules li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  content: "\f00d";
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 900;
  transition: var(--transition-normal);
}

/* Requirement successfully met */

.lj-signup-password-rules li.is-valid {
  color: var(--color-success);
}

.lj-signup-password-rules li.is-valid::before {
  content: "\f00c";
  color: var(--color-white);
  background: var(--color-success);
  border-color: var(--color-success);
  box-shadow: 0 5px 14px rgba(7, 104, 207, .18);
  transform: scale(1.05);
}

/* Optional invalid state */

.lj-signup-password-rules li.is-invalid {
  color: var(--color-danger);
}

.lj-signup-password-rules li.is-invalid::before {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .22);
}

/* Password strength bar */

.lj-signup-password-strength {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  margin-top: 10px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
}

.lj-signup-password-strength span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-danger);
  border-radius: inherit;
  transition: width var(--transition-normal), background-color var(--transition-normal);
}

/* Mobile responsiveness */

@media(max-width:575.98px) {
  .lj-signup-password-rules {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .lj-signup-password-rules li {
    font-size: 9px;
  }
  .lj-signup-password-rules li::before {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    font-size: 7px;
  }
}

/* =========================================================
   PROFILE DROPDOWN USER SUMMARY
========================================================= */

.lj-profile-dropdown-user {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 16px;
  background: linear-gradient( 135deg, var(--color-primary-soft), var(--color-white));
  border-bottom: 1px solid var(--color-border);
}

.lj-profile-dropdown-code {
  display: block;
  color: var(--color-text);
  font-size: 9px;
  line-height: 1.4;
}

.lj-profile-dropdown-code strong {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
}

.lj-profile-dropdown-name {
  overflow: hidden;
  color: var(--color-title);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-profile-dropdown-email {
  overflow: hidden;
  color: var(--color-text);
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-profile-dropdown-divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

.lj-profile-dropdown .lj-profile-logout {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  gap: 10px;
  padding: 10px 16px;
  color: var(--color-danger);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  transition: var(--transition-fast);
}

.lj-profile-dropdown .lj-profile-logout i {
  font-size: 17px;
}

.lj-profile-dropdown .lj-profile-logout:hover {
  color: var(--color-white);
  background: var(--color-danger);
}

.lj-profile-dropdown .lj-profile-logout:disabled {
  opacity: .7;
  cursor: not-allowed;
}

/*******************************PROFILE USAGE*********************************/

.lj-profile-stepper {
  position: relative;
  margin: 0 0 30px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-small)
}

.lj-profile-stepper-track {
  position: absolute;
  top: 42px;
  right: 56px;
  left: 56px;
  height: 4px;
  overflow: hidden;
  background: var(--color-surface)
}

.lj-profile-stepper-track span {
  display: block;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), var(--color-secondary));
  transition: var(--transition-normal)
}

.lj-profile-stepper-items {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px
}

.lj-profile-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--color-muted);
  background: transparent;
  border: 0;
  font-family: var(--font-body)
}

.lj-profile-step>span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--color-text);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal)
}

.lj-profile-step small {
  font-size: 10px;
  font-weight: var(--weight-semibold)
}

.lj-profile-step.is-active>span,
.lj-profile-step.is-complete>span {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 8px 22px rgba(7, 104, 207, .2)
}

.lj-profile-stepper-percentage {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
  margin-top: 18px
}

.lj-profile-stepper-percentage strong {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 24px
}

.lj-profile-step-panel {
  animation: ljStep .35s ease
}

@keyframes ljStep {
  from {
    opacity: 0;
    transform: translateY(12px)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.lj-profile-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px
}

.lj-profile-upload-field {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.lj-profile-upload-field.lj-profile-field-full {
  grid-column: 1/-1
}

.lj-profile-upload-title {
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold)
}

.lj-profile-upload-title em {
  color: var(--color-danger);
  font-style: normal
}

.lj-profile-dropzone {
  position: relative;
  display: flex;
  min-height: 190px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  overflow: hidden;
  background: radial-gradient(circle, var(--color-primary-soft), var(--color-white) 68%);
  border: 1px dashed var(--color-secondary-dark);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-normal)
}

.lj-profile-dropzone:hover,
.lj-profile-dropzone.is-dragging {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-small)
}

.lj-profile-dropzone.has-file {
  border-style: solid;
  border-color: var(--color-success)
}

.lj-profile-dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer
}

.lj-profile-dropzone-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-small)
}

.lj-profile-dropzone strong {
  color: var(--color-title);
  font-size: 12px
}

.lj-profile-dropzone small {
  color: var(--color-text);
  font-size: 9px
}

.lj-profile-preview-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border)
}

.lj-profile-preview-item img,
.lj-profile-preview-item video,
.lj-profile-preview-file-icon {
  width: 72px;
  height: 62px;
  object-fit: cover;
  background: var(--color-dark)
}

.lj-profile-preview-file-icon {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-white)
}

.lj-profile-preview-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px
}

.lj-profile-preview-meta strong {
  overflow: hidden;
  color: var(--color-title);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lj-profile-preview-meta small {
  color: var(--color-text);
  font-size: 9px
}

.lj-profile-preview-remove {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--color-danger);
  background: var(--color-white);
  border: 1px solid var(--color-border)
}

.lj-profile-field-error {
  display: block;
  min-height: 14px;
  color: var(--color-danger);
  font-size: 9px
}

.is-invalid {
  border-color: var(--color-danger) !important
}

.lj-profile-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border)
}

.lj-profile-step-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold)
}

.lj-profile-step-button.next {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-profile-submit-message {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid transparent;
  font-size: 11px
}

.lj-profile-submit-message.is-success {
  display: block;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-left-color: var(--color-success)
}

.lj-profile-submit-message.is-error {
  display: block;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-left-color: var(--color-danger)
}

@media(max-width:767.98px) {
  .lj-profile-stepper {
    padding: 18px 14px
  }
  .lj-profile-stepper-track {
    top: 36px;
    right: 30px;
    left: 30px
  }
  .lj-profile-stepper-items {
    gap: 4px
  }
  .lj-profile-step>span {
    width: 32px;
    height: 32px;
    font-size: 10px
  }
  .lj-profile-step small {
    font-size: 8px
  }
  .lj-profile-upload-grid {
    grid-template-columns: 1fr
  }
  .lj-profile-upload-field.lj-profile-field-full {
    grid-column: auto
  }
  .lj-profile-step-actions {
    flex-wrap: wrap
  }
  .lj-profile-step-button,
  .lj-profile-save-button {
    width: 100%;
    flex: 1 1 100%
  }
}

/*====================================================
PROFILE REVIEW NOTICE
====================================================*/

.lj-profile-review-notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 26px 28px;
  margin-top: 30px;
  overflow: hidden;
  background: radial-gradient(circle at top right, rgba(31, 158, 252, .16), transparent 38%), linear-gradient( 135deg, rgba(7, 104, 207, .05), rgba(31, 158, 252, .10));
  border: 1px solid rgba(31, 158, 252, .30);
  border-left: 6px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal);
}

.lj-profile-review-notice:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}

/* Decorative glow */

.lj-profile-review-notice::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -70px;
  top: -70px;
  border-radius: 50%;
  background: rgba(31, 158, 252, .10);
  pointer-events: none;
}

/* Shield Icon */

.lj-profile-review-notice>i {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--color-secondary);
  background: linear-gradient( 145deg, rgba(31, 158, 252, .18), rgba(7, 104, 207, .08));
  border: 1px solid rgba(31, 158, 252, .35);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(31, 158, 252, .06);
  animation: ljProfileShieldPulse 2.6s infinite;
}

/* Content */

.lj-profile-review-notice div {
  flex: 1;
}

.lj-profile-review-notice strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-title);
}

.lj-profile-review-notice p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
}

/* Animated Gold Line */

.lj-profile-review-notice::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient( 90deg, transparent, var(--color-secondary), transparent);
  animation: ljProfileReviewLine 3s linear infinite;
}

/*====================================================
ANIMATION
====================================================*/

@keyframes ljProfileShieldPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(31, 158, 252, .35);
  }
  70% {
    transform: scale(1.06);
    box-shadow: 0 0 0 14px rgba(31, 158, 252, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(31, 158, 252, 0);
  }
}

@keyframes ljProfileReviewLine {
  from {
    background-position: -250px;
  }
  to {
    background-position: 250px;
  }
}

/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:767px) {
  .lj-profile-review-notice {
    padding: 22px 18px;
    gap: 15px;
  }
  .lj-profile-review-notice>i {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }
  .lj-profile-review-notice strong {
    font-size: 22px;
  }
  .lj-profile-review-notice p {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* Pending Verification */

.lj-profile-verification.is-pending {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border-radius: var(--radius-pill);
  background: #F6FBFD;
  color: #0687F1;
  border: 1px solid rgba(6, 135, 241, .18);
  font-size: .92rem;
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-small);
}

.lj-profile-verification.is-pending i {
  color: #1F9EFC;
  animation: ljPendingPulse 1.8s infinite;
}

@keyframes ljPendingPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: .7;
  }
}

/*=========================================================
ACCOUNT STATUS
=========================================================*/

.lj-profile-account-state {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border-radius: var(--radius-pill);
  font-size: .9rem;
  font-weight: var(--weight-semibold);
  border: 1px solid transparent;
  box-shadow: var(--shadow-small);
}

.lj-profile-state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

/*=====================================
ACTIVE
=====================================*/

.lj-profile-account-state.is-active {
  background: #F6FBFD;
  color: #0768CF;
  border-color: rgba(7, 104, 207, .18);
}

.lj-profile-account-state.is-active .lj-profile-state-dot {
  background: #1F9EFC;
}

.lj-profile-account-state.is-active .lj-profile-state-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(31, 158, 252, .35);
  animation: ljAccountPulse 2s infinite;
}

/*=====================================
PENDING
=====================================*/

.lj-profile-account-state.is-pending {
  background: #F6FBFD;
  color: #0687F1;
  border-color: rgba(31, 158, 252, .22);
}

.lj-profile-account-state.is-pending .lj-profile-state-dot {
  background: #1F9EFC;
}

.lj-profile-account-state.is-pending .lj-profile-state-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(31, 158, 252, .35);
  animation: ljAccountPulse 2s infinite;
}

/*=====================================
INACTIVE
=====================================*/

.lj-profile-account-state.is-inactive {
  background: #D5EAF8;
  color: #082E5C;
  border-color: #6F8DA8;
}

.lj-profile-account-state.is-inactive .lj-profile-state-dot {
  background: #355A7D;
}

.lj-profile-account-state.is-inactive .lj-profile-state-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(53, 90, 125, .28);
  animation: ljAccountPulse 2s infinite;
}

/*=====================================
SUSPENDED
=====================================*/

.lj-profile-account-state.is-suspended {
  background: #D5EAF8;
  color: #0768CF;
  border-color: rgba(7, 104, 207, .18);
}

.lj-profile-account-state.is-suspended .lj-profile-state-dot {
  background: #0687F1;
}

.lj-profile-account-state.is-suspended .lj-profile-state-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(6, 135, 241, .35);
  animation: ljAccountPulse 2s infinite;
}

/*=====================================
Pulse Animation
=====================================*/

@keyframes ljAccountPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/******************************subscription**************************/

/* =========================================================
   TRANSACTION ICON
========================================================= */

.lj-dashboard-transaction-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: linear-gradient(145deg, var(--color-primary-soft), var(--color-white));
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.lj-dashboard-transaction-icon i {
  font-size: 18px;
}

.lj-dashboard-transaction-gateway,
.lj-dashboard-transaction-days,
.lj-dashboard-transaction-time {
  display: block;
}

.lj-dashboard-transaction-days,
.lj-dashboard-transaction-time {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 11px;
}

.lj-dashboard-transaction-empty {
  padding: 55px 20px !important;
  text-align: center;
}

.lj-dashboard-transaction-empty>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lj-dashboard-transaction-empty i {
  margin-bottom: 12px;
  color: var(--color-primary);
  font-size: 30px;
}

.lj-dashboard-transaction-empty strong {
  color: var(--color-title);
  font-size: 16px;
  font-weight: var(--weight-semibold);
}

.lj-dashboard-transaction-empty p {
  margin: 5px 0 0;
  color: var(--color-text);
  font-size: 12px;
}

/* =========================================================
   TRANSACTION MODAL
========================================================= */

.payment-transaction-modal {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.payment-transaction-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   BACKDROP
========================================================= */

.payment-transaction-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 52, 130, .72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* =========================================================
   MODAL DIALOG
========================================================= */

.payment-transaction-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  transform: translateY(20px) scale(.985);
  transition: var(--transition-normal);
}

.payment-transaction-modal.is-open .payment-transaction-dialog {
  transform: translateY(0) scale(1);
}

/* =========================================================
   MODAL CONTENT
========================================================= */

.payment-transaction-content {
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

/* =========================================================
   MODAL HEADER
========================================================= */

.payment-transaction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  color: var(--color-white);
  background: var(--topbar-background);
}

.payment-transaction-header>div {
  min-width: 0;
}

.payment-transaction-header span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-secondary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.payment-transaction-header h3 {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 27px);
  font-weight: var(--weight-bold);
  line-height: 1.15;
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.payment-transaction-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-white);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: var(--transition-fast);
}

.payment-transaction-close:hover {
  color: var(--color-primary);
  background: var(--color-white);
  transform: rotate(90deg);
}

.payment-transaction-close i {
  font-size: 18px;
}

/* =========================================================
   MODAL BODY
========================================================= */

.payment-transaction-body {
  max-height: calc(92vh - 82px);
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-white);
}

/* Custom scrollbar */

.payment-transaction-body::-webkit-scrollbar {
  width: 6px;
}

.payment-transaction-body::-webkit-scrollbar-track {
  background: var(--color-surface);
}

.payment-transaction-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.payment-transaction-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* =========================================================
   LOADING STATE
========================================================= */

.payment-transaction-loading {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text);
  text-align: center;
}

.payment-transaction-loading i {
  color: var(--color-primary);
  font-size: 26px;
}

.payment-transaction-loading span {
  font-size: 12px;
}

/* =========================================================
   TRANSACTION SUMMARY
========================================================= */

.payment-transaction-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.payment-transaction-summary>div {
  min-width: 0;
}

.payment-transaction-summary small {
  color: var(--color-secondary-dark);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-transaction-summary h4 {
  margin: 5px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-bold);
  line-height: 1.15;
}

.payment-transaction-summary p {
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.6;
}

.payment-transaction-summary-amount {
  text-align: right;
  white-space: nowrap;
}

.payment-transaction-summary-amount strong {
  display: block;
  margin-top: 5px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(23px, 4vw, 32px);
  font-weight: var(--weight-bold);
}

/* =========================================================
   TRANSACTION DETAILS GRID
========================================================= */

.payment-transaction-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.payment-transaction-detail {
  min-width: 0;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.payment-transaction-detail:hover {
  border-color: rgba(7, 104, 207, .25);
  box-shadow: var(--shadow-small);
  transform: translateY(-2px);
}

.payment-transaction-detail span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.payment-transaction-detail strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--color-title);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}

/* =========================================================
   FEATURE HEADING
========================================================= */

.payment-transaction-feature-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.payment-transaction-feature-heading>div {
  min-width: 0;
}

.payment-transaction-feature-heading span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-transaction-feature-heading h4 {
  margin: 3px 0 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   PLAN FEATURES
========================================================= */

.payment-transaction-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.payment-transaction-feature {
  min-width: 0;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.payment-transaction-feature:hover {
  border-color: rgba(7, 104, 207, .22);
  box-shadow: var(--shadow-small);
}

.payment-transaction-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.payment-transaction-feature-top strong {
  min-width: 0;
  color: var(--color-title);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

.payment-transaction-feature-top i {
  flex: 0 0 auto;
  color: var(--color-success);
  font-size: 16px;
}

/* =========================================================
   FEATURE STATISTICS
========================================================= */

.payment-transaction-feature-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.payment-transaction-feature-stat {
  min-width: 0;
  padding: 8px;
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xs);
}

.payment-transaction-feature-stat span {
  display: block;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 9px;
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.payment-transaction-feature-stat strong {
  display: block;
  margin-top: 2px;
  color: var(--color-title);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

/* =========================================================
   STATUS BADGES
========================================================= */

.payment-transaction-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: capitalize;
}

.payment-transaction-status.is-active,
.payment-transaction-status.is-success,
.payment-transaction-status.is-paid {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10);
}

.payment-transaction-status.is-pending {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .14);
}

.payment-transaction-status.is-failed,
.payment-transaction-status.is-expired,
.payment-transaction-status.is-cancelled {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .09);
}

/* =========================================================
   TABLE ACTION VIEW BUTTON
========================================================= */

.lj-dashboard-table-actions .payment-transaction-view {
  display: grid;
  place-items: center;
  transition: var(--transition-fast);
}

.lj-dashboard-table-actions .payment-transaction-view:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   TABLE TRANSACTION TEXT
========================================================= */

.lj-dashboard-transaction-gateway {
  margin-top: 2px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-medium);
}

.lj-dashboard-transaction-days {
  color: var(--color-muted);
}

.lj-dashboard-transaction-time {
  color: var(--color-muted);
}

/* =========================================================
   TABLE ICON HOVER
========================================================= */

tr:hover .lj-dashboard-transaction-icon {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:767.98px) {
  .payment-transaction-modal {
    padding: 12px;
  }
  .payment-transaction-dialog {
    max-width: 680px;
  }
  .payment-transaction-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payment-transaction-features {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  .payment-transaction-modal {
    align-items: flex-end;
    padding: 0;
  }
  .payment-transaction-dialog {
    width: 100%;
    max-width: none;
    max-height: 96dvh;
  }
  .payment-transaction-content {
    max-height: 96dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .payment-transaction-header {
    gap: 12px;
    padding: 17px 16px;
  }
  .payment-transaction-header h3 {
    font-size: 22px;
  }
  .payment-transaction-close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .payment-transaction-body {
    max-height: calc( 96dvh - 75px - env(safe-area-inset-bottom));
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .payment-transaction-summary {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 15px;
  }
  .payment-transaction-summary-amount {
    padding-top: 12px;
    text-align: left;
    border-top: 1px solid var(--color-border);
  }
  .payment-transaction-details-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .payment-transaction-feature-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .payment-transaction-feature-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:375px) {
  .payment-transaction-header {
    padding: 14px 13px;
  }
  .payment-transaction-header span {
    font-size: 8px;
  }
  .payment-transaction-header h3 {
    font-size: 19px;
  }
  .payment-transaction-body {
    padding: 13px 13px calc(13px + env(safe-area-inset-bottom));
  }
  .payment-transaction-summary,
  .payment-transaction-detail,
  .payment-transaction-feature {
    padding: 12px;
  }
  .payment-transaction-feature-stat {
    padding: 7px 4px;
  }
  .payment-transaction-feature-stat span {
    font-size: 8px;
  }
  .payment-transaction-feature-stat strong {
    font-size: 12px;
  }
}

/******************************************** subscription payment*********************/

/* =========================================================
   PAYMENT MODAL
========================================================= */

.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.payment-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   MODAL BACKDROP
========================================================= */

.payment-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 52, 130, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* =========================================================
   MODAL DIALOG
========================================================= */

.payment-modal-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  max-height: 94vh;
  transform: translateY(18px) scale(0.98);
  transition: var(--transition-normal);
}

.payment-modal.is-open .payment-modal-dialog {
  transform: translateY(0) scale(1);
}

/* =========================================================
   MODAL CONTENT
========================================================= */

.payment-modal-content {
  width: 100%;
  max-height: 94vh;
  overflow: hidden;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

/* =========================================================
   MODAL HEADER
========================================================= */

.payment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  color: var(--color-white);
  background: var(--topbar-background);
}

.payment-modal-header>div {
  min-width: 0;
}

.payment-modal-header small {
  display: block;
  margin-bottom: 4px;
  color: var(--color-secondary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.payment-modal-header h3 {
  margin: 4px 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp( 21px, 3vw, 28px);
  font-weight: var(--weight-bold);
  line-height: 1.15;
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.payment-modal-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-round);
  font-size: 22px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.payment-modal-close:hover {
  color: var(--color-primary);
  background: var(--color-white);
  transform: rotate(90deg);
}

/* =========================================================
   MODAL BODY
========================================================= */

.payment-modal-body {
  max-height: calc( 94vh - 82px);
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-white);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

.payment-modal-body::-webkit-scrollbar {
  width: 6px;
}

.payment-modal-body::-webkit-scrollbar-track {
  background: var(--color-surface);
}

.payment-modal-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.payment-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* =========================================================
   PLAN SUMMARY
========================================================= */

.payment-plan-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.payment-plan-summary>div {
  min-width: 0;
}

.payment-plan-summary span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.payment-plan-summary h4 {
  margin: 5px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-bold);
  line-height: 1.15;
}

.payment-plan-summary p {
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
   PLAN PRICE
========================================================= */

.payment-plan-price {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.payment-plan-price span {
  display: inline;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-semibold);
}

.payment-plan-price strong {
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp( 26px, 4vw, 34px);
  font-weight: var(--weight-bold);
}

/* =========================================================
   PLAN FEATURES
========================================================= */

.payment-plan-features {
  margin: 14px 0 20px;
}

.payment-plan-features ul {
  display: grid;
  grid-template-columns: repeat( 2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.6;
}

.payment-plan-features i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-success);
  font-size: 15px;
}

/* =========================================================
   FORM GRID
========================================================= */

.payment-form-grid {
  display: grid;
  grid-template-columns: repeat( 2, minmax(0, 1fr));
  gap: 12px;
}

/* =========================================================
   FORM FIELD
========================================================= */

.payment-field {
  display: block;
  margin-bottom: 14px;
}

.payment-field>span {
  display: block;
  margin-bottom: 6px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.payment-field input,
.payment-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  outline: none;
  font-family: var(--font-body);
  font-size: 12px;
  transition: var(--transition-fast);
}

.payment-field input::placeholder {
  color: var(--color-muted);
}

.payment-field input:hover,
.payment-field select:hover {
  border-color: rgba(7, 104, 207, 0.25);
}

.payment-field input:focus,
.payment-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(7, 104, 207, 0.07);
}

.payment-field input[readonly] {
  color: var(--color-text);
  background: var(--color-surface);
  cursor: default;
}

.payment-field-full {
  grid-column: 1 / -1;
}

/* =========================================================
   PAYMENT METHOD TITLE
========================================================= */

.payment-method-title {
  display: block;
  margin: 8px 0 10px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

/* =========================================================
   PAYMENT METHOD GRID
========================================================= */

.payment-method-grid {
  display: grid;
  grid-template-columns: repeat( 4, minmax(0, 1fr));
  gap: 10px;
}

.payment-method {
  position: relative;
  cursor: pointer;
}

.payment-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method>span {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.payment-method:hover>span {
  border-color: rgba(7, 104, 207, 0.28);
  box-shadow: var(--shadow-small);
  transform: translateY(-2px);
}

.payment-method img {
  width: 88px;
  height: 24px;
  object-fit: contain;
}

.payment-method strong {
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.payment-method input:checked+span {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(7, 104, 207, 0.07);
}

/* =========================================================
   PAYMENT METHOD CHECK INDICATOR
========================================================= */

.payment-method>span::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-white);
  transition: var(--transition-fast);
}

.payment-method input:checked+span::after {
  border: 4px solid var(--color-primary);
  background: var(--color-white);
}

/* =========================================================
   SECURITY NOTE
========================================================= */

.payment-security-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0;
  padding: 12px 14px;
  color: var(--color-text);
  background: var(--color-surface);
  border-left: 3px solid var(--color-secondary);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 11px;
  line-height: 1.6;
}

.payment-security-note i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-secondary-dark);
  font-size: 18px;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.payment-submit {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  box-shadow: 0 12px 28px rgba(7, 104, 207, 0.16);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.payment-submit:hover {
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-primary));
  transform: translateY(-1px);
  box-shadow: 0 15px 32px rgba(7, 104, 207, 0.20);
}

.payment-submit i {
  font-size: 18px;
  transition: var(--transition-fast);
}

.payment-submit:hover i {
  transform: translateX(3px);
}

.payment-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .payment-method-grid {
    grid-template-columns: repeat( 2, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .payment-modal {
    align-items: flex-end;
    padding: 10px;
  }
  .payment-modal-dialog {
    max-width: 100%;
    max-height: 96dvh;
  }
  .payment-modal-content {
    max-height: 96dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
  .payment-modal-header {
    padding: 17px 16px;
  }
  .payment-modal-body {
    max-height: calc( 96dvh - 76px);
    padding: 16px;
  }
  .payment-plan-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .payment-plan-price {
    width: 100%;
    padding-top: 12px;
    text-align: left;
    border-top: 1px solid var(--color-border);
  }
  .payment-plan-features ul,
  .payment-form-grid {
    grid-template-columns: 1fr;
  }
  .payment-field-full {
    grid-column: auto;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {
  .payment-modal {
    padding: 0;
  }
  .payment-modal-content {
    border-right: 0;
    border-left: 0;
  }
  .payment-modal-header h3 {
    font-size: 21px;
  }
  .payment-modal-close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .payment-modal-body {
    padding: 15px 15px calc( 15px + env( safe-area-inset-bottom));
  }
  .payment-method-grid {
    grid-template-columns: repeat( 2, minmax(0, 1fr));
  }
  .payment-method>span {
    min-height: 72px;
  }
  .payment-plan-summary {
    padding: 15px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {
  .payment-modal-header {
    padding: 14px 13px;
  }
  .payment-modal-header small {
    font-size: 8px;
  }
  .payment-modal-header h3 {
    font-size: 19px;
  }
  .payment-modal-body {
    padding: 13px 13px calc( 13px + env( safe-area-inset-bottom));
  }
  .payment-plan-summary {
    padding: 13px;
  }
  .payment-method-grid {
    gap: 8px;
  }
  .payment-method img {
    width: 76px;
    height: 22px;
  }
  .payment-method strong {
    font-size: 9px;
  }
}

/* =========================================================
   CURRENT SUBSCRIPTION
========================================================= */

.lj-dashboard-current-plan {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   ACTIVE STATUS
========================================================= */

.lj-dashboard-plan-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.lj-dashboard-plan-status.is-active {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10);
}

.lj-dashboard-plan-status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .10);
  animation: ljPlanPulse 1.8s infinite;
}

@keyframes ljPlanPulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(7, 104, 207, .10);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(7, 104, 207, 0);
  }
}

/* =========================================================
   PLAN OVERVIEW
========================================================= */

.lj-dashboard-plan-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 20px;
  background: linear-gradient( 135deg, var(--color-off-white), var(--color-white));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lj-dashboard-plan-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.lj-dashboard-plan-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(7, 104, 207, .16);
}

.lj-dashboard-plan-icon i {
  font-size: 22px;
}

.lj-dashboard-plan-main-copy {
  min-width: 0;
}

.lj-dashboard-plan-main-copy>span,
.lj-dashboard-plan-price>span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lj-dashboard-plan-main-copy h3 {
  margin: 3px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(23px, 3vw, 30px);
  line-height: 1.15;
}

.lj-dashboard-plan-main-copy p {
  max-width: 540px;
  margin: 4px 0 0;
  color: var(--color-text);
  font-size: 11px;
  line-height: 1.65;
}

.lj-dashboard-plan-price {
  flex: 0 0 auto;
  text-align: right;
}

.lj-dashboard-plan-price strong {
  display: block;
  margin-top: 3px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 32px);
}

.lj-dashboard-plan-price small {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 10px;
}

/* =========================================================
   DATE CARDS
========================================================= */

.lj-dashboard-plan-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.lj-dashboard-plan-date-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-dashboard-plan-date-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-radius: var(--radius-xs);
}

.lj-dashboard-plan-date-card.is-expiry .lj-dashboard-plan-date-icon {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lj-dashboard-plan-date-card small {
  display: block;
  color: var(--color-muted);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.lj-dashboard-plan-date-card strong {
  display: block;
  margin-top: 2px;
  color: var(--color-title);
  font-size: 12px;
}

.lj-dashboard-plan-date-card div>span {
  display: block;
  margin-top: 2px;
  color: var(--color-text);
  font-size: 9px;
}

/* =========================================================
   COUNTDOWN
========================================================= */

.lj-dashboard-plan-countdown {
  position: relative;
  margin-top: 14px;
  padding: 20px;
  overflow: hidden;
  color: var(--color-white);
  background: linear-gradient( 120deg, var(--color-dark), var(--color-tertiary), var(--color-primary-dark));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
}

.lj-dashboard-plan-countdown::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -130px;
  right: -70px;
  border-radius: var(--radius-round);
  background: rgba(31, 158, 252, .12);
  filter: blur(5px);
  pointer-events: none;
}

.lj-dashboard-plan-countdown-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.lj-dashboard-plan-countdown-heading span {
  display: block;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lj-dashboard-plan-countdown-heading h4 {
  margin: 3px 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 21px;
}

.lj-dashboard-plan-countdown-heading>i {
  color: var(--color-secondary);
  font-size: 24px;
}

.lj-dashboard-plan-countdown-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(60px, 1fr) auto minmax(60px, 1fr) auto minmax(60px, 1fr) auto minmax(60px, 1fr);
  align-items: center;
  gap: 10px;
}

.lj-dashboard-plan-countdown-item {
  min-width: 0;
  padding: 14px 8px;
  text-align: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(5px);
}

.lj-dashboard-plan-countdown-item strong {
  display: block;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lj-dashboard-plan-countdown-item strong.is-changing {
  animation: ljCountdownTick .32s ease;
}

@keyframes ljCountdownTick {
  0% {
    opacity: .35;
    transform: translateY(-5px) scale(.92);
  }
  55% {
    transform: translateY(2px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.lj-dashboard-plan-countdown-item span {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, .6);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-dashboard-plan-countdown-divider {
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: var(--weight-bold);
}

.lj-dashboard-plan-countdown-expired {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  padding: 10px 12px;
  color: #4AB3FC;
  background: rgba(7, 104, 207, .18);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-xs);
  font-size: 10px;
}

.lj-dashboard-plan-countdown-expired[hidden] {
  display: none;
}

/* =========================================================
   FEATURES
========================================================= */

.lj-dashboard-plan-features {
  margin-top: 22px;
}

.lj-dashboard-plan-features-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.lj-dashboard-plan-features-heading>div>span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-dashboard-plan-features-heading h4 {
  margin: 3px 0 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 21px;
}

.lj-dashboard-plan-feature-count {
  padding: 5px 9px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-semibold);
}

.lj-dashboard-plan-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.lj-dashboard-plan-feature-card {
  min-width: 0;
  padding: 15px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.lj-dashboard-plan-feature-card:hover {
  border-color: rgba(7, 104, 207, .2);
  box-shadow: var(--shadow-small);
  transform: translateY(-2px);
}

.lj-dashboard-plan-feature-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.lj-dashboard-plan-feature-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-xs);
}

.lj-dashboard-plan-feature-top>div {
  min-width: 0;
}

.lj-dashboard-plan-feature-top>div>span {
  display: block;
  color: var(--color-muted);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.lj-dashboard-plan-feature-top h5 {
  margin: 2px 0 0;
  color: var(--color-title);
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.lj-dashboard-plan-feature-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.lj-dashboard-plan-feature-numbers>div {
  padding: 9px 6px;
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xs);
}

.lj-dashboard-plan-feature-numbers span {
  display: block;
  color: var(--color-muted);
  font-size: 8px;
  text-transform: uppercase;
}

.lj-dashboard-plan-feature-numbers strong {
  display: block;
  margin-top: 2px;
  color: var(--color-title);
  font-size: 14px;
}

.lj-dashboard-plan-feature-numbers .is-remaining strong {
  color: var(--color-success);
}

/* =========================================================
   FEATURE PROGRESS
========================================================= */

.lj-dashboard-plan-feature-progress {
  margin-top: 12px;
}

.lj-dashboard-plan-feature-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--color-muted);
  font-size: 8px;
}

.lj-dashboard-plan-feature-progress-heading strong {
  color: var(--color-title);
}

.lj-dashboard-plan-feature-progress-track {
  height: 5px;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
}

.lj-dashboard-plan-feature-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient( 90deg, var(--color-primary), var(--color-secondary));
  border-radius: inherit;
  transition: width .6s ease;
}

.lj-dashboard-plan-feature-unlimited {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 9px;
  color: var(--color-success);
  background: rgba(7, 104, 207, .07);
  border-radius: var(--radius-xs);
  font-size: 9px;
  font-weight: var(--weight-medium);
}

/* =========================================================
   NO FEATURES
========================================================= */

.lj-dashboard-plan-no-features {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-dashboard-plan-no-features>i {
  color: var(--color-primary);
  font-size: 22px;
}

.lj-dashboard-plan-no-features strong {
  display: block;
  color: var(--color-title);
  font-size: 11px;
}

.lj-dashboard-plan-no-features p {
  margin: 3px 0 0;
  color: var(--color-text);
  font-size: 9px;
}

/* =========================================================
   EMPTY PLAN
========================================================= */

.lj-dashboard-plan-empty {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  text-align: left;
}

.lj-dashboard-plan-empty-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-round);
  font-size: 22px;
}

.lj-dashboard-plan-empty>div>span {
  color: var(--color-secondary-dark);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-dashboard-plan-empty h3 {
  margin: 4px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 24px;
}

.lj-dashboard-plan-empty p {
  max-width: 470px;
  margin: 0 0 14px;
  color: var(--color-text);
  font-size: 10px;
  line-height: 1.7;
}

.lj-dashboard-plan-empty-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: var(--transition-fast);
}

.lj-dashboard-plan-empty-button:hover {
  color: var(--color-white);
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:767.98px) {
  .lj-dashboard-plan-overview {
    align-items: flex-start;
    flex-direction: column;
  }
  .lj-dashboard-plan-price {
    width: 100%;
    padding-top: 12px;
    text-align: left;
    border-top: 1px solid var(--color-border);
  }
  .lj-dashboard-plan-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  .lj-dashboard-plan-overview {
    padding: 15px;
  }
  .lj-dashboard-plan-main {
    align-items: flex-start;
  }
  .lj-dashboard-plan-icon {
    width: 47px;
    height: 47px;
    flex-basis: 47px;
  }
  .lj-dashboard-plan-date-grid {
    grid-template-columns: 1fr;
  }
  .lj-dashboard-plan-countdown {
    padding: 15px;
  }
  .lj-dashboard-plan-countdown-grid {
    gap: 4px;
  }
  .lj-dashboard-plan-countdown-item {
    min-width: 0;
    padding: 11px 3px;
  }
  .lj-dashboard-plan-countdown-item strong {
    font-size: 24px;
  }
  .lj-dashboard-plan-countdown-divider {
    font-size: 18px;
  }
  .lj-dashboard-plan-countdown-item span {
    font-size: 7px;
  }
  .lj-dashboard-plan-features-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .lj-dashboard-plan-feature-card {
    padding: 13px;
  }
  .lj-dashboard-plan-empty {
    flex-direction: column;
    padding: 30px 15px;
    text-align: center;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:375px) {
  .lj-dashboard-plan-countdown {
    padding: 13px 10px;
  }
  .lj-dashboard-plan-countdown-grid {
    gap: 2px;
  }
  .lj-dashboard-plan-countdown-item strong {
    font-size: 21px;
  }
  .lj-dashboard-plan-countdown-item span {
    font-size: 6px;
    letter-spacing: .03em;
  }
  .lj-dashboard-plan-countdown-divider {
    font-size: 15px;
  }
  .lj-dashboard-plan-feature-numbers {
    gap: 4px;
  }
  .lj-dashboard-plan-feature-numbers>div {
    padding: 8px 3px;
  }
}

/* =========================================================
   CATEGORY NAVIGATION ICON
========================================================= */

.lj-category-nav-icon,
.lj-category-main-icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  color: var(--color-primary);
  background: linear-gradient( 145deg, var(--color-primary-soft), var(--color-white));
  border: 1px solid rgba(7, 104, 207, 0.10);
  border-radius: var(--radius-xs);
  box-shadow: 0 5px 14px rgba(1, 52, 130, 0.04);
  transition: transform var(--transition-fast), color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* =========================================================
   DECORATIVE ICON GLOW
========================================================= */

.lj-category-nav-icon::before,
.lj-category-main-icon::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  top: -17px;
  right: -14px;
  border-radius: var(--radius-round);
  background: rgba(31, 158, 252, 0.20);
  transition: var(--transition-fast);
}

/* =========================================================
   ICON
========================================================= */

.lj-category-nav-icon i,
.lj-category-main-icon i {
  position: relative;
  z-index: 2;
  font-size: 16px;
  line-height: 1;
  transition: transform var(--transition-fast);
}

/* =========================================================
   SMALL SUB-SUBCATEGORY ICON
========================================================= */

.lj-category-nav-icon.is-small {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: var(--radius-xs);
}

.lj-category-nav-icon.is-small i {
  font-size: 14px;
}

/* =========================================================
   LINKS WITH ICON
========================================================= */

.lj-subcategory-menu>a,
.lj-subcategory-item>a,
.lj-subsubcategory-menu>a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

/* =========================================================
   SUBCATEGORY HOVER
========================================================= */

.lj-subcategory-menu>a:hover .lj-category-nav-icon,
.lj-subcategory-item>a:hover .lj-category-nav-icon,
.lj-subsubcategory-menu>a:hover .lj-category-nav-icon {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(7, 104, 207, 0.17);
  transform: translateY(-1px) rotate(-2deg);
}

/* =========================================================
   ICON HOVER ANIMATION
========================================================= */

.lj-subcategory-menu>a:hover .lj-category-nav-icon i,
.lj-subcategory-item>a:hover .lj-category-nav-icon i,
.lj-subsubcategory-menu>a:hover .lj-category-nav-icon i {
  animation: ljCategoryIconBounce 0.42s ease;
}

@keyframes ljCategoryIconBounce {
  0% {
    transform: scale(1) translateY(0);
  }
  35% {
    transform: scale(1.12) translateY(-2px);
  }
  65% {
    transform: scale(0.96) translateY(1px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* =========================================================
   GOLD GLOW ON HOVER
========================================================= */

.lj-subcategory-menu>a:hover .lj-category-nav-icon::before,
.lj-subcategory-item>a:hover .lj-category-nav-icon::before,
.lj-subsubcategory-menu>a:hover .lj-category-nav-icon::before {
  width: 45px;
  height: 45px;
  top: -24px;
  right: -23px;
  background: rgba(31, 158, 252, 0.28);
}

/* =========================================================
   CHILD ARROW
========================================================= */

.lj-category-arrow {
  margin-left: auto;
  color: var(--color-muted);
  font-size: 18px;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.lj-subcategory-item:hover>a>.lj-category-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

/* =========================================================
   MAIN CATEGORY IMAGE
========================================================= */

.lj-main-category-list .lj-category-item>a>img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(1, 52, 130, 0.05);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.lj-main-category-list .lj-category-item:hover>a>img {
  border-color: rgba(7, 104, 207, 0.25);
  box-shadow: 0 7px 18px rgba(7, 104, 207, 0.10);
  transform: scale(1.05);
}

/* =========================================================
   EMPTY CATEGORY
========================================================= */

.lj-category-navigation-empty {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--color-muted);
  text-align: center;
}

.lj-category-navigation-empty i {
  color: var(--color-primary);
  font-size: 28px;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-category-nav-icon,
  .lj-category-main-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .lj-category-nav-icon i,
  .lj-category-main-icon i {
    font-size: 15px;
  }
  .lj-category-nav-icon.is-small {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .lj-category-nav-icon.is-small i {
    font-size: 13px;
  }
  .lj-main-category-list .lj-category-item>a>img {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

/* =========================================================
   CATEGORY DROPDOWN WRAPPER
========================================================= */

.lj-mobile-category-dropdown {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* =========================================================
   CATEGORY TOGGLE
========================================================= */

.lj-mobile-category-dropdown .lj-mobile-sell-item {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lj-mobile-sell-circle {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow var(--transition-fast), background var(--transition-fast);
}

.lj-mobile-sell-circle i {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lj-mobile-sell-item.is-open .lj-mobile-sell-circle {
  box-shadow: 0 9px 24px rgba(7, 104, 207, .22);
}

.lj-mobile-sell-item.is-open .lj-mobile-sell-circle i {
  transform: rotate(45deg);
}

.lj-mobile-sell-item.is-open {
  color: var(--color-primary);
}

/* =========================================================
   CATEGORY DROPDOWN
========================================================= */

.lj-mobile-category-menu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 90vw;
  max-width: 520px;
  z-index: 9999999;
  overflow: visible;
  background: var(--color-white);
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 70px rgba(1, 52, 130, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(14px) scale(.96);
  transform-origin: bottom center;
  transition: opacity .22s ease, visibility .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lj-mobile-category-menu[hidden] {
  display: block;
}

.lj-mobile-category-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* =========================================================
   POINTER
========================================================= */

.lj-mobile-category-pointer {
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border-right: 1px solid rgba(7, 104, 207, .12);
  border-bottom: 1px solid rgba(7, 104, 207, .12);
  transform: translateX(-50%) rotate(45deg);
  z-index: 3;
}

/* =========================================================
   DROPDOWN HEADER
========================================================= */

.lj-mobile-category-menu-header {
  position: relative;
  padding: 8px 15px;
  overflow: hidden;
  color: var(--color-white);
  background: var(--topbar-background);
  border-radius: 10px 10px 0px 0px;
}

.lj-mobile-category-menu-header::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  top: -72px;
  right: -35px;
  border-radius: var(--radius-round);
  background: radial-gradient( circle, rgba(31, 158, 252, .24), transparent 70%);
  pointer-events: none;
}

.lj-mobile-category-menu-header>div {
  position: relative;
  z-index: 2;
}

.lj-mobile-category-menu-header span {
  display: block;
  color: var(--color-secondary);
  font-size: 8px;
  font-weight: var(--weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lj-mobile-category-menu-header h4 {
  margin: 3px 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   CATEGORY GRID
========================================================= */

.lj-mobile-category-grid {
  display: grid;
  grid-template-columns: repeat( 4, minmax(0, 1fr));
  gap: 10px 7px;
  max-height: min( 52vh, 430px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 10px 16px;
  background: linear-gradient( 180deg, var(--color-white), var(--color-off-white));
  border-radius: 10px 10px 0px 0px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   SCROLLBAR
========================================================= */

.lj-mobile-category-grid::-webkit-scrollbar {
  width: 4px;
}

.lj-mobile-category-grid::-webkit-scrollbar-track {
  background: transparent;
}

.lj-mobile-category-grid::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

/* =========================================================
   CATEGORY CARD
========================================================= */

.lj-mobile-category-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 7px 2px 8px;
  color: var(--color-title);
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(8px) scale(.95);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card {
  animation: ljMobileDropdownCategoryIn .34s ease forwards;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(1) {
  animation-delay: .03s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(2) {
  animation-delay: .05s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(3) {
  animation-delay: .07s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(4) {
  animation-delay: .09s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(5) {
  animation-delay: .11s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(6) {
  animation-delay: .13s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(7) {
  animation-delay: .15s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(8) {
  animation-delay: .17s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(n+9) {
  animation-delay: .19s;
}

@keyframes ljMobileDropdownCategoryIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   CATEGORY IMAGE
========================================================= */

.lj-mobile-category-image-wrap {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  /**background:
        var(--color-surface);**/
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-sm);
  box-shadow: 0 5px 14px rgba(1, 52, 130, .06);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.lj-mobile-category-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.lj-mobile-category-card:hover,
.lj-mobile-category-card:focus-visible {
  color: var(--color-primary);
  background: var(--color-white);
  box-shadow: var(--shadow-small);
}

.lj-mobile-category-card:hover .lj-mobile-category-image-wrap,
.lj-mobile-category-card:focus-visible .lj-mobile-category-image-wrap {
  border-color: rgba(7, 104, 207, .24);
  box-shadow: 0 8px 20px rgba(7, 104, 207, .11);
  transform: translateY(-2px);
}

.lj-mobile-category-card:hover .lj-mobile-category-image-wrap img {
  transform: scale(1.07);
}

/* =========================================================
   FALLBACK ICON
========================================================= */

.lj-mobile-category-fallback-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: linear-gradient( 145deg, var(--color-primary-soft), var(--color-white));
}

.lj-mobile-category-fallback-icon i {
  font-size: 23px;
}

/* =========================================================
   CATEGORY NAME
========================================================= */

.lj-mobile-category-name {
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: inherit;
  font-size: 8px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.lj-mobile-category-empty {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px;
  color: var(--color-muted);
  text-align: center;
}

.lj-mobile-category-empty i {
  color: var(--color-primary);
  font-size: 26px;
}

.lj-mobile-category-empty strong {
  color: var(--color-title);
  font-size: 10px;
}

/* =========================================================
   ENSURE NOTHING OBSTRUCTS DROPDOWN
========================================================= */

.lj-mobile-bottom-nav {
  overflow: visible !important;
  z-index: 9999990;
}

.lj-mobile-bottom-nav>* {
  overflow: visible;
}

.lj-mobile-category-dropdown {
  overflow: visible !important;
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:375px) {
  .lj-mobile-category-menu {
    width: 94vw;
  }
  .lj-mobile-category-grid {
    gap: 8px 5px;
    padding: 12px 7px 14px;
    border-radius: 10px 10px 0px 0px;
  }
  .lj-mobile-category-image-wrap {
    width: 48px;
    height: 48px;
  }
  .lj-mobile-category-name {
    font-size: var(--main-font-size-2);
  }
}

/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:992px) {
  .lj-mobile-category-menu {
    display: none !important;
  }
}

/* =========================================================
   LINJUST — PREMIUM DYNAMIC LISTING FORM
   Clean • Luxury • Warm • Professional • Responsive

   Uses the existing LINJUST frontend CSS variables.
   Form components intentionally use NO border-radius.
========================================================= */

/* =========================================================
   1. MAIN LISTING CARD
========================================================= */

.lj-listing-card {
  position: relative;
  width: 100%;
  overflow: visible;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .055);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
}

.lj-listing-card *,
.lj-listing-card *::before,
.lj-listing-card *::after {
  box-sizing: border-box;
}

/* =========================================================
   2. FORM HEADER
========================================================= */

.lj-listing-heading {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 34px 36px 31px;
  overflow: hidden;
  background: linear-gradient( 115deg, var(--color-white) 0%, var(--color-off-white) 68%, var(--color-primary-soft) 100%);
  border-bottom: 1px solid var(--color-border);
}

/* Elegant top accent */

.lj-listing-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient( 90deg, var(--color-primary), var(--color-primary-dark), var(--color-secondary));
}

.lj-listing-heading-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 800px;
}

.lj-listing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-listing-kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--color-secondary);
}

.lj-listing-heading h2,
.lj-listing-section-head h3,
.lj-city-header h3 {
  font-family: var(--font-heading);
  color: var(--color-title);
  font-weight: var(--weight-bold);
}

.lj-listing-heading h2 {
  margin: 0 0 9px;
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.lj-listing-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.8;
}

/* =========================================================
   3. DRAFT STATUS
========================================================= */

.lj-listing-draft-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 13px;
  color: var(--color-muted);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: 0 5px 18px rgba(1, 52, 130, .04);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: .02em;
  transition: var(--transition-fast);
}

.lj-listing-draft-state i {
  color: var(--color-secondary-dark);
  font-size: 15px;
}

.lj-listing-draft-state.is-saving {
  color: var(--color-secondary-dark);
  border-color: rgba(31, 158, 252, .55);
}

.lj-listing-draft-state.is-saved {
  color: var(--color-success);
}

/* =========================================================
   4. FORM SECTIONS
========================================================= */

.lj-listing-section {
  position: relative;
  padding: 31px 36px 34px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.lj-listing-section:nth-of-type(even) {
  background: linear-gradient( 90deg, var(--color-white), var(--color-off-white));
}

.lj-listing-section:last-of-type {
  border-bottom: 0;
}

.lj-listing-section.is-hidden,
.lj-listing-field.is-hidden,
.lj-listing-upload-progress.is-hidden {
  display: none !important;
}

/* =========================================================
   5. SECTION HEADERS
========================================================= */

.lj-listing-section-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 25px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--color-border);
}

.lj-listing-section-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  font-size: 16px;
  transition: var(--transition-fast);
}

.lj-listing-section-head:hover .lj-listing-section-icon {
  color: var(--color-white);
  background: var(--color-primary);
  border-left-color: var(--color-secondary);
  transform: translateY(-2px);
}

.lj-listing-section-head h3 {
  margin: 0 0 3px;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -.01em;
}

.lj-listing-section-head p {
  margin: 0;
  color: var(--color-text);
  font-size: 11px;
  line-height: 1.65;
}

/* =========================================================
   6. FORM GRID
========================================================= */

.lj-listing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 21px;
}

.lj-listing-field {
  min-width: 0;
}

.lj-listing-field-full {
  grid-column: 1 / -1;
}

/* =========================================================
   7. LABELS
========================================================= */

.lj-listing-field label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: .015em;
}

.lj-listing-field label span {
  color: var(--color-primary);
}

.lj-listing-field small {
  display: block;
  margin-top: 7px;
  color: var(--color-muted);
  font-size: 10px;
  line-height: 1.6;
}

/* =========================================================
   8. FORM CONTROL WRAPPERS
========================================================= */

.lj-listing-control,
.lj-listing-price-control {
  position: relative;
  min-height: 52px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px transparent;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.lj-listing-control:hover,
.lj-listing-price-control:hover {
  border-color: rgba(1, 56, 131, .35);
}

.lj-listing-control:focus-within,
.lj-listing-price-control:focus-within {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary), 0 8px 22px rgba(1, 52, 130, .045);
}

/* =========================================================
   9. INPUT ICONS
========================================================= */

.lj-listing-control>i {
  position: absolute;
  left: 15px;
  z-index: 2;
  color: var(--color-secondary-dark);
  font-size: 15px;
  pointer-events: none;
  transition: var(--transition-fast);
}

.lj-listing-control:focus-within>i {
  color: var(--color-primary);
  transform: scale(1.05);
}

/* =========================================================
   10. INPUT / SELECT / TEXTAREA
========================================================= */

.lj-listing-control input,
.lj-listing-control select,
.lj-listing-control textarea,
.lj-listing-price-control input {
  width: 100%;
  min-width: 0;
  color: var(--color-title);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-regular);
}

.lj-listing-control input,
.lj-listing-control select {
  height: 50px;
  padding: 0 14px 0 42px;
}

.lj-listing-control textarea {
  min-height: 145px;
  padding: 15px 15px 15px 42px;
  resize: vertical;
  line-height: 1.75;
}

.lj-listing-control select {
  cursor: pointer;
}

.lj-listing-control select[multiple] {
  height: auto;
  min-height: 125px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.lj-listing-control input::placeholder,
.lj-listing-control textarea::placeholder {
  color: var(--color-muted);
  opacity: .72;
}

.lj-listing-control input:disabled,
.lj-listing-control select:disabled,
.lj-listing-control textarea:disabled {
  cursor: not-allowed;
  color: var(--color-muted);
  opacity: .65;
  background: var(--color-off-white) !important;
}

/* =========================================================
   11. PRICE CONTROL
========================================================= */

.lj-listing-price-control {
  overflow: hidden;
}

.lj-listing-currency {
  align-self: stretch;
  min-width: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-title);
  background: linear-gradient( 135deg, var(--color-off-white), var(--color-primary-soft));
  border-right: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.lj-listing-price-control input {
  height: 50px;
  padding: 0 14px;
}

.lj-listing-price-period-label {
  flex: 0 0 auto;
  padding-right: 14px;
  color: var(--color-muted);
  font-size: 10px;
  white-space: nowrap;
}

/* =========================================================
   12. ADD CITY LINK
========================================================= */

.lj-listing-city-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 0 0 2px;
  color: var(--color-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-listing-city-trigger:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-dark);
  transform: translateX(2px);
}

/* =========================================================
   13. DYNAMIC FEATURE CARD
========================================================= */

.lj-listing-feature-card {
  position: relative;
  padding: 17px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  transition: var(--transition-fast);
}

.lj-listing-feature-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: transparent;
  transition: var(--transition-fast);
}

.lj-listing-feature-card:hover {
  background: var(--color-white);
  border-color: rgba(1, 56, 131, .25);
  box-shadow: 0 10px 25px rgba(1, 52, 130, .045);
}

.lj-listing-feature-card:hover::before,
.lj-listing-feature-card:focus-within::before {
  background: var(--color-primary);
}

.lj-listing-feature-card:focus-within {
  background: var(--color-white);
  border-color: rgba(7, 104, 207, .42);
  box-shadow: 0 12px 30px rgba(1, 52, 130, .055);
}

/* =========================================================
   14. FEATURE LABEL / ICON
========================================================= */

.lj-listing-feature-label {
  display: flex !important;
  align-items: center;
  gap: 9px;
}

.lj-listing-feature-label .lj-feature-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-left: 2px solid var(--color-primary);
  border-radius: 0;
  font-size: 12px;
}

/* =========================================================
   15. RADIO / CHECKBOX OPTIONS
========================================================= */

.lj-listing-radio-group,
.lj-listing-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lj-listing-choice {
  position: relative;
  cursor: pointer;
}

.lj-listing-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lj-listing-choice>span {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-size: 11px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-listing-choice>span:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: rgba(7, 104, 207, .30);
}

.lj-listing-choice input:checked+span {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* =========================================================
   16. FILE DROPZONE
========================================================= */

.lj-listing-dropzone {
  position: relative;
  min-height: 205px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 24px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient( 145deg, var(--color-white) 0%, var(--color-off-white) 72%, var(--color-primary-soft) 100%);
  border: 1px dashed rgba(1, 56, 131, .42);
  border-radius: 0;
  cursor: pointer;
  transition: var(--transition-normal);
}

.lj-listing-dropzone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient( 90deg, var(--color-primary), var(--color-secondary));
  transition: width .35s ease;
}

.lj-listing-dropzone:hover::before,
.lj-listing-dropzone.is-dragover::before {
  width: 100%;
}

.lj-listing-dropzone:hover,
.lj-listing-dropzone.is-dragover {
  border-color: var(--color-primary);
  background: linear-gradient( 145deg, var(--color-white), var(--color-primary-soft));
  box-shadow: 0 15px 38px rgba(1, 52, 130, .07);
  transform: translateY(-2px);
}

/* Native input covers entire dropzone */

.lj-listing-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* =========================================================
   17. DROPZONE ICON
========================================================= */

.lj-listing-dropzone-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 1px solid rgba(31, 158, 252, .45);
  border-radius: 0;
  box-shadow: 8px 8px 0 rgba(31, 158, 252, .12);
  font-size: 22px;
  animation: ljListingDropPulse 2.7s ease-in-out infinite;
}

.lj-listing-dropzone strong {
  color: var(--color-title);
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

.lj-listing-dropzone>span:not(.lj-listing-dropzone-icon) {
  margin-top: 5px;
  color: var(--color-text);
  font-size: 11px;
}

.lj-listing-dropzone small {
  max-width: 520px;
  margin-top: 9px;
  color: var(--color-muted);
  font-size: 10px;
  line-height: 1.6;
}

@keyframes ljListingDropPulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* =========================================================
   18. UPLOAD PROGRESS
========================================================= */

.lj-listing-upload-progress {
  margin-top: 16px;
  padding: 14px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
}

.lj-listing-upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 9px;
  color: var(--color-text);
  font-size: 10px;
  font-weight: var(--weight-medium);
}

.lj-listing-upload-track {
  width: 100%;
  height: 5px;
  overflow: hidden;
  background: var(--color-border);
  border-radius: 0;
}

.lj-listing-upload-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient( 90deg, var(--color-primary-dark), var(--color-primary), var(--color-secondary));
  border-radius: 0;
  transition: width var(--transition-fast);
}

/* =========================================================
   19. FILE PREVIEW GRID
========================================================= */

.lj-listing-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 100px));
  gap: 12px;
  margin-top: 18px;
}

.lj-listing-preview {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: 0 5px 15px rgba(1, 52, 130, .055);
  cursor: grab;
  user-select: none;
  transition: var(--transition-fast);
}

.lj-listing-preview:hover {
  border-color: var(--color-primary);
  box-shadow: 0 9px 22px rgba(1, 52, 130, .09);
  transform: translateY(-2px);
}

.lj-listing-preview:active {
  cursor: grabbing;
}

.lj-listing-preview.is-dragging {
  opacity: .45;
  transform: scale(.96);
}

.lj-listing-preview img,
.lj-listing-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =========================================================
   20. FILE TYPE BADGE
========================================================= */

.lj-listing-preview-type {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 4px 6px;
  color: var(--color-white);
  background: rgba(1, 52, 130, .78);
  border-radius: 0;
  font-size: 8px;
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* =========================================================
   21. FILE DELETE
========================================================= */

.lj-listing-preview-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: rgba(7, 104, 207, .95);
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(1, 52, 130, .18);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-listing-preview-delete:hover {
  background: var(--color-primary-dark);
  transform: scale(1.07);
}

/* =========================================================
   22. FORM ACTIONS
========================================================= */

.lj-listing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 23px 36px;
  background: linear-gradient( 90deg, var(--color-off-white), var(--color-white));
  border-top: 1px solid var(--color-border);
}

/* =========================================================
   23. BUTTONS
========================================================= */

.lj-listing-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: .015em;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-listing-btn i {
  font-size: 16px;
}

.lj-listing-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

.lj-listing-btn-light {
  color: var(--color-title);
  background: var(--color-white);
  border-color: var(--color-border);
}

.lj-listing-btn-light:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.lj-listing-btn-primary {
  position: relative;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: var(--color-primary);
  box-shadow: 0 9px 22px rgba(7, 104, 207, .16);
}

.lj-listing-btn-primary:hover {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-tertiary));
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 13px 27px rgba(7, 104, 207, .20);
}

/* =========================================================
   24. CITY MODAL
========================================================= */

.lj-city-modal {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-normal);
}

.lj-city-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lj-city-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(1, 52, 130, .76);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.lj-city-dialog {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  max-height: calc(100dvh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  box-shadow: 0 35px 100px rgba(1, 52, 130, .28);
  transform: translateY(20px) scale(.985);
  transition: var(--transition-normal);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.lj-city-modal.is-open .lj-city-dialog {
  transform: translateY(0) scale(1);
}

/* =========================================================
   25. CITY MODAL HEADER
========================================================= */

.lj-city-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  color: var(--color-white);
  background: var(--topbar-background);
  border-bottom: 2px solid var(--color-secondary);
}

.lj-city-header span {
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-city-header h3 {
  margin: 4px 0 0;
  color: var(--color-white);
  font-size: 26px;
}

.lj-city-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-city-close:hover {
  color: var(--color-dark);
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  transform: rotate(90deg);
}

/* =========================================================
   26. CITY BODY / FOOTER
========================================================= */

.lj-city-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 23px;
}

.lj-city-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 17px 22px;
  background: var(--color-off-white);
  border-top: 1px solid var(--color-border);
}

/* =========================================================
   27. VALIDATION
========================================================= */

.lj-listing-field.has-error .lj-listing-control,
.lj-listing-field.has-error .lj-listing-price-control {
  border-color: var(--color-danger);
  box-shadow: inset 3px 0 0 var(--color-danger);
}

.lj-listing-field.has-error label {
  color: var(--color-danger);
}

.lj-listing-field-error {
  display: block;
  margin-top: 6px;
  color: var(--color-danger);
  font-size: 10px;
  font-weight: var(--weight-medium);
}

.lj-listing-field.is-valid .lj-listing-control,
.lj-listing-field.is-valid .lj-listing-price-control {
  border-color: rgba(7, 104, 207, .55);
  box-shadow: inset 3px 0 0 rgba(7, 104, 207, .55);
}

/* =========================================================
   28. LOADING
========================================================= */

.lj-listing-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  color: var(--color-muted);
  font-size: 11px;
}

.lj-listing-loading i {
  color: var(--color-primary);
  font-size: 18px;
  animation: ljListingSpinner .75s linear infinite;
}

@keyframes ljListingSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   29. TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-listing-heading {
    padding: 29px 26px;
  }
  .lj-listing-section {
    padding: 27px 26px 30px;
  }
  .lj-listing-actions {
    padding: 21px 26px;
  }
}

/* =========================================================
   30. MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-listing-card {
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  .lj-listing-heading {
    flex-direction: column;
    gap: 15px;
    padding: 25px 18px 23px;
  }
  .lj-listing-heading h2 {
    font-size: clamp(28px, 9vw, 35px);
  }
  .lj-listing-draft-state {
    align-self: flex-start;
  }
  .lj-listing-section {
    padding: 24px 18px 27px;
  }
  .lj-listing-grid,
  .lj-city-body {
    grid-template-columns: 1fr;
  }
  .lj-listing-grid {
    gap: 18px;
  }
  .lj-listing-field-full {
    grid-column: auto;
  }
  .lj-listing-section-head {
    align-items: flex-start;
    margin-bottom: 21px;
    padding-bottom: 15px;
  }
  .lj-listing-section-head h3 {
    font-size: 22px;
  }
  .lj-listing-control,
  .lj-listing-price-control {
    min-height: 52px;
  }
  .lj-listing-control input,
  .lj-listing-control select {
    height: 50px;
    font-size: 16px;
  }
  .lj-listing-control textarea {
    font-size: 16px;
  }
  /* Prevent iOS input zoom */
  .lj-listing-price-control input {
    font-size: 16px;
  }
  .lj-listing-dropzone {
    min-height: 185px;
    padding: 27px 18px;
  }
  .lj-listing-preview-grid {
    grid-template-columns: repeat( auto-fill, minmax(90px, 1fr));
    gap: 9px;
  }
  .lj-listing-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* Sticky mobile actions */
  .lj-listing-actions {
    position: sticky;
    bottom: calc( var(--mobile-bottom-height) + env(safe-area-inset-bottom));
    z-index: 15;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 18px;
    background: rgba(246, 251, 253, .97);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -10px 28px rgba(1, 52, 130, .065);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }
  .lj-listing-btn {
    width: 100%;
    min-height: 48px;
    padding: 0 11px;
  }
  /* Modal remains centered rather than becoming
       a rounded mobile bottom-sheet */
  .lj-city-modal {
    align-items: center;
    padding: 12px;
  }
  .lj-city-dialog {
    width: 100%;
    max-height: calc( 100dvh - var(--mobile-bottom-height) - 28px);
    border-radius: 0;
  }
  .lj-city-body {
    padding: 19px 17px;
  }
  .lj-city-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px 17px;
  }
}

/* =========================================================
   31. SMALL MOBILE
========================================================= */

@media(max-width:480px) {
  .lj-listing-heading {
    padding: 23px 15px 21px;
  }
  .lj-listing-heading h2 {
    font-size: 29px;
  }
  .lj-listing-heading p {
    font-size: 11px;
    line-height: 1.7;
  }
  .lj-listing-section {
    padding: 22px 15px 25px;
  }
  .lj-listing-section-icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }
  .lj-listing-section-head h3 {
    font-size: 21px;
  }
  .lj-listing-dropzone {
    min-height: 175px;
    padding: 24px 14px;
  }
  .lj-listing-dropzone-icon {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .lj-listing-actions {
    padding: 11px 15px;
  }
  .lj-city-header {
    padding: 17px 16px;
  }
  .lj-city-header h3 {
    font-size: 23px;
  }
  .lj-city-footer {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   32. VERY SMALL MOBILE
========================================================= */

@media(max-width:360px) {
  .lj-listing-heading {
    padding: 20px 13px;
  }
  .lj-listing-section {
    padding: 20px 13px 23px;
  }
  .lj-listing-grid {
    gap: 15px;
  }
  .lj-listing-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .lj-listing-choice>span {
    padding: 8px 10px;
    font-size: 10px;
  }
}

/* =========================================================
   33. ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-listing-card *,
  .lj-listing-card *::before,
  .lj-listing-card *::after,
  .lj-city-modal *,
  .lj-city-modal *::before,
  .lj-city-modal *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* General dropdown content */

.lj-dropdown-wrap .lj-dropdown {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   OPTIONAL CUSTOM SCROLLBAR
   ============================================================ */

.lj-dropdown::-webkit-scrollbar,
.lj-language-dropdown::-webkit-scrollbar,
.lj-mega-menu::-webkit-scrollbar {
  width: 6px;
}

.lj-dropdown::-webkit-scrollbar-track,
.lj-language-dropdown::-webkit-scrollbar-track,
.lj-mega-menu::-webkit-scrollbar-track {
  background: #D5EAF8;
}

.lj-dropdown::-webkit-scrollbar-thumb,
.lj-language-dropdown::-webkit-scrollbar-thumb,
.lj-mega-menu::-webkit-scrollbar-thumb {
  background: #0768CF;
  border-radius: 10px;
}

.lj-dropdown::-webkit-scrollbar-thumb:hover,
.lj-language-dropdown::-webkit-scrollbar-thumb:hover,
.lj-mega-menu::-webkit-scrollbar-thumb:hover {
  background: #013883;
}

/* Firefox */

.lj-dropdown,
.lj-language-dropdown,
.lj-mega-menu {
  scrollbar-width: thin;
  scrollbar-color: #0768CF #D5EAF8;
}

.lj-manage-thumb {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  color: var(--color-primary)
}

.lj-manage-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-manage-subcat {
  display: block;
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 10px
}

.lj-manage-status-wrap {
  display: flex;
  align-items: center;
  gap: 9px
}

.lj-manage-switch {
  position: relative;
  display: inline-flex;
  cursor: pointer
}

.lj-manage-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.lj-manage-switch-track {
  position: relative;
  width: 42px;
  height: 22px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  transition: var(--transition-fast)
}

.lj-manage-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--color-white);
  box-shadow: 0 2px 6px rgba(1, 52, 130, .18);
  transition: var(--transition-fast)
}

.lj-manage-switch input:checked+.lj-manage-switch-track {
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-manage-switch input:checked+.lj-manage-switch-track .lj-manage-switch-knob {
  transform: translateX(20px)
}

.lj-manage-status-text {
  font-size: 10px;
  font-weight: var(--weight-semibold)
}

.lj-manage-status-text.is-active {
  color: var(--color-success)
}

.lj-manage-status-text.is-inactive {
  color: var(--color-muted)
}

.lj-manage-status-text.is-pending {
  color: var(--color-secondary-dark)
}

.lj-manage-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-normal)
}

.lj-manage-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

.lj-manage-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(1, 52, 130, .78);
  backdrop-filter: blur(5px)
}

.lj-manage-modal-dialog {
  position: relative;
  z-index: 2;
  width: min(100%, 980px);
  max-height: 94vh;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-large);
  transform: translateY(18px) scale(.985);
  transition: var(--transition-normal)
}

.lj-manage-modal.is-open .lj-manage-modal-dialog {
  transform: none
}

.lj-manage-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  color: var(--color-white);
  background: var(--topbar-background);
  border-bottom: 2px solid var(--color-secondary)
}

.lj-manage-modal-header small {
  display: block;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-manage-modal-header h3 {
  margin: 3px 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 27px
}

.lj-manage-modal-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .24);
  transition: var(--transition-fast)
}

.lj-manage-modal-close:hover {
  background: var(--color-secondary);
  color: var(--color-dark)
}

.lj-manage-modal-body {
  max-height: calc(94vh - 82px);
  overflow-y: auto
}

.lj-manage-modal .is-hidden {
  display: none !important
}

.lj-manage-modal .lj-listing-section {
  padding: 27px 28px
}

.lj-manage-modal .lj-listing-control,
.lj-manage-modal .lj-listing-price-control,
.lj-manage-modal .lj-listing-feature-card,
.lj-manage-modal .lj-listing-btn,
.lj-manage-modal .lj-listing-dropzone,
.lj-manage-modal .lj-listing-preview {
  border-radius: 0 !important
}

.lj-manage-modal .lj-listing-preview {
  position: relative
}

.lj-manage-modal .lj-listing-preview-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3
}

.lj-manage-modal .lj-listing-preview-handle {
  position: absolute;
  bottom: 5px;
  right: 5px;
  z-index: 3;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  background: rgba(1, 52, 130, .72);
  color: #FFFFFF;
  cursor: grab
}

@media(max-width:767.98px) {
  .lj-manage-modal {
    padding: 8px
  }
  .lj-manage-modal-dialog {
    max-height: calc(100dvh - 16px)
  }
  .lj-manage-modal-body {
    max-height: calc(100dvh - 86px)
  }
  .lj-manage-modal .lj-listing-section {
    padding: 22px 15px
  }
  .lj-manage-modal .lj-listing-grid {
    grid-template-columns: 1fr
  }
  .lj-manage-modal .lj-listing-field-full {
    grid-column: auto
  }
  .lj-manage-status-wrap {
    justify-content: flex-end
  }
}

@media(max-width:480px) {
  .lj-manage-modal-header {
    padding: 17px 15px
  }
  .lj-manage-modal-header h3 {
    font-size: 23px
  }
}

.lj-google-translate-engine {
  position: fixed;
  left: -10000px;
  bottom: 0;
  width: 220px;
  height: auto;
  overflow: hidden;
  z-index: -1;
}

.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame {
  display: none !important;
}

.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-yAWNEb-L7lbkb>div,
.VIpgJd-yAWNEb-L7lbkb div,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
  display: none !important;
  z-index: 0 !important;
}

.VIpgJd-ZVi9od-aZ2wEe-OiiCO-ti6hGc {
  display: none !important;
  z-index: 0 !important;
}

.translated-ltr {
  top: initial;
  position: sticky;
  margin-top: -40px;
}

/* =========================================================
   DASHBOARD WIDGET ICONS
   ========================================================= */

.lj-dashboard-widget-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  color: #FFFFFF;
  border: 0;
  font-size: 20px;
  box-shadow: 0 8px 22px rgba(1, 52, 130, .12);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

/* Always keep the actual icon white */

.lj-dashboard-widget-icon i {
  color: #FFFFFF !important;
  transition: transform .3s ease;
}

/* =========================================================
   1. BLUE
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 1) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0768CF, #0768CF);
}

/* =========================================================
   2. GREEN
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 2) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0687F1, #0768CF);
}

/* =========================================================
   3. RED
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 3) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0768CF, #013883);
}

/* =========================================================
   4. YELLOW / GOLD
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 4) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #4AB3FC, #1F9EFC);
}

/* =========================================================
   5. VIOLET
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 5) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0687F1, #0768CF);
}

/* =========================================================
   6. PURPLE
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 6) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0768CF, #013883);
}

/* =========================================================
   7. #013482
   ========================================================= */

.lj-dashboard-widget:nth-child(7n) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #013482, #013482);
}

/* =========================================================
   HOVER
   ========================================================= */

.lj-dashboard-widget:hover .lj-dashboard-widget-icon {
  transform: translateY(-4px) scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 13px 30px rgba(1, 52, 130, .18);
}

.lj-dashboard-widget:hover .lj-dashboard-widget-icon i {
  transform: scale(1.12);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:575.98px) {
  .lj-dashboard-widget-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 18px;
  }
}

/* =========================================================
   MY LISTINGS TOOLBAR
========================================================= */

.lj-dashboard-table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.lj-dashboard-table-toolbar .lj-dashboard-table-search {
  flex: 1 1 auto;
  min-width: 260px;
}

.lj-dashboard-table-toolbar .lj-dashboard-table-filter {
  flex: 0 0 210px;
  min-width: 0;
}

.lj-dashboard-table-toolbar input,
.lj-dashboard-table-toolbar select {
  width: 100%;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-dashboard-table-toolbar {
    flex-wrap: wrap;
  }
  .lj-dashboard-table-toolbar .lj-dashboard-table-search {
    flex: 1 1 100%;
  }
  .lj-dashboard-table-toolbar .lj-dashboard-table-filter {
    flex: 1 1 calc(50% - 6px);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  .lj-dashboard-table-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .lj-dashboard-table-toolbar .lj-dashboard-table-search,
  .lj-dashboard-table-toolbar .lj-dashboard-table-filter {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   LIVE AUCTION FLOATING BUTTON
   Circular • Premium • Always Above Components
========================================================= */

.lj-live-auction-fab {
  position: fixed;
  left: 18px;
  bottom: 50%;
  z-index: 999999;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  text-decoration: none;
  border-radius: 50%;
  isolation: isolate;
}

/* =========================================================
   MAIN ROUND BUTTON
========================================================= */

.lj-live-auction-fab-inner {
  position: relative;
  z-index: 5;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(7, 104, 207, .28), 0 4px 10px rgba(1, 52, 130, .16);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  animation: ljLiveAuctionFloat 3s ease-in-out infinite;
}

/* =========================================================
   GAVEL
========================================================= */

.lj-live-auction-fab-inner>i {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  font-size: 19px;
  transition: transform var(--transition-fast);
}

/* =========================================================
   LIVE INDICATOR
========================================================= */

.lj-live-auction-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 8px;
  height: 8px;
  background: #FFFFFF;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .75);
  animation: ljLiveAuctionDotPulse 1.5s ease-out infinite;
}

@keyframes ljLiveAuctionDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .75);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* =========================================================
   RIPPLE WAVES
========================================================= */

.lj-live-auction-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(7, 104, 207, .38);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  opacity: 0;
  animation: ljLiveAuctionRipple 2.4s ease-out infinite;
}

.lj-live-auction-ripple.ripple-two {
  animation-delay: .8s;
}

.lj-live-auction-ripple.ripple-three {
  animation-delay: 1.6s;
}

@keyframes ljLiveAuctionRipple {
  0% {
    opacity: .75;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.75);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.75);
  }
}

/* =========================================================
   FLOATING MOTION
========================================================= */

@keyframes ljLiveAuctionFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* =========================================================
   HOVER
========================================================= */

.lj-live-auction-fab:hover .lj-live-auction-fab-inner {
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-tertiary));
  transform: translateY(-3px) scale(1.07);
  box-shadow: 0 16px 36px rgba(7, 104, 207, .34), 0 5px 14px rgba(1, 52, 130, .18);
}

.lj-live-auction-fab:hover .lj-live-auction-fab-inner>i {
  transform: rotate(-12deg) scale(1.10);
}

/* =========================================================
   ACTIVE CLICK
========================================================= */

.lj-live-auction-fab:active .lj-live-auction-fab-inner {
  transform: scale(.94);
}

/* =========================================================
   KEEP ABOVE MODALS / NAV / COMPONENTS
========================================================= */

.lj-live-auction-fab {
  pointer-events: auto;
  /*
     * Intentionally very high because this button should remain
     * above dashboard cards, headers, bottom navs and dropdowns.
     */
  z-index: 2147483000;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-live-auction-fab {
    left: 12px;
    bottom: calc( 20% + env(safe-area-inset-bottom));
    width: 50px;
    height: 50px;
  }
  .lj-live-auction-fab-inner,
  .lj-live-auction-ripple {
    width: 50px;
    height: 50px;
  }
  .lj-live-auction-fab-inner>i {
    font-size: 17px;
  }
  .lj-live-auction-dot {
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px) {
  .lj-live-auction-fab {
    left: 10px;
    width: 46px;
    height: 46px;
  }
  .lj-live-auction-fab-inner,
  .lj-live-auction-ripple {
    width: 46px;
    height: 46px;
  }
  .lj-live-auction-fab-inner>i {
    font-size: 16px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-live-auction-fab-inner,
  .lj-live-auction-ripple,
  .lj-live-auction-dot {
    animation: none !important;
  }
}

/* =========================================================
   LINJUST 404 PAGE
   Premium • Elegant • Warm • Responsive
========================================================= */

.lj-error-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: radial-gradient( circle at 20% 30%, rgba(31, 158, 252, .12), transparent 34%), radial-gradient( circle at 85% 65%, rgba(7, 104, 207, .08), transparent 30%), var(--color-off-white);
  font-family: var(--font-body);
}

/* =========================================================
   SECTION
========================================================= */

.lj-error-section {
  position: relative;
  min-height: calc( 100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 20px;
  overflow: hidden;
}

/* =========================================================
   CONTAINER
========================================================= */

.lj-error-container {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 70px;
}

/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.lj-error-bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .14;
  filter: blur(2px);
}

.lj-error-bg-shape-one {
  width: 320px;
  height: 320px;
  top: -110px;
  left: -100px;
  background: linear-gradient( 135deg, var(--color-secondary), transparent);
  animation: ljErrorFloatOne 7s ease-in-out infinite;
}

.lj-error-bg-shape-two {
  width: 420px;
  height: 420px;
  right: -170px;
  bottom: -170px;
  background: linear-gradient( 135deg, var(--color-primary), transparent);
  animation: ljErrorFloatTwo 9s ease-in-out infinite;
}

@keyframes ljErrorFloatOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d( 20px, 22px, 0);
  }
}

@keyframes ljErrorFloatTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d( -20px, -16px, 0);
  }
}

/* =========================================================
   VISUAL
========================================================= */

.lj-error-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lj-error-number-wrap {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1 / .82;
  display: grid;
  place-items: center;
}

/* =========================================================
   LARGE 404
========================================================= */

.lj-error-number {
  position: relative;
  z-index: 3;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp( 118px, 17vw, 220px);
  font-weight: var(--weight-bold);
  line-height: .78;
  letter-spacing: -.07em;
  text-shadow: 0 16px 35px rgba(7, 104, 207, .12);
  animation: ljErrorNumberFloat 4.5s ease-in-out infinite;
}

@keyframes ljErrorNumberFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* =========================================================
   SHADOW NUMBER
========================================================= */

.lj-error-number-shadow {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(1.04);
  color: transparent;
  -webkit-text-stroke: 1px rgba(1, 56, 131, .10);
  font-family: var(--font-heading);
  font-size: clamp( 128px, 18vw, 235px);
  font-weight: var(--weight-bold);
  line-height: .78;
  letter-spacing: -.07em;
  z-index: 1;
}

/* =========================================================
   ORBIT ICON
========================================================= */

.lj-error-orbit {
  position: absolute;
  z-index: 4;
  width: 84px;
  height: 84px;
  right: 8%;
  top: 12%;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 5px solid var(--color-off-white);
  border-radius: 50%;
  box-shadow: 0 16px 35px rgba(1, 52, 130, .15);
  animation: ljErrorOrbitFloat 3.5s ease-in-out infinite;
}

.lj-error-orbit i {
  position: relative;
  z-index: 2;
  font-size: 27px;
  animation: ljErrorCompass 5s linear infinite;
}

.lj-error-orbit span {
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(7, 104, 207, .30);
  border-radius: 50%;
  animation: ljErrorRipple 2.3s ease-out infinite;
}

@keyframes ljErrorOrbitFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes ljErrorCompass {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ljErrorRipple {
  0% {
    opacity: .8;
    transform: scale(.75);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

/* =========================================================
   CONTENT
========================================================= */

.lj-error-content {
  position: relative;
  max-width: 650px;
}

/* =========================================================
   KICKER
========================================================= */

.lj-error-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-error-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--color-secondary);
}

.lj-error-kicker i {
  color: var(--color-secondary-dark);
}

/* =========================================================
   HEADING
========================================================= */

.lj-error-content h2 {
  margin: 0 0 18px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp( 38px, 5vw, 62px);
  font-weight: var(--weight-bold);
  line-height: .98;
  letter-spacing: -.03em;
}

/* =========================================================
   PARAGRAPH
========================================================= */

.lj-error-content p {
  max-width: 600px;
  margin: 0 0 27px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.85;
}

/* =========================================================
   BUTTONS
========================================================= */

.lj-error-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.lj-error-btn {
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.lj-error-btn i {
  font-size: 14px;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.lj-error-btn-primary {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: var(--color-primary);
  box-shadow: 0 10px 25px rgba(7, 104, 207, .18);
}

.lj-error-btn-primary:hover {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-tertiary));
  transform: translateY(-2px);
  box-shadow: 0 14px 31px rgba(7, 104, 207, .22);
}

/* =========================================================
   LIGHT BUTTON
========================================================= */

.lj-error-btn-light {
  color: var(--color-title);
  background: var(--color-white);
  border-color: var(--color-border);
  box-shadow: 0 7px 18px rgba(1, 52, 130, .05);
}

.lj-error-btn-light:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* =========================================================
   HELPFUL LINKS
========================================================= */

.lj-error-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.lj-error-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.lj-error-links a i {
  color: var(--color-secondary-dark);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.lj-error-links a:hover {
  color: var(--color-primary);
  transform: translateX(3px);
}

.lj-error-links a:hover i {
  color: var(--color-primary);
  transform: scale(1.1);
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-error-section {
    min-height: auto;
    padding: 80px 22px;
  }
  .lj-error-container {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }
  .lj-error-visual {
    order: 1;
  }
  .lj-error-content {
    order: 2;
    margin: auto;
  }
  .lj-error-kicker,
  .lj-error-actions,
  .lj-error-links {
    justify-content: center;
  }
  .lj-error-content p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-error-section {
    padding: 65px 17px 80px;
  }
  .lj-error-container {
    gap: 25px;
  }
  .lj-error-number-wrap {
    max-width: 330px;
  }
  .lj-error-number {
    font-size: clamp( 110px, 34vw, 155px);
  }
  .lj-error-number-shadow {
    font-size: clamp( 120px, 37vw, 168px);
  }
  .lj-error-orbit {
    width: 65px;
    height: 65px;
    right: 6%;
    top: 8%;
    border-width: 4px;
  }
  .lj-error-orbit i {
    font-size: 21px;
  }
  .lj-error-content h2 {
    font-size: clamp( 34px, 10vw, 47px);
  }
  .lj-error-content p {
    font-size: 12px;
    line-height: 1.8;
  }
  .lj-error-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .lj-error-btn {
    width: 100%;
    padding: 0 13px;
  }
  .lj-error-links {
    gap: 12px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px) {
  .lj-error-section {
    padding: 55px 14px 72px;
  }
  .lj-error-content h2 {
    font-size: 35px;
  }
  .lj-error-actions {
    grid-template-columns: 1fr;
  }
  .lj-error-links {
    flex-direction: column;
    align-items: center;
    gap: 11px;
  }
  .lj-error-orbit {
    width: 58px;
    height: 58px;
  }
  .lj-error-orbit i {
    font-size: 18px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-error-page *,
  .lj-error-page *::before,
  .lj-error-page *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/*
|--------------------------------------------------------------------------
| STORE SAVE + MEDIA WATERMARK ADDITIONS
|--------------------------------------------------------------------------
| Add this file after your existing store stylesheet.
|--------------------------------------------------------------------------
*/

.lj-es-product-swiper .swiper-slide {
  position: relative;
}

.lj-es-media-watermark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  max-width: calc(100% - 24px);
  padding: 5px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .94);
  background: rgba(1, 52, 130, .46);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lj-es-product-save.is-saving {
  cursor: wait;
  opacity: .72;
  pointer-events: none;
}

.lj-es-product-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

@media (max-width: 575.98px) {
  .lj-es-media-watermark {
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 7px;
    font-size: 9px;
  }
}

/* =========================================================
   PROPERTY CARD BUSINESS LOGO
========================================================= */

.lj-property-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.lj-property-agent-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
}

.lj-property-agent-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lj-property-agent-logo-empty {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
}

.lj-property-agent>div {
  min-width: 0;
}

.lj-property-agent small {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.2;
}

.lj-property-agent>div>span {
  display: block;
  max-width: 180px;
  overflow: hidden;
  color: var(--color-title);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.lj-property-agent:hover>div>span {
  color: var(--color-primary);
}

@media(max-width:575.98px) {
  .lj-property-agent-logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .lj-property-agent>div>span {
    max-width: 130px;
  }
}

.lj-job-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.lj-job-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
  padding: 16px;
  /* background: var(--color-off-white, #F6FBFD);*/
  /*border: 1px solid var(--color-border, #6F8DA8);*/
  /*border-radius: 14px;*/
  transition: var(--transition-fast, .25s ease)
}

.lj-job-feature-item:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 104, 207, .25);
  box-shadow: 0 10px 25px rgba(1, 52, 130, .06)
}

.lj-job-feature-item>i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
  font-size: 19px
}

.lj-job-feature-item>span {
  min-width: 0
}

.lj-job-feature-item small {
  display: block;
  margin-bottom: 4px;
  color: var(--color-muted, #355A7D);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .45px
}

.lj-job-feature-item strong {
  display: block;
  color: var(--color-title, #013482);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere
}

.lj-job-heading-logo span,
.lj-job-recruiter-logo span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-primary, #0768CF), var(--color-primary-dark, #013883));
  color: #FFFFFF;
  font-weight: 800
}

.lj-job-main-apply-btn:disabled,
.lj-job-submit-application:disabled {
  opacity: .62;
  cursor: not-allowed;
  transform: none !important
}

.lj-job-application-message,
.lj-job-review-message {
  display: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55
}

.lj-job-application-message:not(:empty),
.lj-job-review-message:not(:empty) {
  display: block
}

.lj-job-application-message.is-error,
.lj-job-review-message.is-error {
  background: #D5EAF8;
  border: 1px solid #4AB3FC;
  color: #013883
}

.lj-job-application-message.is-success,
.lj-job-review-message.is-success {
  background: #F6FBFD;
  border: 1px solid #4AB3FC;
  color: #0768CF
}

.lj-job-feedback-avatar-fallback {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #0768CF), var(--color-primary-dark, #013883));
  color: #FFFFFF;
  font-weight: 800
}

.lj-job-feedback-item>img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border, #6F8DA8)
}

a.lj-job-quick-action {
  text-decoration: none
}

@media(max-width:767.98px) {
  .lj-job-feature-grid {
    grid-template-columns: 1fr
  }
  .lj-job-feature-item {
    padding: 14px
  }
}

/*
|--------------------------------------------------------------------------
| PRODUCT DETAILS — SMALL PROJECT OVERRIDES
|--------------------------------------------------------------------------
*/

.lj-pd-price-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.lj-pd-negotiable-text {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-primary-dark, #013883);
}

.lj-pd-save.is-saved {
  background: #FFFFFF !important;
  color: var(--color-primary, #0768CF) !important;
  border-color: var(--color-primary, #0768CF) !important;
}

.lj-pd-save.is-saved i {
  color: var(--color-primary, #0768CF) !important;
}

.lj-pd-offer-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 10px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-text, #082E5C);
  font-size: 12px;
  line-height: 1.55;
}

.lj-pd-offer-note i {
  margin-top: 2px;
  color: var(--color-primary, #0768CF);
}

.lj-pd-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none
}

.lj-pd-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background: var(--color-off-white, #F6FBFD);
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 12px
}

.lj-pd-features li>i {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF)
}

.lj-pd-features li span {
  min-width: 0
}

.lj-pd-features li small {
  display: block;
  margin-bottom: 3px;
  color: var(--color-muted, #355A7D);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .45px
}

.lj-pd-features li strong {
  display: block;
  color: var(--color-title, #013482);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere
}

.lj-pd-avatar-fallback,
.lj-pd-comment-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #0768CF), var(--color-primary-dark, #013883));
  color: #FFFFFF;
  font-weight: 800
}

.lj-pd-avatar-fallback {
  width: 100%;
  height: 100%
}

.lj-pd-comment-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px
}

.lj-pd-comments article>img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  object-fit: cover
}

.lj-pd-save.is-saved {
  color: var(--color-primary, #0768CF)
}

.lj-pd-features+* {
  margin-top: 0
}

@media(max-width:767.98px) {
  .lj-pd-features {
    grid-template-columns: 1fr
  }
}

.lj-pd-price-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* Main product price */

.lj-pd-main-price {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-primary, #0768CF);
  letter-spacing: -0.7px;
}

/* Slightly negotiable */

.lj-pd-negotiable-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-success, #0768CF);
}

.lj-pd-negotiable-text i {
  font-size: 11px;
  color: var(--color-success, #0768CF);
}

/* Mobile */

@media (max-width: 575.98px) {
  .lj-pd-main-price {
    font-size: 29px;
  }
  .lj-pd-negotiable-text {
    font-size: 11px;
  }
}

/* ============================================================
   LINJUST PROFILE DASHBOARD - REVIEWS & OFFERS
============================================================ */

.lj-engagement-card {
  overflow: hidden;
}

.lj-engagement-heading-copy span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary, #0768CF);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lj-engagement-heading-copy h2 {
  margin: 0;
}

.lj-engagement-product-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
}

.lj-engagement-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 1px solid rgba(7, 104, 207, .10);
  border-radius: 12px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
}

.lj-engagement-product-icon i {
  font-size: 16px;
}

.lj-engagement-product-cell strong,
.lj-engagement-person-cell strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  color: var(--color-title, #013482);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-engagement-product-cell small,
.lj-engagement-person-cell small,
.lj-engagement-date small {
  display: block;
  margin-top: 2px;
  color: var(--color-muted, #355A7D);
  font-size: 11px;
}

.lj-engagement-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  padding: 7px 9px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--color-text, #082E5C);
  font-size: 11px;
  font-weight: 700;
}

.lj-engagement-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: 9px;
  background: rgba(7, 104, 207, .05);
  color: var(--color-primary, #0768CF);
  transition: var(--transition-fast, all .2s ease);
}

.lj-engagement-view:hover,
.lj-engagement-view:focus {
  border-color: var(--color-primary, #0768CF);
  background: var(--color-primary, #0768CF);
  color: #FFFFFF;
}

.lj-engagement-empty {
  padding: 60px 20px !important;
  text-align: center !important;
}

.lj-engagement-empty div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--color-muted, #355A7D);
}

.lj-engagement-empty i {
  margin-bottom: 4px;
  color: var(--color-primary, #0768CF);
  font-size: 34px;
}

.lj-engagement-empty strong {
  color: var(--color-title, #013482);
  font-size: 14px;
}

.lj-engagement-empty p {
  margin: 0;
  font-size: 12px;
}

/* ============================================================
   MODAL
============================================================ */

.lj-engagement-modal-shell {
  position: fixed;
  z-index: 1080;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.lj-engagement-modal-shell.is-open {
  display: flex;
}

.lj-engagement-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(1, 52, 130, .58);
  cursor: default;
}

.lj-engagement-modal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(88vh, 860px);
  overflow: hidden;
  border: 2px solid var(--color-primary, #0768CF);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 30px 90px rgba(1, 52, 130, .28);
}

.lj-engagement-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  border-bottom: 1px solid var(--color-border, #6F8DA8);
  background: #FFFFFF;
}

.lj-engagement-modal-header span {
  display: block;
  margin-bottom: 3px;
  color: var(--color-primary, #0768CF);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lj-engagement-modal-header h3 {
  margin: 0;
  color: var(--color-title, #013482);
  font-size: 21px;
  font-weight: 800;
}

.lj-engagement-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-title, #013482);
}

.lj-engagement-modal-close:hover {
  border-color: var(--color-primary, #0768CF);
  color: var(--color-primary, #0768CF);
}

.lj-engagement-modal-body {
  overflow-y: auto;
  padding: 21px;
  background: var(--color-off-white, #F6FBFD);
}

.lj-engagement-modal-section {
  padding: 17px;
  margin-bottom: 15px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 13px;
  background: #FFFFFF;
}

.lj-engagement-modal-section:last-child {
  margin-bottom: 0;
}

.lj-engagement-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 11px;
  margin-bottom: 14px;
  border-bottom: 1px solid #D5EAF8;
  color: var(--color-primary, #0768CF);
  font-size: 13px;
  font-weight: 800;
}

.lj-engagement-section-title i {
  font-size: 17px;
}

.lj-engagement-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 20px;
}

.lj-engagement-info span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-muted, #355A7D);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lj-engagement-info strong,
.lj-engagement-info p {
  margin: 0;
  color: var(--color-title, #013482);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.lj-engagement-info.is-full {
  grid-column: 1 / -1;
}

.lj-engagement-info.is-full p {
  color: var(--color-text, #082E5C);
  font-weight: 450;
  line-height: 1.75;
  white-space: pre-line;
}

.lj-engagement-product-link {
  color: var(--color-primary, #0768CF);
  font-weight: 750;
  text-decoration: none;
}

.lj-engagement-product-link:hover {
  color: var(--color-primary-dark, #013883);
  text-decoration: underline;
}

.lj-engagement-list {
  display: grid;
  gap: 12px;
}

.lj-engagement-person-card {
  padding: 14px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 12px;
  background: #FFFFFF;
}

.lj-engagement-person-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.lj-engagement-person {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.lj-engagement-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 50%;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
  font-size: 16px;
  font-weight: 800;
}

.lj-engagement-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lj-engagement-person-copy {
  min-width: 0;
}

.lj-engagement-person-copy strong {
  display: block;
  overflow: hidden;
  color: var(--color-title, #013482);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-engagement-person-copy span {
  display: block;
  margin-top: 2px;
  color: var(--color-muted, #355A7D);
  font-size: 10px;
}

.lj-engagement-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
  margin-top: 12px;
}

.lj-engagement-contact-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--color-text, #082E5C);
  font-size: 11px;
}

.lj-engagement-contact-item i {
  color: var(--color-primary, #0768CF);
}

.lj-engagement-contact-item span {
  overflow-wrap: anywhere;
}

.lj-engagement-reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  padding: 8px 11px;
  border: 1px solid var(--color-primary, #0768CF);
  border-radius: 9px;
  background: var(--color-primary, #0768CF);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.lj-engagement-reply:hover {
  background: var(--color-primary-dark, #013883);
  color: #FFFFFF;
}

.lj-engagement-comment,
.lj-engagement-offer-history {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #D5EAF8;
}

.lj-engagement-comment p {
  margin: 0;
  color: var(--color-text, #082E5C);
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-line;
}

.lj-engagement-comment small {
  display: block;
  margin-top: 7px;
  color: var(--color-muted, #355A7D);
  font-size: 10px;
}

.lj-engagement-offer-history {
  display: grid;
  gap: 8px;
}

.lj-engagement-offer-item {
  display: grid;
  grid-template-columns: minmax(120px, .65fr) minmax(110px, .45fr) 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--color-off-white, #F6FBFD);
}

.lj-engagement-offer-item strong {
  color: var(--color-primary, #0768CF);
  font-size: 13px;
  font-weight: 800;
}

.lj-engagement-offer-status {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
  font-size: 9px;
  font-weight: 800;
  text-transform: capitalize;
}

.lj-engagement-offer-item small {
  color: var(--color-muted, #355A7D);
  font-size: 10px;
  text-align: right;
}

.lj-engagement-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 13px 20px;
  border-top: 1px solid var(--color-border, #6F8DA8);
  background: #FFFFFF;
}

.lj-engagement-modal-footer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 9px;
  background: #FFFFFF;
  color: var(--color-title, #013482);
  font-size: 11px;
  font-weight: 750;
}

body.lj-engagement-modal-open {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .lj-engagement-product-grid,
  .lj-engagement-contact-grid {
    grid-template-columns: 1fr;
  }
  .lj-engagement-modal-shell {
    padding: 10px;
  }
  .lj-engagement-modal {
    max-height: 94vh;
    border-radius: 14px;
  }
  .lj-engagement-modal-header,
  .lj-engagement-modal-body {
    padding: 15px;
  }
  .lj-engagement-person-head {
    align-items: stretch;
    flex-direction: column;
  }
  .lj-engagement-reply {
    justify-content: center;
    width: 100%;
  }
  .lj-engagement-offer-item {
    grid-template-columns: 1fr;
  }
  .lj-engagement-offer-item small {
    text-align: left;
  }
}

/* =========================================================
   LINJUST SELLER STOREFRONT PAGE
   Uses existing frontend CSS variables and visual language.
========================================================= */

.lj-seller-page {
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-off-white);
  font-family: var(--font-body);
}

.lj-seller-page *,
.lj-seller-page *::before,
.lj-seller-page *::after {
  box-sizing: border-box
}

/* HERO */

.lj-seller-hero {
  position: relative;
  min-height: 360px;
  height: min(450px, 72vh);
  overflow: visible;
  isolation: isolate;
  background: var(--color-dark);
}

.lj-seller-hero-media,
.lj-seller-hero-overlay {
  position: absolute;
  inset: 0;
}

.lj-seller-hero-media {
  z-index: -3;
  background: linear-gradient(135deg, #013482, #013482)
}

.lj-seller-hero-media img,
.lj-seller-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lj-seller-hero-overlay {
  z-index: -2;
  background: var(--lj-page-hero-overlay, rgba(1, 52, 130, .62));
  opacity: var(--lj-page-hero-opacity, .7);
}

.lj-seller-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  z-index: -1;
  content: "";
  background: linear-gradient(to top, rgba(1, 52, 130, .58), transparent);
  pointer-events: none;
}

.lj-seller-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 56px 20px 95px;
  text-align: center;
  color: #FFFFFF;
}

.lj-seller-hero-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  margin-bottom: 10px;
  color: var(--color-dark);
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-seller-hero-content h1 {
  max-width: 900px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(39px, 6vw, 72px);
  font-weight: var(--weight-semibold);
  line-height: .98;
  letter-spacing: -.02em;
  text-shadow: 0 4px 28px rgba(1, 52, 130, .28);
}

.lj-seller-hero-content p {
  max-width: 700px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(11px, 1.3vw, 14px);
  line-height: 1.75;
}

.lj-seller-verified-badge {
  position: absolute;
  z-index: 5;
  top: 20px;
  right: max(20px, calc((100vw - 1320px)/2));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  color: var(--color-dark);
  background: rgba(31, 158, 252, .96);
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-small);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-seller-verified-badge i {
  font-size: 13px
}

.lj-seller-identity-wrap {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: -42px;
  left: 0;
  pointer-events: none;
}

.lj-seller-identity {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  pointer-events: auto
}

.lj-seller-avatar {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #FFFFFF;
  background: var(--color-primary);
  border: 5px solid #FFFFFF;
  border-radius: 5%;
  box-shadow: 0 16px 38px rgba(1, 52, 130, .22);
  font-family: var(--font-heading);
  font-size: 55px;
  font-weight: var(--weight-bold);
}

.lj-seller-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-seller-identity-copy {
  padding-bottom: 12px;
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(1, 52, 130, .5)
}

.lj-seller-identity-copy strong {
  display: block;
  max-width: 520px;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1
}

.lj-seller-identity-copy small {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  color: rgba(255, 255, 255, .76)
}

/* TAB NAV */

.lj-seller-tab-nav-section {
  /** position:relative **/
  z-index: 4;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(1, 52, 130, .04);
}

.lj-seller-tab-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 68px;
  overflow-x: auto;
  scrollbar-width: none
}

.lj-seller-tab-nav::-webkit-scrollbar {
  display: none
}

.lj-seller-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 60px;
  padding: 0 23px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.lj-seller-tab i {
  font-size: 14px
}

.lj-seller-tab::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: transparent
}

.lj-seller-tab:hover,
.lj-seller-tab.is-active {
  color: var(--color-primary)
}

.lj-seller-tab.is-active::after {
  background: var(--color-primary)
}

/* CONTENT */

.lj-seller-content-section {
  padding: 52px 0 70px
}

.lj-seller-content-card {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-seller-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
  background: #FFFFFF
}

.lj-seller-content-header span {
  display: block;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .06em
}

.lj-seller-content-header h2 {
  margin: 2px 0 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--weight-semibold)
}

.lj-seller-listing-total {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 7px 10px !important;
  color: var(--color-text) !important;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill)
}

.lj-seller-listing-total strong {
  color: var(--color-primary);
  font-size: 12px
}

.lj-seller-tab-panel {
  padding: 22px
}

.lj-seller-tab-panel[hidden] {
  display: none !important
}

/* TOOLBAR */

.lj-seller-listing-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 12px;
  margin-bottom: 22px
}

.lj-seller-search,
.lj-seller-category-filter {
  display: flex;
  align-items: center;
  min-height: 48px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast)
}

.lj-seller-search:focus-within,
.lj-seller-category-filter:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(7, 104, 207, .06)
}

.lj-seller-search>i,
.lj-seller-category-filter>i:first-child {
  margin-left: 14px;
  color: var(--color-primary);
  font-size: 14px
}

.lj-seller-search input,
.lj-seller-category-filter select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px
}

.lj-seller-category-filter select {
  appearance: none;
  cursor: pointer
}

.lj-seller-category-filter>i:last-child {
  margin-right: 13px;
  color: var(--color-muted);
  font-size: 10px;
  pointer-events: none
}

/* LISTING GRID */

.lj-seller-listing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px
}

.lj-seller-listing-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 25px rgba(1, 52, 130, .05);
  transition: var(--transition-normal)
}

.lj-seller-listing-item:hover {
  transform: translateY(-3px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 18px 38px rgba(1, 52, 130, .09)
}

.lj-seller-card-media {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--color-surface)
}

.lj-seller-media-swiper,
.lj-seller-media-swiper .swiper-wrapper,
.lj-seller-media-swiper .swiper-slide {
  width: 100%;
  height: 100%
}

.lj-seller-media-swiper img,
.lj-seller-media-swiper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.lj-seller-media-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: #FFFFFF;
  opacity: .55
}

.lj-seller-media-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--color-primary)
}

.lj-seller-media-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--color-muted);
  font-size: 38px
}

.lj-seller-save {
  position: absolute;
  z-index: 8;
  top: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-primary);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(1, 52, 130, .13);
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-seller-save:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary)
}

.lj-seller-save.is-saved {
  color: var(--color-primary);
  background: #FFFFFF;
  border-color: var(--color-primary)
}

.lj-seller-product-body {
  padding: 15px
}

.lj-seller-product-category {
  display: block;
  margin-bottom: 6px;
  color: var(--color-primary);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em
}

.lj-seller-product-body h3 {
  min-height: 43px;
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.06
}

.lj-seller-product-body h3 a:hover {
  color: var(--color-primary)
}

.lj-seller-product-price {
  display: block;
  margin-top: 11px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: var(--weight-bold)
}

.lj-seller-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-size: 8px
}

.lj-seller-product-footer span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-muted)
}

.lj-seller-product-footer span i {
  color: var(--color-primary)
}

.lj-seller-product-footer a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary);
  font-weight: var(--weight-bold)
}

/* PROPERTY - complements existing property classes */

.lj-seller-property-card .lj-property-card-body {
  min-height: 126px
}

.lj-seller-property-card .lj-property-price small {
  font-size: 8px;
  color: var(--color-text);
  font-weight: var(--weight-semibold)
}

.lj-seller-property-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px
}

.lj-seller-property-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 8px
}

.lj-seller-property-stats i {
  color: var(--color-primary)
}

.lj-seller-mini-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--color-title);
  font-size: 8px;
  font-weight: var(--weight-semibold)
}

.lj-seller-mini-brand i {
  color: var(--color-primary)
}

/* EVENTS */

.lj-seller-event-card .lj-event-card-body {
  min-height: 150px
}

.lj-seller-event-card .lj-event-price-title h3 {
  font-size: 20px;
  min-height: 43px
}

.lj-seller-event-card .lj-event-card-meta {
  margin-top: 12px
}

.lj-seller-event-card .lj-event-card-footer {
  min-height: 52px
}

/* JOBS - same grid personality as jobs page, adapted to 4 columns */

.lj-seller-job-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 22px 16px 15px;
  text-align: center;
  overflow: visible
}

.lj-seller-job-card .lj-job-card-status {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 8px;
  color: #FFFFFF;
  background: var(--color-success);
  border-radius: var(--radius-pill);
  font-size: 7px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-seller-job-card .lj-job-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0
}

.lj-seller-job-card .lj-job-logo {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: 22px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 50%
}

.lj-seller-job-card .lj-job-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-seller-job-card .lj-job-logo i {
  color: var(--color-primary);
  font-size: 24px
}

.lj-seller-job-card .lj-job-card-content {
  width: 100%;
  margin-top: 14px
}

.lj-seller-job-card .lj-job-card-content h3 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.04
}

.lj-seller-job-card .lj-job-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 11px
}

.lj-seller-job-card .lj-job-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  font-size: 7px
}

.lj-seller-job-card .lj-job-meta i {
  color: var(--color-primary)
}

.lj-seller-job-card .lj-job-description {
  display: -webkit-box;
  overflow: hidden;
  margin: 12px 0 0;
  color: var(--color-text);
  font-size: 9px;
  line-height: 1.65;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}

.lj-seller-job-card .lj-job-card-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--color-border)
}

.lj-seller-job-card .lj-seller-save {
  position: static;
  box-shadow: none
}

.lj-seller-job-card .lj-job-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 10px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 7px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

/* EMPTY + PAGINATION */

.lj-seller-empty {
  padding: 55px 20px;
  text-align: center;
  border: 1px dashed var(--color-border);
  background: var(--color-off-white)
}

.lj-seller-empty i {
  color: var(--color-primary);
  font-size: 44px
}

.lj-seller-empty h3 {
  margin: 12px 0 5px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 28px
}

.lj-seller-empty p {
  margin: 0;
  font-size: 11px
}

.lj-seller-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 28px
}

.lj-seller-pagination:empty {
  display: none
}

.lj-seller-page-btn {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  color: var(--color-title);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 10px;
  font-weight: var(--weight-semibold)
}

.lj-seller-page-btn:hover,
.lj-seller-page-btn.is-active {
  color: #FFFFFF;
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-seller-page-btn:disabled {
  opacity: .4;
  pointer-events: none
}

/* ABOUT */

.lj-seller-about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 18px
}

.lj-seller-about-copy,
.lj-seller-social-card,
.lj-seller-contact-intro {
  padding: 25px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm)
}

.lj-seller-panel-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase
}

.lj-seller-about-layout h3,
.lj-seller-contact-layout h3 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 31px;
  line-height: 1.05
}

.lj-seller-about-copy p,
.lj-seller-contact-intro>p {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.9
}

.lj-seller-social-links {
  display: grid;
  gap: 8px;
  margin-top: 17px
}

.lj-seller-social-links a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 11px;
  color: var(--color-title);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  transition: var(--transition-fast)
}

.lj-seller-social-links a>i:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 50%
}

.lj-seller-social-links a>i:last-child {
  color: var(--color-muted);
  font-size: 8px
}

.lj-seller-social-links a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateX(2px)
}

.lj-seller-muted {
  margin: 12px 0 0;
  color: var(--color-muted);
  font-size: 11px
}

/* CONTACT */

.lj-seller-contact-layout {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: 18px
}

.lj-seller-contact-intro {
  background: linear-gradient(145deg, var(--color-off-white), #FFFFFF)
}

.lj-seller-contact-trust {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  font-size: 9px;
  line-height: 1.6
}

.lj-seller-contact-trust i {
  color: var(--color-success);
  font-size: 15px
}

.lj-seller-contact-form {
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm)
}

.lj-seller-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.lj-seller-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-bold)
}

.lj-seller-form-grid label.is-full {
  grid-column: 1/-1
}

.lj-seller-form-grid label>div {
  display: flex;
  align-items: center;
  min-height: 49px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  transition: var(--transition-fast)
}

.lj-seller-form-grid label>div:focus-within {
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary)
}

.lj-seller-form-grid label>div.textarea {
  align-items: flex-start;
  padding-top: 13px
}

.lj-seller-form-grid label i {
  margin-right: 9px;
  color: var(--color-primary)
}

.lj-seller-form-grid input,
.lj-seller-form-grid textarea {
  width: 100%;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px
}

.lj-seller-form-grid textarea {
  min-height: 125px;
  resize: vertical;
  line-height: 1.7
}

.lj-seller-contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 18px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  transition: var(--transition-normal)
}

.lj-seller-contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 24px rgba(7, 104, 207, .16)
}

.lj-seller-contact-submit:disabled {
  opacity: .65;
  pointer-events: none
}

.lj-seller-honeypot {
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important
}

/* LOCATION */

.lj-seller-location-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px
}

.lj-seller-location-cards article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 95px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 22px rgba(1, 52, 130, .04)
}

.lj-seller-location-cards article>i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 50%;
  font-size: 17px
}

.lj-seller-location-cards span {
  display: block;
  color: var(--color-muted);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-seller-location-cards strong {
  display: block;
  margin-top: 4px;
  color: var(--color-title);
  font-size: 10px;
  line-height: 1.55;
  overflow-wrap: anywhere
}

.lj-seller-map-wrap {
  position: relative;
  width: 100%;
  height: 430px;
  margin-top: 16px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm)
}

.lj-seller-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

.lj-seller-map-empty {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: var(--color-muted);
  text-align: center
}

.lj-seller-map-empty i {
  color: var(--color-primary);
  font-size: 44px
}

.lj-seller-map-empty p {
  margin: 0;
  font-size: 11px
}

/* WHATSAPP */

.lj-seller-whatsapp {
  position: fixed;
  z-index: 1350;
  right: 22px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #FFFFFF;
  background: #1F9EFC;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(31, 158, 252, .3)
}

.lj-seller-whatsapp i {
  position: relative;
  z-index: 2;
  font-size: 26px
}

.lj-seller-whatsapp-wave {
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(31, 158, 252, .7);
  border-radius: 50%;
  animation: ljSellerWhatsappWave 1.8s ease-out infinite
}

@keyframes ljSellerWhatsappWave {
  0% {
    opacity: .8;
    transform: scale(.82)
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.45)
  }
}

/* COPYRIGHT */

.lj-seller-copyright-section {
  padding: 15px 0;
  background: #FFFFFF;
  border-top: 1px solid var(--color-border);
  text-align: center
}

.lj-seller-copyright-section p {
  margin: 0;
  color: var(--color-muted);
  font-size: 10px
}

@media(max-width:1199.98px) {
  .lj-seller-listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:991.98px) {
  .lj-seller-hero {
    height: 410px
  }
  .lj-seller-identity-wrap {
    bottom: -34px
  }
  .lj-seller-avatar {
    width: 118px;
    height: 118px;
    border-width: 4px;
    font-size: 42px
  }
  .lj-seller-identity-copy strong {
    font-size: 28px
  }
  .lj-seller-tab-nav {
    justify-content: flex-start;
    padding-left: 135px
  }
  .lj-seller-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .lj-seller-about-layout,
  .lj-seller-contact-layout {
    grid-template-columns: 1fr
  }
}

@media(max-width:767.98px) {
  .lj-seller-hero {
    min-height: 350px;
    height: 380px
  }
  .lj-seller-hero-content {
    padding: 48px 16px 90px
  }
  .lj-seller-verified-badge {
    top: 12px;
    right: 12px;
    padding: 7px 9px;
    font-size: 7px
  }
  .lj-seller-identity-wrap {
    bottom: -29px;
    padding: 0 14px
  }
  .lj-seller-avatar {
    width: 94px;
    height: 94px;
    border-width: 4px;
    font-size: 34px
  }
  .lj-seller-identity {
    gap: 10px
  }
  .lj-seller-identity-copy {
    padding-bottom: 7px
  }
  .lj-seller-identity-copy strong {
    max-width: 230px;
    font-size: 21px
  }
  .lj-seller-identity-copy small {
    font-size: 8px
  }
  .lj-seller-tab-nav-section {
    padding-top: 0
  }
  .lj-seller-tab-nav {
    justify-content: flex-start;
    min-height: 58px;
    padding-left: 104px
  }
  .lj-seller-tab {
    min-height: 58px;
    padding: 0 13px;
    font-size: 9px;
    gap: 5px
  }
  .lj-seller-content-section {
    padding: 35px 0 55px
  }
  .lj-seller-content-card {
    border-right: 0;
    border-left: 0;
    border-radius: 0
  }
  .lj-seller-content-header {
    padding: 14px 13px
  }
  .lj-seller-content-header h2 {
    font-size: 24px
  }
  .lj-seller-tab-panel {
    padding: 14px 10px
  }
  .lj-seller-listing-toolbar {
    grid-template-columns: 1fr;
    gap: 8px
  }
  .lj-seller-listing-grid {
    grid-template-columns: 1fr;
    gap: 13px
  }
  .lj-seller-card-media {
    height: 260px
  }
  .lj-seller-form-grid {
    grid-template-columns: 1fr
  }
  .lj-seller-form-grid label.is-full {
    grid-column: auto
  }
  .lj-seller-contact-form,
  .lj-seller-about-copy,
  .lj-seller-social-card,
  .lj-seller-contact-intro {
    padding: 17px
  }
  .lj-seller-location-cards {
    grid-template-columns: 1fr
  }
  .lj-seller-map-wrap {
    height: 340px
  }
  .lj-seller-whatsapp {
    right: 14px;
    bottom: calc(var(--mobile-bottom-height) + 15px);
    width: 50px;
    height: 50px
  }
  .lj-seller-whatsapp i {
    font-size: 23px
  }
}

@media(max-width:430px) {
  .lj-seller-hero-content h1 {
    font-size: 38px
  }
  .lj-seller-tab-nav {
    padding-left: 0;
    margin-top: 38px
  }
  .lj-seller-tab {
    flex: 1 0 auto;
    padding: 0 11px
  }
  .lj-seller-avatar {
    width: 82px;
    height: 82px
  }
  .lj-seller-identity-wrap {
    bottom: -35px
  }
  .lj-seller-identity-copy strong {
    max-width: 190px;
    font-size: 19px
  }
  .lj-seller-card-media {
    height: 235px
  }
  .lj-seller-listing-total {
    display: none !important
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-seller-page *,
  .lj-seller-page *::before,
  .lj-seller-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }
}

/* =========================================================
   PREMIUM V2 CARD OVERRIDES
========================================================= */

.lj-seller-page {
  --listing-border-color: var(--color-primary, #0768CF)
}

.lj-seller-hero {
  overflow: visible
}

.lj-seller-identity-wrap {
  z-index: 20;
  bottom: -58px
}

.lj-seller-tab-nav-section {
  z-index: 10;
  /**min-height: 84px**/
}

.lj-seller-tab-nav {
  min-height: 64px;
  padding-left: 165px;
  /**justify-content: flex-start**/
}

.lj-seller-listing-item {
  display: flex;
  min-height: 470px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--listing-border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(1, 52, 130, .06)
}

.lj-seller-listing-item:hover {
  border-color: var(--listing-border-color);
  box-shadow: 0 24px 55px rgba(1, 52, 130, .11)
}

.lj-seller-card-media {
  position: relative;
  height: 225px;
  flex: 0 0 225px
}

.lj-property-media-category {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  padding: 7px 9px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .72);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-property-media-feature {
  position: absolute;
  bottom: 12px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 9px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .74);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px)
}

.lj-property-media-feature.is-left {
  left: 12px
}

.lj-property-media-feature.is-right {
  right: 12px
}

.lj-property-media-feature i {
  color: var(--color-secondary);
  font-size: 11px
}

.lj-property-media-feature strong {
  font-size: 9px
}

.lj-property-media-feature small {
  font-size: 6px;
  font-weight: 700;
  text-transform: uppercase
}

.lj-premium-card-body {
  padding: 17px 16px 14px
}

.lj-premium-card-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary-dark);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-premium-card-price {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 800
}

.lj-premium-card-price small {
  color: var(--color-text);
  font-size: 8px;
  font-weight: 600
}

.lj-premium-card-body h3 {
  display: -webkit-box;
  min-height: 46px;
  margin: 0;
  overflow: hidden;
  color: var(--color-title);
  font: 700 22px/1.08 var(--font-heading);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

.lj-premium-card-body h3 a {
  color: inherit
}

.lj-premium-card-body h3 a:hover {
  color: var(--color-primary)
}

.lj-premium-card-location,
.lj-premium-job-location {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  color: var(--color-text);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.5
}

.lj-premium-card-location i,
.lj-premium-job-location i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 11px
}

.lj-premium-card-footer,
.lj-premium-job-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  margin-top: auto;
  padding: 9px 12px;
  background: linear-gradient(180deg, #FFFFFF, var(--color-surface));
  border-top: 1px solid var(--color-border)
}

.lj-premium-card-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0
}

.lj-premium-card-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  flex: 0 0 36px;
  color: #FFFFFF;
  background: var(--color-primary);
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(1, 52, 130, .1);
  font: 700 14px var(--font-heading)
}

.lj-premium-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-premium-card-brand>div:last-child {
  min-width: 0
}

.lj-premium-card-brand small {
  display: block;
  color: var(--color-muted);
  font-size: 6px;
  font-weight: 700;
  text-transform: uppercase
}

.lj-premium-card-brand strong {
  display: block;
  max-width: 125px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-title);
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lj-premium-footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 34px;
  padding: 0 11px;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-premium-event-footer {
  min-height: 64px;
  padding: 7px 10px
}

.lj-event-countdown {
  display: flex;
  align-items: center;
  gap: 3px
}

.lj-event-countdown>span {
  display: grid;
  min-width: 27px;
  text-align: center
}

.lj-event-countdown strong {
  color: var(--color-primary);
  font-size: 10px;
  line-height: 1
}

.lj-event-countdown small {
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 5px;
  font-weight: 700;
  text-transform: uppercase
}

.lj-event-countdown>b {
  margin-top: -9px;
  color: var(--color-secondary-dark);
  font-size: 8px
}

.lj-event-countdown.is-expired::before {
  content: 'Event started';
  color: var(--color-primary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-event-countdown.is-expired>* {
  display: none
}

.lj-seller-job-card {
  min-height: 470px;
  padding: 0;
  text-align: left;
  overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgba(31, 158, 252, .10), transparent 27%), linear-gradient(180deg, #FFFFFF, #FFFFFF)
}

.lj-premium-job-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 20px 5px
}

.lj-premium-job-logo {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  overflow: hidden;
  color: var(--color-primary);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(1, 52, 130, .08);
  font-size: 23px
}

.lj-premium-job-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-premium-job-top-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.lj-premium-job-status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-success);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-premium-job-status i {
  font-size: 6px
}

.lj-premium-job-top .lj-seller-save {
  position: static;
  width: 34px;
  height: 34px;
  box-shadow: none;
  border-color: var(--color-border)
}

.lj-premium-job-content {
  padding: 14px 20px 18px
}

.lj-premium-job-company {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-premium-job-content h3 {
  display: -webkit-box;
  min-height: 58px;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--color-title);
  font: 700 27px/1.05 var(--font-heading);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

.lj-premium-job-content h3 a {
  color: inherit
}

.lj-premium-job-content h3 a:hover {
  color: var(--color-primary)
}

.lj-premium-job-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border)
}

.lj-premium-job-features span {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 7px;
  color: var(--color-text)
}

.lj-premium-job-features i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-primary) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 14px
}

.lj-premium-job-features b {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--color-title);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.45;
  text-overflow: ellipsis
}

.lj-premium-job-description {
  display: -webkit-box;
  min-height: 48px;
  margin: 15px 0 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: 8px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3
}

.lj-premium-job-footer>span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-muted);
  font-size: 6px;
  font-weight: 700
}

.lj-premium-job-footer>span i {
  color: var(--color-secondary-dark)
}

.lj-premium-job-footer>a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

@media(max-width:767.98px) {
  .lj-seller-identity-wrap {
    bottom: -48px
  }
  .lj-seller-tab-nav {
    min-height: 78px;
    padding-left: 105px;
    justify-content: flex-start
  }
  .lj-seller-listing-grid {
    grid-template-columns: 1fr
  }
  .lj-seller-card-media {
    height: 255px;
    flex-basis: 255px
  }
  .lj-premium-card-body h3 {
    font-size: 24px
  }
  .lj-premium-job-content h3 {
    font-size: 30px
  }
}

@media(max-width:430px) {
  .lj-seller-identity-wrap {
    bottom: -43px
  }
  .lj-seller-tab-nav {
    padding-left: 94px
  }
  .lj-seller-card-media {
    height: 235px;
    flex-basis: 235px
  }
}

/* =========================================================
   LINJUST PREMIUM HOME HERO
========================================================= */

.lj-home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 450px;
  max-height: 450px;
  overflow: hidden;
  color: var(--color-white);
  background: radial-gradient( circle at 18% 30%, rgba(255, 255, 255, .15), transparent 27%), radial-gradient( circle at 85% 75%, rgba(74, 179, 252, .13), transparent 28%), linear-gradient( 135deg, #013482 0%, #013883 43%, #0768CF 76%, #0687F1 100%);
  isolation: isolate;
}

/* =========================================================
   SUBTLE BACKGROUND GRID
========================================================= */

.lj-home-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: linear-gradient( rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 82px 82px;
  pointer-events: none;
  opacity: .65;
  z-index: -2;
}

/* =========================================================
   BOTTOM SHADE
========================================================= */

.lj-home-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100px;
  content: "";
  background: linear-gradient( to top, rgba(1, 52, 130, .16), transparent);
  pointer-events: none;
  z-index: -1;
}

/* =========================================================
   MAIN HERO CONTAINER
========================================================= */

.lj-home-hero-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc( 100% - 40px);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  z-index: 5;
}

/* =========================================================
   HEADING AREA
========================================================= */

.lj-home-hero-heading-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 27px;
  text-align: center;
}

/* =========================================================
   EYEBROW
========================================================= */

.lj-home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .76);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: .05em;
}

.lj-home-hero-eyebrow i {
  color: var(--color-secondary);
  font-size: 16px;
}

/* =========================================================
   HERO TITLE
========================================================= */

.lj-home-hero-title {
  width: 100%;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  /*
     * Larger than the previous 64px maximum.
     */
  font-size: clamp( 54px, 5.5vw, 78px);
  font-weight: var(--weight-semibold);
  line-height: .96;
  letter-spacing: -.045em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 5px 30px rgba(1, 52, 130, .13);
}

/* =========================================================
   ANIMATED TITLE TEXT
========================================================= */

.lj-home-hero-title-accent {
  display: inline;
  margin-left: 8px;
  color: #4AB3FC;
  font-style: italic;
}

.lj-home-typewriter {
  color: #4AB3FC;
}

.lj-home-typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: .76em;
  margin-left: 5px;
  vertical-align: -.03em;
  background: #4AB3FC;
  border-radius: var(--radius-pill);
  animation: ljHeroCursorBlink .78s step-end infinite;
}

@keyframes ljHeroCursorBlink {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}

/* =========================================================
   SEARCH BAR
========================================================= */

.lj-home-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 1.45fr) minmax(180px, .85fr) minmax(185px, .9fr) auto;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  min-height: 76px;
  margin: 0 auto;
  padding: 8px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: var(--radius-pill);
  box-shadow: 0 24px 70px rgba(1, 52, 130, .24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: left;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.lj-home-search:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 30px 80px rgba(1, 52, 130, .29);
}

/* =========================================================
   SEARCH FIELDS
========================================================= */

.lj-home-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 8px 18px;
  border-right: 1px solid var(--color-border);
  text-align: left;
}

/* =========================================================
   FIELD ICON
========================================================= */

.lj-home-search-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .07);
  border-radius: var(--radius-round);
  font-size: 18px;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.lj-home-search-field:focus-within .lj-home-search-icon {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.06);
}

/* =========================================================
   INPUT WRAPPER
========================================================= */

.lj-home-search-input-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

/* =========================================================
   LABEL
========================================================= */

.lj-home-search-label {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* =========================================================
   INPUTS / SELECT
========================================================= */

.lj-home-search input,
.lj-home-search select {
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
}

.lj-home-search input::placeholder {
  color: #355A7D;
  opacity: 1;
}

.lj-home-search select {
  padding-right: 24px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* =========================================================
   SELECT ARROW
========================================================= */

.lj-home-select-arrow {
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--color-muted);
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
  transition: color var(--transition-fast);
}

.lj-home-search-category:focus-within .lj-home-select-arrow {
  color: var(--color-primary);
}

/* =========================================================
   SEARCH BUTTON
========================================================= */

.lj-home-search-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 145px;
  margin-left: 8px;
  padding: 0 25px;
  overflow: hidden;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  box-shadow: 0 10px 25px rgba(7, 104, 207, .25);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* BUTTON SHINE */

.lj-home-search-button::before {
  position: absolute;
  top: -40%;
  left: -55%;
  width: 45%;
  height: 180%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: rotate(20deg);
  transition: left .55s ease;
}

.lj-home-search-button:hover::before {
  left: 120%;
}

.lj-home-search-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 32px rgba(7, 104, 207, .31);
}

.lj-home-search-button:active {
  transform: translateY(0) scale(.985);
}

.lj-home-search-button i {
  position: relative;
  font-size: 18px;
  z-index: 2;
}

.lj-home-search-button span {
  position: relative;
  z-index: 2;
}

/* =========================================================
   FEATURED CATEGORIES WRAPPER
========================================================= */

.lj-home-featured {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 1100px;
  margin: 28px auto 0;
  text-align: center;
}

/* =========================================================
   FEATURED LABEL
========================================================= */

.lj-home-featured-label {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .67);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
}

/* =========================================================
   FEATURED LIST
========================================================= */

.lj-home-featured-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lj-home-featured-list::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   FEATURED CATEGORY ITEM
========================================================= */

.lj-home-featured-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 5px 14px 5px 6px;
  color: rgba(255, 255, 255, .90);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.lj-home-featured-item:hover {
  color: var(--color-title);
  background: var(--color-white);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

/* =========================================================
   FEATURED ICON
========================================================= */

.lj-home-featured-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: #4AB3FC;
  background: rgba(255, 255, 255, .10);
  border-radius: var(--radius-round);
  font-size: 13px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.lj-home-featured-item:hover .lj-home-featured-icon {
  color: var(--color-white);
  background: var(--color-primary);
}

/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.lj-home-hero-decoration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* =========================================================
   CIRCLES
========================================================= */

.lj-home-hero-circle {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-round);
}

.lj-circle-one {
  top: -270px;
  right: -90px;
  width: 620px;
  height: 620px;
  animation: ljHeroFloatOne 12s ease-in-out infinite;
}

.lj-circle-two {
  right: 85px;
  bottom: -390px;
  width: 590px;
  height: 590px;
  border-color: rgba(74, 179, 252, .10);
  animation: ljHeroFloatTwo 15s ease-in-out infinite;
}

/* =========================================================
   DECORATIVE CURVES
========================================================= */

.lj-home-hero-line {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
}

.lj-line-one {
  top: -185px;
  right: 90px;
  width: 480px;
  height: 600px;
  transform: rotate(20deg);
}

.lj-line-two {
  top: -120px;
  right: -120px;
  width: 480px;
  height: 600px;
  transform: rotate(-16deg);
}

/* =========================================================
   BACKGROUND GLOW
========================================================= */

.lj-home-hero-glow {
  position: absolute;
  top: 70px;
  left: 7%;
  width: 260px;
  height: 260px;
  background: rgba(255, 255, 255, .055);
  border-radius: var(--radius-round);
  filter: blur(65px);
  animation: ljHeroGlow 6s ease-in-out infinite;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes ljHeroFloatOne {
  0%,
  100% {
    transform: translate3d( 0, 0, 0);
  }
  50% {
    transform: translate3d( -15px, 12px, 0);
  }
}

@keyframes ljHeroFloatTwo {
  0%,
  100% {
    transform: translate3d( 0, 0, 0);
  }
  50% {
    transform: translate3d( 12px, -14px, 0);
  }
}

@keyframes ljHeroGlow {
  0%,
  100% {
    opacity: .55;
    transform: scale(1);
  }
  50% {
    opacity: .85;
    transform: scale(1.08);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-home-hero {
    height: auto;
    max-height: none;
    min-height: 450px;
    padding: 45px 0 36px;
  }
  /* =====================================================
       CONTAINER
    ====================================================== */
  .lj-home-hero-container {
    width: calc( 100% - 30px);
    max-width: 760px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }
  /* =====================================================
       HEADING
    ====================================================== */
  .lj-home-hero-heading-wrap {
    max-width: 760px;
    margin-bottom: 23px;
    text-align: center;
  }
  .lj-home-hero-title {
    font-size: clamp( 48px, 7.7vw, 66px);
    line-height: .98;
  }
  /* =====================================================
       SEARCH
    ====================================================== */
  .lj-home-search {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 760px;
    min-height: 0;
    padding: 8px;
    border-radius: var(--radius-lg);
  }
  .lj-home-search-field {
    min-height: 62px;
  }
  .lj-home-search-keyword,
  .lj-home-search-location {
    border-bottom: 1px solid var(--color-border);
  }
  .lj-home-search-location {
    border-right: 0;
  }
  .lj-home-search-category {
    border-right: 1px solid var(--color-border);
  }
  .lj-home-search-button {
    min-height: 54px;
    margin: 4px 0 4px 8px;
  }
  /* =====================================================
       FEATURED
    ====================================================== */
  .lj-home-featured {
    max-width: 760px;
  }
  .lj-home-featured-list {
    justify-content: flex-start;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  /* =====================================================
       HERO
    ====================================================== */
  .lj-home-hero {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 34px 0 27px;
  }
  /* =====================================================
       CONTAINER
    ====================================================== */
  .lj-home-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc( 100% - 24px);
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  /* =====================================================
       HEADING
    ====================================================== */
  .lj-home-hero-heading-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 22px;
    text-align: center;
  }
  .lj-home-hero-eyebrow {
    justify-content: center;
    margin-bottom: 8px;
    font-size: 10px;
  }
  /*
     * Larger mobile heading while still preventing
     * horizontal overflow.
     */
  .lj-home-hero-title {
    max-width: 100%;
    font-size: clamp( 41px, 12vw, 54px);
    line-height: .97;
    letter-spacing: -.04em;
    text-align: center;
  }
  .lj-home-hero-title-accent {
    display: block;
    min-height: 1em;
    margin: 5px 0 0;
    line-height: 1;
  }
  /* =====================================================
       PREMIUM MOBILE SEARCH PANEL
    ====================================================== */
  .lj-home-search {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 9px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(1, 52, 130, .25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: none;
  }
  .lj-home-search:focus-within {
    transform: none;
    box-shadow: 0 25px 60px rgba(1, 52, 130, .29);
  }
  /* =====================================================
       MOBILE FIELD
    ====================================================== */
  .lj-home-search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 59px;
    padding: 8px 12px;
    background: var(--color-off-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  }
  /*
     * Remove all desktop separators.
     */
  .lj-home-search-keyword,
  .lj-home-search-location,
  .lj-home-search-category {
    border: 1px solid var(--color-border);
  }
  /* =====================================================
       FIELD FOCUS
    ====================================================== */
  .lj-home-search-field:focus-within {
    background: var(--color-white);
    border-color: rgba(7, 104, 207, .30);
    box-shadow: 0 8px 22px rgba(7, 104, 207, .07);
    transform: translateY(-1px);
  }
  /* =====================================================
       MOBILE ICON
    ====================================================== */
  .lj-home-search-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px solid rgba(7, 104, 207, .07);
    border-radius: 10px;
    font-size: 17px;
  }
  .lj-home-search-field:focus-within .lj-home-search-icon {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.04);
  }
  /* =====================================================
       MOBILE LABEL
    ====================================================== */
  .lj-home-search-label {
    margin-bottom: 3px;
    color: var(--color-muted);
    font-size: 8px;
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
  }
  /* =====================================================
       MOBILE INPUT
    ====================================================== */
  .lj-home-search input,
  .lj-home-search select {
    width: 100%;
    height: 27px;
    padding: 0;
    color: var(--color-title);
    background: transparent;
    font-size: 12px;
    font-weight: var(--weight-medium);
  }
  .lj-home-search input::placeholder {
    color: #355A7D;
  }
  .lj-home-search select {
    padding-right: 26px;
  }
  /* =====================================================
       SELECT ARROW
    ====================================================== */
  .lj-home-select-arrow {
    right: 14px;
    color: var(--color-muted);
    font-size: 17px;
  }
  /* =====================================================
       PREMIUM MOBILE SEARCH BUTTON
    ====================================================== */
  .lj-home-search-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    margin: 2px 0 0;
    padding: 0 20px;
    color: var(--color-white);
    background: linear-gradient( 135deg, var(--color-primary-dark) 0%, var(--color-primary) 62%, #0687F1 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(7, 104, 207, .24);
    font-size: 13px;
    font-weight: var(--weight-semibold);
  }
  .lj-home-search-button i {
    font-size: 18px;
  }
  .lj-home-search-button:active {
    transform: scale(.985);
  }
  /* =====================================================
       FEATURED CATEGORIES
    ====================================================== */
  .lj-home-featured {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 16px auto 0;
    text-align: left;
  }
  .lj-home-featured-label {
    display: block;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .70);
    font-size: 10px;
    text-align: center;
  }
  /*
     * Horizontal scrolling is intentional.
     * Categories remain on one row.
     */
  .lj-home-featured-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    padding: 0 2px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lj-home-featured-list::-webkit-scrollbar {
    display: none;
  }
  .lj-home-featured-item {
    flex: 0 0 auto;
    min-height: 35px;
    padding: 4px 12px 4px 5px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-pill);
    font-size: 10px;
    scroll-snap-align: start;
  }
  .lj-home-featured-icon {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
  /* =====================================================
       MOBILE DECORATIONS
    ====================================================== */
  .lj-circle-one {
    top: -210px;
    right: -270px;
    width: 480px;
    height: 480px;
  }
  .lj-circle-two {
    display: none;
  }
  .lj-line-one,
  .lj-line-two {
    opacity: .40;
  }
  .lj-home-hero-glow {
    top: 40px;
    left: -80px;
    width: 220px;
    height: 220px;
    opacity: .55;
  }
}

/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media(max-width:389.98px) {
  .lj-home-hero {
    padding: 30px 0 24px;
  }
  .lj-home-hero-container {
    width: calc( 100% - 18px);
  }
  .lj-home-hero-title {
    font-size: clamp( 37px, 11.8vw, 46px);
  }
  .lj-home-search {
    padding: 7px;
    border-radius: 15px;
  }
  .lj-home-search-field {
    min-height: 56px;
    padding: 7px 10px;
    border-radius: 10px;
  }
  .lj-home-search-icon {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border-radius: 9px;
  }
  .lj-home-search-button {
    min-height: 51px;
    border-radius: 10px;
  }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-home-hero *,
  .lj-home-hero *::before,
  .lj-home-hero *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   HOME QUICK LINKS
========================================================= */

.lj-home-quick-links {
  position: relative;
  width: 100%;
  padding: 22px 0 28px;
  /*** background:
        var(--color-off-white); **/
  overflow: hidden;
}

/* =========================================================
   CONTAINER
========================================================= */

.lj-home-quick-links-container {
  width: calc( 100% - 40px);
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================================================
   SWIPER
========================================================= */

.lj-quick-links-swiper {
  width: 100%;
  overflow: visible;
}

.lj-quick-links-swiper .swiper-wrapper {
  align-items: stretch;
}

.lj-quick-links-swiper .swiper-slide {
  height: auto;
}

/* =========================================================
   CARD
========================================================= */

.lj-quick-link-card {
  --quick-bg: rgba(7, 104, 207, .06);
  --quick-color: var(--color-primary);
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 13px;
  width: 100%;
  height: 100%;
  min-height: 96px;
  padding: 13px 14px;
  overflow: hidden;
  color: var(--color-title);
  background: var(--quick-bg);
  border: 1px solid color-mix( in srgb, var(--quick-color) 34%, transparent);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(1, 52, 130, .045);
  isolation: isolate;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast);
}

/* =========================================================
   SOFT GLOW
========================================================= */

.lj-quick-link-card::before {
  position: absolute;
  top: -65px;
  right: -55px;
  width: 150px;
  height: 150px;
  content: "";
  background: radial-gradient( circle, color-mix( in srgb, var(--quick-color) 16%, transparent), transparent 68%);
  border-radius: var(--radius-round);
  pointer-events: none;
  z-index: -1;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* =========================================================
   SUBTLE SHINE
========================================================= */

.lj-quick-link-card::after {
  position: absolute;
  top: -40%;
  left: -55%;
  width: 34%;
  height: 180%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: rotate(20deg);
  opacity: 0;
  pointer-events: none;
  transition: left .65s ease, opacity .25s ease;
}

/* =========================================================
   HOVER
========================================================= */

.lj-quick-link-card:hover {
  transform: translateY(-5px);
  border-color: color-mix( in srgb, var(--quick-color) 52%, transparent);
  box-shadow: 0 18px 42px rgba(1, 52, 130, .10);
}

.lj-quick-link-card:hover::before {
  transform: scale(1.15);
  opacity: 1;
}

.lj-quick-link-card:hover::after {
  left: 125%;
  opacity: 1;
}

/* =========================================================
   IMAGE
========================================================= */

.lj-quick-link-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
}

.lj-quick-link-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow( 0 7px 10px rgba(1, 52, 130, .12));
  transition: transform var(--transition-normal);
}

.lj-quick-link-card:hover .lj-quick-link-media img {
  transform: translateY(-3px) rotate(-3deg) scale(1.06);
}

/* =========================================================
   CONTENT
========================================================= */

.lj-quick-link-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.lj-quick-link-content strong {
  display: block;
  min-width: 0;
  color: var(--quick-color);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

.lj-quick-link-content small {
  display: block;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-regular);
  line-height: 1.35;
}

/* =========================================================
   ARROW
========================================================= */

.lj-quick-link-arrow {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: var(--quick-color);
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: var(--radius-round);
  font-size: 16px;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.lj-quick-link-card:hover .lj-quick-link-arrow {
  color: var(--color-white);
  background: var(--quick-color);
  transform: translateX(2px);
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-home-quick-links {
    padding: 18px 0 24px;
  }
  .lj-home-quick-links-container {
    width: calc( 100% - 30px);
  }
  .lj-quick-link-card {
    grid-template-columns: 56px minmax(0, 1fr) 28px;
    min-height: 90px;
    padding: 11px 12px;
    border-radius: 14px;
  }
  .lj-quick-link-media {
    width: 56px;
    height: 56px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  .lj-home-quick-links {
    padding: 15px 0 20px;
  }
  .lj-home-quick-links-container {
    width: calc( 100% - 20px);
  }
  /*
     * Compact card because two appear at once.
     */
  .lj-quick-link-card {
    display: flex;
    /** flex-direction:column;**/
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    min-height: 55px;
    padding: 10px;
    border-radius: 13px;
    text-align: left;
  }
  .lj-quick-link-media {
    width: 36px;
    height: 36px;
    margin-bottom: 1px;
  }
  .lj-quick-link-media img {
    width: 36px;
    height: 36px;
  }
  .lj-quick-link-content {
    width: 100%;
    gap: 2px;
  }
  .lj-quick-link-content strong {
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }
  .lj-quick-link-content small {
    max-width: 120px;
    font-size: 8px;
    line-height: 1.3;
  }
  .lj-quick-link-arrow {
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 25px;
    height: 25px;
    font-size: 14px;
    display: none;
  }
}

/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media(max-width:389.98px) {
  .lj-home-quick-links-container {
    width: calc( 100% - 16px);
  }
  .lj-quick-link-card {
    min-height: 45px;
    padding: 9px 3px;
  }
  .lj-quick-link-media {
    width: 35px;
    height: 35px;
  }
  .lj-quick-link-content strong {
    font-size: 10px;
  }
  .lj-quick-link-media img {
    width: 35px;
    height: 35px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-quick-link-card,
  .lj-quick-link-card::before,
  .lj-quick-link-card::after,
  .lj-quick-link-media img,
  .lj-quick-link-arrow {
    transition: none !important;
    animation: none !important;
  }
}

.lj-trending-listings {
  padding: 34px 0 58px;
  background: var(--color-off-white, #F6FBFD);
  font-family: var(--font-body, "Inter", sans-serif)
}

.lj-trending-listings-container {
  width: calc(100% - 40px);
  max-width: 1380px;
  margin: 0 auto
}

.lj-trending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px
}

.lj-trending-heading {
  display: flex;
  align-items: center;
  gap: 12px
}

.lj-trending-heading-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--color-primary, #0768CF);
  background: var(--color-primary-soft, #D5EAF8);
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(7, 104, 207, .08)
}

.lj-trending-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--color-secondary-dark, #0687F1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-trending-heading h2 {
  margin: 0;
  color: var(--color-title, #013482);
  font-family: var(--font-heading);
  font-size: clamp(27px, 2.4vw, 38px);
  line-height: 1;
  font-weight: 700
}

.lj-trending-view-switch {
  display: flex;
  gap: 7px;
  padding: 5px;
  background: #FFFFFF;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 12px;
  box-shadow: var(--shadow-small, 0 10px 30px rgba(1, 52, 130, .07))
}

.lj-trending-view-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  padding: 0;
  color: var(--color-muted, #355A7D);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast, .2s ease)
}

.lj-trending-view-btn:hover {
  color: var(--color-primary, #0768CF);
  background: var(--color-primary-soft, #D5EAF8)
}

.lj-trending-view-btn.is-active {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  box-shadow: 0 7px 17px rgba(7, 104, 207, .2)
}

.lj-trending-results {
  display: grid;
  gap: 16px;
  transition: opacity .2s ease
}

.lj-trending-results.is-loading {
  opacity: .42;
  pointer-events: none
}

.lj-trending-results.is-grid-view {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.lj-trending-results.is-list-view {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.lj-trending-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(7, 104, 207, .48);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(1, 52, 130, .055);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .25s ease
}

.lj-trending-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary, #0768CF);
  box-shadow: 0 22px 48px rgba(1, 52, 130, .12)
}

.is-grid-view .lj-trending-card {
  flex-direction: column;
  /** min-height:590px **/
}

.is-list-view .lj-trending-card {
  flex-direction: row;
  /**min-height:300px**/
}

.lj-trending-card-media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface, #D5EAF8)
}

.is-grid-view .lj-trending-card-media {
  height: 280px;
  flex: 0 0 280px
}

.is-list-view .lj-trending-card-media {
  width: 42%;
  min-width: 42%;
  align-self: stretch
}

.lj-trending-media-swiper,
.lj-trending-media-swiper .swiper-wrapper,
.lj-trending-media-swiper .swiper-slide {
  width: 100%;
  height: 100%
}

.lj-trending-media-swiper img,
.lj-trending-media-swiper video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1)
}

.lj-trending-card:hover .lj-trending-media-swiper img {
  transform: scale(1.035)
}

.lj-trending-no-media {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-muted, #355A7D);
  font-size: 34px;
  background: linear-gradient(145deg, #F6FBFD, #D5EAF8)
}

.lj-trending-media-swiper .swiper-pagination {
  bottom: 10px !important
}

.lj-trending-media-swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #FFFFFF;
  opacity: .72;
  box-shadow: 0 1px 5px rgba(1, 52, 130, .35)
}

.lj-trending-media-swiper .swiper-pagination-bullet-active {
  background: var(--color-primary, #0768CF);
  opacity: 1
}

.lj-trending-save {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  padding: 0;
  color: var(--color-primary, #0768CF);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(7, 104, 207, .2);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(1, 52, 130, .14);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: var(--transition-fast, .2s ease)
}

.lj-trending-save:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--color-primary, #0768CF)
}

.lj-trending-save.is-saved {
  color: #FFFFFF;
  background: var(--color-primary, #0768CF);
  border-color: var(--color-primary, #0768CF)
}

.lj-trending-property-type {
  position: absolute;
  z-index: 7;
  top: 13px;
  right: 12px;
  max-width: 52%;
  padding: 7px 10px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .68);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lj-trending-property-stats {
  position: absolute;
  z-index: 7;
  left: 10px;
  right: 10px;
  bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  pointer-events: none
}

.lj-trending-property-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 6px 9px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .72);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  backdrop-filter: blur(9px);
  box-shadow: 0 5px 15px rgba(1, 52, 130, .13)
}

.lj-trending-property-stats i {
  color: var(--color-secondary, #1F9EFC);
  font-size: 11px
}

.lj-trending-property-stats b {
  font-size: 9px
}

.lj-trending-property-stats small {
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase
}

.lj-trending-card-side {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column
}

.lj-trending-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 23px 22px 20px
}

.lj-trending-card-kicker {
  margin-bottom: 11px;
  color: var(--color-secondary-dark, #0687F1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase
}

.lj-trending-card-price {
  margin-bottom: 11px;
  color: var(--color-primary, #0768CF);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1
}

.lj-trending-card-price small {
  margin-left: 3px;
  color: var(--color-text, #082E5C);
  font-size: 9px;
  font-weight: 700
}

.lj-trending-card h3 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 25px;
  line-height: 1.08;
  font-weight: 700
}

.lj-trending-card h3 a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-title, #013482);
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.lj-trending-card h3 a:hover {
  color: var(--color-primary, #0768CF)
}

.lj-trending-description {
  display: none;
  margin: 0 0 17px;
  color: var(--color-text, #082E5C);
  font-size: 12px;
  line-height: 1.6
}

.is-list-view .lj-trending-description {
  display: block
}

.lj-trending-location {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  color: var(--color-title, #013482);
  font-size: 12px;
  line-height: 1.45
}

.lj-trending-location i {
  margin-top: 2px;
  color: var(--color-primary, #0768CF);
  font-size: 12px
}

.lj-trending-location strong {
  font-weight: 700
}

.lj-trending-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  margin-top: auto;
  padding: 4px 10px;
  border-top: 1px solid var(--color-border, #6F8DA8);
  background: linear-gradient(180deg, #FFFFFF, #F6FBFD)
}

.lj-trending-seller {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px
}

.lj-trending-seller-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  overflow: hidden;
  color: var(--color-primary, #0768CF);
  background: #FFFFFF;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 50%;
  box-shadow: 0 5px 16px rgba(1, 52, 130, .08);
  font-weight: 800
}

.lj-trending-seller-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-trending-seller>div:last-child {
  min-width: 0
}

.lj-trending-seller small {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted, #355A7D);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase
}

.lj-trending-seller strong {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: var(--color-title, #013482);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lj-trending-view-link {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(7, 104, 207, .18);
  transition: var(--transition-fast, .2s ease)
}

.lj-trending-view-link:hover {
  color: #FFFFFF;
  transform: translateX(2px);
  box-shadow: 0 10px 24px rgba(7, 104, 207, .28)
}

.is-list-view .lj-trending-card-body {
  padding: 22px 20px 16px
}

.is-list-view .lj-trending-card h3 {
  font-size: 22px
}

.is-list-view .lj-trending-card-price {
  font-size: 18px
}

.is-list-view .lj-trending-card-footer {
  /** min-height:75px;**/
  padding: 5px 10px
}

.is-list-view .lj-trending-seller-avatar {
  width: 40px;
  height: 40px;
  flex-basis: 40px
}

.lj-trending-loading {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 32px
}

.lj-trending-loading span {
  width: 8px;
  height: 8px;
  background: var(--color-primary, #0768CF);
  border-radius: 50%;
  animation: ljTrendPulse .8s ease-in-out infinite alternate
}

.lj-trending-loading span:nth-child(2) {
  animation-delay: .15s
}

.lj-trending-loading span:nth-child(3) {
  animation-delay: .3s
}

@keyframes ljTrendPulse {
  to {
    opacity: .25;
    transform: translateY(-5px)
  }
}

.lj-trending-empty {
  padding: 55px 20px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 16px
}

.lj-trending-empty i {
  color: var(--color-primary, #0768CF);
  font-size: 30px
}

.lj-trending-empty h3 {
  margin: 12px 0 4px;
  font-family: var(--font-heading);
  font-size: 27px
}

.lj-trending-empty p {
  margin: 0;
  color: var(--color-text, #082E5C);
  font-size: 12px
}

.lj-trending-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
  flex-wrap: wrap
}

.lj-trending-pagination button,
.lj-trending-pagination span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  color: var(--color-title, #013482);
  background: #FFFFFF;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800
}

.lj-trending-pagination button {
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(1, 52, 130, .04);
  transition: var(--transition-fast, .2s ease)
}

.lj-trending-pagination button:hover:not(:disabled),
.lj-trending-pagination button.is-active {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  border-color: var(--color-primary, #0768CF);
  transform: translateY(-2px)
}

.lj-trending-pagination button:disabled {
  opacity: .35;
  cursor: not-allowed
}

.lj-trending-pagination span {
  border: 0;
  background: transparent
}

@media(max-width:1199px) {
  .lj-trending-results.is-grid-view {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
  .lj-trending-results.is-list-view {
    grid-template-columns: 1fr
  }
  .is-grid-view .lj-trending-card {
    min-height: 565px
  }
}

@media(max-width:899px) {
  .lj-trending-results.is-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .is-grid-view .lj-trending-card-media {
    height: 245px;
    flex-basis: 245px
  }
  .is-grid-view .lj-trending-card {
    min-height: 530px
  }
}

@media(max-width:575px) {
  .lj-trending-listings {
    padding: 26px 0 42px
  }
  .lj-trending-listings-container {
    width: calc(100% - 24px)
  }
  .lj-trending-head {
    align-items: flex-end;
    margin-bottom: 15px
  }
  .lj-trending-heading {
    gap: 9px
  }
  .lj-trending-heading-icon {
    width: 36px;
    height: 36px
  }
  .lj-trending-eyebrow {
    font-size: 7px
  }
  .lj-trending-heading h2 {
    font-size: 27px
  }
  .lj-trending-view-switch {
    gap: 4px;
    padding: 4px
  }
  .lj-trending-view-btn {
    width: 34px;
    height: 32px
  }
  .lj-trending-results.is-grid-view,
  .lj-trending-results.is-list-view {
    grid-template-columns: 1fr
  }
  .is-grid-view .lj-trending-card {
    min-height: 0
  }
  .is-grid-view .lj-trending-card-media {
    height: 270px;
    flex-basis: 270px
  }
  .is-list-view .lj-trending-card {
    min-height: 225px
  }
  .is-list-view .lj-trending-card-media {
    width: 40%;
    min-width: 40%
  }
  .is-list-view .lj-trending-card-body {
    padding: 15px 13px 10px
  }
  .is-list-view .lj-trending-card-kicker {
    margin-bottom: 7px;
    font-size: 7px
  }
  .is-list-view .lj-trending-card-price {
    margin-bottom: 7px;
    font-size: 14px
  }
  .is-list-view .lj-trending-card-price small {
    font-size: 7px
  }
  .is-list-view .lj-trending-card h3 {
    margin-bottom: 8px;
    font-size: 17px
  }
  .is-list-view .lj-trending-description {
    margin-bottom: 9px;
    font-size: 9px;
    line-height: 1.45
  }
  .is-list-view .lj-trending-location {
    font-size: 8px
  }
  .is-list-view .lj-trending-card-footer {
    min-height: 59px;
    padding: 8px 10px
  }
  .is-list-view .lj-trending-seller-avatar {
    width: 31px;
    height: 31px;
    flex-basis: 31px
  }
  .is-list-view .lj-trending-seller strong {
    max-width: 90px;
    font-size: 8px
  }
  .is-list-view .lj-trending-seller small {
    font-size: 6px
  }
  .is-list-view .lj-trending-view-link {
    width: 32px;
    height: 32px;
    flex-basis: 32px
  }
  .lj-trending-card-body {
    padding: 19px 17px
  }
  .lj-trending-card-footer {
    min-height: 72px;
    padding: 12px 14px
  }
  .lj-trending-property-stats span {
    padding: 5px 7px
  }
  .lj-trending-property-stats small {
    display: none
  }
}

@media(max-width:390px) {
  .is-list-view .lj-trending-card-media {
    width: 38%;
    min-width: 38%
  }
  .is-list-view .lj-trending-description {
    display: none
  }
  .is-list-view .lj-trending-seller strong {
    max-width: 70px
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-trending-card,
  .lj-trending-media-swiper img,
  .lj-trending-view-link,
  .lj-trending-view-btn {
    transition: none !important
  }
  .lj-trending-loading span {
    animation: none
  }
}

.lj-trending-listings {
  padding: 34px 0 58px;
  background: var(--color-off-white, #F6FBFD);
  font-family: var(--font-body, "Inter", sans-serif)
}

.lj-trending-listings-container {
  width: calc(100% - 40px);
  max-width: 1380px;
  margin: 0 auto
}

.lj-trending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px
}

.lj-trending-heading {
  display: flex;
  align-items: center;
  gap: 12px
}

.lj-trending-heading-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--color-primary, #0768CF);
  background: var(--color-primary-soft, #D5EAF8);
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(7, 104, 207, .08)
}

.lj-trending-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--color-secondary-dark, #0687F1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-trending-heading h2 {
  margin: 0;
  color: var(--color-title, #013482);
  font-family: var(--font-heading);
  font-size: clamp(27px, 2.4vw, 38px);
  line-height: 1;
  font-weight: 700
}

.lj-trending-view-switch {
  display: flex;
  gap: 7px;
  padding: 5px;
  background: #FFFFFF;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 12px;
  box-shadow: var(--shadow-small, 0 10px 30px rgba(1, 52, 130, .07))
}

.lj-trending-view-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 36px;
  padding: 0;
  color: var(--color-muted, #355A7D);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast, .2s ease)
}

.lj-trending-view-btn:hover {
  color: var(--color-primary, #0768CF);
  background: var(--color-primary-soft, #D5EAF8)
}

.lj-trending-view-btn.is-active {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  box-shadow: 0 7px 17px rgba(7, 104, 207, .2)
}

.lj-trending-results {
  display: grid;
  gap: 16px;
  transition: opacity .2s ease
}

.lj-trending-results.is-loading {
  opacity: .42;
  pointer-events: none
}

.lj-trending-results.is-grid-view {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.lj-trending-results.is-list-view {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.lj-trending-card {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(7, 104, 207, .48);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(1, 52, 130, .055);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .25s ease
}

.lj-trending-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary, #0768CF);
  box-shadow: 0 22px 48px rgba(1, 52, 130, .12)
}

.is-grid-view .lj-trending-card {
  flex-direction: column;
  /** min-height:590px **/
}

.is-list-view .lj-trending-card {
  flex-direction: row;
  /* min-height:300px**/
}

.lj-trending-card-media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface, #D5EAF8)
}

.is-grid-view .lj-trending-card-media {
  height: 280px;
  flex: 0 0 280px
}

.is-list-view .lj-trending-card-media {
  width: 42%;
  min-width: 42%;
  align-self: stretch
}

.lj-trending-media-swiper,
.lj-trending-media-swiper .swiper-wrapper,
.lj-trending-media-swiper .swiper-slide {
  width: 100%;
  height: 100%
}

.lj-trending-media-swiper img,
.lj-trending-media-swiper video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1)
}

.lj-trending-card:hover .lj-trending-media-swiper img {
  transform: scale(1.035)
}

.lj-trending-no-media {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-muted, #355A7D);
  font-size: 34px;
  background: linear-gradient(145deg, #F6FBFD, #D5EAF8)
}

.lj-trending-media-swiper .swiper-pagination {
  bottom: 10px !important
}

.lj-trending-media-swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #FFFFFF;
  opacity: .72;
  box-shadow: 0 1px 5px rgba(1, 52, 130, .35)
}

.lj-trending-media-swiper .swiper-pagination-bullet-active {
  background: var(--color-primary, #0768CF);
  opacity: 1
}

.lj-trending-save {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  padding: 0;
  color: var(--color-primary, #0768CF);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(7, 104, 207, .2);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(1, 52, 130, .14);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: var(--transition-fast, .2s ease)
}

.lj-trending-save:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--color-primary, #0768CF)
}

.lj-trending-save.is-saved {
  color: #FFFFFF;
  background: var(--color-primary, #0768CF);
  border-color: var(--color-primary, #0768CF)
}

.lj-trending-property-type {
  position: absolute;
  z-index: 7;
  top: 13px;
  right: 12px;
  max-width: 52%;
  padding: 7px 10px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .68);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lj-trending-property-stats {
  position: absolute;
  z-index: 7;
  left: 10px;
  right: 10px;
  bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  pointer-events: none
}

.lj-trending-property-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 6px 9px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .72);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  backdrop-filter: blur(9px);
  box-shadow: 0 5px 15px rgba(1, 52, 130, .13)
}

.lj-trending-property-stats i {
  color: var(--color-secondary, #1F9EFC);
  font-size: 11px
}

.lj-trending-property-stats b {
  font-size: 9px
}

.lj-trending-property-stats small {
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase
}

.lj-trending-card-side {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column
}

.lj-trending-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 23px 22px 20px
}

.lj-trending-card-kicker {
  margin-bottom: 11px;
  color: var(--color-secondary-dark, #0687F1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase
}

.lj-trending-card-price {
  margin-bottom: 11px;
  color: var(--color-primary, #0768CF);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1
}

.lj-trending-card-price small {
  margin-left: 3px;
  color: var(--color-text, #082E5C);
  font-size: 12px;
  font-weight: 500
}

.lj-trending-card h3 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 25px;
  line-height: 1.08;
  font-weight: 700
}

.lj-trending-card h3 a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-title, #013482);
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.lj-trending-card h3 a:hover {
  color: var(--color-primary, #0768CF)
}

.lj-trending-description {
  display: none;
  margin: 0 0 17px;
  color: var(--color-text, #082E5C);
  font-size: 12px;
  line-height: 1.6
}

.is-list-view .lj-trending-description {
  display: block
}

.lj-trending-location {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  color: var(--color-title, #013482);
  font-size: 10px;
  line-height: 1.45
}

.lj-trending-location i {
  margin-top: 2px;
  color: var(--color-primary, #0768CF);
  font-size: 12px
}

.lj-trending-location strong {
  font-weight: 700
}

.lj-trending-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /**margin-top:auto**/
  ;
  padding: 4px 10px;
  border-top: 1px solid var(--color-border, #6F8DA8);
  background: linear-gradient(180deg, #FFFFFF, #F6FBFD)
}

.lj-trending-seller {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px
}

.lj-trending-seller-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  overflow: hidden;
  color: var(--color-primary, #0768CF);
  background: #FFFFFF;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 50%;
  box-shadow: 0 5px 16px rgba(1, 52, 130, .08);
  font-weight: 800
}

.lj-trending-seller-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-trending-seller>div:last-child {
  min-width: 0
}

.lj-trending-seller small {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted, #355A7D);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase
}

.lj-trending-seller strong {
  display: block;
  max-width: 150px;
  overflow: hidden;
  color: var(--color-title, #013482);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lj-trending-view-link {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(7, 104, 207, .18);
  transition: var(--transition-fast, .2s ease)
}

.lj-trending-view-link:hover {
  color: #FFFFFF;
  transform: translateX(2px);
  box-shadow: 0 10px 24px rgba(7, 104, 207, .28)
}

.is-list-view .lj-trending-card-body {
  padding: 22px 20px 16px
}

.is-list-view .lj-trending-card h3 {
  font-size: 22px
}

.is-list-view .lj-trending-card-price {
  font-size: 18px
}

.is-list-view .lj-trending-card-footer {
  /** min-height:75px **/
  ;
  padding: 5px 10px
}

.is-list-view .lj-trending-seller-avatar {
  width: 40px;
  height: 40px;
  flex-basis: 40px
}

.lj-trending-loading {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 32px
}

.lj-trending-loading span {
  width: 8px;
  height: 8px;
  background: var(--color-primary, #0768CF);
  border-radius: 50%;
  animation: ljTrendPulse .8s ease-in-out infinite alternate
}

.lj-trending-loading span:nth-child(2) {
  animation-delay: .15s
}

.lj-trending-loading span:nth-child(3) {
  animation-delay: .3s
}

@keyframes ljTrendPulse {
  to {
    opacity: .25;
    transform: translateY(-5px)
  }
}

.lj-trending-empty {
  padding: 55px 20px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 16px
}

.lj-trending-empty i {
  color: var(--color-primary, #0768CF);
  font-size: 30px
}

.lj-trending-empty h3 {
  margin: 12px 0 4px;
  font-family: var(--font-heading);
  font-size: 27px
}

.lj-trending-empty p {
  margin: 0;
  color: var(--color-text, #082E5C);
  font-size: 12px
}

.lj-trending-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
  flex-wrap: wrap
}

.lj-trending-pagination button,
.lj-trending-pagination span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  color: var(--color-title, #013482);
  background: #FFFFFF;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800
}

.lj-trending-pagination button {
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(1, 52, 130, .04);
  transition: var(--transition-fast, .2s ease)
}

.lj-trending-pagination button:hover:not(:disabled),
.lj-trending-pagination button.is-active {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  border-color: var(--color-primary, #0768CF);
  transform: translateY(-2px)
}

.lj-trending-pagination button:disabled {
  opacity: .35;
  cursor: not-allowed
}

.lj-trending-pagination span {
  border: 0;
  background: transparent
}

@media(max-width:1199px) {
  .lj-trending-results.is-grid-view {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
  .lj-trending-results.is-list-view {
    grid-template-columns: 1fr
  }
  .is-grid-view .lj-trending-card {
    min-height: 565px
  }
}

@media(max-width:899px) {
  .lj-trending-results.is-grid-view {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .is-grid-view .lj-trending-card-media {
    height: 245px;
    flex-basis: 245px
  }
  .is-grid-view .lj-trending-card {
    min-height: 530px
  }
}

@media(max-width:575px) {
  .lj-trending-listings {
    padding: 26px 0 42px
  }
  .lj-trending-listings-container {
    width: calc(100% - 24px)
  }
  .lj-trending-head {
    align-items: flex-end;
    margin-bottom: 15px
  }
  .lj-trending-heading {
    gap: 9px
  }
  .lj-trending-heading-icon {
    width: 36px;
    height: 36px
  }
  .lj-trending-eyebrow {
    font-size: 7px
  }
  .lj-trending-heading h2 {
    font-size: 27px
  }
  .lj-trending-view-switch {
    gap: 4px;
    padding: 4px
  }
  .lj-trending-view-btn {
    width: 34px;
    height: 32px
  }
  .lj-trending-results.is-grid-view,
  .lj-trending-results.is-list-view {
    grid-template-columns: 1fr
  }
  .is-grid-view .lj-trending-card {
    min-height: 0
  }
  .is-grid-view .lj-trending-card-media {
    height: 270px;
    flex-basis: 270px
  }
  .is-list-view .lj-trending-card {
    min-height: 225px
  }
  .is-list-view .lj-trending-card-media {
    width: 40%;
    min-width: 40%
  }
  .is-list-view .lj-trending-card-body {
    padding: 15px 13px 10px
  }
  .is-list-view .lj-trending-card-kicker {
    margin-bottom: 7px;
    font-size: 7px
  }
  .is-list-view .lj-trending-card-price {
    margin-bottom: 7px;
    font-size: 14px
  }
  .is-list-view .lj-trending-card-price small {
    font-size: 7px
  }
  .is-list-view .lj-trending-card h3 {
    margin-bottom: 8px;
    font-size: 17px
  }
  .is-list-view .lj-trending-description {
    margin-bottom: 9px;
    font-size: 9px;
    line-height: 1.45
  }
  .is-list-view .lj-trending-location {
    font-size: 8px
  }
  .is-list-view .lj-trending-card-footer {
    min-height: 59px;
    padding: 8px 10px
  }
  .is-list-view .lj-trending-seller-avatar {
    width: 31px;
    height: 31px;
    flex-basis: 31px
  }
  .is-list-view .lj-trending-seller strong {
    max-width: 90px;
    font-size: 8px
  }
  .is-list-view .lj-trending-seller small {
    font-size: 6px
  }
  .is-list-view .lj-trending-view-link {
    width: 32px;
    height: 32px;
    flex-basis: 32px
  }
  .lj-trending-card-body {
    padding: 19px 17px
  }
  .lj-trending-card-footer {
    min-height: 72px;
    padding: 12px 14px
  }
  .lj-trending-property-stats span {
    padding: 5px 7px
  }
  .lj-trending-property-stats small {
    display: none
  }
}

@media(max-width:390px) {
  .is-list-view .lj-trending-card-media {
    width: 38%;
    min-width: 38%
  }
  .is-list-view .lj-trending-description {
    display: none
  }
  .is-list-view .lj-trending-seller strong {
    max-width: 70px
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-trending-card,
  .lj-trending-media-swiper img,
  .lj-trending-view-link,
  .lj-trending-view-btn {
    transition: none !important
  }
  .lj-trending-loading span {
    animation: none
  }
}

/* ===== Search result page ===== */

.lj-search-results-page {
  background: var(--color-off-white, #F6FBFD);
  min-height: 70vh
}

.lj-sr-container {
  width: calc(100% - 40px);
  max-width: 1100px;
  margin: 0 auto
}

.lj-sr-hero {
  padding: 58px 0 34px;
  background: radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .15), transparent 27%), radial-gradient(circle at 85% 75%, rgba(74, 179, 252, .13), transparent 28%), linear-gradient(135deg, #013482 0%, #013883 43%, #0768CF 76%, #0687F1 100%);
  color: #FFFFFF
}

.lj-sr-hero-copy {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 27px
}

.lj-sr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4AB3FC
}

.lj-sr-hero h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(44px, 6vw, 70px);
  line-height: .95;
  font-weight: 700
}

.lj-sr-hero h1 span {
  color: #4AB3FC
}

.lj-sr-hero p {
  margin: 13px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .82)
}

.lj-sr-search {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 8px;
  max-width: 1050px;
  margin: 0 auto;
  padding: 8px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(1, 52, 130, .22)
}

.lj-sr-search label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 9px 12px;
  border-right: 1px solid var(--color-border, #6F8DA8)
}

.lj-sr-search label>span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary, #0768CF);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em
}

.lj-sr-search input,
.lj-sr-search select {
  width: 100%;
  height: 25px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-title, #013482);
  font: 500 12px var(--font-body, "Inter", sans-serif)
}

.lj-sr-search button {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  color: #FFFFFF;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease
}

.lj-sr-search button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(7, 104, 207, .22)
}

.lj-sr-listings-section {
  padding: 34px 0 64px
}

.lj-sr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px
}

.lj-sr-toolbar>div:first-child {
  display: flex;
  align-items: center;
  gap: 11px
}

.lj-sr-toolbar-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: 12px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
  font-size: 20px
}

.lj-sr-toolbar small {
  display: block;
  color: var(--color-muted, #355A7D);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em
}

.lj-sr-toolbar h2 {
  margin: 1px 0 0;
  font: 700 28px/1 var(--font-heading, "Cormorant Garamond", serif);
  color: var(--color-title, #013482)
}

.lj-sr-view-switch {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 11px;
  background: #FFFFFF
}

.lj-sr-view-switch button {
  display: grid;
  place-items: center;
  width: 37px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-muted, #355A7D);
  font-size: 18px;
  cursor: pointer
}

.lj-sr-view-switch button.is-active {
  background: var(--color-primary, #0768CF);
  color: #FFFFFF;
  box-shadow: 0 7px 18px rgba(7, 104, 207, .18)
}

.lj-sr-empty {
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--color-border, #6F8DA8);
  border-radius: 18px;
  background: #FFFFFF
}

.lj-sr-empty i {
  font-size: 42px;
  color: var(--color-primary, #0768CF)
}

.lj-sr-empty h3 {
  margin: 10px 0 5px;
  font: 700 29px var(--font-heading, "Cormorant Garamond", serif);
  color: var(--color-title, #013482)
}

.lj-sr-empty p {
  margin: 0;
  color: var(--color-text, #082E5C);
  font-size: 12px
}

.lj-sr-loading {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 35px
}

.lj-sr-loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary, #0768CF);
  animation: ljSrPulse .8s infinite alternate
}

.lj-sr-loading span:nth-child(2) {
  animation-delay: .15s
}

.lj-sr-loading span:nth-child(3) {
  animation-delay: .3s
}

@keyframes ljSrPulse {
  to {
    opacity: .25;
    transform: translateY(-5px)
  }
}

.lj-sr-verified {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  color: var(--color-primary, #0768CF);
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(1, 52, 130, .12)
}

.lj-sr-verified~.lj-trending-save {
  left: 14px;
  right: auto
}

.lj-sr-seller-link {
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%
}

.lj-sr-seller-link .lj-trending-seller-avatar {
  transition: transform .25s ease
}

.lj-sr-seller-link:hover .lj-trending-seller-avatar {
  transform: scale(1.06)
}

.lj-sr-seller-name {
  display: block;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-title, #013482);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none
}

.lj-sr-seller-name:hover {
  color: var(--color-primary, #0768CF)
}

@media(max-width:800px) {
  .lj-sr-hero {
    padding: 42px 0 26px
  }
  .lj-sr-search {
    grid-template-columns: 1fr 1fr
  }
  .lj-sr-search label {
    border-right: 0;
    background: var(--color-off-white, #F6FBFD);
    border-radius: 11px
  }
  .lj-sr-search button {
    min-height: 50px
  }
  .lj-sr-container {
    width: calc(100% - 28px)
  }
}

@media(max-width:575px) {
  .lj-sr-container {
    width: calc(100% - 22px)
  }
  .lj-sr-hero {
    padding: 34px 0 22px
  }
  .lj-sr-hero h1 {
    font-size: 43px
  }
  .lj-sr-search {
    grid-template-columns: 1fr;
    padding: 7px;
    border-radius: 15px
  }
  .lj-sr-search label {
    padding: 8px 11px
  }
  .lj-sr-search button {
    min-height: 47px
  }
  .lj-sr-listings-section {
    padding: 25px 0 48px
  }
  .lj-sr-toolbar h2 {
    font-size: 24px
  }
  .lj-sr-toolbar-icon {
    width: 38px;
    height: 38px
  }
  .lj-sr-view-switch button {
    width: 34px;
    height: 32px
  }
  .lj-sr-verified {
    top: 10px;
    right: 10px
  }
  .lj-sr-verified~.lj-trending-save {
    left: 10px
  }
  .lj-sr-toolbar {
    gap: 10px
  }
}

/* =========================================================
   LINJUST MESSENGER
   Warm luxury visual language using the existing frontend vars
========================================================= */

.lj-chat-app {
  height: min(780px, calc(100dvh - 150px));
  min-height: 620px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-medium);
  font-family: var(--font-body);
  color: var(--color-text)
}

.lj-chat-app * {
  box-sizing: border-box
}

.lj-chat-eyebrow {
  display: block;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-chat-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--color-white), var(--color-off-white));
  border-right: 1px solid var(--color-border)
}

.lj-chat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 24px 22px 18px;
  border-bottom: 1px solid var(--color-border)
}

.lj-chat-sidebar-head h2 {
  margin: 4px 0 0;
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--color-title)
}

.lj-chat-search {
  margin: 16px 18px 12px;
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: var(--transition-fast)
}

.lj-chat-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary)
}

.lj-chat-search i {
  color: var(--color-secondary-dark)
}

.lj-chat-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-title);
  font-family: var(--font-body);
  font-size: 12px
}

.lj-chat-conversation-list {
  flex: 1;
  overflow: auto;
  padding: 0 10px 15px
}

.lj-chat-conversation {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid rgba(111, 141, 168, .75);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-chat-conversation:hover,
.lj-chat-conversation.is-active {
  background: var(--color-primary-soft)
}

.lj-chat-conversation.is-active {
  box-shadow: inset 3px 0 0 var(--color-primary)
}

.lj-chat-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px
}

.lj-chat-avatar-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border)
}

.lj-chat-online-dot {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-success);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px rgba(7, 104, 207, .18)
}

.lj-chat-conversation-copy {
  min-width: 0
}

.lj-chat-conversation-copy strong {
  display: block;
  color: var(--color-title);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lj-chat-conversation-copy small {
  display: block;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lj-chat-conversation-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px
}

.lj-chat-conversation-meta time {
  font-size: 9px;
  color: var(--color-muted)
}

.lj-chat-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 700
}

.lj-chat-list-loading {
  padding: 28px 16px;
  text-align: center;
  color: var(--color-muted);
  font-size: 11px
}

.lj-chat-main {
  position: relative;
  min-width: 0;
  background: linear-gradient(135deg, var(--color-off-white), var(--color-white))
}

.lj-chat-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px
}

.lj-chat-empty-icon {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: 1px solid rgba(7, 104, 207, .15);
  font-size: 33px;
  transform: rotate(-3deg);
  animation: ljChatFloat 3.5s ease-in-out infinite
}

.lj-chat-empty h2 {
  margin: 7px 0 8px;
  font: var(--weight-bold) 34px/1 var(--font-heading);
  color: var(--color-title)
}

.lj-chat-empty p {
  max-width: 440px;
  margin: 0;
  color: var(--color-text);
  font-size: var(--main-font-size);
  line-height: 1.75
}

@keyframes ljChatFloat {
  50% {
    transform: translateY(-7px) rotate(3deg)
  }
}

.lj-chat-thread {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto
}

.lj-chat-thread[hidden] {
  display: none !important
}

.lj-chat-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 7px 18px rgba(1, 52, 130, .03);
  z-index: 3
}

.lj-chat-thread-person {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0
}

.lj-chat-thread-person .lj-chat-avatar-wrap {
  width: 43px;
  height: 43px;
  flex-basis: 43px
}

.lj-chat-thread-person strong {
  display: block;
  color: var(--color-title);
  font-size: 13px
}

.lj-chat-thread-person small {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 10px
}

.lj-chat-thread-person small.is-online {
  color: var(--color-success)
}

.lj-chat-remove-conversation,
.lj-chat-mobile-open,
.lj-chat-mobile-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-chat-remove-conversation:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-chat-mobile-open,
.lj-chat-mobile-close {
  display: none
}

.lj-chat-messages {
  overflow: auto;
  padding: 22px 22px 12px;
  scroll-behavior: smooth;
  background-image: radial-gradient(rgba(31, 158, 252, .11) .7px, transparent .7px);
  background-size: 18px 18px
}

.lj-chat-day {
  display: flex;
  justify-content: center;
  margin: 10px 0 16px
}

.lj-chat-day span {
  padding: 6px 10px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase
}

.lj-chat-row {
  display: flex;
  margin: 7px 0
}

.lj-chat-row.is-mine {
  justify-content: flex-end
}

.lj-chat-bubble {
  position: relative;
  max-width: min(74%, 660px);
  padding: 10px 12px 7px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 5px 14px rgba(1, 52, 130, .045)
}

.lj-chat-row.is-mine .lj-chat-bubble {
  background: linear-gradient(135deg, var(--color-primary-soft), #F6FBFD);
  border-color: rgba(7, 104, 207, .18)
}

.lj-chat-row.is-mine.is-read .lj-chat-bubble {
  background: linear-gradient(135deg, #F6FBFD, var(--color-white));
  border-color: rgba(31, 158, 252, .45)
}

.lj-chat-bubble p {
  margin: 0;
  color: var(--color-title);
  font-size: 12px;
  line-height: 1.58;
  white-space: pre-wrap;
  word-break: break-word
}

.lj-chat-message-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--color-muted);
  font-size: 8px
}

.lj-chat-message-meta .is-read {
  color: var(--color-secondary-dark)
}

.lj-chat-message-meta .is-unread {
  color: var(--color-primary)
}

.lj-chat-edited {
  font-style: italic
}

.lj-chat-deleted {
  color: var(--color-muted) !important;
  font-style: italic
}

.lj-chat-reply-quote {
  margin-bottom: 8px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, .65);
  border-left: 3px solid var(--color-secondary);
  font-size: 9px;
  color: var(--color-muted)
}

.lj-chat-reply-quote strong {
  display: block;
  color: var(--color-primary);
  margin-bottom: 2px
}

.lj-chat-message-actions {
  position: absolute;
  top: -12px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: var(--transition-fast)
}

.lj-chat-bubble:hover .lj-chat-message-actions {
  opacity: 1;
  transform: none
}

.lj-chat-message-actions button {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer
}

.lj-chat-message-actions button:hover {
  color: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-chat-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 8px
}

.lj-chat-media-grid:has(:only-child) {
  grid-template-columns: 1fr
}

.lj-chat-media {
  display: block;
  width: 100%;
  max-height: 290px;
  object-fit: cover;
  background: var(--color-dark);
  cursor: pointer
}

.lj-chat-media-grid video {
  cursor: default
}

.lj-chat-media-grid video[controls] {
  max-height: 290px
}

.lj-chat-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: var(--color-off-white);
  border-top: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary)
}

.lj-chat-reply-preview[hidden] {
  display: none !important
}

.lj-chat-reply-preview small {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 9px;
  text-transform: uppercase
}

.lj-chat-reply-preview strong {
  font-size: 11px;
  color: var(--color-title)
}

.lj-chat-reply-preview p {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--color-muted);
  max-width: 550px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lj-chat-reply-preview button {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer
}

.lj-chat-media-preview {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border)
}

.lj-chat-media-preview[hidden] {
  display: none !important
}

.lj-chat-media-preview-item {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border: 1px solid var(--color-border);
  background: var(--color-off-white)
}

.lj-chat-media-preview-item img,
.lj-chat-media-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-chat-media-preview-item button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--color-primary);
  color: #FFFFFF;
  cursor: pointer
}

.lj-chat-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
  padding: 12px 14px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border)
}

.lj-chat-attach {
  position: relative;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  color: var(--color-secondary-dark);
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-chat-attach:hover {
  color: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-chat-attach input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer
}

.lj-chat-input-wrap {
  min-height: 43px;
  display: flex;
  align-items: center;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  transition: var(--transition-fast)
}

.lj-chat-input-wrap:focus-within {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary)
}

.lj-chat-input-wrap textarea {
  width: 100%;
  max-height: 130px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 11px 13px;
  color: var(--color-title);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5
}

.lj-chat-send {
  width: 46px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(7, 104, 207, .16);
  transition: var(--transition-fast)
}

.lj-chat-send:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-tertiary))
}

.lj-chat-send:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none
}

.lj-chat-viewer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 25px;
  background: rgba(1, 52, 130, .88);
  backdrop-filter: blur(7px)
}

.lj-chat-viewer[hidden] {
  display: none !important
}

.lj-chat-viewer img,
.lj-chat-viewer video {
  max-width: min(100%, 1050px);
  max-height: 88dvh;
  object-fit: contain
}

.lj-chat-viewer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer
}

.lj-chat-viewer-close:hover {
  background: var(--color-primary)
}

@media(max-width:991.98px) {
  .lj-chat-app {
    grid-template-columns: 300px minmax(0, 1fr);
    height: calc(100dvh - 120px);
    min-height: 560px
  }
  .lj-chat-bubble {
    max-width: 82%
  }
}

@media(max-width:767.98px) {
  .lj-chat-app {
    position: relative;
    display: block;
    height: calc(100dvh - var(--mobile-bottom-height) - 85px);
    min-height: 520px;
    border-left: 0;
    border-right: 0
  }
  .lj-chat-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 20;
    width: min(88vw, 340px);
    transform: translateX(-102%);
    box-shadow: 20px 0 50px rgba(1, 52, 130, .16);
    transition: transform .28s ease
  }
  .lj-chat-sidebar.is-open {
    transform: none
  }
  .lj-chat-mobile-open,
  .lj-chat-mobile-close {
    display: grid
  }
  .lj-chat-main,
  .lj-chat-thread {
    height: 100%
  }
  .lj-chat-messages {
    padding: 17px 11px 10px
  }
  .lj-chat-bubble {
    max-width: 88%;
    padding: 9px 10px 6px
  }
  .lj-chat-composer {
    padding: 9px 8px
  }
  .lj-chat-input-wrap textarea {
    font-size: 16px
  }
  .lj-chat-message-actions {
    opacity: 1;
    top: -10px
  }
  .lj-chat-thread-head {
    padding: 10px 11px
  }
}

@media(max-width:420px) {
  .lj-chat-bubble {
    max-width: 92%
  }
  .lj-chat-media-grid {
    grid-template-columns: 1fr
  }
  .lj-chat-conversation-list {
    padding-left: 7px;
    padding-right: 7px
  }
  .lj-chat-sidebar-head {
    padding: 20px 16px 15px
  }
  .lj-chat-search {
    margin: 12px 12px 10px
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-chat-app * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }
}

p {
  font-size: var(--main-font-size) !important;
}

.r {
  padding-right: 4px;
}

.lj-trending-card-kicker {
  display: none;
}

button,
input,
select,
textarea,
a,
li,
p,
span {
  font-family: var(--font-body);
}

.lj-price {
  font-weight: 700;
}

.lj-meta,
.lj-caption {
  font-weight: 400;
}

button,
input,
select,
textarea {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
}

button {
  border: 0;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  opacity: 0;
  visibility: hidden;
  background: rgba(1, 52, 130, .58);
  backdrop-filter: blur(5px);
  transition: var(--transition-normal);
}

.site-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lj-header {
  position: relative;
  z-index: 1200;
  background: var(--color-white);
}

/* Topbar */

.lj-topbar {
  color: var(--color-white);
  background: var(--topbar-background);
}

.lj-topbar-inner {
  min-height: 43px;
  max-width: 1360px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px 36px;
  align-items: center;
  margin: auto;
}

.lj-topbar-nav,
.lj-topbar-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-topbar-nav:hover,
.lj-topbar-close:hover {
  background: rgba(255, 255, 255, .13);
}

.lj-topbar-nav i,
.lj-topbar-close i {
  font-size: 22px;
}

.lj-topbar-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--main-font-size);
  font-weight: var(--weight-light);
  letter-spacing: .02em;
}

.lj-topbar-label {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--color-dark);
  background: var(--color-secondary);
  border-radius: var(--radius-xs);
  font-weight: var(--weight-semibold);
}

.lj-topbar-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lj-topbar-readmore {
  display: none;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, .13);
  border-radius: var(--radius-round);
  cursor: pointer;
}

/* Main header */

.lj-main-header {
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .97);
}

.lj-main-header-grid {
  min-height: 74px;
  display: grid;
  grid-template-columns: 185px 118px minmax(440px, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.lj-mobile-left,
.lj-mobile-language {
  display: none;
}

.lj-logo {
  display: flex;
  align-items: center;
}

.lj-logo img {
  width: 170px;
  max-height: 62px;
  object-fit: contain;
}

.lj-dropdown-wrap {
  position: relative;
}

.lj-country-button {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: var(--color-title);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.lj-country-button img,
.lj-icon-button img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.lj-country-button span {
  font-size: var(--main-font-size);
  font-weight: var(--weight-medium);
}

/* Search */

.lj-search-form {
  min-width: 0;
  width: 100%;
  height: 50px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 112px;
  align-items: center;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 28px rgba(1, 52, 130, .05);
}

.lj-search-category {
  height: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.lj-search-category-image {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: var(--radius-round);
}

.lj-search-category select {
  min-width: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  border: 0;
  outline: 0;
  color: var(--color-title);
  background: transparent;
  font-size: var(--main-font-size);
  font-weight: var(--weight-medium);
}

.lj-search-form>input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  border: 0;
  outline: 0;
  color: var(--color-title);
  background: var(--color-white);
  font-size: 13px;
}

.lj-search-submit {
  height: calc(100% - 8px);
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  transition: var(--transition-fast);
}

.lj-search-submit:hover {
  transform: translateX(-2px);
}

/* Header actions */

.lj-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lj-icon-button,
.lj-avatar-button {
  position: relative;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  color: var(--color-title);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-icon-button:hover,
.lj-avatar-button:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.lj-icon-button i {
  font-size: 20px;
}

.lj-notification-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-round);
}

.lj-avatar-button {
  padding: 3px;
  border-radius: var(--radius-none);
}

.lj-avatar-button img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: var(--radius-none);
}

/* Dropdowns */

.lj-dropdown {
  position: absolute;
  z-index: 1500;
  top: calc(100% + 14px);
  right: 0;
  min-width: 230px;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  transform: translateY(8px);
  transition: var(--transition-normal);
}

.lj-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lj-dropdown-title,
.lj-dropdown-header {
  padding: 5px 6px 11px;
  color: var(--color-title);
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.lj-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lj-dropdown-header a {
  color: var(--color-primary);
  font-size: 10px;
}

.lj-country-dropdown {
  left: 0;
  right: auto;
  width: 286px;
}

.lj-dropdown-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-dropdown-search input {
  width: 100%;
  height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.lj-country-scroll {
  max-height: 350px;
  overflow-y: auto;
}

.lj-country-list {
  margin-top: 8px;
}

.lj-country-list button,
.lj-language-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-size: var(--main-font-size);
}

.lj-country-list button:hover,
.lj-language-dropdown button:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lj-country-list img,
.lj-language-dropdown img {
  width: 23px;
  height: 16px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.lj-notification-dropdown {
  width: 330px;
}

.lj-notification-item {
  display: flex;
  gap: 10px;
  padding: 12px 6px;
  border-top: 1px solid var(--color-border);
}

.lj-notification-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
}

.lj-notification-item strong {
  display: block;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.lj-notification-item small {
  color: var(--color-muted);
  font-size: 10px;
}

.lj-profile-dropdown {
  min-width: 180px;
}

.lj-profile-dropdown a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.lj-profile-dropdown a:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Bottom header */

.lj-bottom-header {
  border-bottom: 1px solid var(--color-border);
}

.lj-bottom-header-grid {
  height: 48px;
  display: grid;
  grid-template-columns: 215px 1px minmax(140px, 1fr) 1px auto;
  align-items: center;
  gap: 18px;
}

.lj-bottom-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

/* =========================================================
   LINJUST CATEGORY NAVIGATION
   CATEGORY -> SUBCATEGORY -> SUB-SUBCATEGORY
========================================================= */

/* =========================================================
   ROOT WRAPPER
========================================================= */

.lj-category-menu-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9990;
}

/* =========================================================
   MAIN CATEGORY TOGGLE
========================================================= */

.lj-category-menu-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 0;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--main-font-size);
  font-weight: var(--weight-semibold);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast);
}

.lj-category-menu-toggle:hover {
  color: var(--color-primary);
}

.lj-category-menu-toggle>i:first-child {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 20px;
}

.lj-category-menu-toggle>span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lj-category-menu-toggle>i:last-child {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--color-title);
  font-size: 16px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* =========================================================
   OPEN TOGGLE
========================================================= */

.lj-category-menu-toggle[ aria-expanded="true"]>i:last-child {
  color: var(--color-primary);
  transform: rotate(180deg);
}

/* =========================================================
   MAIN MEGA MENU
========================================================= */

.lj-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  margin: 0;
  padding: 10px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-medium);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transform-origin: top left;
  overflow: visible;
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
  z-index: 9999;
}

/* =========================================================
   MAIN CATEGORY LIST
========================================================= */

.lj-main-category-list {
  position: relative;
  display: block;
  width: 100%;
  max-height: calc( 100vh - 145px);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* =========================================================
   CATEGORY ITEMS
========================================================= */

.lj-category-item,
.lj-subcategory-item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   ALL LINKS
========================================================= */

.lj-category-item>a,
.lj-subcategory-menu>a,
.lj-subcategory-item>a,
.lj-subsubcategory-menu>a {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 8px 10px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  outline: 0;
  font-family: var(--font-body);
  font-size: var(--main-font-size);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast), background var(--transition-fast);
}

/* =========================================================
   LINKS WITHOUT CHILDREN
========================================================= */

.lj-subcategory-menu>a,
.lj-subsubcategory-menu>a {
  grid-template-columns: 34px minmax(0, 1fr);
}

/* =========================================================
   TEXT
========================================================= */

.lj-category-item>a>span:not(.lj-category-main-icon),
.lj-subcategory-menu>a>span:not(.lj-category-nav-icon),
.lj-subcategory-item>a>span:not(.lj-category-nav-icon),
.lj-subsubcategory-menu>a>span:not(.lj-category-nav-icon) {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================================
   MAIN CATEGORY IMAGE
========================================================= */

.lj-category-item>a>img {
  display: block;
  width: 29px;
  height: 29px;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

/* =========================================================
   CATEGORY ICONS
========================================================= */

.lj-category-main-icon,
.lj-category-nav-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 15px;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.lj-category-nav-icon.is-small {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  font-size: 14px;
}

/* =========================================================
   CATEGORY ARROWS
========================================================= */

.lj-category-item>a>.bx-chevron-right,
.lj-category-arrow {
  justify-self: end;
  color: var(--color-muted);
  font-size: 18px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:992px) {
  /* =====================================================
       MAIN MENU OPEN
    ====================================================== */
  .lj-category-menu-wrap:hover>.lj-mega-menu,
  .lj-category-menu-wrap.is-open>.lj-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  /* =====================================================
       LINK HOVER
    ====================================================== */
  .lj-category-item:hover>a,
  .lj-category-item.is-desktop-open>a,
  .lj-subcategory-menu>a:hover,
  .lj-subcategory-item:hover>a,
  .lj-subcategory-item.is-desktop-open>a,
  .lj-subsubcategory-menu>a:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
  }
  /* =====================================================
       ICON HOVER
    ====================================================== */
  .lj-category-item:hover>a>.lj-category-main-icon,
  .lj-category-item.is-desktop-open>a>.lj-category-main-icon,
  .lj-subcategory-item:hover>a>.lj-category-nav-icon,
  .lj-subcategory-item.is-desktop-open>a>.lj-category-nav-icon {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
  /* =====================================================
       ARROW HOVER
    ====================================================== */
  .lj-category-item:hover>a>.bx-chevron-right,
  .lj-category-item.is-desktop-open>a>.bx-chevron-right,
  .lj-subcategory-item:hover>a>.lj-category-arrow,
  .lj-subcategory-item.is-desktop-open>a>.lj-category-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
  }
  /* =====================================================
       SECOND LEVEL
    ====================================================== */
  .lj-subcategory-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    max-height: calc( 100vh - 16px);
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity .12s ease, visibility .12s ease;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    z-index: 10000;
  }
  /* =====================================================
       OPEN SECOND LEVEL
    ====================================================== */
  .lj-category-item:hover>.lj-subcategory-menu,
  .lj-category-item.is-desktop-open>.lj-subcategory-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* =====================================================
       THIRD LEVEL
    ====================================================== */
  .lj-subsubcategory-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    max-height: calc( 100vh - 16px);
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity .12s ease, visibility .12s ease;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    z-index: 10001;
  }
  /* =====================================================
       OPEN THIRD LEVEL
    ====================================================== */
  .lj-subcategory-item:hover>.lj-subsubcategory-menu,
  .lj-subcategory-item.is-desktop-open>.lj-subsubcategory-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* =========================================================
   SCROLLBARS
========================================================= */

.lj-main-category-list::-webkit-scrollbar,
.lj-subcategory-menu::-webkit-scrollbar,
.lj-subsubcategory-menu::-webkit-scrollbar {
  width: 5px;
  height: 0;
}

.lj-main-category-list::-webkit-scrollbar-track,
.lj-subcategory-menu::-webkit-scrollbar-track,
.lj-subsubcategory-menu::-webkit-scrollbar-track {
  background: transparent;
}

.lj-main-category-list::-webkit-scrollbar-thumb,
.lj-subcategory-menu::-webkit-scrollbar-thumb,
.lj-subsubcategory-menu::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.lj-main-category-list::-webkit-scrollbar-thumb:hover,
.lj-subcategory-menu::-webkit-scrollbar-thumb:hover,
.lj-subsubcategory-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-muted);
}

/* =========================================================
   EMPTY CATEGORY
========================================================= */

.lj-category-navigation-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 110px;
  padding: 20px;
  color: var(--color-muted);
  text-align: center;
}

/* =========================================================
   SMALL DESKTOP
========================================================= */

@media( min-width:992px) and ( max-width:1199.98px) {
  .lj-mega-menu {
    width: 270px;
  }
  .lj-subcategory-menu {
    width: 240px;
  }
  .lj-subsubcategory-menu {
    width: 230px;
  }
}

/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width:991.98px) {
  /* =====================================================
       WRAPPER
    ====================================================== */
  .lj-category-menu-wrap {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  /* =====================================================
       BUTTON
    ====================================================== */
  .lj-category-menu-toggle {
    position: relative;
    min-height: 48px;
    z-index: 20;
  }
  /* =====================================================
       MAIN MENU
       CLOSED BY DEFAULT
    ====================================================== */
  #ljMegaMenu.lj-mega-menu {
    display: none !important;
    /*
         * JavaScript calculates top/left/width.
         *
         * Using fixed makes this independent of the
         * header's overflow and dimensions.
         */
    position: fixed !important;
    top: 0;
    left: 0;
    width: auto;
    min-width: 260px;
    max-width: calc( 100vw - 20px);
    max-height: calc( 100dvh - 20px);
    margin: 0 !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(5px) !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 20px 60px rgba(1, 52, 130, .22) !important;
    z-index: 2147483000 !important;
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease !important;
  }
  /* =====================================================
       MAIN MENU OPEN
    ====================================================== */
  #ljMegaMenu.lj-mega-menu.is-mobile-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  /* =====================================================
       MAIN LIST
    ====================================================== */
  #ljMegaMenu .lj-main-category-list {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: var(--color-white);
    border: 0;
    list-style: none;
  }
  /* =====================================================
       SECOND & THIRD LEVEL
       CLOSED BY DEFAULT
    ====================================================== */
  #ljMegaMenu .lj-subcategory-menu,
  #ljMegaMenu .lj-subsubcategory-menu {
    display: none !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  #ljMegaMenu .lj-subcategory-menu {
    background: var(--color-off-white) !important;
  }
  #ljMegaMenu .lj-subsubcategory-menu {
    background: var(--color-surface) !important;
  }
  /* =====================================================
       OPEN SECOND LEVEL
    ====================================================== */
  #ljMegaMenu .lj-category-item.is-mobile-open>.lj-subcategory-menu {
    display: block !important;
  }
  /* =====================================================
       OPEN THIRD LEVEL
    ====================================================== */
  #ljMegaMenu .lj-subcategory-item.is-mobile-open>.lj-subsubcategory-menu {
    display: block !important;
  }
  /* =====================================================
       MOBILE LINKS
    ====================================================== */
  #ljMegaMenu .lj-category-item>a,
  #ljMegaMenu .lj-subcategory-menu>a,
  #ljMegaMenu .lj-subcategory-item>a,
  #ljMegaMenu .lj-subsubcategory-menu>a {
    min-height: 50px;
  }
  /* =====================================================
       SECOND LEVEL BACKGROUND
    ====================================================== */
  #ljMegaMenu .lj-subcategory-menu>a,
  #ljMegaMenu .lj-subcategory-item>a {
    padding-left: 18px;
    background: var(--color-off-white);
  }
  /* =====================================================
       THIRD LEVEL BACKGROUND
    ====================================================== */
  #ljMegaMenu .lj-subsubcategory-menu>a {
    padding-left: 30px;
    background: var(--color-surface);
  }
  /* =====================================================
       ACTIVE PARENT
    ====================================================== */
  #ljMegaMenu .lj-category-item.is-mobile-open>a,
  #ljMegaMenu .lj-subcategory-item.is-mobile-open>a {
    color: var(--color-primary);
    background: var(--color-primary-soft);
  }
  /* =====================================================
       ACTIVE ICON
    ====================================================== */
  #ljMegaMenu .lj-category-item.is-mobile-open>a>.lj-category-main-icon,
  #ljMegaMenu .lj-subcategory-item.is-mobile-open>a>.lj-category-nav-icon {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
  /* =====================================================
       ACTIVE ARROW
    ====================================================== */
  #ljMegaMenu .lj-category-item.is-mobile-open>a>.bx-chevron-right,
  #ljMegaMenu .lj-subcategory-item.is-mobile-open>a>.lj-category-arrow {
    color: var(--color-primary);
    transform: rotate(90deg);
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:575.98px) {
  .lj-category-menu-toggle {
    min-height: 46px;
  }
  .lj-category-menu-toggle>i:first-child {
    font-size: 18px;
  }
  #ljMegaMenu .lj-category-item>a,
  #ljMegaMenu .lj-subcategory-menu>a,
  #ljMegaMenu .lj-subcategory-item>a,
  #ljMegaMenu .lj-subsubcategory-menu>a {
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    gap: 7px;
    min-height: 48px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: var(--main-font-size-2);
  }
  #ljMegaMenu .lj-subcategory-menu>a,
  #ljMegaMenu .lj-subcategory-item>a {
    padding-left: 16px;
  }
  #ljMegaMenu .lj-subsubcategory-menu>a {
    padding-left: 27px;
  }
  .lj-category-main-icon,
  .lj-category-nav-icon {
    width: 27px;
    height: 27px;
    font-size: 13px;
  }
}

.lj-header-links-swiper {
  width: 100%;
}

.lj-header-links-swiper .swiper-slide {
  width: auto;
}

.lj-header-links-swiper a {
  color: var(--color-title);
  font-size: var(--main-font-size);
  font-weight: var(--weight-regular);
}

.lj-special-header-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lj-special-header-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-title);
  white-space: nowrap;
  font-size: var(--main-font-size);
  font-weight: var(--weight-medium);
}

.lj-special-header-links i {
  color: var(--color-primary);
  font-size: 16px;
}

/* Mobile search popover */

.lj-mobile-search-popover {
  position: fixed;
  z-index: 1600;
  top: 112px;
  left: 14px;
  right: 14px;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-large);
  transform: translateY(-10px);
  transition: var(--transition-normal);
}

.lj-mobile-search-popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lj-mobile-search-pointer {
  position: absolute;
  top: -8px;
  left: 20px;
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  transform: rotate(45deg);
}

.lj-mobile-search-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--color-title);
  cursor: pointer;
}

.lj-mobile-search-popover label {
  display: block;
  margin: 12px 0 7px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.lj-mobile-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-mobile-search-field input,
.lj-mobile-search-field select {
  width: 100%;
  height: 40px;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}

.lj-mobile-search-submit {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

/* Login modal */

.lj-login-modal {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  background: rgba(1, 52, 130, .65);
  backdrop-filter: blur(6px);
  transition: var(--transition-normal);
}

.lj-login-modal.open {
  opacity: 1;
  visibility: visible;
}

.lj-login-panel {
  position: relative;
  width: min(100%, 560px);
  padding: 30px;
  background: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-large);
  transform: translateY(36px);
  transition: var(--transition-normal);
}

.lj-login-modal.open .lj-login-panel {
  transform: translateY(0);
}

.lj-login-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--color-title);
  background: var(--color-surface);
  border-radius: var(--radius-round);
  cursor: pointer;
}

.lj-login-brand {
  text-align: center;
}

.lj-login-brand img {
  width: 150px;
  max-height: 56px;
  margin: 0 auto 15px;
  object-fit: contain;
}

.lj-login-brand h2 {
  font-family: var(--font-heading);
  font-size: 35px;
  font-weight: var(--weight-bold);
}

.lj-login-brand p {
  max-width: 420px;
  margin: 8px auto 0;
  font-size: 12px;
  line-height: 1.7;
}

.lj-login-form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.lj-login-input {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.lj-login-input>i {
  color: var(--color-primary);
}

.lj-login-input input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.lj-password-toggle {
  cursor: pointer;
}

.lj-login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.lj-login-options a,
.lj-register-text a {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.lj-login-submit {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.lj-register-text {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
}

.lj-login-divider {
  position: relative;
  margin: 20px 0;
  text-align: center;
}

.lj-login-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}

.lj-login-divider span {
  position: relative;
  padding: 0 10px;
  background: var(--color-white);
  font-size: 10px;
}

.lj-social-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lj-social-login button {
  height: 42px;
  color: var(--color-title);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
}

.lj-social-login button:hover {
  border-color: var(--color-primary);
}

.lj-footer {
  color: rgba(255, 255, 255, .69);
  background: var(--footer-background);
}

.lj-footer-main {
  padding: 34px 0 26px;
}

.lj-footer-column {
  position: relative;
}

.lj-footer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  color: var(--color-white);
  cursor: default;
  text-align: left;
}

.lj-footer-toggle>span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: var(--weight-semibold);
}

.lj-footer-toggle>span>i {
  color: var(--color-secondary);
  font-size: 15px;
}

.lj-footer-plus {
  display: none;
}

.lj-footer-contact-list {
  display: grid;
  gap: 15px;
}

.lj-footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lj-footer-contact-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  color: var(--color-secondary);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-round);
}

.lj-footer-contact-list small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .38);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lj-footer-contact-list a,
.lj-footer-contact-list div>span {
  color: rgba(255, 255, 255, .75);
  font-size: var(--main-font-size);
}

.lj-footer-country-flags {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.lj-footer-country-flags img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-round);
}

.lj-footer-links {
  display: grid;
  gap: var(--main-font-size);
}

.lj-footer-links a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--main-font-size);
  transition: var(--transition-fast);
}

.lj-footer-links i {
  color: var(--color-secondary);
}

.lj-footer-links a:hover {
  padding-left: 5px;
  color: var(--color-secondary);
}

.lj-footer-newsletter-text {
  max-width: 320px;
  font-size: 14px;
  line-height: 1.8;
}

.lj-footer-newsletter-form {
  display: grid;
  grid-template-columns: 1fr 44px;
  margin-top: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-pill);
}

.lj-footer-newsletter-form>div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 14px;
}

.lj-footer-newsletter-form input {
  width: 100%;
  height: 46px;
  color: var(--color-white);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px;
}

.lj-footer-newsletter-form button {
  margin: 4px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-round);
  cursor: pointer;
}

.lj-footer-socials {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.lj-footer-socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius-round);
  transition: var(--transition-fast);
}

.lj-footer-socials a:hover {
  color: var(--color-white);
  background: var(--color-primary);
  transform: translateY(-3px);
}

.lj-footer-bottom {
  padding: 18px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.lj-footer-bottom p {
  margin: 0;
  font-size: var(--main-font-size);
}

.lj-footer-bottom a {
  color: var(--color-secondary);
}

/* Mobile bottom navigation */

.lj-mobile-bottom-nav {
  display: none;
}

@media(max-width:1200px) {
  .lj-main-header-grid {
    grid-template-columns: 150px 105px minmax(330px, 1fr) auto;
    gap: 11px;
  }
  .lj-logo img {
    width: 140px;
  }
  .lj-search-form {
    grid-template-columns: 160px minmax(0, 1fr) 96px;
  }
  .lj-bottom-header-grid {
    grid-template-columns: 190px 1px minmax(120px, 1fr) 1px auto;
    gap: 12px;
  }
}

@media(max-width:991.98px) {
  body {
    padding-bottom: var(--mobile-bottom-height);
  }
  .lj-topbar-inner {
    grid-template-columns: 28px minmax(0, 1fr) 28px 30px;
  }
  .lj-topbar-item {
    justify-content: flex-start;
    font-size: 10px;
  }
  .lj-topbar-label {
    display: none;
  }
  .lj-topbar-text {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .lj-topbar-text.expanded {
    -webkit-line-clamp: unset;
  }
  .lj-topbar-readmore {
    display: grid;
  }
  .lj-main-header-grid {
    min-height: 30px;
    grid-template-columns: 1fr auto 1fr;
    gap: 7px;
  }
  .lj-logo {
    justify-content: center;
  }
  .lj-logo img {
    width: 126px;
    max-height: 48px;
  }
  .lj-desktop-country,
  .lj-search-form,
  .lj-desktop-action {
    display: none;
  }
  .lj-mobile-left {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .lj-mobile-left .lj-icon-button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
  }
  .lj-mobile-left .lj-icon-button i {
    font-size: 18px;
  }
  .lj-header-actions {
    justify-content: flex-end;
    gap: 2px;
  }
  .lj-header-actions .lj-icon-button,
  .lj-avatar-button {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
  }
  .lj-mobile-language {
    display: block;
  }
  .lj-bottom-header-grid {
    height: 44px;
    grid-template-columns: 145px 1px minmax(80px, 1fr) 1px auto;
    gap: 8px;
  }
  .lj-category-menu-toggle {
    font-size: 10px;
  }
  .lj-category-menu-toggle i {
    font-size: 17px;
  }
  .lj-header-links-swiper a,
  .lj-special-header-links a {
    font-size: 9px;
  }
  .lj-special-header-links {
    gap: 8px;
  }
  .lj-special-header-links i {
    font-size: 13px;
  }
  .lj-mega-menu {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 65vh;
    overflow-y: auto;
  }
  .lj-subcategory-menu,
  .lj-subsubcategory-menu {
    position: static;
    width: auto;
    min-height: 0;
    display: none;
    margin: 0 8px;
    padding: 0 0 0 14px;
    opacity: 1;
    visibility: visible;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: var(--radius-none);
    box-shadow: none;
    transform: none;
  }
  .lj-category-item.open>.lj-subcategory-menu,
  .lj-subcategory-item.open>.lj-subsubcategory-menu {
    display: block;
  }
  .lj-footer-main {
    padding: 30px 0 15px;
  }
  .lj-footer-column {
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .lj-footer-toggle {
    margin: 0;
    padding: 17px 0;
    cursor: pointer;
  }
  .lj-footer-toggle>span {
    font-size: 21px;
  }
  .lj-footer-plus {
    display: block;
    font-size: 21px;
    transition: var(--transition-fast);
  }
  .lj-footer-content {
    display: none;
    padding: 0 0 20px;
  }
  .lj-footer-column.open .lj-footer-plus {
    transform: rotate(45deg);
  }
  .lj-mobile-bottom-nav {
    position: fixed;
    z-index: 1500;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mobile-bottom-height);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    padding: 8px 8px 7px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 30px rgba(1, 52, 130, .10);
  }
  .lj-mobile-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    color: #0768CF;
    font-size: 9px;
    font-weight: var(--weight-medium);
  }
  .lj-mobile-nav-item>i {
    font-size: 23px;
  }
  .lj-mobile-nav-item.active {
    color: var(--color-primary);
  }
  .lj-mobile-sell-item {
    padding-top: 31px;
  }
  .lj-mobile-sell-circle {
    position: absolute;
    top: -35px;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    color: var(--color-white);
    background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
    border: 6px solid var(--color-white);
    border-radius: var(--radius-round);
    box-shadow: 0 10px 24px rgba(7, 104, 207, .28);
  }
  .lj-mobile-sell-circle i {
    font-size: 30px;
  }
}

@media(max-width:767.98px) {
  .lj-bottom-header-grid {
    grid-template-columns: 135px 1px minmax(65px, 1fr) 1px auto;
    gap: 6px;
  }
  .lj-special-header-links a {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .lj-login-modal {
    padding: 0;
  }
  .lj-login-panel {
    padding: 27px 20px 24px;
  }
}

@media(max-width:575.98px) {
  .lj-topbar-nav {
    display: none;
  }
  .lj-topbar-inner {
    grid-template-columns: minmax(0, 1fr) 30px;
  }
  .lj-topbar-item {
    padding-left: 5px;
  }
  .lj-main-header-grid {
    gap: 2px;
  }
  .lj-logo img {
    width: 112px;
  }
  .lj-mobile-left .lj-icon-button,
  .lj-header-actions .lj-icon-button,
  .lj-avatar-button {
    width: 27px;
    height: 27px;
  }
  .lj-icon-button img {
    width: 18px;
    height: 13px;
  }
  .lj-avatar-button img {
    width: 25px;
    height: 25px;
  }
  .lj-bottom-header-grid {
    grid-template-columns: 105px 1px minmax(45px, 1fr) 1px 65px;
  }
  .lj-special-header-links {
    gap: 5px;
  }
  .lj-special-header-links a {
    max-width: 68px;
    font-size: 8px;
  }
  .lj-social-login {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   DEFINITIVE COMPONENT FIXES
   These rules replace conflicting legacy mobile behavior.
========================================================= */

/* =========================================================
   TOP ANNOUNCEMENT BAR
========================================================= */

.lj-topbar {
  position: relative;
  z-index: 1310;
  overflow: hidden;
}

.lj-topbar-inner {
  width: 100%;
  min-width: 0;
}

.lj-topbar-swiper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.lj-topbar-swiper .swiper-wrapper {
  align-items: center;
}

.lj-topbar-swiper .swiper-slide {
  width: 100%;
  min-width: 0;
  height: auto;
}

.lj-topbar-item {
  width: 100%;
  min-width: 0;
}

/* Read more/read less is intentionally removed. */

.lj-topbar-readmore {
  display: none !important;
}

.lj-topbar-close {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* =========================================================
   HEADER AND ALL-CATEGORIES MENU
========================================================= */

.lj-header,
.lj-main-header,
.lj-bottom-header {
  overflow: visible;
}

.lj-bottom-header {
  position: relative;
  z-index: 1280;
  background: var(--color-white);
}

.lj-bottom-header .container-fluid,
.lj-bottom-header-grid,
.lj-category-menu-wrap {
  overflow: visible;
}

.lj-category-menu-wrap {
  z-index: 20;
}

.lj-mega-menu {
  z-index: 2050;
}

/* =========================================================
   RESPONSIVE LOGIN MODAL
========================================================= */

.lj-login-modal {
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  pointer-events: none;
}

.lj-login-modal.open {
  pointer-events: auto;
}

.lj-login-panel {
  width: min(100%, 440px);
  max-height: calc(100dvh - 32px);
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 2px solid transparent;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--topbar-background) border-box;
  border-radius: 6px;
  transform: translateY(18px);
}

.lj-login-modal.open .lj-login-panel {
  transform: translateY(0);
}

.lj-login-brand img {
  width: 118px;
  max-height: 44px;
  margin-bottom: 9px;
}

.lj-login-brand h2 {
  margin: 0;
  font-size: 29px;
  line-height: 1.05;
}

.lj-login-brand p {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.55;
}

.lj-login-form {
  gap: 9px;
  margin-top: 15px;
}

.lj-login-input {
  min-height: 45px;
  height: auto;
}

.lj-login-input input {
  min-width: 0;
  height: 45px;
}

.lj-login-submit {
  min-height: 45px;
  height: auto;
}

.lj-login-options {
  gap: 8px;
  font-size: 12px;
}

.lj-register-text {
  margin-top: 11px;
}

.lj-login-divider {
  margin: 13px 0;
}

.lj-social-login button {
  min-height: 39px;
  height: auto;
}

/* =========================================================
   MOBILE FOOTER ACCORDION
========================================================= */

@media(max-width:991.98px) {
  .lj-footer-toggle {
    position: relative;
    z-index: 2;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .lj-footer-content {
    display: none;
    overflow: hidden;
  }
  .lj-footer-column.open>.lj-footer-content {
    display: block;
  }
  /* =====================================================
       MOBILE ALL-CATEGORIES DROPDOWN
    ===================================================== */
  .lj-category-menu-wrap {
    position: static;
  }
  .lj-category-menu-wrap:hover .lj-mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
  }
  .lj-category-menu-wrap.open .lj-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .lj-mega-menu {
    position: fixed;
    top: var(--lj-mobile-mega-top, 112px);
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100dvh - var(--lj-mobile-mega-top, 112px) - 88px);
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-large);
    -webkit-overflow-scrolling: touch;
  }
  .lj-category-item:hover>.lj-subcategory-menu,
  .lj-subcategory-item:hover>.lj-subsubcategory-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* =====================================================
       STABLE MOBILE BOTTOM NAVIGATION
    ===================================================== */
  html {
    padding-bottom: 0;
  }
  body {
    padding-bottom: calc( var(--mobile-bottom-height) + env(safe-area-inset-bottom)) !important;
  }
  body.no-scroll {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
  .lj-mobile-bottom-nav {
    position: fixed !important;
    z-index: 2200 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: calc( var(--mobile-bottom-height) + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: end !important;
    padding: 8px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
    animation: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 30px rgba(1, 52, 130, .12);
  }
  .lj-mobile-nav-item {
    min-width: 0;
    min-height: 48px;
    padding: 0 2px;
    -webkit-tap-highlight-color: transparent;
  }
  .lj-mobile-sell-circle {
    left: 50%;
    transform: translateX(-50%) !important;
  }
  /* Keep modal above the mobile navigation. */
  .lj-login-modal {
    z-index: 3100;
  }
}

/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media(max-width:575.98px) {
  .lj-topbar-inner {
    min-height: 40px;
    grid-template-columns: 26px minmax(0, 1fr) 26px 30px;
    padding: 0 2px;
  }
  .lj-topbar-nav {
    display: grid;
    width: 26px;
    height: 30px;
  }
  .lj-topbar-item {
    justify-content: center;
    padding: 0 4px;
    text-align: center;
    font-size: 9px;
  }
  .lj-topbar-text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .lj-login-modal {
    align-items: center;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .lj-login-panel {
    width: 100%;
    max-height: calc( 100dvh - 16px - env(safe-area-inset-bottom));
    padding: 18px 14px;
    border-radius: var(--radius-md);
  }
  .lj-login-close {
    top: 8px;
    right: 8px;
    width: 29px;
    height: 29px;
  }
  .lj-login-brand {
    padding: 0 26px;
  }
  .lj-login-brand img {
    width: 94px;
    max-height: 36px;
    margin-bottom: 6px;
  }
  .lj-login-brand h2 {
    font-size: 24px;
  }
  .lj-login-brand p {
    font-size: 9px;
    line-height: 1.45;
  }
  .lj-login-form {
    margin-top: 11px;
    gap: 7px;
  }
  .lj-login-input {
    min-height: 39px;
    padding: 0 10px;
  }
  .lj-login-input input {
    height: 37px;
    font-size: 11px;
  }
  .lj-login-submit {
    min-height: 39px;
  }
  .lj-login-options {
    align-items: flex-start;
    font-size: 9px;
  }
  .lj-social-login {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .lj-social-login button {
    min-height: 36px;
    font-size: 9px;
  }
}

@media(max-width:360px) {
  .lj-login-brand p {
    display: none;
  }
  .lj-login-divider {
    margin: 9px 0;
  }
  .lj-register-text {
    margin-top: 8px;
  }
}

@media(max-height:620px) and (max-width:575.98px) {
  .lj-login-panel {
    max-height: calc(100dvh - 10px);
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .lj-login-brand img {
    width: 78px;
    margin-bottom: 3px;
  }
  .lj-login-brand h2 {
    font-size: 21px;
  }
  .lj-login-brand p {
    display: none;
  }
  .lj-login-form {
    margin-top: 8px;
  }
  .lj-login-divider {
    margin: 8px 0;
  }
}

/* =========================================================
   DESKTOP-ONLY RESET
========================================================= */

@media(min-width:992px) {
  body {
    padding-bottom: 0 !important;
  }
  .lj-mobile-bottom-nav {
    display: none !important;
  }
  .lj-footer-content {
    display: block !important;
  }
}

/* =========================================================
   MOBILE COUNTRY AND NOTIFICATION DROPDOWN FIX
========================================================= */

@media(max-width:991.98px) {
  .lj-header,
  .lj-main-header,
  .lj-main-header-grid,
  .lj-mobile-left {
    overflow: visible !important;
  }
  .lj-mobile-left .lj-dropdown {
    position: fixed !important;
    top: var(--lj-mobile-dropdown-top, 72px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--lj-mobile-dropdown-top, 72px) - 82px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 2700 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
  }
  .lj-mobile-left .lj-dropdown.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  #mobileCountryDropdown .lj-country-list {
    max-height: min(55dvh, 420px);
    overflow-y: auto;
  }
  .lj-mobile-notification-dropdown .lj-dropdown-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-white);
  }
  .lj-mobile-notification-dropdown .lj-notification-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100%;
  }
  .lj-mobile-notification-dropdown .lj-notification-item strong {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media(max-width:375px) {
  .lj-mobile-left .lj-dropdown {
    left: 6px !important;
    right: 6px !important;
  }
}

/***************************HOME HERO************/

/* =========================================================
   LINJUST DYNAMIC MARKETPLACE HERO
========================================================= */

.lj-marketplace-hero {
  --hero-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --hero-dark: var( --color-title, var(--titleColor, #013482));
  --hero-white: var( --color-white, #FFFFFF);
  --hero-font-body: var( --font-body, "Inter", sans-serif);
  --hero-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
  background: #013482;
}

.lj-hero-swiper {
  width: 100%;
  height: 100%;
}

.lj-hero-swiper .swiper-wrapper {
  width: 100%;
  height: 100%;
}

.lj-hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* =========================================================
   HERO IMAGE AND VIDEO BACKGROUND
========================================================= */

.lj-hero-media {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.03);
}

.lj-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* =========================================================
   IMAGE ZOOM ANIMATION
========================================================= */

.lj-hero-slide.is-image .lj-hero-media {
  animation: ljHeroZoomOut 12s ease-in-out both;
}

.lj-hero-slide.is-image.swiper-slide-active .lj-hero-media {
  animation: ljHeroZoomIn 12s ease-in-out both;
}

@keyframes ljHeroZoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.12);
  }
}

@keyframes ljHeroZoomOut {
  0% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

/* =========================================================
   DYNAMIC OVERLAY
========================================================= */

.lj-hero-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var( --lj-hero-overlay, linear-gradient( 90deg, rgba(1, 52, 130, .90), rgba(1, 52, 130, .50), rgba(1, 52, 130, .15)));
  opacity: var( --lj-hero-overlay-opacity, 1);
  pointer-events: none;
}

/* =========================================================
   HERO CONTENT
========================================================= */

.lj-hero-container {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.lj-hero-content {
  width: min(100%, 760px);
  padding: 130px 0 100px;
  color: var(--hero-white);
}

.lj-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 17px;
  padding: 8px 13px;
  color: var(--hero-white);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 35px rgba(1, 52, 130, .14);
}

.lj-hero-eyebrow i {
  color: #4AB3FC;
  font-size: 17px;
}

.lj-hero-content h2 {
  max-width: 730px;
  margin: 0;
  color: var(--hero-white);
  font-family: var(--font-body);
  font-size: clamp(54px, 5.7vw, 92px);
  font-weight: 700;
  line-height: .91;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 12px 45px rgba(1, 52, 130, .30);
}

.lj-hero-content h2 span {
  display: block;
  color: #4AB3FC;
  font-style: italic;
}

.lj-hero-description {
  max-width: 650px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, .85);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
}

/* =========================================================
   LUXURY MARKETPLACE BUTTONS
========================================================= */

.lj-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  margin-top: 32px;
}

.lj-hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 25px;
  overflow: hidden;
  color: var(--hero-white);
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .075em;
  text-decoration: none;
  text-transform: uppercase;
  isolation: isolate;
  transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.lj-hero-btn::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: -120%;
  width: 90%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: skewX(-18deg);
  transition: left .65s ease;
}

.lj-hero-btn:hover::before {
  left: 130%;
}

.lj-hero-btn:hover {
  color: var(--hero-white);
  transform: translateY(-3px);
}

.lj-hero-btn i {
  flex: 0 0 auto;
  font-size: 19px;
  transition: transform .35s ease;
}

.lj-hero-btn:hover i {
  transform: translateX(4px);
}

.lj-hero-btn-primary {
  background: linear-gradient( 135deg, #0687F1 0%, var(--hero-primary) 46%, #013883 100%);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 16px 40px rgba(7, 104, 207, .34), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.lj-hero-btn-primary:hover {
  box-shadow: 0 20px 50px rgba(7, 104, 207, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.lj-hero-btn-outline {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 15px 35px rgba(1, 52, 130, .12);
}

.lj-hero-btn-outline:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .68);
}

/* =========================================================
   CONTENT ENTRANCE ANIMATION
========================================================= */

.lj-hero-content>* {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}

.swiper-slide-active .lj-hero-content>* {
  opacity: 1;
  transform: translateY(0);
}

.swiper-slide-active .lj-hero-content> :nth-child(1) {
  transition-delay: .12s;
}

.swiper-slide-active .lj-hero-content> :nth-child(2) {
  transition-delay: .22s;
}

.swiper-slide-active .lj-hero-content> :nth-child(3) {
  transition-delay: .32s;
}

.swiper-slide-active .lj-hero-content> :nth-child(4) {
  transition-delay: .42s;
}

/* =========================================================
   MEDIA TYPE PAGINATION
========================================================= */

.lj-hero-pagination {
  position: absolute !important;
  z-index: 20;
  right: 32px !important;
  bottom: 28px !important;
  left: auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto !important;
}

.lj-hero-pagination .swiper-pagination-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0;
  opacity: 1;
  color: rgba(255, 255, 255, .72);
  background: rgba(1, 52, 130, .35);
  border: 1px solid rgba(255, 255, 255, .23);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: width .35s ease, color .35s ease, background .35s ease, border-color .35s ease, transform .35s ease;
}

.lj-hero-pagination .swiper-pagination-bullet i {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.lj-hero-pagination .swiper-pagination-bullet-active {
  width: 54px;
  color: var(--hero-white);
  background: var(--hero-primary);
  border-color: rgba(255, 255, 255, .35);
  border-radius: 999px;
  box-shadow: 0 9px 24px rgba(7, 104, 207, .34);
}

/* =========================================================
   TABLET RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-marketplace-hero {
    min-height: 590px;
  }
  .lj-hero-content {
    width: min(100%, 690px);
  }
  .lj-hero-content h2 {
    font-size: clamp(48px, 7vw, 76px);
  }
}

/* =========================================================
   MOBILE RESPONSIVENESS
========================================================= */

@media(max-width:991.98px) {
  .lj-marketplace-hero {
    width: 100vw;
    height: 80vh;
    min-height: 570px;
    max-height: 820px;
  }
  .lj-hero-media {
    background-position: center;
  }
  .lj-hero-container {
    align-items: center;
    justify-content: center;
  }
  .lj-hero-content {
    width: min(100%, 680px);
    margin: 0 auto;
    padding: 90px 18px 100px;
    text-align: center;
  }
  .lj-hero-eyebrow {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }
  .lj-hero-content h2 {
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(43px, 8.6vw, 68px);
    line-height: .95;
  }
  .lj-hero-description {
    max-width: 590px;
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
    line-height: 1.75;
  }
  .lj-hero-buttons {
    justify-content: center;
  }
  .lj-hero-pagination {
    right: 18px !important;
    bottom: 20px !important;
  }
}

/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media(max-width:575.98px) {
  .lj-marketplace-hero {
    min-height: 540px;
  }
  .lj-hero-content {
    padding: 78px 12px 88px;
  }
  .lj-hero-eyebrow {
    max-width: 100%;
    padding: 7px 10px;
    font-size: 9px;
    letter-spacing: .09em;
  }
  .lj-hero-content h2 {
    font-size: clamp(38px, 12vw, 52px);
    line-height: .93;
  }
  .lj-hero-description {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.7;
  }
  .lj-hero-buttons {
    gap: 9px;
    margin-top: 24px;
  }
  .lj-hero-btn {
    min-height: 47px;
    padding: 0 16px;
    font-size: 9px;
    letter-spacing: .06em;
  }
  .lj-hero-btn i {
    font-size: 17px;
  }
  .lj-hero-pagination {
    right: 50% !important;
    bottom: 15px !important;
    justify-content: center;
    transform: translateX(50%);
  }
  .lj-hero-pagination .swiper-pagination-bullet {
    width: 32px;
    height: 32px;
  }
  .lj-hero-pagination .swiper-pagination-bullet-active {
    width: 46px;
  }
}

/* =========================================================
   EXTRA-SMALL DEVICES
========================================================= */

@media(max-width:370px) {
  .lj-marketplace-hero {
    min-height: 520px;
  }
  .lj-hero-content h2 {
    font-size: 36px;
  }
  .lj-hero-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .lj-hero-btn {
    width: 100%;
  }
}

/* =========================================================
   SHORT MOBILE SCREENS
========================================================= */

@media(max-height:650px) and (max-width:991.98px) {
  .lj-marketplace-hero {
    height: 88vh;
    min-height: 500px;
  }
  .lj-hero-content {
    padding-top: 65px;
    padding-bottom: 75px;
  }
  .lj-hero-description {
    margin-top: 14px;
  }
  .lj-hero-buttons {
    margin-top: 18px;
  }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-hero-slide.is-image .lj-hero-media,
  .lj-hero-slide.is-image.swiper-slide-active .lj-hero-media {
    animation: none;
    transform: scale(1);
  }
  .lj-hero-content>*,
  .lj-hero-btn,
  .lj-hero-btn::before {
    transition: none;
  }
}

/************************************SIGN UP**********************************/

/* =========================================================
   LINJUST LUXURY SIGNUP PAGE
========================================================= */

.lj-signup-section {
  --signup-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --signup-primary-dark: var( --color-primary-dark, #013883);
  --signup-title: var( --color-title, var(--titleColor, #013482));
  --signup-text: var( --color-text, var(--paraColor, #082E5C));
  --signup-white: var( --color-white, #FFFFFF);
  --signup-light: var( --color-off-white, #F6FBFD);
  --signup-border: var( --color-border, #6F8DA8);
  --signup-font-body: var( --font-body, "Inter", sans-serif);
  --signup-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  min-height: 80vh;
  overflow: hidden;
  background: var(--signup-light);
  font-family: var(--font-body);
  box-shadow: 0 12px 35px rgba(1, 52, 130, 0.08), 0 3px 12px rgba(7, 104, 207, 0.05);
}

.lj-signup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr);
  width: 100%;
  min-height: 100vh;
}

/* =========================================================
   LEFT SHOWCASE
========================================================= */

.lj-signup-showcase {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 70px clamp(40px, 6vw, 100px);
  overflow: hidden;
  color: var(--signup-white);
  background: radial-gradient( circle at 20% 20%, rgba(255, 255, 255, .16), transparent 28%), radial-gradient( circle at 80% 75%, rgba(74, 179, 252, .18), transparent 30%), linear-gradient( 135deg, #013482 0%, #013883 40%, var(--signup-primary) 72%, #0687F1 100%);
  isolation: isolate;
}

.lj-signup-showcase::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .24;
  background-image: linear-gradient( rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient( 135deg, #013482, transparent 78%);
}

.lj-signup-showcase-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient( 90deg, rgba(1, 52, 130, .15), rgba(1, 52, 130, .04));
}

.lj-signup-showcase-content {
  position: relative;
  z-index: 3;
  width: min(100%, 700px);
}

.lj-signup-showcase-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 55px;
}

.lj-signup-showcase-logo img {
  width: clamp(145px, 12vw, 205px);
  height: auto;
  filter: brightness(0) invert(1);
}

.lj-signup-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 19px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-signup-badge i {
  font-size: 16px;
  color: #4AB3FC;
}

.lj-signup-showcase h1 {
  max-width: 700px;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(55px, 5.6vw, 92px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lj-signup-showcase h1 span {
  display: block;
  color: #4AB3FC;
  font-style: italic;
}

.lj-signup-showcase-content>p {
  max-width: 610px;
  margin: 27px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.85;
}

.lj-signup-benefits {
  display: grid;
  gap: 15px;
  margin-top: 40px;
}

.lj-signup-benefit {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 510px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 45px rgba(1, 52, 130, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.lj-signup-benefit:hover {
  transform: translateX(7px);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
}

.lj-signup-benefit>span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(1, 52, 130, .12);
}

.lj-signup-benefit>span i {
  font-size: 23px;
}

.lj-signup-benefit h3 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
}

.lj-signup-benefit p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.5;
}

.lj-signup-showcase-decoration span {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}

.lj-signup-showcase-decoration span:nth-child(1) {
  right: -130px;
  bottom: -160px;
  width: 440px;
  height: 440px;
  animation: ljSignupFloat 8s ease-in-out infinite;
}

.lj-signup-showcase-decoration span:nth-child(2) {
  right: 45px;
  top: 65px;
  width: 130px;
  height: 130px;
  animation: ljSignupFloat 6s ease-in-out infinite reverse;
}

.lj-signup-showcase-decoration span:nth-child(3) {
  left: -65px;
  top: 35%;
  width: 170px;
  height: 170px;
  animation: ljSignupFloat 10s ease-in-out infinite;
}

/* =========================================================
   RIGHT FORM PANEL
========================================================= */

.lj-signup-form-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 25px clamp(25px, 3vw, 35px);
  background: radial-gradient( circle at 80% 10%, rgba(7, 104, 207, .06), transparent 30%), var(--signup-white);
}

.lj-signup-form-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px;
  height: 210px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .07), transparent 70%);
  pointer-events: none;
}

.lj-signup-form-wrapper {
  width: min(100%, 520px);
  padding: 15px 0;
}

.lj-signup-form-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

.lj-signup-form-logo img {
  width: 155px;
  height: auto;
}

.lj-signup-heading {
  margin-bottom: 30px;
  text-align: center;
}

.lj-signup-heading>span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--signup-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-signup-heading h2 {
  margin: 0;
  color: var(--signup-title);
  font-family: var(--font-body);
  font-size: clamp(39px, 4vw, 53px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}

.lj-signup-heading p {
  margin: 12px auto 0;
  color: var(--signup-text);
  font-size: 13px;
  line-height: 1.65;
}

/* =========================================================
   FORM FIELDS
========================================================= */

.lj-signup-form {
  width: 100%;
}

.lj-signup-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.lj-signup-form-group {
  margin-bottom: 6px;
}

.lj-signup-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--signup-title);
  font-size: 12px;
  font-weight: 700;
}

.lj-signup-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lj-signup-input-wrap>i {
  position: absolute;
  z-index: 2;
  left: 16px;
  color: #355A7D;
  font-size: 20px;
  pointer-events: none;
  transition: color .3s ease;
}

.lj-signup-input-wrap input {
  width: 100%;
  height: 56px;
  padding: 0 50px 0 48px;
  color: var(--signup-title);
  background: #FFFFFF;
  border: 1px solid var(--signup-border);
  border-radius: 5px;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(1, 52, 130, .025), inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.lj-signup-input-wrap input::placeholder {
  color: #355A7D;
}

.lj-signup-input-wrap input:focus {
  border-color: rgba(7, 104, 207, .58);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07), 0 15px 35px rgba(1, 52, 130, .05);
}

.lj-signup-input-wrap:focus-within>i {
  color: var(--signup-primary);
}

.lj-signup-password-toggle {
  position: absolute;
  z-index: 3;
  right: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: #0687F1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .3s ease, background .3s ease;
}

.lj-signup-password-toggle:hover {
  color: var(--signup-primary);
  background: rgba(7, 104, 207, .06);
}

.lj-signup-password-toggle i {
  font-size: 20px;
}

.lj-signup-password-hint {
  display: block;
  margin-top: 7px;
  color: #355A7D;
  font-size: 10px;
  line-height: 1.5;
}

.lj-signup-password-strength {
  width: 100%;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  background: #D5EAF8;
  border-radius: 999px;
}

.lj-signup-password-strength span {
  display: block;
  width: 0;
  height: 100%;
  background: #0768CF;
  border-radius: inherit;
  transition: width .35s ease, background .35s ease;
}

.lj-signup-error,
.lj-signup-terms-error {
  display: block;
  min-height: 14px;
  margin-top: 5px;
  color: #0768CF;
  font-size: 10px;
  line-height: 1.4;
}

.lj-signup-form-group.has-error input {
  border-color: #0768CF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-signup-form-group.has-success input {
  border-color: #0687F1;
}

/* =========================================================
   TERMS
========================================================= */

.lj-signup-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: var(--signup-text);
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
}

.lj-signup-terms input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lj-signup-checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 1px solid var(--signup-border);
  border-radius: 3px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-signup-checkmark i {
  opacity: 0;
  font-size: 15px;
  transform: scale(.6);
  transition: opacity .25s ease, transform .25s ease;
}

.lj-signup-terms input:checked+.lj-signup-checkmark {
  background: var(--signup-primary);
  border-color: var(--signup-primary);
  box-shadow: 0 6px 16px rgba(7, 104, 207, .18);
}

.lj-signup-terms input:checked+.lj-signup-checkmark i {
  opacity: 1;
  transform: scale(1);
}

.lj-signup-terms a {
  color: var(--signup-primary);
  font-weight: 700;
  text-decoration: none;
}

.lj-signup-terms a:hover {
  text-decoration: underline;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-signup-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 57px;
  margin-top: 14px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0768CF, var(--signup-primary) 48%, var(--signup-primary-dark));
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 5px;
  box-shadow: 0 17px 38px rgba(7, 104, 207, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}

.lj-signup-submit::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}

.lj-signup-submit:hover::before {
  left: 130%;
}

.lj-signup-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 45px rgba(7, 104, 207, .33), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.lj-signup-submit i {
  font-size: 20px;
  transition: transform .3s ease;
}

.lj-signup-submit:hover i {
  transform: translateX(4px);
}

/* =========================================================
   SOCIAL SIGNUP
========================================================= */

.lj-signup-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 27px 0 20px;
}

.lj-signup-divider::before,
.lj-signup-divider::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--signup-border);
}

.lj-signup-divider span {
  padding: 0 13px;
  color: #355A7D;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lj-signup-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lj-signup-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  color: var(--signup-title);
  background: #FFFFFF;
  border: 1px solid var(--signup-border);
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(1, 52, 130, .035);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-signup-social-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 104, 207, .32);
  box-shadow: 0 14px 32px rgba(1, 52, 130, .07);
}

.lj-signup-social-btn .fa-google {
  color: #0687F1;
}

.lj-signup-social-btn .fa-facebook-f {
  color: #0687F1;
}

.lj-signup-login-link {
  margin: 24px 0 0;
  color: var(--signup-text);
  font-size: 12px;
  text-align: center;
}

.lj-signup-login-link a {
  color: var(--signup-primary);
  font-weight: 800;
  text-decoration: none;
}

.lj-signup-login-link a:hover {
  text-decoration: underline;
}

/* =========================================================
   CLEAN ENTRANCE ANIMATIONS
========================================================= */

.lj-signup-showcase-content>*,
.lj-signup-form-wrapper>* {
  opacity: 0;
  transform: translateY(22px);
  animation: ljSignupReveal .75s ease forwards;
}

.lj-signup-showcase-content> :nth-child(1) {
  animation-delay: .08s;
}

.lj-signup-showcase-content> :nth-child(2) {
  animation-delay: .16s;
}

.lj-signup-showcase-content> :nth-child(3) {
  animation-delay: .24s;
}

.lj-signup-showcase-content> :nth-child(4) {
  animation-delay: .32s;
}

.lj-signup-showcase-content> :nth-child(5) {
  animation-delay: .40s;
}

.lj-signup-form-wrapper> :nth-child(1) {
  animation-delay: .10s;
}

.lj-signup-form-wrapper> :nth-child(2) {
  animation-delay: .18s;
}

.lj-signup-form-wrapper> :nth-child(3) {
  animation-delay: .26s;
}

.lj-signup-form-wrapper> :nth-child(4) {
  animation-delay: .34s;
}

.lj-signup-form-wrapper> :nth-child(5) {
  animation-delay: .42s;
}

.lj-signup-form-wrapper> :nth-child(6) {
  animation-delay: .50s;
}

@keyframes ljSignupReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ljSignupFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -18px, 0);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1199.98px) {
  .lj-signup-layout {
    grid-template-columns: minmax(0, 1fr) minmax(480px, .95fr);
  }
  .lj-signup-showcase {
    padding-right: 45px;
    padding-left: 45px;
  }
  .lj-signup-showcase h1 {
    font-size: clamp(50px, 5.8vw, 72px);
  }
}

/* =========================================================
   MOBILE AND SMALL TABLETS
========================================================= */

@media(max-width:991.98px) {
  .lj-signup-layout {
    display: block;
  }
  .lj-signup-showcase {
    display: none;
  }
  .lj-signup-form-panel {
    min-height: 100vh;
    padding: calc(35px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  }
  .lj-signup-form-wrapper {
    width: min(100%, 570px);
  }
  .lj-signup-form-logo img {
    width: 145px;
  }
}

/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media(max-width:575.98px) {
  .lj-signup-form-panel {
    align-items: flex-start;
    padding-right: 14px;
    padding-left: 14px;
  }
  .lj-signup-form-wrapper {
    padding-top: 6px;
  }
  .lj-signup-form-logo {
    margin-bottom: 21px;
  }
  .lj-signup-heading {
    margin-bottom: 24px;
  }
  .lj-signup-heading h2 {
    font-size: 39px;
  }
  .lj-signup-name-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .lj-signup-input-wrap input {
    height: 53px;
  }
  .lj-signup-socials {
    gap: 9px;
  }
  .lj-signup-social-btn {
    min-height: 48px;
  }
}

/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media(max-width:360px) {
  .lj-signup-heading h2 {
    font-size: 34px;
  }
  .lj-signup-socials {
    grid-template-columns: 1fr;
  }
  .lj-signup-submit {
    min-height: 54px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-signup-showcase-content>*,
  .lj-signup-form-wrapper>*,
  .lj-signup-showcase-decoration span {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .lj-signup-submit,
  .lj-signup-submit::before,
  .lj-signup-benefit,
  .lj-signup-social-btn {
    transition: none;
  }
}

/***************************LOGIN****************************/

/* =========================================================
   LINJUST LUXURY SIGN-IN PAGE
========================================================= */

.lj-signin-section {
  --signin-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --signin-primary-dark: var( --color-primary-dark, #013883);
  --signin-title: var( --color-title, var(--titleColor, #013482));
  --signin-text: var( --color-text, var(--paraColor, #082E5C));
  --signin-white: var( --color-white, #FFFFFF);
  --signin-light: var( --color-off-white, #F6FBFD);
  --signin-border: var( --color-border, #6F8DA8);
  --signin-font-body: var( --font-body, "Inter", sans-serif);
  --signin-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--signin-light);
  font-family: var(--font-body);
  box-shadow: 0 20px 55px rgba(1, 52, 130, .08), 0 6px 20px rgba(7, 104, 207, .05);
}

.lj-signin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr);
  width: 100%;
  min-height: 100vh;
}

/* =========================================================
   LEFT SHOWCASE PANEL
========================================================= */

.lj-signin-showcase {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 70px clamp(40px, 6vw, 100px);
  overflow: hidden;
  color: var(--signin-white);
  background: radial-gradient( circle at 20% 20%, rgba(255, 255, 255, .16), transparent 28%), radial-gradient( circle at 80% 75%, rgba(74, 179, 252, .18), transparent 30%), linear-gradient( 135deg, #013482 0%, #013883 40%, var(--signin-primary) 72%, #0687F1 100%);
  isolation: isolate;
}

.lj-signin-showcase::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .24;
  background-image: linear-gradient( rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient( 135deg, #013482, transparent 78%);
}

.lj-signin-showcase-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient( 90deg, rgba(1, 52, 130, .15), rgba(1, 52, 130, .04));
}

.lj-signin-showcase-content {
  position: relative;
  z-index: 3;
  width: min(100%, 700px);
}

.lj-signin-showcase-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 55px;
}

.lj-signin-showcase-logo img {
  width: clamp(145px, 12vw, 205px);
  height: auto;
  filter: brightness(0) invert(1);
}

.lj-signin-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 19px;
  padding: 8px 14px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-signin-badge i {
  color: #4AB3FC;
  font-size: 16px;
}

.lj-signin-showcase h1 {
  max-width: 700px;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(55px, 5.6vw, 92px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lj-signin-showcase h1 span {
  display: block;
  color: #4AB3FC;
  font-style: italic;
}

.lj-signin-showcase-content>p {
  max-width: 610px;
  margin: 27px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.85;
}

.lj-signin-benefits {
  display: grid;
  gap: 15px;
  margin-top: 40px;
}

.lj-signin-benefit {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 520px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 45px rgba(1, 52, 130, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.lj-signin-benefit:hover {
  transform: translateX(7px);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
}

.lj-signin-benefit>span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(1, 52, 130, .12);
}

.lj-signin-benefit>span i {
  font-size: 23px;
}

.lj-signin-benefit h3 {
  margin: 0 0 3px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}

.lj-signin-benefit p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.5;
}

.lj-signin-showcase-decoration span {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}

.lj-signin-showcase-decoration span:nth-child(1) {
  right: -130px;
  bottom: -160px;
  width: 440px;
  height: 440px;
  animation: ljSigninFloat 8s ease-in-out infinite;
}

.lj-signin-showcase-decoration span:nth-child(2) {
  right: 45px;
  top: 65px;
  width: 130px;
  height: 130px;
  animation: ljSigninFloat 6s ease-in-out infinite reverse;
}

.lj-signin-showcase-decoration span:nth-child(3) {
  left: -65px;
  top: 35%;
  width: 170px;
  height: 170px;
  animation: ljSigninFloat 10s ease-in-out infinite;
}

/* =========================================================
   RIGHT FORM PANEL
========================================================= */

.lj-signin-form-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px clamp(25px, 3vw, 40px);
  background: radial-gradient( circle at 80% 10%, rgba(7, 104, 207, .06), transparent 30%), var(--signin-white);
}

.lj-signin-form-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px;
  height: 210px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .07), transparent 70%);
  pointer-events: none;
}

.lj-signin-form-wrapper {
  width: min(100%, 520px);
  padding: 15px 0;
}

.lj-signin-form-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

.lj-signin-form-logo img {
  width: 155px;
  height: auto;
}

.lj-signin-heading {
  margin-bottom: 31px;
  text-align: center;
}

.lj-signin-heading>span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--signin-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-signin-heading h2 {
  margin: 0;
  color: var(--signin-title);
  font-family: var(--font-body);
  font-size: clamp(42px, 4vw, 57px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}

.lj-signin-heading p {
  max-width: 440px;
  margin: 12px auto 0;
  color: var(--signin-text);
  font-size: 13px;
  line-height: 1.65;
}

/* =========================================================
   FORM FIELDS
========================================================= */

.lj-signin-form {
  width: 100%;
}

.lj-signin-form-group {
  margin-bottom: 5px;
}

.lj-signin-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--signin-title);
  font-size: 12px;
  font-weight: 700;
}

.lj-signin-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lj-signin-input-wrap>i {
  position: absolute;
  z-index: 2;
  left: 16px;
  color: #355A7D;
  font-size: 20px;
  pointer-events: none;
  transition: color .3s ease;
}

.lj-signin-input-wrap input {
  width: 100%;
  height: 56px;
  padding: 0 50px 0 48px;
  color: var(--signin-title);
  background: #FFFFFF;
  border: 1px solid var(--signin-border);
  border-radius: 5px;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(1, 52, 130, .025), inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.lj-signin-input-wrap input::placeholder {
  color: #355A7D;
}

.lj-signin-input-wrap input:focus {
  border-color: rgba(7, 104, 207, .58);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07), 0 15px 35px rgba(1, 52, 130, .05);
}

.lj-signin-input-wrap:focus-within>i {
  color: var(--signin-primary);
}

.lj-signin-password-toggle {
  position: absolute;
  z-index: 3;
  right: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: #0687F1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .3s ease, background .3s ease;
}

.lj-signin-password-toggle:hover {
  color: var(--signin-primary);
  background: rgba(7, 104, 207, .06);
}

.lj-signin-password-toggle i {
  font-size: 20px;
}

.lj-signin-error {
  display: block;
  min-height: 14px;
  margin-top: 5px;
  color: #0768CF;
  font-size: 10px;
  line-height: 1.4;
}

.lj-signin-form-group.has-error input {
  border-color: #0768CF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-signin-form-group.has-success input {
  border-color: #0687F1;
}

/* =========================================================
   REMEMBER AND FORGOT PASSWORD
========================================================= */

.lj-signin-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 21px;
}

.lj-signin-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--signin-text);
  font-size: 11px;
  cursor: pointer;
}

.lj-signin-remember input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lj-signin-checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 1px solid var(--signin-border);
  border-radius: 3px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-signin-checkmark i {
  opacity: 0;
  font-size: 15px;
  transform: scale(.6);
  transition: opacity .25s ease, transform .25s ease;
}

.lj-signin-remember input:checked+.lj-signin-checkmark {
  background: var(--signin-primary);
  border-color: var(--signin-primary);
  box-shadow: 0 6px 16px rgba(7, 104, 207, .18);
}

.lj-signin-remember input:checked+.lj-signin-checkmark i {
  opacity: 1;
  transform: scale(1);
}

.lj-signin-forgot-link {
  color: var(--signin-primary);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.lj-signin-forgot-link:hover {
  text-decoration: underline;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-signin-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 57px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0768CF, var(--signin-primary) 48%, var(--signin-primary-dark));
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 5px;
  box-shadow: 0 17px 38px rgba(7, 104, 207, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}

.lj-signin-submit::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}

.lj-signin-submit:hover::before {
  left: 130%;
}

.lj-signin-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 45px rgba(7, 104, 207, .33), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.lj-signin-submit i {
  font-size: 20px;
  transition: transform .3s ease;
}

.lj-signin-submit:hover i {
  transform: translateX(4px);
}

.lj-signin-submit:disabled {
  opacity: .75;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   DIVIDER AND SOCIAL SIGN-IN
========================================================= */

.lj-signin-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px 0 20px;
}

.lj-signin-divider::before,
.lj-signin-divider::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--signin-border);
}

.lj-signin-divider span {
  padding: 0 13px;
  color: #355A7D;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lj-signin-socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lj-signin-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  color: var(--signin-title);
  background: #FFFFFF;
  border: 1px solid var(--signin-border);
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(1, 52, 130, .035);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-signin-social-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 104, 207, .32);
  box-shadow: 0 14px 32px rgba(1, 52, 130, .07);
}

.lj-signin-social-btn .fa-google {
  color: #0687F1;
}

.lj-signin-social-btn .fa-facebook-f {
  color: #0687F1;
}

.lj-signin-register-link {
  margin: 24px 0 0;
  color: var(--signin-text);
  font-size: 12px;
  text-align: center;
}

.lj-signin-register-link a {
  color: var(--signin-primary);
  font-weight: 800;
  text-decoration: none;
}

.lj-signin-register-link a:hover {
  text-decoration: underline;
}

/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

.lj-signin-showcase-content>*,
.lj-signin-form-wrapper>* {
  opacity: 0;
  transform: translateY(22px);
  animation: ljSigninReveal .75s ease forwards;
}

.lj-signin-showcase-content> :nth-child(1) {
  animation-delay: .08s;
}

.lj-signin-showcase-content> :nth-child(2) {
  animation-delay: .16s;
}

.lj-signin-showcase-content> :nth-child(3) {
  animation-delay: .24s;
}

.lj-signin-showcase-content> :nth-child(4) {
  animation-delay: .32s;
}

.lj-signin-showcase-content> :nth-child(5) {
  animation-delay: .40s;
}

.lj-signin-form-wrapper> :nth-child(1) {
  animation-delay: .10s;
}

.lj-signin-form-wrapper> :nth-child(2) {
  animation-delay: .18s;
}

.lj-signin-form-wrapper> :nth-child(3) {
  animation-delay: .26s;
}

.lj-signin-form-wrapper> :nth-child(4) {
  animation-delay: .34s;
}

.lj-signin-form-wrapper> :nth-child(5) {
  animation-delay: .42s;
}

.lj-signin-form-wrapper> :nth-child(6) {
  animation-delay: .50s;
}

@keyframes ljSigninReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ljSigninFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -18px, 0);
  }
}

/* =========================================================
   TABLET RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-signin-layout {
    grid-template-columns: minmax(0, 1fr) minmax(480px, .95fr);
  }
  .lj-signin-showcase {
    padding-right: 45px;
    padding-left: 45px;
  }
  .lj-signin-showcase h1 {
    font-size: clamp(50px, 5.8vw, 72px);
  }
}

/* =========================================================
   MOBILE AND SMALL TABLETS
========================================================= */

@media(max-width:991.98px) {
  .lj-signin-layout {
    display: block;
  }
  .lj-signin-showcase {
    display: none;
  }
  .lj-signin-form-panel {
    min-height: 100vh;
    padding: calc(35px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
  }
  .lj-signin-form-wrapper {
    width: min(100%, 570px);
  }
  .lj-signin-form-logo img {
    width: 145px;
  }
}

/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media(max-width:575.98px) {
  .lj-signin-form-panel {
    align-items: flex-start;
    padding-right: 14px;
    padding-left: 14px;
  }
  .lj-signin-form-wrapper {
    padding-top: 6px;
  }
  .lj-signin-form-logo {
    margin-bottom: 21px;
  }
  .lj-signin-heading {
    margin-bottom: 24px;
  }
  .lj-signin-heading h2 {
    font-size: 40px;
  }
  .lj-signin-input-wrap input {
    height: 53px;
  }
  .lj-signin-options {
    align-items: flex-start;
  }
  .lj-signin-socials {
    gap: 9px;
  }
  .lj-signin-social-btn {
    min-height: 48px;
  }
}

/* =========================================================
   EXTRA-SMALL DEVICES
========================================================= */

@media(max-width:360px) {
  .lj-signin-heading h2 {
    font-size: 35px;
  }
  .lj-signin-options {
    flex-direction: column;
    gap: 10px;
  }
  .lj-signin-socials {
    grid-template-columns: 1fr;
  }
  .lj-signin-submit {
    min-height: 54px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-signin-showcase-content>*,
  .lj-signin-form-wrapper>*,
  .lj-signin-showcase-decoration span {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-signin-submit,
  .lj-signin-submit::before,
  .lj-signin-benefit,
  .lj-signin-social-btn {
    transition: none;
  }
}

/***************************TERMS & PRIVACY & FAQ********************/

/* =========================================================
   LINJUST LEGAL AND FAQ PAGES
========================================================= */

.lj-info-page {
  --info-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --info-primary-dark: var( --color-primary-dark, #013883);
  --info-title: var( --color-title, var(--titleColor, #013482));
  --info-text: var( --color-text, var(--paraColor, #082E5C));
  --info-white: var( --color-white, #FFFFFF);
  --info-light: var( --color-off-white, #F6FBFD);
  --info-border: var( --color-border, #6F8DA8);
  --info-muted: var( --color-muted, #355A7D);
  --info-font-body: var( --font-body, "Inter", sans-serif);
  --info-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--info-light);
  font-family: var(--font-body);
}

/* =========================================================
   PAGE HERO
========================================================= */

.lj-info-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 230px;
  padding: 20px 0 20px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 15% 25%, rgba(255, 255, 255, .16), transparent 25%), radial-gradient( circle at 85% 75%, rgba(74, 179, 252, .14), transparent 28%), linear-gradient( 135deg, #013482 0%, #013883 42%, var(--info-primary) 74%, #0687F1 100%);
  isolation: isolate;
}

.lj-info-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .20;
  background-image: linear-gradient( rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 55px 55px;
}

.lj-info-hero::after {
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 440px;
  height: 440px;
  content: "";
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255, 255, 255, .025), 0 0 0 90px rgba(255, 255, 255, .018);
}

.lj-info-hero-inner {
  position: relative;
  z-index: 3;
  width: min(100%, 850px);
}

.lj-info-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 14px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-info-hero-badge i {
  color: #4AB3FC;
  font-size: 16px;
}

.lj-info-hero h1 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(44px, 4vw, 42px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.lj-info-hero h1 span {
  /**display:block;***/
  color: #4AB3FC;
  font-style: italic;
}

.lj-info-hero p {
  max-width: 720px;
  margin: 25px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.85;
}

.lj-info-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px 22px;
  margin-top: 27px;
}

.lj-info-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
}

.lj-info-hero-meta i {
  color: #4AB3FC;
  font-size: 17px;
}

/* =========================================================
   PAGE BODY
========================================================= */

.lj-info-body {
  position: relative;
  padding: 80px 0 95px;
}

.lj-info-layout {
  display: grid;
  grid-template-columns: minmax(235px, 290px) minmax(0, 1fr);
  align-items: start;
  gap: 38px;
}

/* =========================================================
   SIDEBAR
========================================================= */

.lj-info-sidebar {
  position: sticky;
  top: 110px;
}

.lj-info-sidebar-card {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .07), 0 4px 14px rgba(7, 104, 207, .035);
}

.lj-info-sidebar-header {
  padding: 21px 22px 17px;
  border-bottom: 1px solid var(--info-border);
  background: linear-gradient( 135deg, rgba(7, 104, 207, .055), rgba(255, 255, 255, .95));
}

.lj-info-sidebar-header span {
  display: block;
  margin-bottom: 4px;
  color: var(--info-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-info-sidebar-header h3 {
  margin: 0;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.lj-info-nav {
  display: grid;
  padding: 10px;
}

.lj-info-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  color: var(--info-text);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color .3s ease, background .3s ease, transform .3s ease;
}

.lj-info-nav a span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lj-info-nav a i {
  font-size: 17px;
}

.lj-info-nav a:hover,
.lj-info-nav a.active {
  color: var(--info-primary);
  background: rgba(7, 104, 207, .055);
  transform: translateX(3px);
}

.lj-info-sidebar-help {
  margin-top: 20px;
  padding: 22px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #013883, var(--info-primary));
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(7, 104, 207, .20);
}

.lj-info-sidebar-help i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 15px;
  color: var(--info-primary);
  background: #FFFFFF;
  border-radius: 50%;
  font-size: 23px;
}

.lj-info-sidebar-help h4 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 25px;
  font-weight: 700;
}

.lj-info-sidebar-help p {
  margin: 8px 0 17px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  line-height: 1.65;
}

.lj-info-sidebar-help a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lj-info-sidebar-help a i {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  color: #FFFFFF;
  background: transparent;
  font-size: 17px;
}

/* =========================================================
   CONTENT PANEL
========================================================= */

.lj-info-content {
  min-width: 0;
}

.lj-info-card {
  padding: clamp(26px, 4vw, 48px);
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 8px;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .065), 0 4px 14px rgba(7, 104, 207, .03);
}

.lj-info-intro {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 35px;
  padding: 20px;
  background: linear-gradient( 135deg, rgba(7, 104, 207, .055), rgba(255, 255, 255, .94));
  border: 1px solid rgba(7, 104, 207, .10);
  border-left: 4px solid var(--info-primary);
  border-radius: 5px;
}

.lj-info-intro-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--info-primary-dark));
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(7, 104, 207, .20);
}

.lj-info-intro-icon i {
  font-size: 23px;
}

.lj-info-intro h2 {
  margin: 0 0 6px;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.lj-info-intro p {
  margin: 0;
  color: var(--info-text);
  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   LEGAL CONTENT SECTIONS
========================================================= */

.lj-legal-section {
  scroll-margin-top: 125px;
  padding: 30px 0;
  border-bottom: 1px solid var(--info-border);
}

.lj-legal-section:first-of-type {
  padding-top: 0;
}

.lj-legal-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lj-legal-section-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.lj-legal-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: var(--info-primary);
  background: rgba(7, 104, 207, .065);
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
}

.lj-legal-section h2 {
  margin: 2px 0 0;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 37px);
  font-weight: 700;
  line-height: 1.05;
}

.lj-legal-section h3 {
  margin: 22px 0 10px;
  color: var(--info-title);
  font-size: 14px;
  font-weight: 800;
}

.lj-legal-section p {
  margin: 0 0 15px;
  color: var(--info-text);
  font-size: 13px;
  line-height: 1.85;
}

.lj-legal-section ul,
.lj-legal-section ol {
  display: grid;
  gap: 10px;
  margin: 17px 0;
  padding: 0;
  list-style: none;
}

.lj-legal-section li {
  position: relative;
  padding-left: 27px;
  color: var(--info-text);
  font-size: 13px;
  line-height: 1.75;
}

.lj-legal-section ul li::before {
  position: absolute;
  top: 7px;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--info-primary);
  border: 3px solid rgba(7, 104, 207, .13);
  border-radius: 50%;
  box-sizing: content-box;
}

.lj-legal-section ol {
  counter-reset: legal-list;
}

.lj-legal-section ol li {
  counter-increment: legal-list;
  padding-left: 35px;
}

.lj-legal-section ol li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  content: counter(legal-list);
  color: #FFFFFF;
  background: var(--info-primary);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.lj-legal-highlight {
  margin: 22px 0;
  padding: 20px;
  background: #F6FBFD;
  border: 1px solid #A1D7FB;
  border-left: 4px solid var(--info-primary);
  border-radius: 5px;
}

.lj-legal-highlight strong {
  display: block;
  margin-bottom: 7px;
  color: var(--info-title);
  font-size: 13px;
}

.lj-legal-highlight p {
  margin: 0;
  font-size: 12px;
}

.lj-legal-table-wrap {
  width: 100%;
  margin: 22px 0;
  overflow-x: auto;
  border: 1px solid var(--info-border);
  border-radius: 6px;
}

.lj-legal-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.lj-legal-table th,
.lj-legal-table td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--info-border);
  text-align: left;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.65;
}

.lj-legal-table th {
  color: var(--info-title);
  background: #F6FBFD;
  font-weight: 800;
}

.lj-legal-table td {
  color: var(--info-text);
}

.lj-legal-table tr:last-child td {
  border-bottom: 0;
}

/* =========================================================
   FAQ SEARCH
========================================================= */

.lj-faq-search {
  position: relative;
  margin-bottom: 28px;
}

.lj-faq-search i {
  position: absolute;
  top: 50%;
  left: 18px;
  color: var(--info-muted);
  font-size: 21px;
  transform: translateY(-50%);
  pointer-events: none;
}

.lj-faq-search input {
  width: 100%;
  height: 58px;
  padding: 0 52px 0 50px;
  color: var(--info-title);
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 6px;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(1, 52, 130, .035);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.lj-faq-search input:focus {
  border-color: rgba(7, 104, 207, .45);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06), 0 15px 35px rgba(1, 52, 130, .055);
}

.lj-faq-search-clear {
  position: absolute;
  top: 50%;
  right: 13px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--info-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.lj-faq-search-clear:hover {
  color: var(--info-primary);
  background: rgba(7, 104, 207, .055);
}

/* =========================================================
   FAQ CATEGORIES
========================================================= */

.lj-faq-category {
  scroll-margin-top: 125px;
  margin-bottom: 36px;
}

.lj-faq-category:last-child {
  margin-bottom: 0;
}

.lj-faq-category-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.lj-faq-category-heading span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--info-primary-dark));
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(7, 104, 207, .18);
}

.lj-faq-category-heading i {
  font-size: 21px;
}

.lj-faq-category-heading h2 {
  margin: 0;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: 33px;
  font-weight: 700;
}

.lj-faq-list {
  display: grid;
  gap: 12px;
}

.lj-faq-item {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 6px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.lj-faq-item:hover {
  border-color: rgba(7, 104, 207, .20);
  box-shadow: 0 12px 30px rgba(1, 52, 130, .05);
}

.lj-faq-item.active {
  border-color: rgba(7, 104, 207, .25);
  box-shadow: 0 15px 35px rgba(1, 52, 130, .065);
}

.lj-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 19px 20px;
  color: var(--info-title);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.lj-faq-question>span:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lj-faq-question-number {
  color: var(--info-primary);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
}

.lj-faq-question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: var(--info-primary);
  background: rgba(7, 104, 207, .055);
  border-radius: 50%;
  transition: color .3s ease, background .3s ease, transform .35s ease;
}

.lj-faq-item.active .lj-faq-question-icon {
  color: #FFFFFF;
  background: var(--info-primary);
  transform: rotate(45deg);
}

.lj-faq-answer {
  display: none;
  padding: 0 20px 20px 53px;
}

.lj-faq-answer p {
  margin: 0;
  color: var(--info-text);
  font-size: 12px;
  line-height: 1.8;
}

.lj-faq-answer ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.lj-faq-answer li {
  position: relative;
  padding-left: 20px;
  color: var(--info-text);
  font-size: 12px;
  line-height: 1.7;
}

.lj-faq-answer li::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--info-primary);
  border-radius: 50%;
}

.lj-faq-empty {
  display: none;
  padding: 35px 20px;
  color: var(--info-text);
  background: #FFFFFF;
  border: 1px dashed var(--info-border);
  border-radius: 6px;
  text-align: center;
}

.lj-faq-empty i {
  display: block;
  margin-bottom: 10px;
  color: var(--info-primary);
  font-size: 34px;
}

.lj-faq-empty h3 {
  margin: 0 0 7px;
  color: var(--info-title);
  font-family: var(--font-body);
  font-size: 28px;
}

.lj-faq-empty p {
  margin: 0;
  font-size: 12px;
}

/* =========================================================
   CONTACT CTA
========================================================= */

.lj-info-contact-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 35px;
  padding: 30px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 85% 30%, rgba(255, 255, 255, .15), transparent 28%), linear-gradient( 135deg, #013482, var(--info-primary));
  border-radius: 8px;
  box-shadow: 0 20px 45px rgba(7, 104, 207, .20);
}

.lj-info-contact-cta::after {
  position: absolute;
  right: -65px;
  bottom: -95px;
  width: 220px;
  height: 220px;
  content: "";
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
}

.lj-info-contact-cta-content {
  position: relative;
  z-index: 2;
}

.lj-info-contact-cta span {
  display: block;
  margin-bottom: 7px;
  color: #4AB3FC;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-info-contact-cta h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
}

.lj-info-contact-cta p {
  max-width: 560px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .77);
  font-size: 12px;
  line-height: 1.7;
}

.lj-info-contact-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 49px;
  padding: 0 21px;
  color: var(--info-primary);
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(1, 52, 130, .12);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease;
}

.lj-info-contact-btn:hover {
  color: var(--info-primary);
  transform: translateY(-3px);
  box-shadow: 0 17px 35px rgba(1, 52, 130, .17);
}

/* =========================================================
   MOBILE SIDEBAR TOGGLE
========================================================= */

.lj-info-mobile-nav {
  display: none;
  margin-bottom: 20px;
}

.lj-info-mobile-nav-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 0 17px;
  color: var(--info-title);
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(1, 52, 130, .04);
}

.lj-info-mobile-nav-button span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lj-info-mobile-nav-button i {
  color: var(--info-primary);
  font-size: 19px;
}

.lj-info-mobile-nav-menu {
  display: none;
  margin-top: 8px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid var(--info-border);
  border-radius: 6px;
  box-shadow: 0 15px 35px rgba(1, 52, 130, .07);
}

.lj-info-mobile-nav-menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  color: var(--info-text);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.lj-info-mobile-nav-menu a:hover,
.lj-info-mobile-nav-menu a.active {
  color: var(--info-primary);
  background: rgba(7, 104, 207, .055);
}

/* =========================================================
   ANIMATIONS
========================================================= */

.lj-info-hero-inner>*,
.lj-info-card,
.lj-info-sidebar-card,
.lj-info-sidebar-help {
  opacity: 0;
  transform: translateY(20px);
  animation: ljInfoReveal .75s ease forwards;
}

.lj-info-hero-inner> :nth-child(1) {
  animation-delay: .08s;
}

.lj-info-hero-inner> :nth-child(2) {
  animation-delay: .16s;
}

.lj-info-hero-inner> :nth-child(3) {
  animation-delay: .24s;
}

.lj-info-hero-inner> :nth-child(4) {
  animation-delay: .32s;
}

.lj-info-sidebar-card {
  animation-delay: .18s;
}

.lj-info-sidebar-help {
  animation-delay: .27s;
}

.lj-info-card {
  animation-delay: .22s;
}

@keyframes ljInfoReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-info-layout {
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 28px;
  }
  .lj-info-hero {
    min-height: 200px;
  }
}

@media(max-width:991.98px) {
  .lj-info-hero {
    min-height: 370px;
    padding: 75px 0 65px;
  }
  .lj-info-hero-inner {
    width: min(100%, 760px);
  }
  .lj-info-layout {
    display: block;
  }
  .lj-info-sidebar {
    display: none;
  }
  .lj-info-mobile-nav {
    display: block;
  }
  .lj-info-body {
    padding: 55px 0 75px;
  }
  .lj-info-card {
    padding: 30px;
  }
}

@media(max-width:767.98px) {
  .lj-info-hero {
    min-height: 350px;
    text-align: center;
  }
  .lj-info-hero-inner {
    margin: 0 auto;
  }
  .lj-info-hero-badge {
    margin-right: auto;
    margin-left: auto;
  }
  .lj-info-hero p {
    margin-right: auto;
    margin-left: auto;
    font-size: 13px;
  }
  .lj-info-hero-meta {
    justify-content: center;
  }
  .lj-info-card {
    padding: 23px 18px;
  }
  .lj-info-intro {
    padding: 17px;
  }
  .lj-info-contact-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 25px 22px;
  }
  .lj-info-contact-btn {
    width: 100%;
  }
  .lj-faq-answer {
    padding-right: 17px;
    padding-left: 17px;
  }
  .lj-faq-question {
    padding: 17px;
  }
}

@media(max-width:575.98px) {
  .lj-info-hero {
    min-height: 325px;
    padding: 62px 0 56px;
  }
  .lj-info-hero h1 {
    font-size: clamp(45px, 14vw, 63px);
  }
  .lj-info-hero p {
    font-size: 12px;
    line-height: 1.75;
  }
  .lj-info-hero-meta {
    flex-direction: column;
    gap: 8px;
  }
  .lj-info-body {
    padding: 40px 0 60px;
  }
  .lj-info-intro {
    gap: 13px;
  }
  .lj-info-intro-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }
  .lj-info-intro h2 {
    font-size: 27px;
  }
  .lj-legal-section {
    padding: 25px 0;
  }
  .lj-legal-section-header {
    gap: 11px;
  }
  .lj-legal-number {
    flex-basis: 35px;
    width: 35px;
    height: 35px;
    font-size: 17px;
  }
  .lj-legal-section h2 {
    font-size: 27px;
  }
  .lj-legal-section p,
  .lj-legal-section li {
    font-size: 12px;
  }
  .lj-faq-search input {
    height: 54px;
    font-size: 12px;
  }
  .lj-faq-category-heading h2 {
    font-size: 29px;
  }
  .lj-faq-question {
    gap: 12px;
    font-size: 12px;
  }
  .lj-faq-question-number {
    display: none;
  }
  .lj-faq-answer {
    padding-bottom: 18px;
  }
}

@media(max-width:360px) {
  .lj-info-card {
    padding-right: 14px;
    padding-left: 14px;
  }
  .lj-info-intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .lj-faq-category-heading span {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-info-hero-inner>*,
  .lj-info-card,
  .lj-info-sidebar-card,
  .lj-info-sidebar-help {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-faq-item,
  .lj-faq-question-icon,
  .lj-info-nav a,
  .lj-info-contact-btn {
    transition: none;
  }
}

/***********************************CONTACT US*****************************/

/* =========================================================
   LINJUST SIMPLE CONTACT PAGE
========================================================= */

.lj-simple-contact {
  --contact-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --contact-primary-dark: var( --color-primary-dark, #013883);
  --contact-title: var( --color-title, var(--titleColor, #013482));
  --contact-text: var( --color-text, var(--paraColor, #082E5C));
  --contact-white: var( --color-white, #FFFFFF);
  --contact-light: var( --color-off-white, #F6FBFD);
  --contact-border: var( --color-border, #6F8DA8);
  --contact-font-body: var( --font-body, "Inter", sans-serif);
  --contact-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--contact-text);
  background: var(--contact-light);
  font-family: var(--font-body);
}

/* =========================================================
   HERO
========================================================= */

.lj-simple-contact-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 230px;
  padding: 25px 0 20px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 18% 30%, rgba(255, 255, 255, .15), transparent 27%), radial-gradient( circle at 85% 75%, rgba(74, 179, 252, .13), transparent 28%), linear-gradient( 135deg, #013482 0%, #013883 43%, var(--contact-primary) 76%, #0687F1 100%);
  isolation: isolate;
}

.lj-simple-contact-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .18;
  background-image: linear-gradient( rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 55px 55px;
}

.lj-simple-contact-hero::after {
  position: absolute;
  right: -150px;
  bottom: -220px;
  width: 500px;
  height: 500px;
  content: "";
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(255, 255, 255, .022), 0 0 0 100px rgba(255, 255, 255, .015);
}

.lj-simple-contact-hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 820px);
}

.lj-simple-contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 8px 14px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-simple-contact-badge i {
  color: var(--contact-color);
  font-size: 17px;
}

.lj-simple-contact-hero h1 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(44px, 4vw, 58px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.035em;
}

.lj-simple-contact-hero h1 span {
  /****display:block;*****/
  color: var(--contact-color);
  font-style: italic;
}

.lj-simple-contact-hero p {
  max-width: 700px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.85;
}

.lj-simple-contact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 22px;
  margin-top: 27px;
}

.lj-simple-contact-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .80);
  font-size: 11px;
}

.lj-simple-contact-meta i {
  color: var(--contact-color);
  font-size: 17px;
}

/* =========================================================
   SHARED HEADING
========================================================= */

.lj-simple-section-heading {
  width: min(100%, 720px);
  margin: 0 auto 40px;
  text-align: center;
}

.lj-simple-section-heading>span {
  display: block;
  margin-bottom: 8px;
  color: var(--contact-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-simple-section-heading h2 {
  margin: 0;
  color: var(--contact-title);
  font-family: var(--font-body);
  font-size: clamp(42px, 5vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.lj-simple-section-heading p {
  margin: 13px 0 0;
  color: var(--contact-text);
  font-size: 13px;
  line-height: 1.8;
}

/* =========================================================
   CONTACT INFORMATION
========================================================= */

.lj-simple-contact-info {
  position: relative;
  padding: 80px 0 90px;
  background: radial-gradient( circle at 10% 20%, rgba(7, 104, 207, .04), transparent 25%), var(--contact-light);
}

.lj-simple-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.lj-simple-location-card {
  grid-column: 1 / -1;
}

.lj-simple-contact-card {
  position: relative;
  min-width: 0;
  padding: clamp(24px, 3vw, 35px);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--contact-border);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .065), 0 4px 14px rgba(7, 104, 207, .035);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.lj-simple-contact-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient( 90deg, var(--contact-primary-dark), var(--contact-primary), #0687F1);
}

.lj-simple-contact-card::after {
  position: absolute;
  top: -90px;
  right: -90px;
  width: 220px;
  height: 220px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .07), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .45s ease;
}

.lj-simple-contact-card:hover {
  transform: translateY(-7px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 27px 65px rgba(1, 52, 130, .09), 0 7px 20px rgba(7, 104, 207, .06);
}

.lj-simple-contact-card:hover::after {
  transform: scale(1.15);
}

.lj-simple-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.lj-simple-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--contact-primary-dark));
  border-radius: 50%;
  box-shadow: 0 13px 28px rgba(7, 104, 207, .22);
  transition: transform .35s ease, box-shadow .35s ease;
}

.lj-simple-contact-card:hover .lj-simple-card-icon {
  transform: rotate(-5deg) scale(1.05);
  box-shadow: 0 17px 35px rgba(7, 104, 207, .27);
}

.lj-simple-card-icon i {
  font-size: 25px;
}

.lj-simple-card-top span {
  display: block;
  margin-bottom: 5px;
  color: var(--contact-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-simple-card-top h3 {
  margin: 0;
  color: var(--contact-title);
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

/* =========================================================
   LOCATION ITEMS
========================================================= */

.lj-simple-address-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.lj-simple-address-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 19px;
  background: #F6FBFD;
  border: 1px solid #6F8DA8;
  border-radius: 6px;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

.lj-simple-address-item:hover {
  transform: translateY(-4px);
  background: #FFFFFF;
  border-color: rgba(7, 104, 207, .18);
}

.lj-simple-item-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  color: var(--contact-primary);
  background: rgba(7, 104, 207, .07);
  border: 1px solid rgba(7, 104, 207, .11);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
}

.lj-simple-address-item h4 {
  margin: 1px 0 7px;
  color: var(--contact-title);
  font-size: 12px;
  font-weight: 800;
}

.lj-simple-address-item address {
  margin: 0;
  color: var(--contact-text);
  font-size: 11px;
  font-style: normal;
  line-height: 1.75;
}

/* =========================================================
   PHONE AND EMAIL LIST
========================================================= */

.lj-simple-contact-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 11px;
}

.lj-simple-contact-list>a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  color: var(--contact-title);
  background: #F6FBFD;
  border: 1px solid #6F8DA8;
  border-radius: 6px;
  text-decoration: none;
  transition: transform .3s ease, color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-simple-contact-list>a:hover {
  transform: translateX(5px);
  color: var(--contact-primary);
  background: #FFFFFF;
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 10px 23px rgba(1, 52, 130, .045);
}

.lj-simple-list-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--contact-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
}

.lj-simple-list-icon i {
  font-size: 19px;
}

.lj-simple-list-content {
  min-width: 0;
}

.lj-simple-list-content small {
  display: block;
  margin-bottom: 3px;
  color: var(--contact-text);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-simple-list-content strong {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.lj-simple-contact-list>a>i {
  color: #355A7D;
  font-size: 17px;
  transition: color .3s ease, transform .3s ease;
}

.lj-simple-contact-list>a:hover>i {
  color: var(--contact-primary);
  transform: translateX(3px);
}

/* =========================================================
   FORM SECTION
========================================================= */

.lj-simple-form-section {
  position: relative;
  padding: 90px 0 105px;
  background: #FFFFFF;
}

.lj-simple-form-section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: linear-gradient( 90deg, transparent, var(--contact-border), transparent);
}

.lj-simple-form-container {
  position: relative;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 60px);
  overflow: hidden;
  background: radial-gradient( circle at 100% 0, rgba(7, 104, 207, .055), transparent 27%), #FFFFFF;
  border: 1px solid var(--contact-border);
  border-radius: 10px;
  box-shadow: 0 25px 70px rgba(1, 52, 130, .09), 0 6px 20px rgba(7, 104, 207, .04);
}

.lj-simple-form-container::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient( 90deg, var(--contact-primary-dark), var(--contact-primary), #0687F1);
}

.lj-simple-form-heading {
  width: min(100%, 650px);
  margin: 0 auto 36px;
  text-align: center;
}

.lj-simple-form-heading>span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--contact-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-simple-form-heading>span i {
  font-size: 17px;
}

.lj-simple-form-heading h2 {
  margin: 0;
  color: var(--contact-title);
  font-family: var(--font-body);
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.lj-simple-form-heading p {
  margin: 13px 0 0;
  color: var(--contact-text);
  font-size: 12px;
  line-height: 1.8;
}

.lj-simple-form {
  width: 100%;
}

.lj-simple-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lj-simple-form-group {
  margin-bottom: 18px;
}

.lj-simple-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--contact-title);
  font-size: 10px;
  font-weight: 800;
}

.lj-simple-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lj-simple-input-wrap>i:first-child {
  position: absolute;
  z-index: 2;
  left: 16px;
  color: #355A7D;
  font-size: 19px;
  pointer-events: none;
  transition: color .3s ease;
}

.lj-simple-input-wrap input,
.lj-simple-input-wrap select,
.lj-simple-input-wrap textarea {
  width: 100%;
  color: var(--contact-title);
  background: #FFFFFF;
  border: 1px solid var(--contact-border);
  border-radius: 5px;
  outline: none;
  font-family: var(--font-body);
  font-size: 12px;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.lj-simple-input-wrap input,
.lj-simple-input-wrap select {
  height: 55px;
  padding: 0 47px;
}

.lj-simple-input-wrap textarea {
  min-height: 170px;
  padding: 17px 17px 17px 48px;
  resize: vertical;
  line-height: 1.7;
}

.lj-simple-input-wrap select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.lj-simple-input-wrap input::placeholder,
.lj-simple-input-wrap textarea::placeholder {
  color: #355A7D;
}

.lj-simple-input-wrap input:focus,
.lj-simple-input-wrap select:focus,
.lj-simple-input-wrap textarea:focus {
  background: #FFFFFF;
  border-color: rgba(7, 104, 207, .50);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06), 0 12px 30px rgba(1, 52, 130, .04);
}

.lj-simple-input-wrap:focus-within>i:first-child {
  color: var(--contact-primary);
}

.lj-simple-select-icon {
  position: absolute;
  right: 15px;
  color: #0687F1;
  font-size: 19px;
  pointer-events: none;
}

.lj-simple-textarea-wrap {
  align-items: flex-start;
}

.lj-simple-textarea-wrap>i:first-child {
  top: 18px;
}

.lj-simple-error,
.lj-simple-consent-error {
  display: block;
  min-height: 14px;
  margin-top: 5px;
  color: #0768CF;
  font-size: 9px;
  line-height: 1.4;
}

.lj-simple-form-group.has-error input,
.lj-simple-form-group.has-error select,
.lj-simple-form-group.has-error textarea {
  border-color: #0768CF;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .055);
}

.lj-simple-form-group.has-success input,
.lj-simple-form-group.has-success select,
.lj-simple-form-group.has-success textarea {
  border-color: #0687F1;
}

.lj-simple-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.lj-simple-message-meta>span {
  flex: 0 0 auto;
  margin-top: 5px;
  color: #355A7D;
  font-size: 9px;
}

/* =========================================================
   CONSENT
========================================================= */

.lj-simple-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--contact-text);
  font-size: 10px;
  line-height: 1.65;
  cursor: pointer;
}

.lj-simple-consent input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lj-simple-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 1px solid var(--contact-border);
  border-radius: 3px;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-simple-checkbox i {
  opacity: 0;
  font-size: 14px;
  transform: scale(.6);
  transition: opacity .25s ease, transform .25s ease;
}

.lj-simple-consent input:checked+.lj-simple-checkbox {
  background: var(--contact-primary);
  border-color: var(--contact-primary);
  box-shadow: 0 6px 15px rgba(7, 104, 207, .17);
}

.lj-simple-consent input:checked+.lj-simple-checkbox i {
  opacity: 1;
  transform: scale(1);
}

.lj-simple-consent a {
  color: var(--contact-primary);
  font-weight: 800;
  text-decoration: none;
}

.lj-simple-consent a:hover {
  text-decoration: underline;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-simple-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 13px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--contact-primary) 50%, var(--contact-primary-dark));
  border: 0;
  border-radius: 5px;
  box-shadow: 0 16px 36px rgba(7, 104, 207, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.lj-simple-submit::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .27), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}

.lj-simple-submit:hover::before {
  left: 130%;
}

.lj-simple-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 21px 43px rgba(7, 104, 207, .31), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.lj-simple-submit i {
  font-size: 18px;
  transition: transform .3s ease;
}

.lj-simple-submit:hover i {
  transform: translate(3px, -2px);
}

.lj-simple-submit:disabled {
  opacity: .72;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

.lj-simple-contact-hero-content>*,
.lj-simple-section-heading,
.lj-simple-contact-card,
.lj-simple-form-container {
  opacity: 0;
  transform: translateY(22px);
  animation: ljSimpleContactReveal .75s ease forwards;
}

.lj-simple-contact-hero-content> :nth-child(1) {
  animation-delay: .07s;
}

.lj-simple-contact-hero-content> :nth-child(2) {
  animation-delay: .14s;
}

.lj-simple-contact-hero-content> :nth-child(3) {
  animation-delay: .21s;
}

.lj-simple-contact-hero-content> :nth-child(4) {
  animation-delay: .28s;
}

.lj-simple-section-heading {
  animation-delay: .10s;
}

.lj-simple-contact-card:nth-child(1) {
  animation-delay: .16s;
}

.lj-simple-contact-card:nth-child(2) {
  animation-delay: .24s;
}

.lj-simple-contact-card:nth-child(3) {
  animation-delay: .32s;
}

.lj-simple-form-container {
  animation-delay: .14s;
}

@keyframes ljSimpleContactReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   RESPONSIVENESS
========================================================= */

@media(max-width:991.98px) {
  .lj-simple-contact-hero {
    min-height: 375px;
    padding: 75px 0 65px;
  }
  .lj-simple-address-grid {
    grid-template-columns: 1fr;
  }
  .lj-simple-contact-info {
    padding: 65px 0 75px;
  }
  .lj-simple-form-section {
    padding: 75px 0 85px;
  }
}

@media(max-width:767.98px) {
  .lj-simple-contact-hero {
    min-height: 350px;
    text-align: center;
  }
  .lj-simple-contact-hero-content {
    margin: 0 auto;
  }
  .lj-simple-contact-hero p {
    margin-right: auto;
    margin-left: auto;
    font-size: 13px;
  }
  .lj-simple-contact-meta {
    justify-content: center;
  }
  .lj-simple-contact-grid {
    grid-template-columns: 1fr;
  }
  .lj-simple-location-card {
    grid-column: auto;
  }
  .lj-simple-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media(max-width:575.98px) {
  .lj-simple-contact-hero {
    min-height: 205px;
    padding: 20px 0 18px;
  }
  .lj-simple-contact-hero h1 {
    font-size: clamp(35px, 10vw, 42px);
  }
  .lj-simple-contact-hero p {
    font-size: 12px;
    line-height: 1.75;
  }
  .lj-simple-contact-meta {
    flex-direction: row;
    gap: 8px;
  }
  .lj-simple-contact-info {
    padding: 50px 0 60px;
  }
  .lj-simple-section-heading {
    margin-bottom: 30px;
  }
  .lj-simple-section-heading h2,
  .lj-simple-form-heading h2 {
    font-size: 39px;
  }
  .lj-simple-contact-card {
    padding: 23px 17px;
  }
  .lj-simple-card-top h3 {
    font-size: 30px;
  }
  .lj-simple-address-item {
    padding: 16px 13px;
  }
  .lj-simple-contact-list>a {
    grid-template-columns: 39px minmax(0, 1fr) 20px;
    gap: 9px;
    padding: 11px;
  }
  .lj-simple-list-icon {
    width: 39px;
    height: 39px;
  }
  .lj-simple-form-section {
    padding: 60px 0 70px;
  }
  .lj-simple-form-container {
    padding: 32px 17px;
    border-radius: 8px;
  }
  .lj-simple-form-heading {
    margin-bottom: 28px;
  }
  .lj-simple-input-wrap input,
  .lj-simple-input-wrap select {
    height: 53px;
  }
}

@media(max-width:360px) {
  .lj-simple-contact-list>a {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .lj-simple-contact-list>a>i {
    display: none;
  }
  .lj-simple-card-top {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-simple-contact-hero-content>*,
  .lj-simple-section-heading,
  .lj-simple-contact-card,
  .lj-simple-form-container {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-simple-contact-card,
  .lj-simple-contact-card::after,
  .lj-simple-card-icon,
  .lj-simple-address-item,
  .lj-simple-contact-list>a,
  .lj-simple-submit,
  .lj-simple-submit::before {
    transition: none;
  }
}

/********************************CONTACT ENDS HERE****************************/

/*******************************ABOUT US************************************/

/* =========================================================
   LINJUST MODERN LUXURY ABOUT PAGE
========================================================= */

.lj-about-page {
  --about-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --about-primary-dark: var( --color-primary-dark, #013883);
  --about-title: var( --color-title, var(--titleColor, #013482));
  --about-text: var( --color-text, var(--paraColor, #082E5C));
  --about-white: var( --color-white, #FFFFFF);
  --about-light: var( --color-off-white, #F6FBFD);
  --about-soft: #F6FBFD;
  --about-border: var( --color-border, #6F8DA8);
  --about-font-body: var( --font-body, "Inter", sans-serif);
  --about-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  overflow: hidden;
  color: var(--about-text);
  background: #FFFFFF;
  font-family: var(--font-body);
}

.lj-about-page *,
.lj-about-page *::before,
.lj-about-page *::after {
  box-sizing: border-box;
}

.lj-about-page img {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   SECTION 1: INTRODUCTION
========================================================= */

.lj-about-intro {
  position: relative;
  padding: 55px 0;
  overflow: hidden;
  background: radial-gradient( circle at 8% 18%, rgba(7, 104, 207, .055), transparent 25%), radial-gradient( circle at 90% 82%, rgba(7, 104, 207, .035), transparent 25%), #FFFFFF;
}

.lj-about-intro::before {
  position: absolute;
  top: -160px;
  left: -160px;
  width: 380px;
  height: 380px;
  content: "";
  border: 1px solid rgba(7, 104, 207, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(7, 104, 207, .018), 0 0 0 90px rgba(7, 104, 207, .012);
}

.lj-about-intro-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  align-items: center;
  gap: clamp(55px, 8vw, 110px);
}

.lj-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--about-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-about-eyebrow i {
  font-size: 18px;
}

.lj-about-intro-content h1 {
  max-width: 760px;
  margin: 0;
  color: var(--about-title);
  font-family: var(--font-body);
  font-size: clamp(54px, 6vw, 88px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.045em;
}

.lj-about-intro-content h1 span {
  display: block;
  color: var(--about-primary);
  font-style: italic;
}

.lj-about-lead {
  max-width: 690px;
  margin: 27px 0 14px;
  color: #013883;
  font-size: 15px;
  line-height: 1.9;
}

.lj-about-intro-content>p:not(.lj-about-lead) {
  max-width: 690px;
  margin: 0;
  color: var(--about-text);
  font-size: 13px;
  line-height: 1.85;
}

/* Introduction image */

.lj-about-intro-visual {
  position: relative;
  min-width: 0;
  padding: 30px 25px 40px;
}

.lj-about-image-card {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  background: #D5EAF8;
  border: 1px solid var(--about-border);
  border-radius: 14px;
  box-shadow: 0 35px 80px rgba(1, 52, 130, .14), 0 10px 28px rgba(7, 104, 207, .055);
}

.lj-about-image-card img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  transition: transform 1s ease;
}

.lj-about-image-card:hover img {
  transform: scale(1.045);
}

.lj-about-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient( to top, rgba(1, 52, 130, .83), rgba(1, 52, 130, .10) 60%, transparent);
}

.lj-about-image-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 36px;
  color: #FFFFFF;
}

.lj-about-image-caption>span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: #4AB3FC;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-about-image-caption h3 {
  max-width: 440px;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 35px;
  font-weight: 700;
  line-height: 1.05;
}

.lj-about-floating-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
  padding: 14px 17px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(1, 52, 130, .14);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  animation: ljAboutFloat 5s ease-in-out infinite;
}

.lj-about-floating-card>i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--about-primary), var(--about-primary-dark));
  border-radius: 50%;
  font-size: 20px;
}

.lj-about-floating-card strong {
  display: block;
  color: var(--about-title);
  font-size: 11px;
  font-weight: 800;
}

.lj-about-floating-card span {
  display: block;
  margin-top: 3px;
  color: var(--about-text);
  font-size: 8px;
}

.lj-about-floating-card-one {
  top: 80px;
  left: -15px;
}

.lj-about-floating-card-two {
  right: -20px;
  bottom: 85px;
  animation-delay: -2.5s;
}

/* =========================================================
   ACCORDION
========================================================= */

.lj-about-accordion {
  display: grid;
  gap: 10px;
  margin-top: 32px;
}

.lj-about-accordion-item {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--about-border);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(1, 52, 130, .035);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.lj-about-accordion-item.active {
  border-color: rgba(7, 104, 207, .22);
  box-shadow: 0 13px 32px rgba(1, 52, 130, .06);
}

.lj-about-accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 58px;
  padding: 14px 17px;
  color: var(--about-title);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
}

.lj-about-accordion-button>span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
}

.lj-about-accordion-button>span i {
  color: var(--about-primary);
  font-size: 19px;
}

.lj-about-accordion-button>i {
  color: var(--about-primary);
  font-size: 18px;
}

.lj-about-accordion-content {
  display: none;
  padding: 0 17px 17px 46px;
}

.lj-about-accordion-item.active .lj-about-accordion-content {
  display: block;
}

.lj-about-accordion-content p {
  margin: 0;
  color: var(--about-text);
  font-size: 11px;
  line-height: 1.75;
}

/* =========================================================
   SHARED TWO-COLUMN SECTIONS
========================================================= */

.lj-about-story,
.lj-about-purpose,
.lj-about-safety,
.lj-about-why {
  position: relative;
  padding: 70px 0;
}

.lj-about-story,
.lj-about-safety {
  background: var(--about-light);
}

.lj-about-purpose,
.lj-about-why {
  background: #FFFFFF;
}

.lj-about-two-column {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(55px, 8vw, 110px);
}

.lj-about-two-column-reverse {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
}

.lj-about-section-label {
  display: inline-block;
  margin-bottom: 13px;
  color: var(--about-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-about-section-content h2 {
  max-width: 720px;
  margin: 0;
  color: var(--about-title);
  font-family: var(--font-body);
  font-size: clamp(46px, 5vw, 68px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
}

.lj-about-section-content h2 span {
  /***display:block;****/
  color: var(--about-primary);
  font-style: italic;
}

.lj-about-section-content>p {
  max-width: 700px;
  margin: 22px 0 0;
  color: var(--about-text);
  font-size: var(--main-font-size);
  line-height: 1.88;
}

.lj-about-section-visual {
  position: relative;
  min-width: 0;
}

.lj-about-visual-frame {
  position: relative;
  min-height: 530px;
  overflow: hidden;
  background: #D5EAF8;
  border: 1px solid var(--about-border);
  border-radius: 12px;
  box-shadow: 0 28px 65px rgba(1, 52, 130, .11);
}

.lj-about-visual-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient( to top, rgba(1, 52, 130, .24), transparent 48%);
  pointer-events: none;
}

.lj-about-visual-frame img {
  width: 100%;
  height: 530px;
  object-fit: cover;
  transition: transform .9s ease;
}

.lj-about-visual-frame:hover img {
  transform: scale(1.045);
}

.lj-about-visual-number {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .86);
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 700;
}

/* =========================================================
   STORY FEATURES
========================================================= */

.lj-about-feature-list {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.lj-about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px;
  background: #FFFFFF;
  border: 1px solid var(--about-border);
  border-radius: 7px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.lj-about-story .lj-about-feature-item {
  background: rgba(255, 255, 255, .75);
}

.lj-about-feature-item:hover {
  transform: translateX(6px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 12px 28px rgba(1, 52, 130, .055);
}

.lj-about-feature-item>span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: var(--about-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
}

.lj-about-feature-item>span i {
  font-size: 20px;
}

.lj-about-feature-item h3 {
  margin: 1px 0 4px;
  color: var(--about-title);
  font-size: var(--main-font-size);
  font-weight: 800;
}

.lj-about-feature-item p {
  margin: 0;
  color: var(--about-text);
  font-size: var(--main-font-size);
  line-height: 1.65;
}

/* =========================================================
   BUTTONS
========================================================= */

.lj-about-button,
.lj-about-button-outline,
.lj-about-light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease, color .3s ease, background .3s ease, border-color .3s ease;
}

.lj-about-button {
  margin-top: 27px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--about-primary), var(--about-primary-dark));
  box-shadow: 0 15px 32px rgba(7, 104, 207, .24);
}

.lj-about-button:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .31);
}

.lj-about-button i,
.lj-about-button-outline i,
.lj-about-light-button i {
  font-size: 17px;
}

.lj-about-button-outline {
  color: var(--about-primary);
  background: transparent;
  border: 1px solid rgba(7, 104, 207, .28);
}

.lj-about-button-outline:hover {
  color: #FFFFFF;
  background: var(--about-primary);
  border-color: var(--about-primary);
  transform: translateY(-3px);
}

.lj-about-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.lj-about-button-group .lj-about-button {
  margin-top: 0;
}

/* =========================================================
   PROCESS SECTION
========================================================= */

.lj-about-process-list {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 33px;
}

.lj-about-process-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 15px;
  padding-bottom: 24px;
}

.lj-about-process-item:not(:last-child)::before {
  position: absolute;
  top: 43px;
  left: 22px;
  width: 1px;
  height: calc(100% - 28px);
  content: "";
  background: linear-gradient( to bottom, rgba(7, 104, 207, .35), rgba(7, 104, 207, .05));
}

.lj-about-process-number {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--about-primary), var(--about-primary-dark));
  border: 5px solid #F6FBFD;
  border-radius: 50%;
  box-shadow: 0 9px 20px rgba(7, 104, 207, .16);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
}

.lj-about-process-item h3 {
  margin: 4px 0 5px;
  color: var(--about-title);
  font-size: var(--main-font-size);
  font-weight: 800;
}

.lj-about-process-item p {
  max-width: 580px;
  margin: 0;
  color: var(--about-text);
  font-size: var(--main-font-size);
  line-height: 1.7;
}

/* =========================================================
   SAFETY CARDS
========================================================= */

.lj-about-safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.lj-about-safety-card {
  padding: 20px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--about-border);
  border-radius: 7px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.lj-about-safety-card:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 104, 207, .19);
  box-shadow: 0 16px 35px rgba(1, 52, 130, .07);
}

.lj-about-safety-card>i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-bottom: 15px;
  color: var(--about-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
  font-size: 21px;
}

.lj-about-safety-card h3 {
  margin: 0 0 7px;
  color: var(--about-title);
  font-size: 12px;
  font-weight: 800;
}

.lj-about-safety-card p {
  margin: 0;
  color: var(--about-text);
  font-size: 10px;
  line-height: 1.65;
}

/* =========================================================
   VALUE LIST
========================================================= */

.lj-about-value-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.lj-about-value-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px;
  background: var(--about-soft);
  border: 1px solid #D5EAF8;
  border-radius: 7px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.lj-about-value-item:hover {
  transform: translateY(-5px);
  background: #FFFFFF;
  border-color: rgba(7, 104, 207, .18);
}

.lj-about-value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--about-primary), var(--about-primary-dark));
  border-radius: 50%;
  box-shadow: 0 9px 20px rgba(7, 104, 207, .16);
}

.lj-about-value-icon i {
  font-size: 19px;
}

.lj-about-value-item h3 {
  margin: 1px 0 5px;
  color: var(--about-title);
  font-size: 11px;
  font-weight: 800;
}

.lj-about-value-item p {
  margin: 0;
  color: var(--about-text);
  font-size: 9px;
  line-height: 1.65;
}

.lj-about-premium-tag {
  position: absolute;
  right: -20px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 260px;
  padding: 15px 18px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #013482, var(--about-primary-dark));
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 7px;
  box-shadow: 0 18px 45px rgba(1, 52, 130, .24);
}

.lj-about-premium-tag>i {
  color: #4AB3FC;
  font-size: 27px;
}

.lj-about-premium-tag small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .65);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-about-premium-tag strong {
  display: block;
  font-size: 11px;
}

/* =========================================================
   FINAL CTA
========================================================= */

.lj-about-final-cta {
  padding: 90px 0 105px;
  background: var(--about-light);
}

.lj-about-final-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  min-height: 220px;
  padding: 42px 48px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 12% 25%, rgba(255, 255, 255, .14), transparent 25%), linear-gradient( 135deg, #013482, #013883 45%, var(--about-primary));
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(1, 52, 130, .20);
  isolation: isolate;
}

.lj-about-final-decoration {
  position: absolute;
  z-index: -1;
  right: -130px;
  bottom: -210px;
  width: 450px;
  height: 450px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255, 255, 255, .02), 0 0 0 95px rgba(255, 255, 255, .014);
}

.lj-about-final-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
  border-radius: 50%;
  box-shadow: 0 15px 35px rgba(1, 52, 130, .14);
}

.lj-about-final-icon i {
  font-size: 31px;
}

.lj-about-final-content>span {
  display: block;
  margin-bottom: 7px;
  color: #4AB3FC;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-about-final-content h2 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(35px, 4vw, 52px);
  font-weight: 700;
  line-height: 1;
}

.lj-about-final-content p {
  max-width: 650px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .75);
  font-size: 11px;
  line-height: 1.75;
}

.lj-about-final-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.lj-about-light-button {
  color: var(--about-primary);
  background: #FFFFFF;
  box-shadow: 0 13px 30px rgba(1, 52, 130, .13);
}

.lj-about-light-button:hover {
  color: var(--about-primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(1, 52, 130, .18);
}

.lj-about-text-button {
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.lj-about-text-button:hover {
  color: #4AB3FC;
}

/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

.lj-about-intro-content,
.lj-about-intro-visual,
.lj-about-section-content,
.lj-about-section-visual,
.lj-about-final-card {
  opacity: 0;
  transform: translateY(28px);
  animation: ljAboutReveal .8s ease forwards;
}

.lj-about-intro-visual,
.lj-about-section-visual {
  animation-delay: .12s;
}

@keyframes ljAboutReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ljAboutFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* =========================================================
   TABLET RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-about-intro-grid,
  .lj-about-two-column,
  .lj-about-two-column-reverse {
    gap: 55px;
  }
  .lj-about-intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(370px, .85fr);
  }
  .lj-about-two-column,
  .lj-about-two-column-reverse {
    grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr);
  }
  .lj-about-final-card {
    grid-template-columns: 65px minmax(0, 1fr);
  }
  .lj-about-final-actions {
    grid-column: 2;
  }
}

@media(max-width:991.98px) {
  .lj-about-intro,
  .lj-about-story,
  .lj-about-purpose,
  .lj-about-safety,
  .lj-about-why {
    padding: 80px 0;
  }
  .lj-about-intro-grid,
  .lj-about-two-column,
  .lj-about-two-column-reverse {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .lj-about-intro-visual {
    width: min(100%, 650px);
    margin: 0 auto;
  }
  .lj-about-two-column-reverse .lj-about-section-content {
    order: 2;
  }
  .lj-about-two-column-reverse .lj-about-section-visual {
    order: 1;
  }
  .lj-about-section-visual {
    width: min(100%, 680px);
    margin: 0 auto;
  }
  .lj-about-image-card,
  .lj-about-image-card img {
    height: 560px;
    min-height: 560px;
  }
  .lj-about-visual-frame,
  .lj-about-visual-frame img {
    height: 500px;
    min-height: 500px;
  }
}

/* =========================================================
   MOBILE RESPONSIVENESS
========================================================= */

@media(max-width:767.98px) {
  .lj-about-intro {
    padding: 65px 0;
  }
  .lj-about-story,
  .lj-about-purpose,
  .lj-about-safety,
  .lj-about-why {
    padding: 70px 0;
  }
  .lj-about-intro-content {
    text-align: center;
  }
  .lj-about-intro-content h1 {
    margin-right: auto;
    margin-left: auto;
  }
  .lj-about-intro-content>p {
    margin-right: auto;
    margin-left: auto;
  }
  .lj-about-accordion {
    text-align: left;
  }
  .lj-about-image-card,
  .lj-about-image-card img {
    height: 500px;
    min-height: 500px;
  }
  .lj-about-section-content h2 {
    font-size: 49px;
  }
  .lj-about-safety-grid,
  .lj-about-value-list {
    grid-template-columns: 1fr;
  }
  .lj-about-final-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 38px 30px;
    text-align: center;
  }
  .lj-about-final-icon {
    margin: 0 auto;
  }
  .lj-about-final-actions {
    grid-column: auto;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media(max-width:575.98px) {
  .lj-about-intro {
    padding: 55px 0 60px;
  }
  .lj-about-intro-content h1 {
    font-size: clamp(47px, 13vw, 62px);
  }
  .lj-about-lead {
    font-size: 13px;
  }
  .lj-about-intro-content>p:not(.lj-about-lead),
  .lj-about-section-content>p {
    font-size: 11px;
  }
  .lj-about-intro-visual {
    padding: 15px 0 35px;
  }
  .lj-about-image-card,
  .lj-about-image-card img {
    height: 430px;
    min-height: 430px;
  }
  .lj-about-image-caption {
    padding: 25px 20px;
  }
  .lj-about-image-caption h3 {
    font-size: 29px;
  }
  .lj-about-floating-card {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    animation: none;
  }
  .lj-about-section-content h2 {
    font-size: 42px;
  }
  .lj-about-visual-frame,
  .lj-about-visual-frame img {
    height: 390px;
    min-height: 390px;
  }
  .lj-about-visual-number {
    right: 16px;
    bottom: 16px;
    width: 53px;
    height: 53px;
    font-size: 22px;
  }
  .lj-about-premium-tag {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    margin-top: 13px;
  }
  .lj-about-button-group {
    flex-direction: column;
  }
  .lj-about-button-group a {
    width: 100%;
  }
  .lj-about-final-cta {
    padding: 60px 0 70px;
  }
  .lj-about-final-card {
    padding: 32px 20px;
    border-radius: 8px;
  }
  .lj-about-final-content h2 {
    font-size: 37px;
  }
  .lj-about-final-actions {
    flex-direction: column;
  }
  .lj-about-light-button {
    width: 100%;
  }
}

@media(max-width:360px) {
  .lj-about-accordion-button {
    padding-right: 13px;
    padding-left: 13px;
  }
  .lj-about-accordion-button>span {
    font-size: 10px;
  }
  .lj-about-feature-item,
  .lj-about-value-item {
    align-items: flex-start;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-about-intro-content,
  .lj-about-intro-visual,
  .lj-about-section-content,
  .lj-about-section-visual,
  .lj-about-final-card,
  .lj-about-floating-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-about-page *,
  .lj-about-page *::before,
  .lj-about-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/*******************************ABOUT US ENDS HERE**************************/

/***************************************how to  sell **************************************************/

/* =========================================================
   LINJUST HOW TO SELL PAGE
========================================================= */

.lj-sell-guide-page {
  --sell-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --sell-primary-dark: var( --color-primary-dark, #013883);
  --sell-primary-soft: rgba(7, 104, 207, .07);
  --sell-title: var( --color-title, var(--titleColor, #013482));
  --sell-text: var( --color-text, var(--paraColor, #082E5C));
  --sell-white: var( --color-white, #FFFFFF);
  --sell-light: var( --color-off-white, #F6FBFD);
  --sell-soft: #F6FBFD;
  --sell-border: var( --color-border, #6F8DA8);
  --sell-font-body: var( --font-body, "Inter", sans-serif);
  --sell-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--sell-text);
  background: var(--sell-white);
  font-family: var(--font-body);
}

.lj-sell-guide-page *,
.lj-sell-guide-page *::before,
.lj-sell-guide-page *::after {
  box-sizing: border-box;
}

.lj-sell-guide-page a {
  text-decoration: none;
}

/* =========================================================
   MAIN SELLING SECTION
========================================================= */

.lj-sell-guide-main {
  position: relative;
  padding: 65px 0 70px;
  overflow: hidden;
  background: radial-gradient( circle at 7% 12%, rgba(7, 104, 207, .055), transparent 23%), radial-gradient( circle at 92% 36%, rgba(7, 104, 207, .035), transparent 25%), linear-gradient( to bottom, #FFFFFF, #F6FBFD 45%, #FFFFFF);
  isolation: isolate;
}

.lj-sell-guide-decoration {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(7, 104, 207, .07);
  border-radius: 50%;
  pointer-events: none;
}

.lj-sell-guide-decoration-one {
  top: -180px;
  left: -170px;
  width: 430px;
  height: 430px;
  box-shadow: 0 0 0 50px rgba(7, 104, 207, .014), 0 0 0 100px rgba(7, 104, 207, .009);
}

.lj-sell-guide-decoration-two {
  top: 38%;
  right: -230px;
  width: 520px;
  height: 520px;
  box-shadow: 0 0 0 60px rgba(7, 104, 207, .012), 0 0 0 120px rgba(7, 104, 207, .008);
}

/* =========================================================
   PAGE HEADING
========================================================= */

.lj-sell-guide-heading {
  width: min(100%, 930px);
  margin: 0 auto;
  text-align: center;
}

.lj-sell-guide-badge,
.lj-sell-video-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 15px;
  color: var(--sell-primary);
  background: var(--sell-primary-soft);
  border: 1px solid rgba(7, 104, 207, .13);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lj-sell-guide-badge i,
.lj-sell-video-badge i {
  font-size: 18px;
}

.lj-sell-guide-heading h1 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: clamp(58px, 7vw, 96px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
}

.lj-sell-guide-heading h1 span {
  /** display:block; **/
  color: var(--sell-primary);
  font-style: italic;
}

.lj-sell-guide-heading>p {
  width: min(100%, 780px);
  margin: 26px auto 0;
  color: var(--sell-text);
  font-size: 14px;
  line-height: 1.9;
}

.lj-sell-guide-heading-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 26px;
}

.lj-sell-guide-heading-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #013883;
  font-size: 10px;
  font-weight: 700;
}

.lj-sell-guide-heading-meta i {
  color: var(--sell-primary);
  font-size: 17px;
}

/* =========================================================
   INTRODUCTION CARD
========================================================= */

.lj-sell-guide-intro {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 65px;
  padding: 32px 35px;
  overflow: hidden;
  background: radial-gradient( circle at 100% 0, rgba(7, 104, 207, .06), transparent 30%), #FFFFFF;
  border: 1px solid var(--sell-border);
  border-radius: 12px;
  box-shadow: 0 25px 65px rgba(1, 52, 130, .08), 0 6px 20px rgba(7, 104, 207, .035);
}

.lj-sell-guide-intro::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient( 90deg, var(--sell-primary-dark), var(--sell-primary), #0687F1);
}

.lj-sell-guide-intro-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--sell-primary), var(--sell-primary-dark));
  border-radius: 50%;
  box-shadow: 0 15px 34px rgba(7, 104, 207, .23);
}

.lj-sell-guide-intro-icon i {
  font-size: 29px;
}

.lj-sell-guide-intro-content>span {
  display: block;
  margin-bottom: 6px;
  color: var(--sell-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-sell-guide-intro-content h2 {
  max-width: 750px;
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.08;
}

.lj-sell-guide-intro-content p {
  max-width: 780px;
  margin: 10px 0 0;
  color: var(--sell-text);
  font-size: 11px;
  line-height: 1.75;
}

.lj-sell-guide-intro-button,
.lj-sell-guide-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 23px;
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--sell-primary), var(--sell-primary-dark));
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(7, 104, 207, .23);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .3s ease, box-shadow .3s ease;
}

.lj-sell-guide-intro-button:hover,
.lj-sell-guide-cta-button:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 19px 38px rgba(7, 104, 207, .31);
}

.lj-sell-guide-intro-button i,
.lj-sell-guide-cta-button i {
  font-size: 17px;
  transition: transform .3s ease;
}

.lj-sell-guide-intro-button:hover i,
.lj-sell-guide-cta-button:hover i {
  transform: translateX(4px);
}

/* =========================================================
   PROCESS HEADING
========================================================= */

.lj-sell-guide-process {
  margin-top: 105px;
}

.lj-sell-guide-process-heading {
  width: min(100%, 800px);
  margin: 0 auto 55px;
  text-align: center;
}

.lj-sell-guide-process-heading>span {
  display: block;
  margin-bottom: 11px;
  color: var(--sell-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-sell-guide-process-heading h2 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: clamp(45px, 5vw, 67px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
}

.lj-sell-guide-process-heading h2 em {
  display: block;
  color: var(--sell-primary);
  font-weight: 700;
}

.lj-sell-guide-process-heading p {
  width: min(100%, 680px);
  margin: 17px auto 0;
  color: var(--sell-text);
  font-size: 12px;
  line-height: 1.8;
}

/* =========================================================
   TIMELINE
========================================================= */

.lj-sell-guide-timeline {
  position: relative;
  display: grid;
  gap: 22px;
  width: min(100%, 1050px);
  margin: 0 auto;
}

.lj-sell-guide-timeline::before {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 39px;
  width: 2px;
  content: "";
  background: linear-gradient( to bottom, rgba(7, 104, 207, .55), rgba(7, 104, 207, .12), rgba(7, 104, 207, .55));
}

.lj-sell-guide-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

.lj-sell-guide-step-marker {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(1, 52, 130, .08);
}

.lj-sell-guide-step-marker span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--sell-primary-dark));
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 700;
}

.lj-sell-guide-step-card {
  position: relative;
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: 22px;
  padding: 30px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--sell-border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .06);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.lj-sell-guide-step-card::after {
  position: absolute;
  top: -85px;
  right: -85px;
  width: 210px;
  height: 210px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .065), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .5s ease;
}

.lj-sell-guide-step:hover .lj-sell-guide-step-card {
  transform: translateY(-6px);
  border-color: rgba(7, 104, 207, .19);
  box-shadow: 0 26px 60px rgba(1, 52, 130, .09), 0 6px 18px rgba(7, 104, 207, .045);
}

.lj-sell-guide-step:hover .lj-sell-guide-step-card::after {
  transform: scale(1.18);
}

.lj-sell-guide-step-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  color: var(--sell-primary);
  background: var(--sell-primary-soft);
  border: 1px solid rgba(7, 104, 207, .11);
  border-radius: 50%;
  transition: color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.lj-sell-guide-step-icon i {
  font-size: 28px;
}

.lj-sell-guide-step:hover .lj-sell-guide-step-icon {
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--sell-primary), var(--sell-primary-dark));
  transform: rotate(-5deg) scale(1.05);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .20);
}

.lj-sell-guide-step-content {
  position: relative;
  z-index: 2;
}

.lj-sell-guide-step-label {
  display: block;
  margin-bottom: 5px;
  color: var(--sell-primary);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-sell-guide-step-content h3 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
}

.lj-sell-guide-step-content>p {
  max-width: 780px;
  margin: 11px 0 0;
  color: var(--sell-text);
  font-size: 11px;
  line-height: 1.78;
}

.lj-sell-guide-step-content ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 20px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.lj-sell-guide-step-content li {
  position: relative;
  padding-left: 17px;
  color: #013883;
  font-size: 9px;
  font-weight: 650;
}

.lj-sell-guide-step-content li::before {
  position: absolute;
  top: 2px;
  left: 0;
  content: "\ea41";
  color: var(--sell-primary);
  font-family: var(--font-body);
  font-size: 13px;
}

/* =========================================================
   SELLER CTA
========================================================= */

.lj-sell-guide-cta {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 25px;
  margin-top: 85px;
  padding: 42px 45px;
  overflow: hidden;
  color: #FFFFFF;
  background: radial-gradient( circle at 15% 25%, rgba(255, 255, 255, .14), transparent 25%), linear-gradient( 135deg, #013482, #013883 45%, var(--sell-primary));
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(1, 52, 130, .20);
  isolation: isolate;
}

.lj-sell-guide-cta-decoration {
  position: absolute;
  z-index: -1;
  right: -130px;
  bottom: -210px;
  width: 450px;
  height: 450px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(255, 255, 255, .02), 0 0 0 100px rgba(255, 255, 255, .014);
}

.lj-sell-guide-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
  border-radius: 50%;
  box-shadow: 0 16px 35px rgba(1, 52, 130, .14);
}

.lj-sell-guide-cta-icon i {
  font-size: 31px;
}

.lj-sell-guide-cta-content>span {
  display: block;
  margin-bottom: 7px;
  color: #4AB3FC;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-sell-guide-cta-content h2 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
}

.lj-sell-guide-cta-content p {
  max-width: 690px;
  margin: 11px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 10px;
  line-height: 1.75;
}

.lj-sell-guide-cta-button {
  color: var(--sell-primary);
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(1, 52, 130, .14);
}

.lj-sell-guide-cta-button:hover {
  color: var(--sell-primary-dark);
  background: #F6FBFD;
  box-shadow: 0 19px 38px rgba(1, 52, 130, .20);
}

/* =========================================================
   VIDEO SECTION
========================================================= */

.lj-sell-video-section {
  position: relative;
  padding: 105px 0 115px;
  overflow: hidden;
  background: radial-gradient( circle at 50% 5%, rgba(7, 104, 207, .045), transparent 30%), var(--sell-light);
}

.lj-sell-video-heading {
  width: min(100%, 800px);
  margin: 0 auto 45px;
  text-align: center;
}

.lj-sell-video-heading h2 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
}

.lj-sell-video-heading h2 em {
  /***display:block;***/
  color: var(--sell-primary);
  font-weight: 700;
}

.lj-sell-video-heading>p {
  width: min(100%, 690px);
  margin: 17px auto 0;
  color: var(--sell-text);
  font-size: 12px;
  line-height: 1.82;
}

.lj-sell-video-card {
  width: min(100%, 1100px);
  margin: 0 auto;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--sell-border);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(1, 52, 130, .12), 0 8px 25px rgba(7, 104, 207, .04);
}

.lj-sell-video-frame {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  background: linear-gradient( 135deg, #013482, #013482);
}

.lj-sell-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lj-sell-video-information {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 35px;
  padding: 32px 38px;
}

.lj-sell-video-information-main>span {
  display: block;
  margin-bottom: 6px;
  color: var(--sell-primary);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-sell-video-information-main h3 {
  margin: 0;
  color: var(--sell-title);
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
}

.lj-sell-video-information-main p {
  max-width: 660px;
  margin: 9px 0 0;
  color: var(--sell-text);
  font-size: 10px;
  line-height: 1.72;
}

.lj-sell-video-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 390px;
}

.lj-sell-video-features span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  color: #013883;
  background: var(--sell-soft);
  border: 1px solid #6F8DA8;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

.lj-sell-video-features i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #FFFFFF;
  background: var(--sell-primary);
  border-radius: 50%;
  font-size: 12px;
}

/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

.lj-sell-guide-heading>*,
.lj-sell-guide-intro,
.lj-sell-guide-process-heading,
.lj-sell-guide-step,
.lj-sell-guide-cta,
.lj-sell-video-heading,
.lj-sell-video-card {
  opacity: 0;
  transform: translateY(25px);
  animation: ljSellGuideReveal .8s ease forwards;
}

.lj-sell-guide-heading> :nth-child(1) {
  animation-delay: .05s;
}

.lj-sell-guide-heading> :nth-child(2) {
  animation-delay: .12s;
}

.lj-sell-guide-heading> :nth-child(3) {
  animation-delay: .19s;
}

.lj-sell-guide-heading> :nth-child(4) {
  animation-delay: .26s;
}

.lj-sell-guide-intro {
  animation-delay: .20s;
}

.lj-sell-guide-process-heading {
  animation-delay: .10s;
}

.lj-sell-guide-step:nth-child(1) {
  animation-delay: .10s;
}

.lj-sell-guide-step:nth-child(2) {
  animation-delay: .16s;
}

.lj-sell-guide-step:nth-child(3) {
  animation-delay: .22s;
}

.lj-sell-guide-step:nth-child(4) {
  animation-delay: .28s;
}

.lj-sell-guide-step:nth-child(5) {
  animation-delay: .34s;
}

.lj-sell-guide-step:nth-child(6) {
  animation-delay: .40s;
}

.lj-sell-guide-step:nth-child(7) {
  animation-delay: .46s;
}

.lj-sell-guide-step:nth-child(8) {
  animation-delay: .52s;
}

.lj-sell-video-card {
  animation-delay: .15s;
}

@keyframes ljSellGuideReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   TABLET RESPONSIVENESS
========================================================= */

@media(max-width:1199.98px) {
  .lj-sell-guide-intro {
    grid-template-columns: 62px minmax(0, 1fr);
  }
  .lj-sell-guide-intro-button {
    grid-column: 2;
    justify-self: start;
  }
  .lj-sell-guide-cta {
    grid-template-columns: 65px minmax(0, 1fr);
  }
  .lj-sell-guide-cta-button {
    grid-column: 2;
    justify-self: start;
  }
  .lj-sell-video-information {
    grid-template-columns: 1fr;
  }
  .lj-sell-video-features {
    justify-content: flex-start;
    max-width: none;
  }
}

@media(max-width:991.98px) {
  .lj-sell-guide-main {
    padding: 85px 0 90px;
  }
  .lj-sell-guide-process {
    margin-top: 85px;
  }
  .lj-sell-video-section {
    padding: 85px 0 95px;
  }
  .lj-sell-guide-timeline {
    width: 100%;
  }
}

/* =========================================================
   MOBILE RESPONSIVENESS
========================================================= */

@media(max-width:767.98px) {
  .lj-sell-guide-main {
    padding: 70px 0 75px;
  }
  .lj-sell-guide-heading h1 {
    font-size: clamp(52px, 14vw, 72px);
  }
  .lj-sell-guide-heading>p {
    font-size: 12px;
  }
  .lj-sell-guide-heading-meta {
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }
  .lj-sell-guide-intro {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    text-align: center;
  }
  .lj-sell-guide-intro-icon {
    margin: 0 auto;
  }
  .lj-sell-guide-intro-button {
    grid-column: auto;
    justify-self: center;
  }
  .lj-sell-guide-process-heading {
    margin-bottom: 42px;
  }
  .lj-sell-guide-timeline::before {
    left: 29px;
  }
  .lj-sell-guide-step {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 15px;
  }
  .lj-sell-guide-step-marker {
    width: 60px;
    height: 60px;
    padding: 6px;
  }
  .lj-sell-guide-step-marker span {
    font-size: 18px;
  }
  .lj-sell-guide-step-card {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 25px 21px;
  }
  .lj-sell-guide-step-icon {
    width: 56px;
    height: 56px;
  }
  .lj-sell-guide-step-icon i {
    font-size: 24px;
  }
  .lj-sell-guide-step-content ul {
    display: grid;
    gap: 8px;
  }
  .lj-sell-guide-cta {
    grid-template-columns: 1fr;
    padding: 35px 28px;
    text-align: center;
  }
  .lj-sell-guide-cta-icon {
    margin: 0 auto;
  }
  .lj-sell-guide-cta-button {
    grid-column: auto;
    justify-self: center;
  }
  .lj-sell-video-section {
    padding: 70px 0 80px;
  }
  .lj-sell-video-information {
    padding: 27px 24px;
  }
  .lj-sell-video-information-main {
    text-align: center;
  }
  .lj-sell-video-features {
    justify-content: center;
  }
}

@media(max-width:575.98px) {
  .lj-sell-guide-main {
    padding: 58px 0 65px;
  }
  .lj-sell-guide-heading h1 {
    font-size: clamp(46px, 14vw, 62px);
  }
  .lj-sell-guide-heading>p {
    font-size: 11px;
    line-height: 1.8;
  }
  .lj-sell-guide-intro {
    margin-top: 45px;
    padding: 25px 17px;
    border-radius: 8px;
  }
  .lj-sell-guide-intro-content h2 {
    font-size: 30px;
  }
  .lj-sell-guide-process {
    margin-top: 68px;
  }
  .lj-sell-guide-process-heading h2 {
    font-size: 41px;
  }
  .lj-sell-guide-timeline::before {
    display: none;
  }
  .lj-sell-guide-step {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lj-sell-guide-step-marker {
    width: 57px;
    height: 57px;
    margin-left: 14px;
  }
  .lj-sell-guide-step-card {
    padding: 23px 17px;
    border-radius: 8px;
  }
  .lj-sell-guide-step-content h3 {
    font-size: 27px;
  }
  .lj-sell-guide-step-content>p {
    font-size: 10px;
  }
  .lj-sell-guide-cta {
    margin-top: 60px;
    padding: 31px 19px;
    border-radius: 8px;
  }
  .lj-sell-guide-cta-content h2 {
    font-size: 35px;
  }
  .lj-sell-video-section {
    padding: 60px 0 70px;
  }
  .lj-sell-video-heading h2 {
    font-size: 43px;
  }
  .lj-sell-video-card {
    border-radius: 8px;
  }
  .lj-sell-video-information {
    padding: 24px 17px;
  }
  .lj-sell-video-information-main h3 {
    font-size: 28px;
  }
  .lj-sell-video-features {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .lj-sell-video-features span {
    justify-content: flex-start;
    width: 100%;
    border-radius: 5px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-sell-guide-heading>*,
  .lj-sell-guide-intro,
  .lj-sell-guide-process-heading,
  .lj-sell-guide-step,
  .lj-sell-guide-cta,
  .lj-sell-video-heading,
  .lj-sell-video-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-sell-guide-step-card,
  .lj-sell-guide-step-card::after,
  .lj-sell-guide-step-icon,
  .lj-sell-guide-intro-button,
  .lj-sell-guide-cta-button {
    transition: none;
  }
}

/**************************************how to sell ends*****************/

/*************************** PACKAGES***********************************/

/* =========================================================
   LINJUST SUBSCRIPTION PACKAGES
========================================================= */

.lj-subscription-page {
  --subscription-primary: var( --color-primary, var(--colorPrimary, #0768CF));
  --subscription-primary-dark: var( --color-primary-dark, #013883);
  --subscription-title: var( --color-title, var(--titleColor, #013482));
  --subscription-text: var( --color-text, var(--paraColor, #082E5C));
  --subscription-white: var( --color-white, #FFFFFF);
  --subscription-light: var( --color-off-white, #F6FBFD);
  --subscription-soft: #F6FBFD;
  --subscription-border: var( --color-border, #6F8DA8);
  --subscription-font-body: var( --font-body, "Inter", sans-serif);
  --subscription-font-display: var( --font-heading, "Cormorant Garamond", serif);
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--subscription-text);
  background: var(--subscription-white);
  font-family: var(--font-body);
}

.lj-subscription-page *,
.lj-subscription-page *::before,
.lj-subscription-page *::after {
  box-sizing: border-box;
}

.lj-subscription-page a {
  text-decoration: none;
}

/* =========================================================
   SECTION
========================================================= */

.lj-subscription-section {
  position: relative;
  padding: 60px 0 65px;
  overflow: hidden;
  background: radial-gradient( circle at 8% 12%, rgba(7, 104, 207, .055), transparent 23%), radial-gradient( circle at 92% 40%, rgba(7, 104, 207, .035), transparent 27%), linear-gradient( to bottom, #FFFFFF, #F6FBFD 50%, #FFFFFF);
  isolation: isolate;
}

.lj-subscription-decoration {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(7, 104, 207, .07);
  border-radius: 50%;
  pointer-events: none;
}

.lj-subscription-decoration-one {
  top: -190px;
  left: -190px;
  width: 450px;
  height: 450px;
  box-shadow: 0 0 0 55px rgba(7, 104, 207, .013), 0 0 0 110px rgba(7, 104, 207, .008);
}

.lj-subscription-decoration-two {
  right: -240px;
  bottom: 10%;
  width: 530px;
  height: 530px;
  box-shadow: 0 0 0 65px rgba(7, 104, 207, .011), 0 0 0 130px rgba(7, 104, 207, .007);
}

/* =========================================================
   HEADING
========================================================= */

.lj-subscription-heading {
  width: min(100%, 930px);
  margin: 0 auto;
  text-align: center;
}

.lj-subscription-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 15px;
  color: var(--subscription-primary);
  background: rgba(7, 104, 207, .065);
  border: 1px solid rgba(7, 104, 207, .13);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lj-subscription-badge i {
  font-size: 18px;
}

.lj-subscription-heading h1 {
  margin: 0;
  color: var(--subscription-title);
  font-family: var(--font-body);
  font-size: clamp(37px, 3.7vw, 46px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.05em;
}

.lj-subscription-heading h1 span {
  /*** display:block; ***/
  color: var(--subscription-primary);
  font-style: italic;
}

.lj-subscription-heading p {
  width: min(100%, 760px);
  margin: 25px auto 0;
  color: var(--subscription-text);
  font-size: 13px;
  line-height: 1.9;
}

/* =========================================================
   SUBSCRIPTION TABS
========================================================= */

.lj-subscription-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 850px);
  margin: 55px auto 0;
  padding: 9px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--subscription-border);
  border-radius: 12px;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.lj-subscription-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 65px;
  padding: 10px 14px;
  overflow: hidden;
  color: #013883;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.lj-subscription-tab::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}

.lj-subscription-tab:hover::before {
  left: 130%;
}

.lj-subscription-tab:hover {
  color: var(--subscription-primary);
  background: var(--subscription-soft);
  border-color: rgba(7, 104, 207, .10);
}

.lj-subscription-tab.active {
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--subscription-primary) 50%, var(--subscription-primary-dark));
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 13px 30px rgba(7, 104, 207, .24);
  transform: translateY(-2px);
}

.lj-subscription-tab>i {
  flex: 0 0 auto;
  font-size: 22px;
}

.lj-subscription-tab span {
  display: block;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.lj-subscription-tab small {
  display: block;
  margin-bottom: 3px;
  color: inherit;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .08em;
  opacity: .68;
  text-transform: uppercase;
}

.lj-subscription-selected-period {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 17px;
  color: #0768CF;
  font-size: 10px;
}

.lj-subscription-selected-period i {
  color: var(--subscription-primary);
  font-size: 16px;
}

.lj-subscription-selected-period p {
  margin: 0;
}

.lj-subscription-selected-period strong {
  color: var(--subscription-title);
}

/* =========================================================
   PACKAGES GRID
========================================================= */

.lj-subscription-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin-top: 50px;
}

/* =========================================================
   PACKAGE CARD
========================================================= */

.lj-subscription-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  padding: 29px 23px 24px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--subscription-border);
  border-radius: 12px;
  box-shadow: 0 19px 50px rgba(1, 52, 130, .07), 0 5px 16px rgba(7, 104, 207, .025);
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
  isolation: isolate;
}

.lj-subscription-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient( 90deg, var(--subscription-primary-dark), var(--subscription-primary), #0687F1);
}

.lj-subscription-card::after {
  position: absolute;
  z-index: -1;
  top: -115px;
  right: -115px;
  width: 250px;
  height: 250px;
  content: "";
  background: radial-gradient( circle, rgba(7, 104, 207, .075), transparent 70%);
  border-radius: 50%;
  transition: transform .55s ease;
}

.lj-subscription-card:hover {
  transform: translateY(-11px);
  border-color: rgba(7, 104, 207, .20);
  box-shadow: 0 32px 75px rgba(1, 52, 130, .12), 0 8px 22px rgba(7, 104, 207, .055);
}

.lj-subscription-card:hover::after {
  transform: scale(1.2) translate(-5px, 5px);
}

.lj-subscription-card-shine {
  position: absolute;
  top: 0;
  left: -130%;
  width: 80%;
  height: 100%;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .48), transparent);
  pointer-events: none;
  transform: skewX(-20deg);
  transition: left .9s ease;
}

.lj-subscription-card:hover .lj-subscription-card-shine {
  left: 145%;
}

/* Featured package */

.lj-subscription-card-featured {
  color: rgba(255, 255, 255, .78);
  background: radial-gradient( circle at 85% 5%, rgba(255, 255, 255, .14), transparent 25%), linear-gradient( 145deg, #013482, #013883 47%, var(--subscription-primary));
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 27px 70px rgba(1, 52, 130, .22);
  transform: translateY(-14px);
}

.lj-subscription-card-featured::before {
  background: linear-gradient( 90deg, #4AB3FC, #FFFFFF, #4AB3FC);
}

.lj-subscription-card-featured::after {
  background: radial-gradient( circle, rgba(255, 255, 255, .14), transparent 70%);
}

.lj-subscription-card-featured:hover {
  transform: translateY(-22px);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 38px 85px rgba(1, 52, 130, .28);
}

.lj-subscription-popular-label {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  color: #013883;
  background: linear-gradient( 135deg, #FFFFFF, #A1D7FB);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(1, 52, 130, .12);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-subscription-popular-label i {
  font-size: 13px;
}

/* =========================================================
   CARD HEADER
========================================================= */

.lj-subscription-card-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 0;
}

.lj-subscription-card-featured .lj-subscription-card-header {
  padding-top: 25px;
}

.lj-subscription-package-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 53px;
  width: 53px;
  height: 53px;
  color: var(--subscription-primary);
  background: rgba(7, 104, 207, .07);
  border: 1px solid rgba(7, 104, 207, .11);
  border-radius: 50%;
  transition: color .35s ease, background .35s ease, transform .35s ease, box-shadow .35s ease;
}

.lj-subscription-package-icon i {
  font-size: 24px;
}

.lj-subscription-card:hover .lj-subscription-package-icon {
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--subscription-primary), var(--subscription-primary-dark));
  transform: rotate(-6deg) scale(1.05);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .22);
}

.lj-subscription-card-featured .lj-subscription-package-icon {
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #A1D7FB);
  border-color: rgba(255, 255, 255, .32);
}

.lj-subscription-package-title span {
  display: block;
  margin-bottom: 4px;
  color: var(--subscription-primary);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.lj-subscription-package-title h2 {
  margin: 0;
  color: var(--subscription-title);
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.lj-subscription-card-featured .lj-subscription-package-title span {
  color: #4AB3FC;
}

.lj-subscription-card-featured .lj-subscription-package-title h2 {
  color: #FFFFFF;
}

.lj-subscription-package-description {
  position: relative;
  z-index: 2;
  min-height: 69px;
  margin: 20px 0 0;
  color: var(--subscription-text);
  font-size: 9px;
  line-height: 1.72;
}

.lj-subscription-card-featured .lj-subscription-package-description {
  color: rgba(255, 255, 255, .70);
}

/* =========================================================
   PRICE
========================================================= */

.lj-subscription-price {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 22px;
  color: var(--subscription-title);
}

.lj-subscription-currency {
  align-self: flex-start;
  margin-top: 8px;
  margin-right: 3px;
  color: var(--subscription-primary);
  font-size: 18px;
  font-weight: 800;
}

.lj-subscription-price-value {
  font-family: var(--font-body);
  font-size: 43px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  transition: opacity .22s ease, transform .22s ease;
}

.lj-subscription-price-value.is-changing {
  opacity: 0;
  transform: translateY(8px);
}

.lj-subscription-price-period {
  margin: 0 0 3px 6px;
  color: var(--subscription-text);
  font-size: 8px;
  font-weight: 700;
}

.lj-subscription-card-featured .lj-subscription-price {
  color: #FFFFFF;
}

.lj-subscription-card-featured .lj-subscription-currency {
  color: #4AB3FC;
}

.lj-subscription-card-featured .lj-subscription-price-period {
  color: rgba(255, 255, 255, .62);
}

.lj-subscription-divider {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 1px;
  margin: 25px 0 22px;
  background: linear-gradient( 90deg, transparent, var(--subscription-border), transparent);
}

.lj-subscription-card-featured .lj-subscription-divider {
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .25), transparent);
}

/* =========================================================
   FEATURES
========================================================= */

.lj-subscription-features {
  position: relative;
  z-index: 2;
}

.lj-subscription-feature-label {
  display: block;
  margin-bottom: 14px;
  color: var(--subscription-title);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.lj-subscription-card-featured .lj-subscription-feature-label {
  color: #FFFFFF;
}

.lj-subscription-features ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lj-subscription-features li {
  position: relative;
  min-height: 18px;
  padding-left: 26px;
  color: #013883;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.55;
}

.lj-subscription-features li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  content: "\ea41";
  color: #FFFFFF;
  background: linear-gradient( 135deg, var(--subscription-primary), var(--subscription-primary-dark));
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 12px;
  box-shadow: 0 5px 12px rgba(7, 104, 207, .14);
}

.lj-subscription-card-featured .lj-subscription-features li {
  color: rgba(255, 255, 255, .78);
}

.lj-subscription-card-featured .lj-subscription-features li::before {
  color: #013883;
  background: linear-gradient( 145deg, #FFFFFF, #4AB3FC);
}

/* Hidden features */

.lj-subscription-features li.lj-feature-hidden {
  display: none;
}

/* =========================================================
   READ MORE BUTTON
========================================================= */

.lj-subscription-toggle {
  position: relative;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 9px;
  width: max-content;
  margin: 18px 0 0;
  padding: 0;
  color: var(--subscription-primary);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
  cursor: pointer;
  text-transform: uppercase;
}

.lj-subscription-toggle.visible {
  display: flex;
}

.lj-subscription-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--subscription-primary);
  background: rgba(7, 104, 207, .035);
  border: 1px dashed rgba(7, 104, 207, .55);
  border-radius: 50%;
  transition: color .3s ease, background .3s ease, transform .3s ease;
}

.lj-subscription-toggle-icon i {
  font-size: 17px;
}

.lj-subscription-toggle:hover .lj-subscription-toggle-icon {
  color: #FFFFFF;
  background: var(--subscription-primary);
  transform: rotate(90deg);
}

.lj-subscription-card-featured .lj-subscription-toggle {
  color: #4AB3FC;
}

.lj-subscription-card-featured .lj-subscription-toggle-icon {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .55);
}

.lj-subscription-card-featured .lj-subscription-toggle:hover .lj-subscription-toggle-icon {
  color: #013883;
  background: #FFFFFF;
}

/* =========================================================
   GET STARTED BUTTON
========================================================= */

.lj-subscription-button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  margin-top: 27px;
  overflow: hidden;
  color: #FFFFFF;
  background: linear-gradient( 135deg, #0687F1, var(--subscription-primary) 50%, var(--subscription-primary-dark));
  border-radius: 5px;
  box-shadow: 0 15px 32px rgba(7, 104, 207, .22);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease;
}

.lj-subscription-button::before {
  position: absolute;
  top: 0;
  left: -120%;
  width: 75%;
  height: 100%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: skewX(-20deg);
  transition: left .75s ease;
}

.lj-subscription-button:hover::before {
  left: 130%;
}

.lj-subscription-button:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 21px 41px rgba(7, 104, 207, .31);
}

.lj-subscription-button span,
.lj-subscription-button i {
  position: relative;
  z-index: 2;
}

.lj-subscription-button i {
  font-size: 17px;
  transition: transform .3s ease;
}

.lj-subscription-button:hover i {
  transform: translateX(4px);
}

.lj-subscription-card-featured .lj-subscription-button {
  color: var(--subscription-primary-dark);
  background: linear-gradient( 135deg, #FFFFFF, #A1D7FB);
  box-shadow: 0 15px 32px rgba(1, 52, 130, .14);
}

.lj-subscription-card-featured .lj-subscription-button:hover {
  color: var(--subscription-primary-dark);
  box-shadow: 0 21px 41px rgba(1, 52, 130, .20);
}

/* =========================================================
   SUBSCRIPTION NOTE
========================================================= */

.lj-subscription-note {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 45px;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid var(--subscription-border);
  border-radius: 9px;
  box-shadow: 0 15px 40px rgba(1, 52, 130, .055);
}

.lj-subscription-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  color: var(--subscription-primary);
  background: rgba(7, 104, 207, .065);
  border-radius: 50%;
}

.lj-subscription-note-icon i {
  font-size: 25px;
}

.lj-subscription-note h3 {
  margin: 0 0 5px;
  color: var(--subscription-title);
  font-size: 12px;
  font-weight: 850;
}

.lj-subscription-note p {
  max-width: 780px;
  margin: 0;
  color: var(--subscription-text);
  font-size: 9px;
  line-height: 1.7;
}

.lj-subscription-note>a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--subscription-primary);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lj-subscription-note>a i {
  font-size: 17px;
  transition: transform .3s ease;
}

.lj-subscription-note>a:hover i {
  transform: translateX(4px);
}

/* =========================================================
   ANIMATIONS
========================================================= */

.lj-subscription-heading>*,
.lj-subscription-tabs,
.lj-subscription-selected-period,
.lj-subscription-card,
.lj-subscription-note {
  opacity: 0;
  transform: translateY(24px);
  animation: ljSubscriptionReveal .8s ease forwards;
}

.lj-subscription-heading> :nth-child(1) {
  animation-delay: .05s;
}

.lj-subscription-heading> :nth-child(2) {
  animation-delay: .12s;
}

.lj-subscription-heading> :nth-child(3) {
  animation-delay: .19s;
}

.lj-subscription-tabs {
  animation-delay: .24s;
}

.lj-subscription-selected-period {
  animation-delay: .30s;
}

.lj-subscription-card:nth-child(1) {
  animation-delay: .12s;
}

.lj-subscription-card:nth-child(2) {
  animation-delay: .20s;
}

.lj-subscription-card:nth-child(3) {
  animation-delay: .28s;
}

.lj-subscription-card:nth-child(4) {
  animation-delay: .36s;
}

.lj-subscription-note {
  animation-delay: .25s;
}

@keyframes ljSubscriptionReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1199.98px) {
  .lj-subscription-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lj-subscription-card-featured {
    transform: none;
  }
  .lj-subscription-card-featured:hover {
    transform: translateY(-11px);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-subscription-section {
    padding: 85px 0 95px;
  }
  .lj-subscription-tabs {
    width: min(100%, 720px);
  }
  .lj-subscription-note {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .lj-subscription-note>a {
    grid-column: 2;
    justify-self: start;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-subscription-section {
    padding: 70px 0 80px;
  }
  .lj-subscription-heading h1 {
    font-size: clamp(48px, 13vw, 65px);
  }
  .lj-subscription-heading p {
    font-size: 11px;
  }
  .lj-subscription-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 42px;
  }
  .lj-subscription-grid {
    grid-template-columns: 1fr;
    width: min(100%, 560px);
    margin-right: auto;
    margin-left: auto;
  }
  .lj-subscription-card {
    padding: 28px 24px 24px;
  }
  .lj-subscription-package-description {
    min-height: auto;
  }
}

@media(max-width:575.98px) {
  .lj-subscription-section {
    padding: 58px 0 68px;
  }
  .lj-subscription-heading h1 {
    font-size: clamp(43px, 13vw, 58px);
  }
  .lj-subscription-tabs {
    gap: 8px;
    padding: 7px;
    border-radius: 9px;
  }
  .lj-subscription-tab {
    min-height: 59px;
    gap: 7px;
    padding: 8px 9px;
  }
  .lj-subscription-tab>i {
    font-size: 19px;
  }
  .lj-subscription-tab span {
    font-size: 9px;
  }
  .lj-subscription-selected-period {
    align-items: flex-start;
    text-align: center;
  }
  .lj-subscription-grid {
    margin-top: 38px;
  }
  .lj-subscription-card {
    padding: 26px 18px 21px;
    border-radius: 9px;
  }
  .lj-subscription-package-title h2 {
    font-size: 31px;
  }
  .lj-subscription-price-value {
    font-size: 40px;
  }
  .lj-subscription-note {
    grid-template-columns: 1fr;
    padding: 23px 19px;
    text-align: center;
  }
  .lj-subscription-note-icon {
    margin: 0 auto;
  }
  .lj-subscription-note>a {
    grid-column: auto;
    justify-self: center;
  }
}

@media(max-width:380px) {
  .lj-subscription-tabs {
    grid-template-columns: 1fr;
  }
  .lj-subscription-tab {
    justify-content: flex-start;
    padding-right: 18px;
    padding-left: 18px;
  }
  .lj-subscription-card-header {
    align-items: flex-start;
  }
  .lj-subscription-popular-label {
    position: relative;
    top: auto;
    right: auto;
    width: max-content;
    margin: 0 0 17px;
  }
  .lj-subscription-card-featured .lj-subscription-card-header {
    padding-top: 0;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-subscription-heading>*,
  .lj-subscription-tabs,
  .lj-subscription-selected-period,
  .lj-subscription-card,
  .lj-subscription-note {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lj-subscription-tab,
  .lj-subscription-tab::before,
  .lj-subscription-card,
  .lj-subscription-card::after,
  .lj-subscription-card-shine,
  .lj-subscription-package-icon,
  .lj-subscription-toggle-icon,
  .lj-subscription-button,
  .lj-subscription-button::before,
  .lj-subscription-price-value {
    transition: none;
  }
}

/*****************************JOB LISTING CSS***********************************
/* LinJust job listing page — page-specific CSS only */

.lj-jobs-page {
  --jobs-primary: var(--colorPrimary, var(--color-primary, #0768CF));
  --jobs-primary-dark: var(--colorPrimaryDark, var(--color-primary-dark, #013883));
  --jobs-title: var(--titleColor, var(--color-title, #013482));
  --jobs-text: var(--paraColor, var(--color-text, #082E5C));
  --jobs-white: var(--whiteColor, var(--color-white, #FFFFFF));
  --jobs-light: var(--sectionBg, var(--color-off-white, #F6FBFD));
  --jobs-border: var(--borderColor, var(--color-border, #6F8DA8));
  --jobs-success: #0687F1;
  --jobs-danger: #0768CF;
  --jobs-font-body: var(--bodyFont, var(--font-body, "Inter", sans-serif));
  --jobs-font-display: var(--headingFont, var(--font-heading, "Cormorant Garamond", serif));
  color: var(--jobs-text);
  background: var(--jobs-white);
  font-family: var(--jobs-font-body)
}

.lj-jobs-page *,
.lj-jobs-page *::before,
.lj-jobs-page *::after {
  box-sizing: border-box
}

.lj-jobs-page a {
  text-decoration: none
}

.lj-jobs-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 330px;
  max-height: 500px;
  padding: 48px 0;
  overflow: hidden;
  color: #FFFFFF;
  isolation: isolate
}

.lj-jobs-hero-bg,
.lj-jobs-hero-overlay,
.lj-jobs-hero-pattern {
  position: absolute;
  inset: 0
}

.lj-jobs-hero-bg {
  z-index: -4;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.03)
}

.lj-jobs-hero-overlay {
  z-index: -3
}

.lj-jobs-hero-pattern {
  z-index: -2;
  opacity: .22;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to right, #013482, transparent 90%)
}

.lj-jobs-hero::after {
  position: absolute;
  right: -150px;
  bottom: -245px;
  z-index: -1;
  width: 530px;
  height: 530px;
  content: "";
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .016)
}

.lj-jobs-hero-content {
  width: min(100%, 930px)
}

.lj-jobs-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 14px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase
}

.lj-jobs-hero-badge i {
  color: #4AB3FC;
  font-size: 18px
}

.lj-jobs-hero-title {
  min-height: 45px;
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: clamp(40px, 4vw, 40px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance
}

.lj-jobs-type-caret {
  display: inline-block;
  width: 3px;
  height: .85em;
  margin-left: 5px;
  vertical-align: -.08em;
  background: #4AB3FC;
  animation: ljJobsCaret .8s steps(1) infinite
}

.lj-jobs-hero-content>p {
  max-width: 720px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.8
}

.lj-jobs-hero-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 930px);
  min-height: 68px;
  margin-top: 27px;
  padding: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: 10px;
  box-shadow: 0 22px 55px rgba(1, 52, 130, .22);
  backdrop-filter: blur(18px)
}

.lj-jobs-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  color: var(--jobs-primary);
  font-size: 23px
}

.lj-jobs-hero-search input {
  min-width: 0;
  flex: 1;
  height: 52px;
  padding: 0 12px 0 0;
  color: var(--jobs-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-body);
  font-size: 13px
}

.lj-jobs-hero-search input::placeholder {
  color: #355A7D
}

.lj-jobs-hero-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 158px;
  height: 52px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0687F1, var(--jobs-primary) 52%, var(--jobs-primary-dark));
  border: 0;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(7, 104, 207, .25);
  font: 850 9px var(--jobs-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer
}

.lj-jobs-hero-search button i {
  font-size: 18px;
  transition: transform .3s
}

.lj-jobs-hero-search button:hover i {
  transform: translateX(4px)
}

.lj-jobs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 22px;
  margin-top: 21px
}

.lj-jobs-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .74);
  font-size: 9px;
  font-weight: 700
}

.lj-jobs-hero-meta i {
  color: #4AB3FC;
  font-size: 16px
}

.lj-jobs-content-section {
  position: relative;
  padding: 75px 0 95px;
  background: radial-gradient(circle at 8% 8%, rgba(7, 104, 207, .035), transparent 23%), var(--jobs-light)
}

.lj-jobs-layout {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  align-items: start;
  gap: 28px
}

.lj-jobs-mobile-actions {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px
}

.lj-jobs-mobile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jobs-primary), var(--jobs-primary-dark));
  border: 0;
  border-radius: 6px;
  box-shadow: 0 12px 26px rgba(7, 104, 207, .20);
  font: 800 10px var(--jobs-font-body);
  text-transform: uppercase
}

.lj-jobs-mobile-filter-btn i {
  font-size: 19px
}

.lj-jobs-mobile-filter-btn strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  color: var(--jobs-primary);
  background: #FFFFFF;
  border-radius: 999px;
  font-size: 9px
}

.lj-jobs-mobile-result-count {
  text-align: right
}

.lj-jobs-mobile-result-count strong {
  display: block;
  color: var(--jobs-title);
  font: 700 25px/0.9 var(--jobs-font-display)
}

.lj-jobs-mobile-result-count span {
  font-size: 8px;
  font-weight: 750;
  text-transform: uppercase
}

.lj-jobs-hero-content {
  margin: 10px auto;
  text-align: center;
}

.lj-jobs-sidebar {
  position: sticky;
  top: 100px;
  z-index: 40;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 10px;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .075)
}

.lj-jobs-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 24px 22px 18px;
  border-bottom: 1px solid var(--jobs-border)
}

.lj-jobs-sidebar-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--jobs-primary);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase
}

.lj-jobs-sidebar-head h3 {
  margin: 0;
  color: var(--jobs-title);
  font: 700 28px/1 var(--jobs-font-display)
}

.lj-jobs-sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--jobs-title);
  background: #F6FBFD;
  border: 1px solid var(--jobs-border);
  border-radius: 50%;
  font-size: 22px
}

.lj-jobs-sidebar-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
  color: #0768CF;
  background: #F6FBFD;
  border-bottom: 1px solid var(--jobs-border);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-jobs-sidebar-summary span {
  display: flex;
  align-items: center;
  gap: 6px
}

.lj-jobs-sidebar-summary i {
  color: var(--jobs-primary);
  font-size: 15px
}

.lj-jobs-sidebar-summary strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  color: #FFFFFF;
  background: var(--jobs-primary);
  border-radius: 50%;
  font-size: 9px
}

.lj-jobs-filter-group {
  border-bottom: 1px solid var(--jobs-border)
}

.lj-jobs-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 55px;
  padding: 13px 21px;
  color: var(--jobs-title);
  background: #FFFFFF;
  border: 0;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left
}

.lj-jobs-filter-heading>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 850
}

.lj-jobs-filter-heading>span i {
  color: var(--jobs-primary);
  font-size: 18px
}

.lj-jobs-filter-heading>i {
  color: var(--jobs-primary);
  font-size: 17px
}

.lj-jobs-filter-body {
  display: none;
  padding: 0 21px 18px
}

.lj-jobs-filter-group.active .lj-jobs-filter-body {
  display: block
}

.lj-jobs-check {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  cursor: pointer
}

.lj-jobs-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.lj-jobs-check-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  color: #FFFFFF;
  background: #FFFFFF;
  border: 1px solid #6F8DA8;
  border-radius: 4px;
  transition: .25s
}

.lj-jobs-check-box i {
  opacity: 0;
  font-size: 14px;
  transform: scale(.5);
  transition: .2s
}

.lj-jobs-check input:checked+.lj-jobs-check-box {
  background: var(--jobs-primary);
  border-color: var(--jobs-primary);
  box-shadow: 0 5px 12px rgba(7, 104, 207, .18)
}

.lj-jobs-check input:checked+.lj-jobs-check-box i {
  opacity: 1;
  transform: scale(1)
}

.lj-jobs-check-label {
  color: #0768CF;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35
}

.lj-jobs-check small {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 23px;
  height: 21px;
  padding: 0 5px;
  color: #0687F1;
  background: #D5EAF8;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800
}

.lj-jobs-clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 42px);
  min-height: 45px;
  margin: 20px 21px;
  color: var(--jobs-primary);
  background: #F6FBFD;
  border: 1px dashed rgba(7, 104, 207, .35);
  border-radius: 5px;
  font: 850 8px var(--jobs-font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s
}

.lj-jobs-clear-filters:hover {
  color: #FFFFFF;
  background: var(--jobs-primary);
  border-style: solid
}

.lj-jobs-clear-filters i {
  font-size: 17px
}

.lj-jobs-drawer-backdrop {
  display: none
}

.lj-jobs-main {
  min-width: 0
}

.lj-jobs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 9px;
  box-shadow: 0 14px 40px rgba(1, 52, 130, .055)
}

.lj-jobs-location-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(145px, 1fr));
  gap: 10px;
  flex: 1
}

.lj-jobs-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0
}

.lj-jobs-select-wrap>i:first-child {
  position: absolute;
  left: 13px;
  z-index: 2;
  color: var(--jobs-primary);
  font-size: 17px;
  pointer-events: none
}

.lj-jobs-select-wrap>i:last-child {
  position: absolute;
  right: 11px;
  color: #0687F1;
  font-size: 18px;
  pointer-events: none
}

.lj-jobs-select-wrap select {
  width: 100%;
  height: 47px;
  padding: 0 37px;
  color: #013883;
  background: #F6FBFD;
  border: 1px solid var(--jobs-border);
  border-radius: 5px;
  outline: 0;
  appearance: none;
  font: 700 9px var(--jobs-font-body);
  cursor: pointer
}

.lj-jobs-select-wrap select:focus {
  border-color: rgba(7, 104, 207, .42);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .055)
}

.lj-jobs-toolbar-right {
  display: flex;
  align-items: center;
  gap: 13px
}

.lj-jobs-result-text {
  min-width: 85px;
  text-align: right
}

.lj-jobs-result-text strong {
  display: block;
  color: var(--jobs-title);
  font: 700 27px/.9 var(--jobs-font-display)
}

.lj-jobs-result-text span {
  color: #082E5C;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-jobs-view-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jobs-primary), var(--jobs-primary-dark));
  border: 0;
  border-radius: 5px;
  box-shadow: 0 11px 25px rgba(7, 104, 207, .20);
  font-size: 21px;
  cursor: pointer;
  transition: .3s
}

.lj-jobs-view-toggle:hover {
  transform: translateY(-2px)
}

.lj-jobs-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px
}

.lj-jobs-active-chips:empty {
  display: none
}

.lj-jobs-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 10px;
  color: #0768CF;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 999px;
  box-shadow: 0 7px 18px rgba(1, 52, 130, .035);
  font-size: 8px;
  font-weight: 750
}

.lj-jobs-filter-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  color: #FFFFFF;
  background: var(--jobs-primary);
  border: 0;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer
}

.lj-jobs-list {
  display: grid;
  gap: 18px
}

.lj-job-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .065);
  transition: transform .35s, border-color .35s, box-shadow .35s
}

.lj-job-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--jobs-primary-dark), var(--jobs-primary), #0687F1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s
}

.lj-job-card:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 104, 207, .20);
  box-shadow: 0 28px 65px rgba(1, 52, 130, .10)
}

.lj-job-card:hover::before {
  transform: scaleX(1)
}

.lj-job-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase
}

.lj-job-status-active {
  color: var(--jobs-success);
  background: #D5EAF8;
  border: 1px solid #A1D7FB
}

.lj-job-status-expired {
  color: var(--jobs-danger);
  background: #D5EAF8;
  border: 1px solid #4AB3FC
}

.lj-job-logo {
  flex: 0 0 auto;
  overflow: hidden;
  background: #D5EAF8;
  border: 1px solid var(--jobs-border);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(1, 52, 130, .08)
}

.lj-job-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-job-company {
  margin-bottom: 6px;
  color: var(--jobs-success);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase
}

.lj-job-card-content h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.06
}

.lj-job-card-content h3 a {
  color: var(--jobs-title);
  transition: color .25s
}

.lj-job-card-content h3 a:hover {
  color: var(--jobs-primary)
}

.lj-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 17px;
  color: #0768CF
}

.lj-job-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  font-weight: 650
}

.lj-job-meta i {
  color: var(--jobs-primary);
  font-size: 16px
}

.lj-job-description {
  margin: 13px 0 0;
  color: var(--jobs-text);
  font-size: 9px;
  line-height: 1.72
}

.lj-job-read-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 5px;
  padding: 0;
  color: var(--jobs-primary);
  background: transparent;
  border: 0;
  font: 850 8px var(--jobs-font-body);
  cursor: pointer
}

.lj-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px
}

.lj-job-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  color: #0768CF;
  background: #F6FBFD;
  border: 1px solid #6F8DA8;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 750
}

.lj-job-tags span:nth-child(2) {
  color: #0768CF;
  background: #D5EAF8;
  border-color: #A1D7FB
}

.lj-job-tags span:nth-child(3) {
  color: #0768CF;
  background: #D5EAF8;
  border-color: #A1D7FB
}

.lj-job-tags span:nth-child(4) {
  color: #0768CF;
  background: #F6FBFD;
  border-color: #A1D7FB
}

.lj-job-card-actions {
  display: flex;
  align-items: center
}

.lj-job-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0687F1;
  font-size: 8px;
  font-weight: 700
}

.lj-job-views i {
  color: var(--jobs-primary);
  font-size: 16px
}

.lj-job-apply-btn,
.lj-job-expired-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase
}

.lj-job-apply-btn {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jobs-primary), var(--jobs-primary-dark));
  box-shadow: 0 10px 23px rgba(7, 104, 207, .20)
}

.lj-job-apply-btn:hover {
  color: #FFFFFF;
  transform: translateY(-2px)
}

.lj-job-apply-btn i {
  font-size: 16px
}

.lj-job-expired-btn {
  color: #0687F1;
  background: #D5EAF8;
  border: 1px solid #6F8DA8
}

.lj-job-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--jobs-primary);
  background: #F6FBFD;
  border: 1px solid rgba(7, 104, 207, .17);
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
  transition: .3s
}

.lj-job-save-btn:hover,
.lj-job-save-btn.is-saved {
  color: #FFFFFF;
  background: var(--jobs-primary);
  border-color: var(--jobs-primary);
  transform: translateY(-2px)
}

.lj-jobs-list.is-list-view {
  grid-template-columns: 1fr
}

.is-list-view .lj-job-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 25px 24px 20px
}

.is-list-view .lj-job-card-status {
  position: absolute;
  top: 18px;
  right: 20px
}

.is-list-view .lj-job-card-main {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding-right: 90px
}

.is-list-view .lj-job-logo {
  width: 78px;
  height: 78px
}

.is-list-view .lj-job-card-content {
  min-width: 0;
  flex: 1
}

.is-list-view .lj-job-card-content h3 {
  padding-right: 15px;
  font-size: 26px
}

.is-list-view .lj-job-meta {
  margin-top: 10px
}

.is-list-view .lj-job-card-actions {
  grid-column: 1/-1;
  justify-content: flex-end;
  gap: 11px;
  padding-top: 16px;
  border-top: 1px solid var(--jobs-border)
}

.is-list-view .lj-job-views {
  margin-right: auto
}

.lj-jobs-list.is-grid-view {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.is-grid-view .lj-job-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 27px 23px 20px;
  text-align: center
}

.is-grid-view .lj-job-card-status {
  position: absolute;
  top: 15px;
  left: 15px
}

.is-grid-view .lj-job-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0
}

.is-grid-view .lj-job-logo {
  width: 92px;
  height: 92px;
  margin-top: 25px;
  border-radius: 50%
}

.is-grid-view .lj-job-card-content {
  width: 100%;
  min-width: 0;
  margin-top: 18px
}

.is-grid-view .lj-job-card-content h3 {
  font-size: 28px
}

.is-grid-view .lj-job-meta {
  justify-content: center;
  margin-top: 13px
}

.is-grid-view .lj-job-description {
  max-width: 520px;
  margin-right: auto;
  margin-left: auto
}

.is-grid-view .lj-job-tags {
  justify-content: center
}

.is-grid-view .lj-job-card-actions {
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--jobs-border)
}

.is-grid-view .lj-job-apply-btn,
.is-grid-view .lj-job-expired-btn {
  margin-left: auto
}

.lj-jobs-empty {
  display: none;
  padding: 70px 25px;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(1, 52, 130, .06);
  text-align: center
}

.lj-jobs-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 17px;
  color: var(--jobs-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
  font-size: 32px
}

.lj-jobs-empty h3 {
  margin: 0;
  color: var(--jobs-title);
  font: 700 34px var(--jobs-font-display)
}

.lj-jobs-empty p {
  max-width: 490px;
  margin: 10px auto 0;
  font-size: 10px;
  line-height: 1.75
}

.lj-jobs-empty button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 43px;
  margin-top: 20px;
  padding: 0 17px;
  color: #FFFFFF;
  background: var(--jobs-primary);
  border: 0;
  border-radius: 5px;
  font: 850 8px var(--jobs-font-body);
  text-transform: uppercase;
  cursor: pointer
}

.lj-jobs-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 35px
}

.lj-jobs-pagination:empty {
  display: none
}

.lj-jobs-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 11px;
  color: #0768CF;
  background: #FFFFFF;
  border: 1px solid var(--jobs-border);
  border-radius: 5px;
  box-shadow: 0 8px 20px rgba(1, 52, 130, .04);
  font: 800 9px var(--jobs-font-body);
  cursor: pointer;
  transition: .3s
}

.lj-jobs-page-btn:hover,
.lj-jobs-page-btn.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jobs-primary), var(--jobs-primary-dark));
  border-color: var(--jobs-primary);
  box-shadow: 0 12px 25px rgba(7, 104, 207, .20);
  transform: translateY(-2px)
}

.lj-jobs-page-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none
}

@media(max-width:1199.98px) {
  .lj-jobs-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px
  }
  .lj-jobs-location-filters {
    grid-template-columns: repeat(3, minmax(125px, 1fr))
  }
  .is-list-view .lj-job-card-main {
    padding-right: 70px
  }
}

@media(max-width:991.98px) {
  body.lj-jobs-drawer-open {
    overflow: hidden
  }
  .lj-jobs-hero {
    min-height: 400px;
    padding: 65px 0
  }
  .lj-jobs-content-section {
    padding: 55px 0 75px
  }
  .lj-jobs-mobile-actions {
    display: flex
  }
  .lj-jobs-layout {
    display: block
  }
  .lj-jobs-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1002;
    width: min(88vw, 340px);
    overflow-y: auto;
    border-radius: 0 12px 12px 0;
    transform: translateX(-105%);
    transition: transform .36s cubic-bezier(.4, 0, .2, 1)
  }
  .lj-jobs-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-jobs-sidebar-close {
    display: flex
  }
  .lj-jobs-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: block;
    visibility: hidden;
    opacity: 0;
    background: rgba(1, 52, 130, .55);
    backdrop-filter: blur(4px);
    transition: .3s
  }
  .lj-jobs-drawer-backdrop.is-visible {
    visibility: visible;
    opacity: 1
  }
  .lj-jobs-toolbar {
    align-items: stretch;
    flex-direction: column
  }
  .lj-jobs-toolbar-right {
    justify-content: space-between
  }
  .lj-jobs-result-text {
    text-align: left
  }
}

@media(max-width:767.98px) {
  .lj-jobs-hero {
    min-height: 390px;
    max-height: none;
    padding: 58px 0;
    text-align: center
  }
  .lj-jobs-hero-title {
    min-height: 126px;
    font-size: clamp(43px, 12vw, 61px)
  }
  .lj-jobs-hero-content>p {
    margin-right: auto;
    margin-left: auto;
    font-size: 11px
  }
  .lj-jobs-hero-search {
    margin-right: auto;
    margin-left: auto
  }
  .lj-jobs-hero-meta {
    justify-content: center
  }
  .lj-jobs-location-filters {
    grid-template-columns: 1fr
  }
  .lj-jobs-view-toggle {
    display: none
  }
  .lj-jobs-list,
  .lj-jobs-list.is-list-view,
  .lj-jobs-list.is-grid-view {
    grid-template-columns: 1fr
  }
  .lj-jobs-list .lj-job-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 26px 20px 18px;
    text-align: center
  }
  .lj-jobs-list .lj-job-card-status {
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto
  }
  .lj-jobs-list .lj-job-card-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 0
  }
  .lj-jobs-list .lj-job-logo {
    width: 88px;
    height: 88px;
    margin-top: 24px;
    border-radius: 50%
  }
  .lj-jobs-list .lj-job-card-content {
    width: 100%;
    margin-top: 17px
  }
  .lj-jobs-list .lj-job-card-content h3 {
    padding: 0;
    font-size: 27px
  }
  .lj-jobs-list .lj-job-meta {
    justify-content: center;
    margin-top: 12px
  }
  .lj-jobs-list .lj-job-tags {
    justify-content: center
  }
  .lj-jobs-list .lj-job-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--jobs-border)
  }
  .lj-jobs-list .lj-job-views {
    justify-self: start;
    margin: 0
  }
  .lj-jobs-list .lj-job-save-btn {
    grid-column: 2;
    grid-row: 1
  }
  .lj-jobs-list .lj-job-apply-btn,
  .lj-jobs-list .lj-job-expired-btn {
    grid-column: 1/-1;
    width: 100%;
    margin: 0
  }
}

@media(max-width:575.98px) {
  .lj-jobs-hero {
    min-height: 420px;
    padding: 50px 0
  }
  .lj-jobs-hero-title {
    min-height: 142px;
    font-size: clamp(39px, 12vw, 53px)
  }
  .lj-jobs-hero-search {
    min-height: auto;
    padding: 6px;
    border-radius: 8px
  }
  .lj-jobs-search-icon {
    flex-basis: 43px
  }
  .lj-jobs-hero-search input {
    height: 49px;
    font-size: 10px
  }
  .lj-jobs-hero-search button {
    min-width: 52px;
    width: 52px;
    height: 49px
  }
  .lj-jobs-hero-search button span {
    display: none
  }
  .lj-jobs-hero-meta {
    flex-direction: row;
    align-items: center;
    gap: 7px
  }
  .lj-jobs-content-section {
    padding: 43px 0 60px
  }
  .lj-jobs-toolbar {
    padding: 11px
  }
  .lj-job-card-content h3 {
    font-size: 25px !important
  }
  .lj-job-description {
    font-size: 8.5px
  }
  .lj-job-tags span {
    min-height: 25px;
    padding: 0 8px
  }
  .lj-jobs-pagination {
    gap: 5px
  }
  .lj-jobs-page-btn {
    min-width: 38px;
    height: 38px
  }
}

@media(max-width:360px) {
  .lj-jobs-mobile-actions {
    align-items: flex-start
  }
  .lj-jobs-mobile-filter-btn {
    padding: 0 12px
  }
  .lj-job-meta {
    flex-direction: row;
    align-items: center;
    gap: 7px
  }
}

@keyframes ljJobsCaret {
  0%,
  45% {
    opacity: 1
  }
  46%,
  100% {
    opacity: 0
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-jobs-type-caret {
    animation: none
  }
  .lj-jobs-page *,
  .lj-jobs-page *::before,
  .lj-jobs-page *::after {
    scroll-behavior: auto !important;
    transition: none !important
  }
}

/********************************JOB DETAILS********************************/

.lj-job-details-page {
  --jd-primary: var(--colorPrimary, var(--color-primary, #0768CF));
  --jd-primary-dark: var(--colorPrimaryDark, var(--color-primary-dark, #013883));
  --jd-title: var(--titleColor, var(--color-title, #013482));
  --jd-text: var(--paraColor, var(--color-text, #082E5C));
  --jd-light: var(--sectionBg, var(--color-off-white, #F6FBFD));
  --jd-border: var(--borderColor, var(--color-border, #6F8DA8));
  --jd-success: #0687F1;
  --jd-danger: #0768CF;
  --jd-font-body: var(--bodyFont, var(--font-body, "Inter", sans-serif));
  --jd-font-display: var(--headingFont, var(--font-heading, "Cormorant Garamond", serif));
  color: var(--jd-text);
  background: var(--jd-light);
  font-family: var(--jd-font-body)
}

.lj-job-details-page *,
.lj-job-details-page *::before,
.lj-job-details-page *::after {
  box-sizing: border-box
}

.lj-job-details-page a {
  text-decoration: none
}

.lj-job-details-section {
  padding: 75px 0 95px;
  background: radial-gradient(circle at 8% 8%, rgba(7, 104, 207, .035), transparent 23%), var(--jd-light)
}

.lj-job-details-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  align-items: start;
  gap: 28px
}

.lj-job-recruiter-mobile-slot {
  display: none
}

.lj-job-details-main,
.lj-job-details-sidebar {
  display: grid;
  gap: 22px
}

.lj-job-details-sidebar {
  position: sticky;
  top: 100px
}

.lj-job-details-card,
.lj-job-side-card {
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 11px;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .075)
}

.lj-job-details-card {
  padding: 30px
}

.lj-job-primary-card {
  position: relative;
  overflow: hidden
}

.lj-job-primary-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--jd-primary-dark), var(--jd-primary), #0687F1)
}

.lj-job-card-topline,
.lj-job-action-row,
.lj-job-status-group {
  display: flex;
  align-items: center
}

.lj-job-card-topline,
.lj-job-action-row {
  justify-content: space-between;
  gap: 16px
}

.lj-job-status-group {
  flex-wrap: wrap;
  gap: 10px
}

.lj-job-status,
.lj-job-posted-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  font-weight: 800
}

.lj-job-status {
  padding: 7px 11px;
  border-radius: 999px;
  text-transform: uppercase
}

.lj-job-status-active {
  color: var(--jd-success);
  background: #D5EAF8;
  border: 1px solid #A1D7FB
}

.lj-job-posted-time {
  color: #0687F1
}

.lj-job-save-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  color: var(--jd-primary);
  background: #F6FBFD;
  border: 1px solid rgba(7, 104, 207, .18);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: .3s
}

.lj-job-save-action:hover,
.lj-job-save-action.is-saved {
  color: #FFFFFF;
  background: var(--jd-primary);
  border-color: var(--jd-primary);
  transform: translateY(-2px)
}

.lj-job-heading-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 24px
}

.lj-job-heading-logo {
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border: 1px solid var(--jd-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(1, 52, 130, .09)
}

.lj-job-heading-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-job-company-name {
  display: block;
  margin-bottom: 6px;
  color: var(--jd-success);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase
}

.lj-job-heading-block h1 {
  margin: 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: clamp(38px, 4vw, 40px);
  line-height: .98;
  letter-spacing: -.035em
}

.lj-job-heading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 14px
}

.lj-job-heading-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0768CF;
  font-size: 9px;
  font-weight: 650
}

.lj-job-heading-meta i {
  color: var(--jd-primary);
  font-size: 16px
}

.lj-job-action-row {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--jd-border)
}

.lj-job-view-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0768CF;
  font-size: 9px
}

.lj-job-view-count i {
  color: var(--jd-primary);
  font-size: 19px
}

.lj-job-view-count strong {
  color: var(--jd-title)
}

.lj-job-main-apply-btn,
.lj-job-open-application,
.lj-job-submit-application,
.lj-job-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 22px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #0687F1, var(--jd-primary) 52%, var(--jd-primary-dark));
  border: 0;
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(7, 104, 207, .22);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s
}

.lj-job-main-apply-btn:hover,
.lj-job-open-application:hover,
.lj-job-submit-application:hover,
.lj-job-login-button:hover {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .30)
}

.lj-job-card-heading {
  margin-bottom: 24px
}

.lj-job-card-heading>span {
  display: block;
  margin-bottom: 7px;
  color: var(--jd-primary);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase
}

.lj-job-card-heading h2 {
  margin: 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 40px;
  line-height: 1
}

.lj-job-card-heading p {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.7
}

.lj-job-detail-accordion {
  overflow: hidden;
  border: 1px solid var(--jd-border);
  border-radius: 8px
}

.lj-job-detail-accordion+.lj-job-detail-accordion {
  margin-top: 13px
}

.lj-job-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  min-height: 59px;
  padding: 14px 18px;
  color: var(--jd-title);
  background: #F6FBFD;
  border: 0;
  font-family: var(--font-body);
  cursor: pointer
}

.lj-job-detail-toggle>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 850
}

.lj-job-detail-toggle>span i,
.lj-job-detail-toggle>i {
  color: var(--jd-primary);
  font-size: 19px
}

.lj-job-detail-content {
  padding: 18px;
  border-top: 1px solid var(--jd-border)
}

.lj-job-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.lj-job-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 7px;
  transition: .3s
}

.lj-job-feature-item:hover {
  transform: translateY(-3px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 12px 26px rgba(1, 52, 130, .05)
}

.lj-job-feature-item>i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  color: var(--jd-primary);
  background: rgba(7, 104, 207, .07);
  border-radius: 50%;
  font-size: 18px
}

.lj-job-feature-item span {
  min-width: 0
}

.lj-job-feature-item small,
.lj-job-feature-item strong {
  display: block
}

.lj-job-feature-item small {
  margin-bottom: 4px;
  color: #0687F1;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase
}

.lj-job-feature-item strong {
  color: var(--jd-title);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere
}

.lj-job-content-more,
.lj-job-text-more {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  color: var(--jd-primary);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer
}

.lj-job-content-more i,
.lj-job-text-more i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px dashed rgba(7, 104, 207, .45);
  border-radius: 50%;
  font-size: 16px
}

.lj-job-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.lj-job-skill-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 11px;
  color: #013883;
  background: #F6FBFD;
  border: 1px solid #6F8DA8;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 750
}

.lj-job-skill-list i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: #FFFFFF;
  background: var(--jd-primary);
  border-radius: 50%;
  font-size: 12px
}

.lj-job-rich-text p,
.lj-job-icon-list li {
  color: var(--jd-text);
  font-size: 10px;
  line-height: 1.78
}

.lj-job-rich-text p {
  margin: 0
}

.lj-job-rich-text p+p {
  margin-top: 12px
}

.lj-job-icon-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none
}

.lj-job-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px
}

.lj-job-icon-list i {
  margin-top: 2px;
  color: var(--jd-primary);
  font-size: 17px
}

.lj-job-application-gate {
  text-align: center
}

.lj-job-application-message {
  display: none;
  margin-bottom: 18px;
  padding: 15px 17px;
  color: var(--jd-danger);
  background: #D5EAF8;
  border: 1px solid #4AB3FC;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.6
}

.lj-job-application-form {
  display: grid;
  gap: 18px
}

.lj-job-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.lj-job-form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--jd-title);
  font-size: 9px;
  font-weight: 800
}

.lj-job-input-wrap {
  position: relative;
  display: flex;
  align-items: center
}

.lj-job-input-wrap>i:first-child {
  position: absolute;
  left: 15px;
  z-index: 2;
  color: #355A7D;
  font-size: 19px;
  pointer-events: none
}

.lj-job-input-wrap input,
.lj-job-input-wrap select,
.lj-job-input-wrap textarea {
  width: 100%;
  color: var(--jd-title);
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 5px;
  outline: 0;
  font-family: var(--font-body);
  font-size: 10px
}

.lj-job-input-wrap input,
.lj-job-input-wrap select {
  height: 54px;
  padding: 0 44px
}

.lj-job-input-wrap textarea {
  min-height: 145px;
  padding: 16px 16px 16px 45px;
  resize: vertical;
  line-height: 1.7
}

.lj-job-input-wrap input:focus,
.lj-job-input-wrap select:focus,
.lj-job-input-wrap textarea:focus {
  border-color: rgba(7, 104, 207, .45);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .055)
}

.lj-job-input-wrap:focus-within>i:first-child {
  color: var(--jd-primary)
}

.lj-job-input-wrap select {
  appearance: none
}

.lj-job-select-arrow {
  position: absolute;
  right: 13px;
  color: #0687F1;
  pointer-events: none
}

.lj-job-textarea-wrap {
  align-items: flex-start
}

.lj-job-textarea-wrap>i:first-child {
  top: 17px
}

.lj-job-file-dropzone {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 170px;
  padding: 25px;
  color: var(--jd-text);
  background: #F6FBFD;
  border: 1px dashed rgba(7, 104, 207, .38);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: .3s
}

.lj-job-file-dropzone:hover,
.lj-job-file-dropzone.is-dragging {
  background: #F6FBFD;
  border-color: var(--jd-primary);
  transform: translateY(-2px)
}

.lj-job-file-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.lj-job-dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark));
  border-radius: 50%;
  box-shadow: 0 14px 30px rgba(7, 104, 207, .20)
}

.lj-job-dropzone-icon i {
  font-size: 27px
}

.lj-job-dropzone-copy {
  text-align: left
}

.lj-job-dropzone-copy strong,
.lj-job-dropzone-copy small {
  display: block
}

.lj-job-dropzone-copy strong {
  color: var(--jd-title);
  font-size: 11px
}

.lj-job-dropzone-copy small {
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.5
}

.lj-job-selected-files {
  display: grid;
  gap: 7px;
  margin-top: 9px
}

.lj-job-file-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 0 10px;
  color: #0768CF;
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 5px;
  font-size: 8px
}

.lj-job-file-chip i {
  color: var(--jd-primary)
}

.lj-job-side-card {
  padding: 24px
}

.lj-job-recruiter-card {
  position: relative;
  overflow: hidden;
  text-align: center
}

.lj-job-recruiter-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--jd-primary-dark), var(--jd-primary), #0687F1)
}

.lj-job-recruiter-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 7px
}

.lj-job-verified-badge,
.lj-job-member-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-verified-badge {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark))
}

.lj-job-member-badge {
  color: #0768CF;
  background: #F6FBFD;
  border: 1px solid #6F8DA8
}

.lj-job-recruiter-logo {
  width: 96px;
  height: 96px;
  margin: 24px auto 16px;
  overflow: hidden;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 15px 35px rgba(1, 52, 130, .13)
}

.lj-job-recruiter-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-job-recruiter-name>span {
  display: block;
  margin-bottom: 5px;
  color: var(--jd-primary);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-recruiter-name h3 {
  margin: 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 31px
}

.lj-job-recruiter-name p {
  margin: 5px 0 0;
  font-size: 8px
}

.lj-job-recruiter-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--jd-border);
  border-radius: 7px
}

.lj-job-recruiter-stats div {
  padding: 14px 8px
}

.lj-job-recruiter-stats div+div {
  border-left: 1px solid var(--jd-border)
}

.lj-job-recruiter-stats strong,
.lj-job-recruiter-stats span {
  display: block
}

.lj-job-recruiter-stats strong {
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 25px
}

.lj-job-recruiter-stats span {
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase
}

.lj-job-recruiter-info {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  text-align: left
}

.lj-job-recruiter-info p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 8px;
  line-height: 1.5
}

.lj-job-recruiter-info i {
  color: var(--jd-primary);
  font-size: 16px
}

.lj-job-recruiter-socials {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px
}

.lj-job-recruiter-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--jd-primary);
  background: #F6FBFD;
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: 50%;
  font-size: 17px;
  transition: .3s
}

.lj-job-recruiter-socials a:hover {
  color: #FFFFFF;
  background: var(--jd-primary);
  transform: translateY(-3px)
}

.lj-job-profile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  margin-top: 18px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark));
  border-radius: 5px;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-action-card {
  display: grid;
  gap: 13px
}

.lj-job-side-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 24px
}

.lj-job-side-icon.whatsapp {
  background: #1F9EFC
}

.lj-job-side-icon.phone {
  background: linear-gradient(135deg, #0687F1, var(--jd-primary-dark))
}

.lj-job-side-icon.message {
  background: linear-gradient(135deg, #0768CF, #013883)
}

.lj-job-action-card>div>span {
  display: block;
  margin-bottom: 5px;
  color: var(--jd-primary);
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-action-card h3 {
  margin: 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 27px
}

.lj-job-action-card p {
  margin: 7px 0 0;
  font-size: 8px;
  line-height: 1.6
}

.lj-job-side-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 43px;
  color: var(--jd-primary);
  background: #F6FBFD;
  border: 1px solid rgba(7, 104, 207, .18);
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer
}

.lj-job-phone-reveal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 7px
}

.lj-job-phone-reveal input {
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  color: var(--jd-title);
  background: #F6FBFD;
  border: 1px solid var(--jd-border);
  border-radius: 5px;
  font-size: 9px
}

.lj-job-phone-reveal button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: var(--jd-primary);
  border: 0;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer
}

.lj-job-feedback-card {
  padding: 0;
  overflow: hidden
}

.lj-job-feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  color: var(--jd-title);
  background: #FFFFFF;
  border: 0;
  cursor: pointer
}

.lj-job-feedback-header>span {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left
}

.lj-job-feedback-header>span>i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark));
  border-radius: 50%;
  font-size: 20px
}

.lj-job-feedback-header small,
.lj-job-feedback-header strong {
  display: block
}

.lj-job-feedback-header small {
  margin-bottom: 3px;
  color: var(--jd-primary);
  font-size: 7px;
  text-transform: uppercase
}

.lj-job-feedback-header strong {
  font-size: 10px
}

.lj-job-feedback-header>i {
  color: var(--jd-primary);
  font-size: 19px
}

.lj-job-feedback-body {
  display: none;
  padding: 0 20px 20px;
  border-top: 1px solid var(--jd-border)
}

.lj-job-feedback-form {
  display: grid;
  gap: 10px;
  padding-top: 17px
}

.lj-job-feedback-form button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  color: #FFFFFF;
  background: var(--jd-primary);
  border: 0;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer
}

.lj-job-feedback-list {
  display: grid;
  gap: 15px;
  margin-top: 20px
}

.lj-job-feedback-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--jd-border)
}

.lj-job-feedback-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%
}

.lj-job-feedback-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px
}

.lj-job-feedback-meta strong {
  color: var(--jd-title);
  font-size: 9px
}

.lj-job-feedback-meta span {
  color: #355A7D;
  font-size: 7px
}

.lj-job-feedback-comment {
  margin: 6px 0 0;
  font-size: 8px;
  line-height: 1.6
}

.lj-job-feedback-more {
  padding: 0;
  color: var(--jd-primary);
  background: transparent;
  border: 0;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer
}

.lj-job-login-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: .3s
}

.lj-job-login-modal.is-visible {
  visibility: visible;
  opacity: 1
}

.lj-job-login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 52, 130, .62);
  backdrop-filter: blur(5px)
}

.lj-job-login-dialog {
  position: relative;
  z-index: 2;
  width: min(92vw, 430px);
  padding: 35px 30px;
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(1, 52, 130, .24);
  text-align: center;
  transform: translateY(20px) scale(.97);
  transition: .3s
}

.lj-job-login-modal.is-visible .lj-job-login-dialog {
  transform: none
}

.lj-job-login-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--jd-title);
  background: #F6FBFD;
  border: 1px solid var(--jd-border);
  border-radius: 50%;
  font-size: 21px;
  cursor: pointer
}

.lj-job-login-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  margin: 0 auto 16px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--jd-primary), var(--jd-primary-dark));
  border-radius: 50%;
  font-size: 28px
}

.lj-job-login-label {
  color: var(--jd-primary);
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase
}

.lj-job-login-dialog h2 {
  margin: 8px 0 0;
  color: var(--jd-title);
  font-family: var(--font-body);
  font-size: 37px
}

.lj-job-login-dialog p {
  margin: 10px 0 22px;
  font-size: 10px;
  line-height: 1.7
}

@media(max-width:991.98px) {
  .lj-job-details-layout {
    grid-template-columns: 1fr
  }
  .lj-job-recruiter-mobile-slot {
    display: block;
    order: 1
  }
  .lj-job-details-main {
    order: 2
  }
  .lj-job-details-sidebar {
    position: static;
    order: 3
  }
  .lj-job-recruiter-desktop-slot {
    display: none
  }
}

@media(min-width:992px) {
  .lj-job-recruiter-mobile-slot .lj-job-recruiter-card {
    display: none
  }
}

@media(max-width:767.98px) {
  .lj-job-details-section {
    padding: 50px 0 70px
  }
  .lj-job-details-card {
    padding: 22px 18px
  }
  .lj-job-heading-block {
    flex-direction: column;
    text-align: center
  }
  .lj-job-heading-logo {
    margin: 0 auto
  }
  .lj-job-heading-meta {
    justify-content: center
  }
  .lj-job-action-row {
    flex-direction: column
  }
  .lj-job-main-apply-btn {
    width: 100%
  }
  .lj-job-feature-grid,
  .lj-job-form-grid {
    grid-template-columns: 1fr
  }
  .lj-job-detail-accordion .lj-job-detail-content {
    display: none
  }
  .lj-job-detail-accordion.active .lj-job-detail-content {
    display: block
  }
  .lj-job-card-heading h2 {
    font-size: 35px
  }
  .lj-job-file-dropzone {
    flex-direction: column
  }
  .lj-job-dropzone-copy {
    text-align: center
  }
}

@media(max-width:575.98px) {
  .lj-job-heading-block h1 {
    font-size: 39px
  }
  .lj-job-card-topline {
    align-items: flex-start
  }
  .lj-job-status-group {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-job-feature-item {
    padding: 12px
  }
  .lj-job-recruiter-badges {
    justify-content: center
  }
}

/* =========================================================
   JOB DETAILS REFINEMENTS V2
========================================================= */

.lj-job-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px
}

.lj-job-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--jd-border);
  border-radius: 0;
  box-shadow: none
}

.lj-job-feature-item:hover {
  transform: none;
  border-color: var(--jd-border);
  box-shadow: none
}

.lj-job-feature-item>i {
  flex: 0 0 34px;
  width: 34px;
  height: 34px
}

.lj-job-feature-item small {
  font-size: 7px
}

.lj-job-feature-item strong {
  font-size: 9px
}

.lj-job-detail-toggle {
  background: #FFFFFF;
  padding: 17px 0;
  border-bottom: 1px solid var(--jd-border)
}

.lj-job-detail-content {
  padding: 16px 0 5px;
  border-top: 0
}

.lj-job-detail-accordion {
  border: 0;
  border-radius: 0
}

.lj-job-detail-accordion+.lj-job-detail-accordion {
  margin-top: 3px
}

/* Recruiter social media brand colours */

.lj-job-recruiter-socials a {
  background: #FFFFFF;
  border: 1px solid var(--jd-border)
}

.lj-job-recruiter-socials a[aria-label="Facebook"] {
  color: #0687F1
}

.lj-job-recruiter-socials a[aria-label="Instagram"] {
  color: #0687F1
}

.lj-job-recruiter-socials a[aria-label="LinkedIn"] {
  color: #0768CF
}

.lj-job-recruiter-socials a[aria-label="TikTok"] {
  color: #013482
}

.lj-job-recruiter-socials a[aria-label="YouTube"] {
  color: #0687F1
}

.lj-job-recruiter-socials a[aria-label="Facebook"]:hover {
  background: #0687F1
}

.lj-job-recruiter-socials a[aria-label="Instagram"]:hover {
  background: linear-gradient(135deg, #0768CF, #0687F1, #4AB3FC)
}

.lj-job-recruiter-socials a[aria-label="LinkedIn"]:hover {
  background: #0768CF
}

.lj-job-recruiter-socials a[aria-label="TikTok"]:hover {
  background: #013482
}

.lj-job-recruiter-socials a[aria-label="YouTube"]:hover {
  background: #0687F1
}

.lj-job-recruiter-socials a:hover {
  color: #FFFFFF;
  border-color: transparent
}

/* Button-like sidebar action cards */

.lj-job-quick-action-card {
  padding: 0;
  overflow: hidden;
  border: 0
}

.lj-job-quick-action {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 88px;
  padding: 15px;
  color: #FFFFFF;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: .35s ease
}

.lj-job-whatsapp-card .lj-job-quick-action {
  background: linear-gradient(135deg, #0687F1, #1F9EFC)
}

.lj-job-phone-card .lj-job-quick-action {
  background: linear-gradient(135deg, #0687F1, var(--jd-primary-dark))
}

.lj-job-message-card .lj-job-quick-action {
  background: linear-gradient(135deg, #0768CF, #013883)
}

.lj-job-quick-action:hover {
  transform: translateY(-3px);
  filter: saturate(1.08);
  box-shadow: 0 20px 45px rgba(1, 52, 130, .18)
}

.lj-job-quick-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  font-size: 25px
}

.lj-job-quick-action-copy small,
.lj-job-quick-action-copy strong,
.lj-job-quick-action-copy em {
  display: block;
  color: #FFFFFF
}

.lj-job-quick-action-copy small {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .76
}

.lj-job-quick-action-copy strong {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1
}

.lj-job-quick-action-copy em {
  margin-top: 6px;
  font-size: 8px;
  font-style: normal;
  opacity: .78
}

.lj-job-quick-action-arrow {
  font-size: 22px;
  transition: transform .3s ease
}

.lj-job-quick-action:hover .lj-job-quick-action-arrow {
  transform: translateX(5px)
}

.lj-job-phone-card .lj-job-phone-reveal {
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid var(--jd-border);
  border-top: 0
}

@media(max-width:767.98px) {
  .lj-job-feature-grid {
    grid-template-columns: 1fr
  }
  .lj-job-detail-toggle {
    padding: 15px 0
  }
  .lj-login-panel {
    padding: 30px 20px
  }
  .lj-social-login {
    grid-template-columns: 1fr
  }
}

.section-container {
  max-width: 1200px;
  margin: 70px auto;
}

.body-bg {
  background: var(--color-surface) !important;
}

/*************************************events********************************/

/* =========================================================
   LINJUST EVENTS PAGE
   Page-specific styles only.
   Uses the existing LinJust global variables.
========================================================= */

.lj-events-page {
  background: radial-gradient(circle at 8% 22%, rgba(7, 104, 207, .045), transparent 28rem), var(--color-off-white);
  color: var(--color-text);
  font-family: var(--font-body);
}

.lj-events-page *,
.lj-events-page *::before,
.lj-events-page *::after {
  box-sizing: border-box;
}

.lj-events-page button,
.lj-events-page input,
.lj-events-page select {
  font-family: var(--font-body);
}

.lj-events-page button {
  cursor: pointer;
}

.lj-events-page a {
  text-decoration: none;
}

/* =========================================================
   HERO SECTION
========================================================= */

.lj-events-hero {
  position: relative;
  width: 100%;
  min-height: 350px;
  overflow: hidden;
  background: var(--color-dark);
  isolation: isolate;
}

.lj-events-hero-swiper,
.lj-events-hero-swiper .swiper-wrapper,
.lj-events-hero-swiper .swiper-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lj-events-hero-swiper {
  z-index: 1;
}

.lj-events-hero-slide {
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lj-events-hero-slide::before {
  position: absolute;
  inset: -5%;
  content: "";
  background: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
}

.lj-events-hero-slide.swiper-slide-active[data-ev-type="image"]::before {
  animation: ljEventsHeroZoom 9s ease-in-out infinite alternate;
}

.lj-events-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
}

.lj-events-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lj-events-hero>.container {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: 300px;
  margin: 5px auto;
}

.lj-events-hero-content {
  width: min(930px, 100%);
  padding: 46px 0 46px;
  margin: 10px auto;
  text-align: center;
}

.lj-events-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-events-hero-kicker i {
  font-size: 20px;
}

.lj-events-typing-heading {
  min-height: 45px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: var(--weight-semibold);
  line-height: .98;
  letter-spacing: -.035em;
}

.lj-events-typing-cursor {
  display: inline-block;
  width: 2px;
  height: .88em;
  margin-left: 6px;
  background: var(--color-secondary);
  vertical-align: -.06em;
  animation: ljEventsCursorBlink .85s steps(1, end) infinite;
}

.lj-events-hero-content>p {
  width: min(670px, 100%);
  margin: 22px 0 30px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: 1.8;
}

.lj-events-search-form {
  width: min(930px, 100%);
}

.lj-events-search-field {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 68px;
  padding: 7px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-large);
  backdrop-filter: blur(14px);
}

.lj-events-search-field>i {
  margin-left: 16px;
  color: var(--color-primary);
  font-size: 23px;
}

.lj-events-search-field input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.lj-events-search-field input::placeholder {
  color: var(--color-muted);
}

.lj-events-search-field button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: .03em;
  transition: var(--transition-normal);
}

.lj-events-search-field button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .28);
}

.lj-events-hero-pagination {
  position: absolute !important;
  right: max(18px, calc((100vw - 1320px)/2)) !important;
  bottom: 28px !important;
  left: auto !important;
  z-index: 5 !important;
  display: flex;
  justify-content: flex-end;
  width: auto !important;
  gap: 9px;
}

.lj-events-hero-pagination .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  margin: 0 !important;
  opacity: 1;
  background: rgba(255, 255, 255, .38);
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  transition: var(--transition-normal);
}

.lj-events-hero-pagination .swiper-pagination-bullet-active {
  width: 25px;
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 5px rgba(31, 158, 252, .16);
}

/* =========================================================
   LISTING LAYOUT
========================================================= */

.lj-events-listing-section {
  position: relative;
  padding: 78px 0 100px;
}

.lj-events-layout {
  display: grid;
  grid-template-columns: minmax(250px, 295px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* =========================================================
   FILTER SIDEBAR
========================================================= */

.lj-events-sidebar {
  position: sticky;
  top: 110px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
}

.lj-events-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 24px;
  color: var(--color-white);
  background: var(--topbar-background);
}

.lj-events-sidebar-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-events-sidebar-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--weight-semibold);
}

.lj-events-filter-close {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-round);
  font-size: 23px;
}

.lj-events-filter-group {
  border-bottom: 1px solid var(--color-border);
}

.lj-events-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 19px 22px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  text-align: left;
}

.lj-events-filter-heading>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.lj-events-filter-heading>span i {
  color: var(--color-primary);
  font-size: 19px;
}

.lj-events-filter-heading>i {
  color: var(--color-primary);
  font-size: 18px;
}

.lj-events-filter-body {
  display: grid;
  gap: 13px;
  padding: 0 22px 21px;
}

.lj-events-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.lj-events-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lj-events-checkbox-mark {
  position: relative;
  display: block;
  width: 19px;
  height: 19px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  transition: var(--transition-fast);
}

.lj-events-checkbox-mark::after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  content: "";
  opacity: 0;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4);
  transition: var(--transition-fast);
}

.lj-events-checkbox input:checked+.lj-events-checkbox-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .08);
}

.lj-events-checkbox input:checked+.lj-events-checkbox-mark::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.lj-events-checkbox>span:nth-of-type(2) {
  color: var(--color-text);
  font-size: 12px;
}

.lj-events-checkbox small {
  min-width: 25px;
  padding: 4px 6px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-align: center;
}

.lj-events-clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 44px);
  min-height: 44px;
  margin: 22px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-events-clear-filters:hover {
  color: var(--color-white);
  background: var(--color-primary);
}

/* =========================================================
   TOOLBAR
========================================================= */

.lj-events-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.lj-events-filter-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  color: var(--color-white);
  background: var(--color-dark);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.lj-events-location-select {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 0 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-small);
  transition: var(--transition-fast);
}

.lj-events-location-select:focus-within {
  border-color: rgba(7, 104, 207, .55);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-events-location-select>i:first-child {
  color: var(--color-primary);
  font-size: 19px;
}

.lj-events-location-select>i:last-child {
  color: var(--color-muted);
  font-size: 18px;
  pointer-events: none;
}

.lj-events-location-select select {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 10px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  font-size: 12px;
  font-weight: var(--weight-medium);
}

/* =========================================================
   RESULT BAR
========================================================= */

.lj-events-result-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.lj-events-result-bar span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-events-result-bar h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: var(--weight-semibold);
}

.lj-events-result-bar p {
  margin: 0;
  color: var(--color-text);
  font-size: 11px;
}

.lj-events-result-bar strong {
  color: var(--color-primary);
}

/* =========================================================
   EVENT GRID AND CARDS
========================================================= */

/* =========================================================
   EVENT GRID AND CARDS
   PREMIUM MARKETPLACE DESIGN
========================================================= */

.lj-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* =========================================================
   EVENT CARD
========================================================= */

.lj-event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-white);
  /* Premium marketplace red border */
  border: 1px solid rgba(7, 104, 207, .30);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 5px rgba(1, 52, 130, .025), 0 10px 28px rgba(1, 52, 130, .055);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

/* Premium red bottom accent */

.lj-event-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  height: 2px;
  content: "";
  opacity: 0;
  background: linear-gradient( 90deg, var(--color-primary-dark), var(--color-primary), #0687F1);
  transform: scaleX(.4);
  transform-origin: center;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.lj-event-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 8px rgba(1, 52, 130, .035), 0 18px 45px rgba(1, 52, 130, .10), 0 0 0 1px rgba(7, 104, 207, .025);
  transform: translateY(-6px);
}

.lj-event-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.lj-event-card.is-filter-hidden {
  display: none;
}

/* =========================================================
   EVENT MEDIA
========================================================= */

.lj-event-media {
  position: relative;
  flex: 0 0 220px;
  height: 220px;
  overflow: hidden;
  background: var(--color-dark);
}

/* subtle luxury overlay */

.lj-event-media::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  background: linear-gradient( 180deg, rgba(1, 52, 130, .08) 0%, transparent 30%, transparent 65%, rgba(1, 52, 130, .16) 100%);
}

/* =========================================================
   EVENT SWIPER
========================================================= */

.lj-event-card-swiper,
.lj-event-card-swiper .swiper-wrapper,
.lj-event-card-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.lj-event-card-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lj-event-card-swiper .swiper-slide[data-media-type="image"]::before {
  position: absolute;
  inset: -4%;
  content: "";
  background: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.lj-event-card:hover .swiper-slide-active[data-media-type="image"]::before {
  transform: scale(1.09);
}

/* =========================================================
   EVENT VIDEO
========================================================= */

.lj-event-card-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
}

/* =========================================================
   SWIPER PAGINATION
========================================================= */

.lj-event-card-swiper .swiper-pagination {
  bottom: 10px !important;
  z-index: 7;
}

.lj-event-card-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 3px !important;
  opacity: .65;
  background: var(--color-white);
  border-radius: var(--radius-round);
  box-shadow: 0 1px 4px rgba(1, 52, 130, .25);
  transition: var(--transition-fast);
}

.lj-event-card-swiper .swiper-pagination-bullet-active {
  width: 16px;
  opacity: 1;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
}

/* =========================================================
   SAVE EVENT BUTTON
========================================================= */

.lj-event-save {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .80);
  border-radius: var(--radius-round);
  box-shadow: 0 5px 15px rgba(1, 52, 130, .12), 0 1px 3px rgba(1, 52, 130, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-body);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.lj-event-save i {
  font-size: 14px;
}

.lj-event-save:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(7, 104, 207, .24);
  transform: translateY(-2px);
}

.lj-event-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   VERIFIED BADGE
========================================================= */

.lj-event-verified {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 0 9px;
  color: var(--color-white);
  background: rgba(1, 52, 130, .76);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-pill);
  box-shadow: 0 5px 15px rgba(1, 52, 130, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.lj-event-verified i {
  color: var(--color-secondary);
  font-size: 10px;
}

/* =========================================================
   EVENT CARD BODY
   FLEX MAKES FOOTER STAY AT BOTTOM
========================================================= */

.lj-event-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 17px 17px 15px;
  background: var(--color-white);
}

/* =========================================================
   PRICE / EVENT TYPE
========================================================= */

.lj-event-price-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lj-event-price-title>span {
  display: block;
  margin: 0 0 6px;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: .035em;
  text-transform: uppercase;
}

/* =========================================================
   EVENT TITLE
========================================================= */

.lj-event-price-title h3 {
  display: -webkit-box;
  min-height: 40px;
  margin: 0;
  overflow: hidden;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.38;
  letter-spacing: -.015em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lj-event-price-title h3 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.lj-event-price-title h3 a:hover {
  color: var(--color-primary);
}

/* =========================================================
   EVENT META
========================================================= */

.lj-event-card-meta {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

/* Each meta row */

.lj-event-card-meta span {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  color: #082E5C;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-medium);
  line-height: 1.45;
}

.lj-event-card-meta i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-primary);
  font-size: 11px;
}

/* =========================================================
   LOCATION
   Makes location much easier to scan
========================================================= */

/*
   This also works if your location is simply one of the
   spans inside .lj-event-card-meta and uses a location icon.
*/

.lj-event-card-meta span:has( i.fa-location-dot, i.fa-map-marker-alt, i.fa-map-marker, i.bx-map, i.bx-map-pin) {
  margin-top: 2px;
  padding-top: 9px;
  color: var(--color-title);
  border-top: 1px solid rgba(111, 141, 168, .75);
  font-weight: var(--weight-semibold);
}

.lj-event-card-meta span:has( i.fa-location-dot, i.fa-map-marker-alt, i.fa-map-marker, i.bx-map, i.bx-map-pin) i {
  color: var(--color-primary);
  font-size: 12px;
}

/* Optional direct location class */

.lj-event-location {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding-top: 9px;
  color: var(--color-title);
  border-top: 1px solid rgba(111, 141, 168, .75);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}

.lj-event-location i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-primary);
  font-size: 12px;
}

/* =========================================================
   EVENT CARD FOOTER
   ALWAYS AT BOTTOM
========================================================= */

.lj-event-card-footer {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 58px;
  margin-top: auto;
  padding: 7px 10px;
  background: linear-gradient( 180deg, #F6FBFD 0%, #F6FBFD 100%);
  border-top: 1px solid var(--color-border);
}

/* Premium red footer accent */

.lj-event-card-footer::before {
  position: absolute;
  top: -1px;
  left: 10px;
  width: 34px;
  height: 1px;
  content: "";
  background: var(--color-primary);
}

/* =========================================================
   COUNTDOWN
========================================================= */

.lj-event-countdown {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lj-event-countdown>span {
  display: grid;
  justify-items: center;
  min-width: 27px;
}

.lj-event-countdown strong {
  color: var(--color-title);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.lj-event-countdown small {
  margin-top: 3px;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 6px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lj-event-countdown>b {
  align-self: flex-start;
  margin-top: 1px;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   BOOK EVENT BUTTON
========================================================= */

.lj-event-book-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 11px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 5px 12px rgba(7, 104, 207, .14);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.lj-event-book-button i {
  font-size: 9px;
  transition: transform var(--transition-fast);
}

.lj-event-book-button:hover {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-primary));
  box-shadow: 0 8px 18px rgba(7, 104, 207, .22);
  transform: translateY(-1px);
}

.lj-event-book-button:hover i {
  transform: translateX(2px);
}

.lj-event-book-button.is-expired {
  color: rgba(255, 255, 255, .76);
  background: var(--color-muted);
  border-color: var(--color-muted);
  box-shadow: none;
  pointer-events: none;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.lj-events-empty-state {
  padding: 52px 25px;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.lj-events-empty-state>i {
  color: var(--color-primary);
  font-size: 46px;
}

.lj-events-empty-state h3 {
  margin: 14px 0 6px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

.lj-events-empty-state p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.6;
}

.lj-events-empty-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  margin-top: 18px;
  padding: 0 15px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

/* =========================================================
   EVENT PAGINATION
========================================================= */

.lj-events-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}

.lj-events-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  box-shadow: 0 4px 12px rgba(1, 52, 130, .035);
  transition: transform var(--transition-fast), color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.lj-events-pagination button:hover,
.lj-events-pagination button.is-active {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-primary));
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.lj-events-pagination button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   LARGE TABLET
========================================================= */

@media(max-width:1199.98px) {
  .lj-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .lj-event-media {
    height: 215px;
    flex-basis: 215px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:767.98px) {
  .lj-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .lj-event-media {
    height: 180px;
    flex-basis: 180px;
  }
  .lj-event-card-body {
    padding: 14px 13px 13px;
  }
  .lj-event-price-title h3 {
    min-height: 37px;
    font-size: 14px;
    line-height: 1.35;
  }
  .lj-event-card-meta {
    margin-top: 9px;
  }
  .lj-event-card-footer {
    min-height: 54px;
    padding: 7px 9px;
  }
}

/* =========================================================
   MOBILE
   2 EVENT CARDS PER ROW
   EXACTLY 5PX GAP
========================================================= */

@media(max-width:575.98px) {
  .lj-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  /* =====================================================
       CARD
    ===================================================== */
  .lj-event-card {
    border-color: rgba(7, 104, 207, .28);
    border-radius: var(--radius-xs);
  }
  .lj-event-card:hover {
    transform: translateY(-2px);
  }
  /* =====================================================
       MEDIA
       Compact for two cards per row
    ===================================================== */
  .lj-event-media {
    height: 140px;
    flex-basis: 140px;
  }
  /* =====================================================
       SAVE BUTTON
    ===================================================== */
  .lj-event-save {
    top: 7px;
    left: 7px;
    width: 29px;
    height: 29px;
  }
  .lj-event-save i {
    font-size: 10px;
  }
  /* =====================================================
       VERIFIED
    ===================================================== */
  .lj-event-verified {
    top: 7px;
    right: 7px;
    min-height: 21px;
    gap: 3px;
    max-width: 58%;
    padding: 0 6px;
    overflow: hidden;
    font-size: 6px;
    letter-spacing: .02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lj-event-verified i {
    font-size: 7px;
  }
  /* =====================================================
       BODY
    ===================================================== */
  .lj-event-card-body {
    padding: 10px 9px 9px;
  }
  /* EVENT TYPE / PRICE */
  .lj-event-price-title>span {
    margin-bottom: 4px;
    font-size: 7px;
    line-height: 1.2;
  }
  /* TITLE */
  .lj-event-price-title h3 {
    min-height: 32px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    letter-spacing: -.01em;
  }
  /* =====================================================
       META
    ===================================================== */
  .lj-event-card-meta {
    gap: 5px;
    margin-top: 7px;
  }
  .lj-event-card-meta span {
    gap: 4px;
    font-size: 7.5px;
    line-height: 1.35;
  }
  .lj-event-card-meta i {
    margin-top: 1px;
    font-size: 8px;
  }
  /* =====================================================
       MOBILE LOCATION
       Strong and visible
    ===================================================== */
  .lj-event-card-meta span:has( i.fa-location-dot, i.fa-map-marker-alt, i.fa-map-marker, i.bx-map, i.bx-map-pin) {
    margin-top: 1px;
    padding-top: 6px;
    color: var(--color-title);
    font-size: 8px;
    font-weight: var(--weight-semibold);
    border-top: 1px solid rgba(111, 141, 168, .75);
  }
  .lj-event-location {
    gap: 4px;
    margin-top: 7px;
    padding-top: 6px;
    font-size: 8px;
    line-height: 1.35;
  }
  .lj-event-location i {
    font-size: 8px;
  }
  /* Prevent long locations from increasing card height */
  .lj-event-card-meta span,
  .lj-event-location {
    min-width: 0;
  }
  .lj-event-card-meta span>span,
  .lj-event-location>span {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  /* =====================================================
       FOOTER
    ===================================================== */
  .lj-event-card-footer {
    min-height: 45px;
    gap: 4px;
    padding: 5px 6px;
  }
  .lj-event-card-footer::before {
    left: 6px;
    width: 23px;
  }
  /* =====================================================
       COUNTDOWN
    ===================================================== */
  .lj-event-countdown {
    gap: 1px;
  }
  .lj-event-countdown>span {
    min-width: 20px;
  }
  .lj-event-countdown strong {
    font-size: 8px;
  }
  .lj-event-countdown small {
    margin-top: 2px;
    font-size: 4.5px;
    letter-spacing: 0;
  }
  .lj-event-countdown>b {
    font-size: 7px;
  }
  /* =====================================================
       BOOK BUTTON
    ===================================================== */
  .lj-event-book-button {
    width: 27px;
    min-width: 27px;
    height: 27px;
    min-height: 27px;
    padding: 0;
    gap: 0;
    border-radius: var(--radius-xs);
    font-size: 0;
  }
  .lj-event-book-button i {
    font-size: 8px;
  }
  /* =====================================================
       SWIPER
    ===================================================== */
  .lj-event-card-swiper .swiper-pagination {
    bottom: 6px !important;
  }
  .lj-event-card-swiper .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    margin: 0 2px !important;
  }
  .lj-event-card-swiper .swiper-pagination-bullet-active {
    width: 11px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
   STILL 2 CARDS PER ROW
========================================================= */

@media(max-width:390px) {
  .lj-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .lj-event-media {
    height: 128px;
    flex-basis: 128px;
  }
  .lj-event-card-body {
    padding: 9px 7px 8px;
  }
  .lj-event-price-title>span {
    font-size: 6.5px;
  }
  .lj-event-price-title h3 {
    min-height: 30px;
    font-size: 10.5px;
    line-height: 1.4;
  }
  .lj-event-card-meta {
    gap: 4px;
    margin-top: 6px;
  }
  .lj-event-card-meta span {
    font-size: 7px;
  }
  .lj-event-card-meta i {
    font-size: 7px;
  }
  .lj-event-card-footer {
    min-height: 43px;
    padding: 5px;
  }
  .lj-event-countdown>span {
    min-width: 18px;
  }
  .lj-event-countdown strong {
    font-size: 7px;
  }
  .lj-event-countdown small {
    font-size: 4px;
  }
  .lj-event-book-button {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-event-card,
  .lj-event-card-swiper .swiper-slide[data-media-type="image"]::before,
  .lj-event-save,
  .lj-event-book-button {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   EMPTY STATE AND PAGINATION
========================================================= */

.lj-events-empty-state {
  padding: 55px 25px;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.lj-events-empty-state>i {
  color: var(--color-primary);
  font-size: 58px;
}

.lj-events-empty-state h3 {
  margin: 14px 0 7px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 30px;
}

.lj-events-empty-state p {
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
}

.lj-events-empty-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 17px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: var(--weight-bold);
}

.lj-events-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 38px;
}

.lj-events-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-events-pagination button:hover,
.lj-events-pagination button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.lj-events-pagination button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   MOBILE FILTER DRAWER
========================================================= */

.lj-events-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(1, 52, 130, .58);
  border: 0;
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity var(--transition-normal);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes ljEventsHeroZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.13)
  }
}

@keyframes ljEventCardZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.11)
  }
}

@keyframes ljEventsCursorBlink {
  0%,
  45% {
    opacity: 1
  }
  46%,
  100% {
    opacity: 0
  }
}

/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

@media(max-width:1199.98px) {
  .lj-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:991.98px) {
  .lj-events-layout {
    grid-template-columns: 1fr;
  }
  .lj-events-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: min(88vw, 350px);
    height: 100dvh;
    overflow-y: auto;
    border: 0;
    border-radius: var(--radius-none);
    transform: translateX(-105%);
    transition: transform var(--transition-normal);
  }
  .lj-events-sidebar.is-open {
    transform: translateX(0);
  }
  .lj-events-filter-close {
    display: flex;
  }
  .lj-events-filter-backdrop.is-visible {
    display: block;
    opacity: 1;
  }
  .lj-events-toolbar {
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
  }
  .lj-events-filter-trigger {
    display: flex;
    min-width: 52px;
  }
}

@media(max-width:767.98px) {
  .lj-events-hero,
  .lj-events-hero>.container {
    min-height: 520px;
  }
  .lj-events-hero-content {
    padding: 78px 0 94px;
    text-align: center;
  }
  .lj-events-hero-kicker {
    justify-content: center;
  }
  .lj-events-typing-heading {
    min-height: 115px;
    font-size: clamp(39px, 11vw, 57px);
  }
  .lj-events-hero-content>p {
    margin-right: auto;
    margin-left: auto;
    font-size: 13px;
  }
  .lj-events-search-field {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 6px;
  }
  .lj-events-search-field button {
    grid-column: 1/-1;
    width: 100%;
    min-height: 48px;
    margin-top: 3px;
  }
  .lj-events-search-field input {
    height: 48px;
    padding-right: 8px;
    font-size: 12px;
  }
  .lj-events-hero-pagination {
    right: 50% !important;
    bottom: 24px !important;
    transform: translateX(50%);
  }
  .lj-events-listing-section {
    padding: 52px 0 75px;
  }
  .lj-events-toolbar {
    grid-template-columns: 44px repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .lj-events-filter-trigger {
    min-width: 44px;
    min-height: 48px;
    padding: 0;
  }
  .lj-events-filter-trigger span {
    display: none;
  }
  .lj-events-location-select {
    min-height: 48px;
    padding: 0 8px;
  }
  .lj-events-location-select>i:first-child {
    font-size: 16px;
  }
  .lj-events-location-select>i:last-child {
    display: none;
  }
  .lj-events-location-select select {
    height: 46px;
    padding: 0 4px;
    font-size: 9px;
  }
  .lj-events-result-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .lj-events-result-bar h2 {
    font-size: 34px;
  }
  .lj-events-grid {
    grid-template-columns: 1fr;
  }
  .lj-event-media {
    height: 250px;
  }
  .lj-event-price-title h3 {
    min-height: 0;
    font-size: 26px;
  }
}

@media(max-width:430px) {
  .lj-events-toolbar {
    grid-template-columns: 42px repeat(3, minmax(0, 1fr));
  }
  .lj-events-location-select {
    padding: 0 5px;
  }
  .lj-events-location-select>i:first-child {
    display: none;
  }
  .lj-events-location-select select {
    font-size: 8px;
    text-align: center;
  }
  .lj-event-card-footer {
    padding: 13px 12px;
  }
  .lj-event-book-button {
    padding: 0 10px;
    font-size: 7px;
  }
  .lj-event-countdown {
    gap: 3px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-events-page *,
  .lj-events-page *::before,
  .lj-events-page *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/***********************************HOME EVENTS************************************/

/* =========================================================
   LINJUST HOME EVENTS SLIDESHOW
   Uses the existing project CSS variables.
========================================================= */

.lj-home-events {
  position: relative;
  width: 100%;
  padding: 70px 0;
  overflow: hidden;
  background: radial-gradient( circle at 10% 20%, rgba(7, 104, 207, .045), transparent 24rem), var(--color-off-white);
  font-family: var(--font-body);
}

.lj-home-events *,
.lj-home-events *::before,
.lj-home-events *::after {
  box-sizing: border-box;
}

/* =========================================================
   OUTER SECTION CARD
========================================================= */

.lj-home-events-shell {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
}

/* =========================================================
   SECTION HEADER
========================================================= */

.lj-home-events-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 48px;
  padding: 9px 15px;
  color: var(--color-white);
  overflow: hidden;
}

.lj-home-events-header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--home-events-header-bg, var(--topbar-background));
}

.lj-home-events-header::after {
  position: absolute;
  top: -80px;
  right: 14%;
  z-index: -1;
  width: 220px;
  height: 220px;
  content: "";
  background: rgba(255, 255, 255, .08);
  border-radius: var(--radius-round);
  filter: blur(2px);
}

.lj-home-events-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.lj-home-events-heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-round);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .06);
  font-size: 15px;
}

.lj-home-events-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-home-events-heading h2 {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(29px, 3vw, 40px);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.lj-home-events-heading p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: var(--weight-light);
}

.lj-home-events-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 10px;
  min-height: 45px;
  padding: 0 16px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-home-events-view-all i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  color: var(--color-primary);
  background: var(--color-white);
  border-radius: var(--radius-round);
  transition: var(--transition-normal);
}

.lj-home-events-view-all:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, .18);
  transform: translateY(-2px);
}

.lj-home-events-view-all:hover i {
  transform: translateX(3px);
}

/* =========================================================
   OUTER SWIPER
========================================================= */

.lj-home-events-slider-wrap {
  position: relative;
  padding: 14px 10px 8px;
}

.lj-home-events-swiper {
  width: 100%;
  overflow: hidden;
}

.lj-home-events-swiper>.swiper-wrapper {
  align-items: stretch;
}

.lj-home-events-swiper>.swiper-wrapper>.swiper-slide {
  height: auto;
}

.lj-home-events-swiper>.swiper-wrapper>.swiper-slide>article {
  height: 100%;
}

/* =========================================================
   EVENT CARD
========================================================= */

.lj-home-event-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal);
}

.lj-home-event-card:hover {
  transform: translateY(-7px);
  border-color: rgba(7, 104, 207, .2);
  box-shadow: var(--shadow-medium);
}

/* =========================================================
   CARD MEDIA SLIDESHOW
========================================================= */

.lj-home-event-media {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--color-dark);
}

.lj-home-event-media-swiper,
.lj-home-event-media-swiper .swiper-wrapper,
.lj-home-event-media-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.lj-home-event-media-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lj-home-event-media-swiper .swiper-slide[data-event-media-type="image"]::before {
  position: absolute;
  inset: -4%;
  content: "";
  background: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
}

.lj-home-event-card:hover .lj-home-event-media-swiper .swiper-slide-active[data-event-media-type="image"]::before {
  animation: ljHomeEventMediaZoom 6s ease-in-out infinite alternate;
}

.lj-home-event-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
}

.lj-home-event-media-swiper .swiper-pagination {
  bottom: 12px !important;
}

.lj-home-event-media-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 3px !important;
  opacity: .55;
  background: var(--color-white);
  transition: var(--transition-fast);
}

.lj-home-event-media-swiper .swiper-pagination-bullet-active {
  width: 16px;
  opacity: 1;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
}

/* =========================================================
   SAVE AND VERIFIED BADGES
========================================================= */

.lj-home-event-save {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  box-shadow: 0 10px 24px rgba(1, 52, 130, .17);
  font-size: 18px;
  transition: var(--transition-normal);
}

.lj-home-event-save:hover,
.lj-home-event-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  transform: translateY(-2px);
}

.lj-home-event-verified {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  color: var(--color-dark);
  background: rgba(74, 179, 252, .95);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(1, 52, 130, .14);
  backdrop-filter: blur(8px);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-home-event-verified i {
  color: var(--color-dark);
  font-size: 13px;
}

/* =========================================================
   CARD BODY
========================================================= */

.lj-home-event-body {
  flex: 1 1 auto;
  padding: 18px 17px 16px;
}

.lj-home-event-price {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-home-event-body h3 {
  min-height: 49px;
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  line-height: 1.08;
}

.lj-home-event-body h3 a {
  color: inherit;
  transition: var(--transition-fast);
}

.lj-home-event-body h3 a:hover {
  color: var(--color-primary);
}

.lj-home-event-meta {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.lj-home-event-meta span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text);
  font-size: 10px;
  line-height: 1.45;
}

.lj-home-event-meta i {
  flex: 0 0 auto;
  width: 14px;
  color: var(--color-primary);
  font-size: 14px;
  text-align: center;
}

/* =========================================================
   CARD FOOTER
========================================================= */

.lj-home-event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 15px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.lj-home-event-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lj-home-event-countdown>span {
  display: grid;
  justify-items: center;
  min-width: 27px;
}

.lj-home-event-countdown strong {
  color: var(--color-primary);
  font-size: 11px;
  line-height: 1;
}

.lj-home-event-countdown small {
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 5px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-home-event-countdown>b {
  align-self: flex-start;
  color: var(--color-border);
  font-size: 10px;
}

.lj-home-event-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  transition: var(--transition-normal);
}

.lj-home-event-book:hover {
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 11px 22px rgba(7, 104, 207, .23);
}

.lj-home-event-book.is-expired {
  color: rgba(255, 255, 255, .75);
  background: var(--color-muted);
  pointer-events: none;
  box-shadow: none;
}

/* =========================================================
   OUTER NAVIGATION
========================================================= */

.lj-home-events-nav {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 58px;
  padding: 0;
  color: var(--color-white);
  background: rgba(1, 52, 130, .75);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-xs);
  box-shadow: 0 12px 30px rgba(1, 52, 130, .16);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  transition: var(--transition-normal);
}

.lj-home-events-nav:hover {
  background: var(--color-primary);
  transform: translateY(-50%) scale(1.04);
}

.lj-home-events-prev {
  left: 10px;
}

.lj-home-events-next {
  right: 10px;
}

.lj-home-events-nav.swiper-button-disabled {
  opacity: .3;
  cursor: not-allowed;
}

/* =========================================================
   OUTER PAGINATION
========================================================= */

.lj-home-events-pagination {
  position: relative !important;
  inset: auto !important;
  display: flex;
  justify-content: center;
  gap: 7px;
  width: auto !important;
  padding: 20px 20px 25px;
}

.lj-home-events-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 !important;
  opacity: 1;
  background: var(--color-border);
  transition: var(--transition-normal);
}

.lj-home-events-pagination .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* =========================================================
   MEDIA ANIMATION
========================================================= */

@keyframes ljHomeEventMediaZoom {
  from {
    transform: scale(1.04);
  }
  to {
    transform: scale(1.12);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-home-events-header {
    min-height: 48px;
    padding: 8px 10px;
  }
  .lj-home-events-heading-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .lj-home-events-heading p {
    display: none;
  }
  .lj-home-events-slider-wrap {
    padding-right: 38px;
    padding-left: 38px;
  }
  .lj-home-event-media {
    height: 210px;
  }
}

/* =========================================================
   MOBILE
   Exactly two event cards per row in the slider.
========================================================= */

@media(max-width:767.98px) {
  .lj-home-events {
    padding: 50px 0;
  }
  .lj-home-events-shell {
    border-radius: var(--radius-sm);
  }
  .lj-home-events-header {
    min-height: 46px;
    padding: 7px 10px;
  }
  .lj-home-events-heading {
    gap: 11px;
  }
  .lj-home-events-heading-icon {
    flex-basis: 45px;
    width: 45px;
    height: 45px;
    font-size: 19px;
  }
  .lj-home-events-kicker {
    font-size: 7px;
  }
  .lj-home-events-heading h2 {
    font-size: 24px;
  }
  .lj-home-events-view-all {
    min-height: 38px;
    padding: 0 8px;
    gap: 5px;
    font-size: 8px;
  }
  .lj-home-events-view-all i {
    width: 23px;
    height: 23px;
    font-size: 9px;
  }
  .lj-home-events-slider-wrap {
    padding: 20px 8px 4px;
  }
  .lj-home-events-nav {
    top: 46%;
    width: 30px;
    height: 48px;
    font-size: 11px;
  }
  .lj-home-events-prev {
    left: 3px;
  }
  .lj-home-events-next {
    right: 3px;
  }
  .lj-home-event-card {
    border-radius: var(--radius-sm);
  }
  .lj-home-event-media {
    height: 150px;
  }
  .lj-home-event-save {
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .lj-home-event-verified {
    top: 8px;
    right: 8px;
    gap: 3px;
    padding: 6px 7px;
    font-size: 6px;
  }
  .lj-home-event-verified i {
    font-size: 10px;
  }
  .lj-home-event-body {
    padding: 13px 10px 11px;
  }
  .lj-home-event-price {
    margin-bottom: 5px;
    font-size: 8px;
  }
  .lj-home-event-body h3 {
    min-height: 38px;
    font-size: 17px;
  }
  .lj-home-event-meta {
    gap: 6px;
    margin-top: 10px;
  }
  .lj-home-event-meta span {
    gap: 5px;
    font-size: 7px;
  }
  .lj-home-event-meta i {
    width: 10px;
    font-size: 10px;
  }
  .lj-home-event-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 8px;
  }
  .lj-home-event-countdown {
    justify-content: center;
    gap: 2px;
  }
  .lj-home-event-countdown>span {
    min-width: 23px;
  }
  .lj-home-event-countdown strong {
    font-size: 9px;
  }
  .lj-home-event-countdown small {
    font-size: 4px;
  }
  .lj-home-event-countdown>b {
    font-size: 8px;
  }
  .lj-home-event-book {
    width: 100%;
    min-height: 32px;
    padding: 0 7px;
    font-size: 7px;
  }
  .lj-home-events-pagination {
    padding: 16px 10px 20px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:420px) {
  .lj-home-events-header {
    padding: 14px 11px;
  }
  .lj-home-events-heading-icon {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
    font-size: 16px;
  }
  .lj-home-events-heading h2 {
    font-size: 20px;
  }
  .lj-home-events-view-all span {
    display: none;
  }
  .lj-home-events-view-all {
    width: 35px;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .lj-home-events-view-all i {
    width: 32px;
    height: 32px;
  }
  .lj-home-event-media {
    height: 130px;
  }
  .lj-home-event-body h3 {
    font-size: 15px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-home-events *,
  .lj-home-events *::before,
  .lj-home-events *::after {
    animation: none !important;
    transition: none !important;
  }
}

/*******************REAL ESTATE***************/

/* LINJUST REAL ESTATE PAGE — page-specific CSS only */

.lj-real-estate-page {
  background: radial-gradient(circle at 10% 16%, rgba(7, 104, 207, .045), transparent 28rem), var(--color-off-white);
  color: var(--color-text);
  font-family: var(--font-body)
}

.lj-real-estate-page *,
.lj-real-estate-page *:before,
.lj-real-estate-page *:after {
  box-sizing: border-box
}

.lj-real-estate-page button,
.lj-real-estate-page input,
.lj-real-estate-page select {
  font-family: var(--font-body)
}

.lj-real-estate-page button {
  cursor: pointer
}

.lj-real-estate-page a {
  text-decoration: none
}

/* Hero */

.lj-re-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  isolation: isolate
}

.lj-re-hero-swiper,
.lj-re-hero-swiper .swiper-wrapper,
.lj-re-hero-swiper .swiper-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.lj-re-hero-swiper {
  z-index: 1
}

.lj-re-hero-slide {
  overflow: hidden;
  background: center/cover no-repeat
}

.lj-re-hero-slide:before {
  position: absolute;
  inset: -5%;
  content: "";
  background: inherit;
  background-position: center;
  background-size: cover;
  transform: scale(1.04)
}

.lj-re-hero-slide.swiper-slide-active[data-re-type="image"]:before {
  animation: ljReHeroZoom 9s ease-in-out infinite alternate
}

/* =========================================================
   HERO VIDEO BACKGROUND
========================================================= */

.lj-re-hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-dark);
  /*
     * The video is decorative and must not intercept
     * search, pagination or hero content interactions.
     */
  pointer-events: none;
  /*
     * Prevent unwanted selection and dragging.
     */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.lj-re-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none
}

.lj-re-hero>.container {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
}

.lj-re-hero-content {
  width: min(930px, 100%);
  padding: 46px 0 56px;
  margin: 5px auto;
}

.lj-re-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-re-typing-heading {
  min-height: 45px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(35px, 4vw, 60px);
  font-weight: var(--weight-semibold);
  line-height: .98;
  letter-spacing: -.035em
}

.lj-re-typing-cursor {
  display: inline-block;
  width: 2px;
  height: .88em;
  margin-left: 6px;
  background: var(--color-secondary);
  vertical-align: -.06em;
  animation: ljReCursorBlink .85s steps(1, end) infinite
}

.lj-re-hero-content>p {
  width: min(680px, 100%);
  margin: 22px 0 30px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: 1.8
}

.lj-re-search-form {
  width: min(930px, 100%)
}

.lj-re-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 68px;
  padding: 7px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-large)
}

.lj-re-search-field>i {
  margin-left: 16px;
  color: var(--color-primary);
  font-size: 22px
}

.lj-re-search-field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px
}

.lj-re-search-field button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal)
}

.lj-re-search-field button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .28)
}

.lj-re-hero-pagination {
  position: absolute !important;
  right: max(18px, calc((100vw - 1320px)/2)) !important;
  bottom: 29px !important;
  left: auto !important;
  z-index: 5 !important;
  display: flex;
  width: auto !important;
  gap: 9px
}

.lj-re-hero-pagination .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  margin: 0 !important;
  opacity: 1;
  background: rgba(255, 255, 255, .38);
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  transition: var(--transition-normal)
}

.lj-re-hero-pagination .swiper-pagination-bullet-active {
  width: 25px;
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 5px rgba(31, 158, 252, .16)
}

/* Layout and sidebar */

.lj-re-listing-section {
  padding: 78px 0 100px
}

.lj-re-layout {
  display: grid;
  grid-template-columns: minmax(250px, 295px) minmax(0, 1fr);
  gap: 30px;
  align-items: start
}

.lj-re-sidebar {
  position: sticky;
  top: 110px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-re-sidebar-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 24px;
  color: var(--color-white);
  background: var(--topbar-background)
}

.lj-re-sidebar-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-re-sidebar-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px
}

.lj-re-filter-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-round)
}

.lj-re-filter-group {
  border-bottom: 1px solid var(--color-border)
}

.lj-re-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 19px 22px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  text-align: left
}

.lj-re-filter-heading>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: var(--weight-bold)
}

.lj-re-filter-heading>span i,
.lj-re-filter-heading>i {
  color: var(--color-primary)
}

.lj-re-filter-body {
  display: grid;
  gap: 13px;
  padding: 0 22px 21px
}

.lj-re-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  cursor: pointer
}

.lj-re-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.lj-re-checkbox-mark {
  position: relative;
  width: 19px;
  height: 19px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-re-checkbox-mark:after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  content: "";
  opacity: 0;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4)
}

.lj-re-checkbox input:checked+.lj-re-checkbox-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .08)
}

.lj-re-checkbox input:checked+.lj-re-checkbox-mark:after {
  opacity: 1;
  transform: rotate(45deg)
}

.lj-re-checkbox>span:nth-of-type(2) {
  font-size: 12px
}

.lj-re-checkbox small {
  min-width: 25px;
  padding: 4px 6px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  font-size: 9px;
  text-align: center
}

.lj-re-conditional-group[hidden] {
  display: none !important
}

.lj-re-clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 44px);
  min-height: 44px;
  margin: 22px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold)
}

/* Toolbar and results */

.lj-re-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px
}

.lj-re-filter-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  color: var(--color-white);
  background: var(--color-dark);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold)
}

.lj-re-location-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
  padding: 0 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-small)
}

.lj-re-location-select>i:first-child {
  color: var(--color-primary)
}

.lj-re-location-select>i:last-child {
  color: var(--color-muted);
  font-size: 13px
}

.lj-re-location-select select {
  width: 100%;
  height: 52px;
  padding: 0 10px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  font-size: 12px
}

.lj-re-results-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px
}

.lj-re-results-panel span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-re-results-panel h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 38px
}

.lj-re-results-panel p {
  margin: 0;
  font-size: 11px
}

.lj-re-results-panel strong {
  color: var(--color-primary)
}

.lj-re-active-filters-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-re-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.lj-re-active-filter,
.lj-re-filter-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold)
}

/* Cards */

/* =========================================================
   PREMIUM PROPERTY LISTING GRID
========================================================= */

.lj-re-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* =========================================================
   PROPERTY CARD
========================================================= */

.lj-property-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-white);
  /* Premium marketplace red border */
  border: 1px solid rgba(7, 104, 207, .30);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 5px rgba(1, 52, 130, .025), 0 10px 28px rgba(1, 52, 130, .055);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

/* Premium red accent */

.lj-property-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  height: 2px;
  content: "";
  opacity: 0;
  background: linear-gradient( 90deg, var(--color-primary-dark), var(--color-primary), #0687F1);
  transform: scaleX(.4);
  transform-origin: center;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.lj-property-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 8px rgba(1, 52, 130, .035), 0 18px 45px rgba(1, 52, 130, .10), 0 0 0 1px rgba(7, 104, 207, .025);
  transform: translateY(-6px);
}

.lj-property-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.lj-property-card.is-filter-hidden {
  display: none;
}

/* =========================================================
   PROPERTY MEDIA
========================================================= */

.lj-property-media {
  position: relative;
  flex: 0 0 238px;
  height: 238px;
  overflow: hidden;
  background: var(--color-dark);
}

.lj-property-media::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  background: linear-gradient( 180deg, rgba(1, 52, 130, .08) 0%, transparent 30%, transparent 65%, rgba(1, 52, 130, .16) 100%);
}

/* =========================================================
   PROPERTY SWIPER
========================================================= */

.lj-property-media-swiper,
.lj-property-media-swiper .swiper-wrapper,
.lj-property-media-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.lj-property-media-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lj-property-media-swiper .swiper-slide[data-media-type="image"]::before {
  position: absolute;
  inset: -4%;
  content: "";
  background: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.lj-property-card:hover .swiper-slide-active[data-media-type="image"]::before {
  transform: scale(1.09);
}

/* =========================================================
   VIDEO
========================================================= */

.lj-property-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
}

/* =========================================================
   SWIPER PAGINATION
========================================================= */

.lj-property-media-swiper .swiper-pagination {
  bottom: 11px !important;
  z-index: 7;
}

.lj-property-media-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 3px !important;
  opacity: .62;
  background: var(--color-white);
  border-radius: var(--radius-round);
  box-shadow: 0 1px 4px rgba(1, 52, 130, .20);
  transition: var(--transition-fast);
}

.lj-property-media-swiper .swiper-pagination-bullet-active {
  width: 16px;
  opacity: 1;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
}

/* =========================================================
   SAVE BUTTON
========================================================= */

.lj-property-save {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .80);
  border-radius: var(--radius-round);
  box-shadow: 0 5px 15px rgba(1, 52, 130, .12), 0 1px 3px rgba(1, 52, 130, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.lj-property-save i {
  font-size: 14px;
}

.lj-property-save:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(7, 104, 207, .24);
  transform: translateY(-2px);
}

.lj-property-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   BADGE STACK
========================================================= */

.lj-property-badge-stack {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 8;
  display: grid;
  justify-items: end;
  gap: 6px;
  max-width: 65%;
}

/* =========================================================
   VERIFIED / CATEGORY BADGES
========================================================= */

.lj-property-verified,
.lj-property-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
  box-shadow: 0 5px 15px rgba(1, 52, 130, .12);
}

.lj-property-verified {
  color: #013482;
  background: rgba(74, 179, 252, .97);
  border: 1px solid rgba(255, 255, 255, .48);
}

.lj-property-verified i {
  font-size: 9px;
}

.lj-property-category-badge {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-white);
  background: rgba(1, 52, 130, .76);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   PROPERTY MEDIA STATS
========================================================= */

.lj-property-media-stat {
  position: absolute;
  bottom: 13px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 8px;
  color: var(--color-white);
  background: rgba(1, 52, 130, .72);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  box-shadow: 0 4px 12px rgba(1, 52, 130, .12);
}

.lj-property-media-stat i {
  color: var(--color-secondary);
  font-size: 10px;
}

.lj-property-media-stat.is-left {
  left: 13px;
}

.lj-property-media-stat.is-right {
  right: 13px;
}

/* =========================================================
   PROPERTY BODY
========================================================= */

.lj-property-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 17px 17px 16px;
  background: var(--color-white);
}

/* =========================================================
   PROPERTY PRICE
========================================================= */

.lj-property-price {
  display: block;
  margin: 0 0 7px;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   PROPERTY TITLE
========================================================= */

.lj-property-card-body h3 {
  display: -webkit-box;
  min-height: 40px;
  margin: 0;
  overflow: hidden;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.38;
  letter-spacing: -.015em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lj-property-card-body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.lj-property-card-body h3 a:hover {
  color: var(--color-primary);
}

/* =========================================================
   PROPERTY LOCATION
   MORE VISIBLE + PREMIUM
========================================================= */

.lj-property-location {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  color: #013482;
  border-top: 1px solid rgba(111, 141, 168, .75);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  line-height: 1.45;
}

.lj-property-location i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 12px;
}

.lj-property-location span,
.lj-property-location strong {
  min-width: 0;
  color: var(--color-title);
}

.lj-property-location strong {
  font-weight: var(--weight-semibold);
}

/* =========================================================
   PROPERTY FOOTER
   GUARANTEED TO STAY AT CARD BOTTOM
========================================================= */

.lj-property-card-footer {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  margin-top: auto;
  padding: 8px 12px;
  background: linear-gradient( 180deg, #F6FBFD 0%, #F6FBFD 100%);
  border-top: 1px solid var(--color-border);
}

/* Small premium red footer accent */

.lj-property-card-footer::before {
  position: absolute;
  top: -1px;
  left: 12px;
  width: 34px;
  height: 1px;
  content: "";
  background: var(--color-primary);
}

/* =========================================================
   PROPERTY AGENT
========================================================= */

.lj-property-agent {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.lj-property-agent img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: cover;
  background: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 1px var(--color-border), 0 4px 10px rgba(1, 52, 130, .07);
}

.lj-property-agent>div {
  min-width: 0;
}

.lj-property-agent small {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lj-property-agent a,
.lj-property-agent strong,
.lj-property-agent span {
  display: block;
  max-width: 145px;
  overflow: hidden;
  color: var(--color-title);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-property-agent a:hover {
  color: var(--color-primary);
}

/* =========================================================
   VIEW PROPERTY BUTTON
========================================================= */

.lj-property-view-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 5px 12px rgba(7, 104, 207, .14);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.lj-property-view-button i {
  font-size: 9px;
  transition: transform var(--transition-fast);
}

.lj-property-view-button:hover {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-primary));
  box-shadow: 0 8px 18px rgba(7, 104, 207, .22);
  transform: translateY(-1px);
}

.lj-property-view-button:hover i {
  transform: translateX(2px);
}

/* =========================================================
   LARGE TABLET
========================================================= */

@media(max-width:1199.98px) {
  .lj-re-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .lj-property-media {
    height: 230px;
    flex-basis: 230px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:767.98px) {
  .lj-re-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .lj-property-media {
    height: 190px;
    flex-basis: 190px;
  }
  .lj-property-card-body {
    padding: 14px 13px 13px;
  }
  .lj-property-price {
    font-size: 15px;
  }
  .lj-property-card-body h3 {
    min-height: 37px;
    font-size: 14px;
    line-height: 1.35;
  }
  .lj-property-location {
    margin-top: 10px;
    padding-top: 9px;
    font-size: 10px;
  }
  .lj-property-card-footer {
    min-height: 54px;
    padding: 7px 10px;
  }
}

/* =========================================================
   MOBILE
   2 CARDS PER ROW
   EXACTLY 5PX GAP
========================================================= */

@media(max-width:575.98px) {
  .lj-re-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  /* -----------------------------------------
       CARD
    ----------------------------------------- */
  .lj-property-card {
    border-color: rgba(7, 104, 207, .28);
    border-radius: var(--radius-xs);
  }
  .lj-property-card:hover {
    transform: translateY(-2px);
  }
  /* -----------------------------------------
       MEDIA
       Compact for two-column mobile layout
    ----------------------------------------- */
  .lj-property-media {
    height: 145px;
    flex-basis: 145px;
  }
  /* -----------------------------------------
       SAVE
    ----------------------------------------- */
  .lj-property-save {
    top: 7px;
    left: 7px;
    width: 29px;
    height: 29px;
  }
  .lj-property-save i {
    font-size: 10px;
  }
  /* -----------------------------------------
       BADGES
    ----------------------------------------- */
  .lj-property-badge-stack {
    top: 7px;
    right: 7px;
    gap: 4px;
    max-width: 60%;
  }
  .lj-property-verified,
  .lj-property-category-badge {
    min-height: 21px;
    padding: 0 6px;
    gap: 3px;
    font-size: 6px;
    letter-spacing: .02em;
  }
  .lj-property-verified i {
    font-size: 7px;
  }
  /* -----------------------------------------
       MEDIA STATS
    ----------------------------------------- */
  .lj-property-media-stat {
    bottom: 7px;
    min-height: 22px;
    gap: 3px;
    padding: 3px 5px;
    font-size: 7px;
  }
  .lj-property-media-stat i {
    font-size: 7px;
  }
  .lj-property-media-stat.is-left {
    left: 6px;
  }
  .lj-property-media-stat.is-right {
    right: 6px;
  }
  /* -----------------------------------------
       BODY
    ----------------------------------------- */
  .lj-property-card-body {
    padding: 11px 9px 10px;
  }
  /* PRICE */
  .lj-property-price {
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 1.15;
  }
  /* TITLE */
  .lj-property-card-body h3 {
    min-height: 33px;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    line-height: 1.36;
    letter-spacing: -.01em;
  }
  /* -----------------------------------------
       LOCATION
       Keep highly visible on mobile
    ----------------------------------------- */
  .lj-property-location {
    gap: 5px;
    margin-top: 8px;
    padding-top: 7px;
    color: #013482;
    font-size: 8px;
    font-weight: var(--weight-medium);
    line-height: 1.35;
  }
  .lj-property-location i {
    margin-top: 1px;
    font-size: 9px;
  }
  .lj-property-location span,
  .lj-property-location strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  /* -----------------------------------------
       FOOTER
    ----------------------------------------- */
  .lj-property-card-footer {
    min-height: 47px;
    gap: 5px;
    padding: 6px 7px;
  }
  .lj-property-card-footer::before {
    left: 7px;
    width: 24px;
  }
  /* -----------------------------------------
       AGENT
    ----------------------------------------- */
  .lj-property-agent {
    gap: 5px;
  }
  .lj-property-agent img {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    border-width: 1px;
  }
  .lj-property-agent small {
    margin-bottom: 1px;
    font-size: 5px;
    letter-spacing: .04em;
  }
  .lj-property-agent a,
  .lj-property-agent strong,
  .lj-property-agent span {
    max-width: 68px;
    font-size: 7px;
    line-height: 1.2;
  }
  /* -----------------------------------------
       VIEW BUTTON
    ----------------------------------------- */
  .lj-property-view-button {
    min-width: 27px;
    width: 27px;
    height: 27px;
    min-height: 27px;
    padding: 0;
    gap: 0;
    border-radius: var(--radius-xs);
    font-size: 0;
  }
  .lj-property-view-button i {
    font-size: 8px;
  }
  /* -----------------------------------------
       PAGINATION DOTS
    ----------------------------------------- */
  .lj-property-media-swiper .swiper-pagination {
    bottom: 7px !important;
  }
  .lj-property-media-swiper .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    margin: 0 2px !important;
  }
  .lj-property-media-swiper .swiper-pagination-bullet-active {
    width: 11px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
   STILL 2 CARDS PER ROW
========================================================= */

@media(max-width:390px) {
  .lj-re-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .lj-property-media {
    height: 132px;
    flex-basis: 132px;
  }
  .lj-property-card-body {
    padding: 10px 8px 9px;
  }
  .lj-property-price {
    font-size: 12px;
  }
  .lj-property-card-body h3 {
    min-height: 31px;
    font-size: 11px;
    line-height: 1.38;
  }
  .lj-property-location {
    margin-top: 7px;
    padding-top: 6px;
    font-size: 7.5px;
  }
  .lj-property-location i {
    font-size: 8px;
  }
  .lj-property-card-footer {
    min-height: 44px;
    padding: 5px 6px;
  }
  .lj-property-agent img {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }
  .lj-property-agent a,
  .lj-property-agent strong,
  .lj-property-agent span {
    max-width: 58px;
    font-size: 6.5px;
  }
  .lj-property-view-button {
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-property-card,
  .lj-property-media-swiper .swiper-slide[data-media-type="image"]::before,
  .lj-property-save,
  .lj-property-view-button {
    transition: none !important;
    animation: none !important;
  }
}

/* Empty, pagination, drawer */

.lj-re-empty-state {
  padding: 55px 25px;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center
}

.lj-re-empty-state>i {
  color: var(--color-primary);
  font-size: 58px
}

.lj-re-empty-state h3 {
  margin: 14px 0 7px;
  font-family: var(--font-heading);
  font-size: 30px
}

.lj-re-empty-reset {
  min-height: 44px;
  margin-top: 18px;
  padding: 0 17px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs)
}

.lj-re-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 38px
}

.lj-re-pagination button {
  min-width: 40px;
  height: 40px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-re-pagination button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-re-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  background: rgba(1, 52, 130, .58);
  border: 0;
  opacity: 0
}

@keyframes ljReHeroZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.13)
  }
}

@keyframes ljReCardZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.11)
  }
}

@keyframes ljReCursorBlink {
  0%,
  45% {
    opacity: 1
  }
  46%,
  100% {
    opacity: 0
  }
}

@media(max-width:1199.98px) {
  .lj-re-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:991.98px) {
  .lj-re-layout {
    grid-template-columns: 1fr
  }
  .lj-re-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: min(88vw, 360px);
    height: 100dvh;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    transform: translateX(-105%);
    transition: var(--transition-normal)
  }
  .lj-re-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-re-filter-close {
    display: flex
  }
  .lj-re-filter-backdrop.is-visible {
    display: block;
    opacity: 1
  }
  .lj-re-toolbar {
    grid-template-columns: auto repeat(3, minmax(0, 1fr))
  }
  .lj-re-filter-trigger {
    display: flex;
    min-width: 52px
  }
}

@media(max-width:767.98px) {
  .lj-re-hero,
  .lj-re-hero>.container {
    min-height: 430px
  }
  .lj-re-hero-content {
    padding: 32px 0 48px;
    text-align: center
  }
  .lj-re-hero-kicker {
    justify-content: center
  }
  .lj-re-typing-heading {
    min-height: 118px;
    font-size: clamp(39px, 11vw, 58px)
  }
  .lj-re-hero-content>p {
    margin-left: auto;
    margin-right: auto;
    font-size: 13px
  }
  .lj-re-search-field {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 6px
  }
  .lj-re-search-field button {
    grid-column: 1/-1;
    width: 100%;
    margin-top: 3px
  }
  .lj-re-hero-pagination {
    right: 50% !important;
    transform: translateX(50%)
  }
  .lj-re-toolbar {
    grid-template-columns: 44px repeat(3, minmax(0, 1fr));
    gap: 6px
  }
  .lj-re-filter-trigger span {
    display: none
  }
  .lj-re-location-select {
    padding: 0 8px
  }
  .lj-re-location-select>i:last-child {
    display: none
  }
  .lj-re-location-select select {
    padding: 0 4px;
    font-size: 9px
  }
  .lj-re-results-panel {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-re-active-filters-wrap {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-re-grid {
    grid-template-columns: 1fr
  }
  .lj-property-media {
    height: 260px
  }
  .lj-property-card-body h3 {
    min-height: 0;
    font-size: 26px
  }
}

@media(max-width:430px) {
  .lj-re-location-select>i:first-child {
    display: none
  }
  .lj-re-location-select select {
    font-size: 8px;
    text-align: center
  }
  .lj-property-card-footer {
    padding: 13px 12px
  }
}

/******************************************STORE PAGE************************/

/* LINJUST ELECTRONICS STORE PAGE — page-specific CSS only */

.lj-electronics-page {
  background: radial-gradient(circle at 10% 16%, rgba(7, 104, 207, .045), transparent 28rem), var(--color-off-white);
  color: var(--color-text);
  font-family: var(--font-body)
}

.lj-electronics-page *,
.lj-electronics-page *:before,
.lj-electronics-page *:after {
  box-sizing: border-box
}

.lj-electronics-page button,
.lj-electronics-page input,
.lj-electronics-page select {
  font-family: var(--font-body)
}

.lj-electronics-page button {
  cursor: pointer
}

.lj-electronics-page a {
  text-decoration: none
}

/* Hero */

.lj-es-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-dark);
  isolation: isolate
}

.lj-es-hero-swiper {
  position: absolute;
  inset: 0;
  z-index: auto
}

.lj-es-hero-swiper,
.lj-es-hero-swiper .swiper-wrapper,
.lj-es-hero-swiper .swiper-slide {
  width: 100%;
  height: 100%
}

.lj-es-hero-swiper .swiper-wrapper {
  z-index: 1
}

.lj-es-hero-slide {
  overflow: hidden;
  background: center/cover no-repeat
}

.lj-es-hero-slide:before {
  position: absolute;
  inset: -5%;
  content: "";
  background: inherit;
  background-position: center;
  background-size: cover;
  transform: scale(1.04)
}

.lj-es-hero-slide.swiper-slide-active[data-re-type="image"]:before {
  animation: ljEsHeroZoom 9s ease-in-out infinite alternate
}

.lj-es-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
  pointer-events: none
}

.lj-es-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none
}

.lj-es-hero>.container {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
}

.lj-es-hero-content {
  width: min(930px, 100%);
  padding: 46px 0 46px;
  margin: 10px auto;
  text-align: center;
}

.lj-es-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-es-typing-heading {
  min-height: 45px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(40px, 4vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: .98;
  letter-spacing: -.035em
}

.lj-es-typing-cursor {
  display: inline-block;
  width: 2px;
  height: .88em;
  margin-left: 6px;
  background: var(--color-secondary);
  vertical-align: -.06em;
  animation: ljEsCursorBlink .85s steps(1, end) infinite
}

.lj-es-hero-content>p {
  width: min(680px, 100%);
  margin: 22px 0 30px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: 1.8
}

.lj-es-search-form {
  width: min(930px, 100%)
}

.lj-es-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 68px;
  padding: 7px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-large)
}

.lj-es-search-field>i {
  margin-left: 16px;
  color: var(--color-primary);
  font-size: 22px
}

.lj-es-search-field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px
}

.lj-es-search-field button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal)
}

.lj-es-search-field button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7, 104, 207, .28)
}

.lj-es-hero-pagination {
  position: absolute !important;
  right: max(18px, calc((100vw - 1320px)/2)) !important;
  bottom: 29px !important;
  left: auto !important;
  z-index: 7 !important;
  display: flex;
  width: auto !important;
  gap: 9px;
  pointer-events: auto
}

.lj-es-hero-pagination .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  margin: 0 !important;
  opacity: 1;
  background: rgba(255, 255, 255, .38);
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius-round);
  transition: var(--transition-normal)
}

.lj-es-hero-pagination .swiper-pagination-bullet-active {
  width: 25px;
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 5px rgba(31, 158, 252, .16)
}

/* Layout/sidebar */

.lj-es-listing-section {
  padding: 40px 0 60px
}

.lj-es-layout {
  display: grid;
  grid-template-columns: minmax(250px, 295px) minmax(0, 1fr);
  gap: 30px;
  align-items: start
}

.lj-es-sidebar {
  position: sticky;
  top: 110px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-es-sidebar-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 24px;
  color: var(--color-white);
  background: var(--topbar-background)
}

.lj-es-sidebar-head span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-es-sidebar-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px
}

.lj-es-filter-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-round)
}

.lj-es-filter-group {
  border-bottom: 1px solid var(--color-border)
}

.lj-es-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 19px 22px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  text-align: left
}

.lj-es-filter-heading>span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--font-size-h);
  font-weight: var(--weight-bold)
}

.lj-es-filter-heading>span i,
.lj-es-filter-heading>i {
  color: var(--color-primary)
}

.lj-es-filter-body {
  display: grid;
  gap: 13px;
  padding: 0 22px 21px
}

.lj-es-subcategory-group[hidden] {
  display: none !important
}

/* Image checkboxes */

.lj-es-image-option-list {
  gap: 10px
}

.lj-es-image-checkbox {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 11px;
  cursor: pointer
}

.lj-es-image-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.lj-es-image-check {
  position: relative;
  width: 30px;
  height: 30px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-xs);
  transition: var(--transition-normal)
}

.lj-es-image-check:after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "✓";
  opacity: 0;
  color: var(--color-white);
  background: rgba(7, 104, 207, .72);
  font-size: 15px;
  font-weight: var(--weight-bold);
  transition: var(--transition-fast)
}

.lj-es-image-checkbox input:checked+.lj-es-image-check {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .08)
}

.lj-es-image-checkbox input:checked+.lj-es-image-check:after {
  opacity: 1
}

.lj-es-brand-check {
  background-size: contain;
  background-color: var(--color-white)
}

.lj-es-image-checkbox>span:last-child {
  font-size: var(--main-font-size-12);
  font-weight: var(--weight-medium);
  color: var(--color-text)
}

/* Standard checkboxes */

.lj-es-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer
}

.lj-es-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0
}

.lj-es-checkbox-mark {
  position: relative;
  width: 19px;
  height: 19px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-es-checkbox-mark:after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  content: "";
  opacity: 0;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4)
}

.lj-es-checkbox input:checked+.lj-es-checkbox-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .08)
}

.lj-es-checkbox input:checked+.lj-es-checkbox-mark:after {
  opacity: 1;
  transform: rotate(45deg)
}

.lj-es-checkbox>span:last-child {
  font-size: var(--main-font-size-12)
}

/* Price range */

.lj-es-price-values {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px
}

.lj-es-price-values span {
  display: grid;
  gap: 4px;
  color: var(--color-muted);
  font-size: 9px;
  text-transform: uppercase
}

.lj-es-price-values span:last-child {
  text-align: right
}

.lj-es-price-values strong {
  color: var(--color-title);
  font-size: 13px
}

.lj-es-range-slider {
  position: relative;
  height: 28px
}

.lj-es-range-track,
.lj-es-range-progress {
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: var(--radius-pill)
}

.lj-es-range-track {
  background: var(--color-border)
}

.lj-es-range-progress {
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
  left: 0;
  right: 0
}

.lj-es-range-slider input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none
}

.lj-es-range-slider input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border: 5px solid var(--color-primary);
  border-radius: var(--radius-round);
  box-shadow: 0 4px 12px rgba(7, 104, 207, .2);
  pointer-events: auto;
  appearance: none
}

.lj-es-range-slider input::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--color-white);
  border: 5px solid var(--color-primary);
  border-radius: var(--radius-round);
  pointer-events: auto
}

.lj-es-clear-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 44px);
  min-height: 44px;
  margin: 22px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold)
}

/* Toolbar/results */

.lj-es-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px
}

.lj-es-filter-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  color: var(--color-white);
  background: var(--color-dark);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: var(--weight-bold)
}

.lj-es-location-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
  padding: 0 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-small)
}

.lj-es-location-select>i:first-child {
  color: var(--color-primary)
}

.lj-es-location-select>i:last-child {
  color: var(--color-muted);
  font-size: 13px
}

.lj-es-location-select select {
  width: 100%;
  height: 52px;
  padding: 0 10px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  appearance: none;
  font-size: 12px
}

.lj-es-results-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px
}

.lj-es-results-panel span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-es-results-panel h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 38px
}

.lj-es-results-panel p {
  margin: 0;
  font-size: 11px
}

.lj-es-results-panel strong {
  color: var(--color-primary)
}

.lj-es-active-filters-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-es-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.lj-es-active-filter,
.lj-es-filter-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold)
}

/* Product cards */













/* =========================================================
   PREMIUM MARKETPLACE PRODUCT CARDS
========================================================= */

.lj-es-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* =========================================================
   CARD
========================================================= */

.lj-es-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-white);
  /* Trending-listing inspired red border */
  border: 1px solid rgba(7, 104, 207, .30);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 5px rgba(1, 52, 130, .025), 0 10px 28px rgba(1, 52, 130, .055);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.lj-es-product-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  opacity: 0;
  background: linear-gradient( 90deg, var(--color-primary-dark), var(--color-primary), #0687F1);
  transform: scaleX(.4);
  transform-origin: center;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  z-index: 4;
}

.lj-es-product-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 8px rgba(1, 52, 130, .035), 0 18px 45px rgba(1, 52, 130, .10), 0 0 0 1px rgba(7, 104, 207, .035);
  transform: translateY(-6px);
}

.lj-es-product-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.lj-es-product-card.is-filter-hidden {
  display: none;
}

/* =========================================================
   PRODUCT MEDIA
========================================================= */

.lj-es-product-media {
  position: relative;
  flex: 0 0 auto;
  height: 238px;
  overflow: hidden;
  background: linear-gradient( 135deg, var(--color-dark), var(--color-dark-soft));
}

.lj-es-product-swiper,
.lj-es-product-swiper .swiper-wrapper,
.lj-es-product-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.lj-es-product-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.lj-es-product-swiper .swiper-slide[data-media-type="image"]::before {
  position: absolute;
  inset: -4%;
  content: "";
  background: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.04);
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}

.lj-es-product-card:hover .lj-es-product-swiper .swiper-slide-active[data-media-type="image"]::before {
  transform: scale(1.09);
}

/* subtle premium media shade */

.lj-es-product-media::after {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 2;
  pointer-events: none;
  background: linear-gradient( 180deg, rgba(1, 52, 130, .08) 0%, transparent 32%, transparent 68%, rgba(1, 52, 130, .10) 100%);
}

/* =========================================================
   VIDEO
========================================================= */

.lj-es-product-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-dark);
}

/* =========================================================
   SWIPER PAGINATION
========================================================= */

.lj-es-product-swiper .swiper-pagination {
  bottom: 11px !important;
  z-index: 5;
}

.lj-es-product-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 3px !important;
  opacity: .6;
  background: var(--color-white);
  border-radius: var(--radius-round);
  transition: var(--transition-fast);
}

.lj-es-product-swiper .swiper-pagination-bullet-active {
  width: 17px;
  opacity: 1;
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
}

/* =========================================================
   SAVE BUTTON
========================================================= */

.lj-es-product-save {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .80);
  border-radius: var(--radius-round);
  box-shadow: 0 5px 15px rgba(1, 52, 130, .12), 0 1px 3px rgba(1, 52, 130, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.lj-es-product-save i {
  font-size: 14px;
}

.lj-es-product-save:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(7, 104, 207, .24);
  transform: translateY(-2px);
}

.lj-es-product-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   BADGES
========================================================= */

.lj-es-product-badges {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 6;
  display: grid;
  justify-items: end;
  gap: 7px;
}

.lj-es-verified,
.lj-es-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: .025em;
  text-transform: uppercase;
  box-shadow: 0 5px 15px rgba(1, 52, 130, .12);
}

.lj-es-verified {
  color: #013482;
  background: rgba(74, 179, 252, .97);
  border: 1px solid rgba(255, 255, 255, .50);
}

.lj-es-verified i {
  font-size: 10px;
}

.lj-es-category-badge {
  color: var(--color-white);
  background: rgba(1, 52, 130, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}

/* =========================================================
   PRODUCT BODY
========================================================= */

.lj-es-product-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 17px 17px 18px;
  background: var(--color-white);
}

/* =========================================================
   PRICE
========================================================= */

.lj-es-product-price {
  display: block;
  margin: 0 0 7px;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   PRODUCT TITLE
========================================================= */

.lj-es-product-body h3 {
  display: -webkit-box;
  min-height: 35px;
  margin: 0;
  overflow: hidden;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.38;
  letter-spacing: -.015em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lj-es-product-body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.lj-es-product-body h3 a:hover {
  color: var(--color-primary);
}

/* =========================================================
   LOCATION
========================================================= */

.lj-es-product-location {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  color: #082E5C;
  border-top: 1px solid rgba(111, 141, 168, .72);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  line-height: 1.45;
}

.lj-es-product-location i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 12px;
}

.lj-es-product-location span {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* =========================================================
   FOOTER
   Always remains at the bottom of equal-height cards
========================================================= */

.lj-es-product-footer {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  min-height: 58px;
  padding: 9px 13px;
  background: linear-gradient( 180deg, #F6FBFD 0%, #F6FBFD 100%);
  border-top: 1px solid var(--color-border);
}

/* subtle premium highlight */

.lj-es-product-footer::before {
  position: absolute;
  top: -1px;
  left: 13px;
  width: 34px;
  height: 1px;
  content: "";
  background: var(--color-primary);
}

/* =========================================================
   SELLER
========================================================= */

.lj-es-seller {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1 1 auto;
}

.lj-es-seller img,
.lj-es-seller-fallback {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius-round);
}

.lj-es-seller img {
  object-fit: cover;
  background: var(--color-white);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border), 0 4px 10px rgba(1, 52, 130, .08);
}

.lj-es-seller-fallback {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .12);
}

.lj-es-seller-fallback i {
  font-size: 12px;
}

.lj-es-seller>div {
  min-width: 0;
}

.lj-es-seller small {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-es-seller span:not(.lj-es-seller-fallback) {
  display: block;
  max-width: 145px;
  overflow: hidden;
  color: var(--color-title);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   VIEW BUTTON
========================================================= */

.lj-es-view-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  box-shadow: 0 5px 12px rgba(7, 104, 207, .14);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.lj-es-view-button i {
  font-size: 9px;
  transition: transform var(--transition-fast);
}

.lj-es-view-button:hover {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-primary));
  box-shadow: 0 8px 18px rgba(7, 104, 207, .22);
  transform: translateY(-1px);
}

.lj-es-view-button:hover i {
  transform: translateX(2px);
}

/* =========================================================
   MEDIA PLACEHOLDER
========================================================= */

.lj-es-media-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, .48);
  background: radial-gradient( circle at center, rgba(255, 255, 255, .07), transparent 55%), var(--color-dark);
}

.lj-es-media-placeholder i {
  font-size: 38px;
}

/* =========================================================
   RESPONSIVE — MEDIUM DESKTOP
========================================================= */

@media(max-width:1199.98px) {
  .lj-es-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .lj-es-product-media {
    height: 245px;
  }
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-es-product-card:hover {
    transform: translateY(-4px);
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-es-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lj-es-product-media {
    height: 260px;
  }
  .lj-es-product-body {
    padding: 16px 15px 17px;
  }
  .lj-es-product-price {
    font-size: 17px;
  }
  .lj-es-product-body h3 {
    min-height: 0;
    font-size: 15px;
    line-height: 1.4;
  }
  .lj-es-product-location {
    margin-top: 11px;
    padding-top: 10px;
    font-size: 11px;
  }
  .lj-es-product-footer {
    min-height: 58px;
    padding: 9px 12px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:430px) {
  .lj-es-product-media {
    height: 245px;
  }
  .lj-es-product-save {
    top: 11px;
    left: 11px;
    width: 36px;
    height: 36px;
  }
  .lj-es-product-badges {
    top: 11px;
    right: 11px;
  }
  .lj-es-product-body {
    padding: 15px 14px 16px;
  }
  .lj-es-product-footer {
    padding: 9px 11px;
  }
  .lj-es-seller span:not(.lj-es-seller-fallback) {
    max-width: 125px;
  }
  .lj-es-view-button {
    min-height: 31px;
    padding: 0 10px;
    font-size: 8px;
  }
}

/* Empty/pagination/drawer */

.lj-es-empty-state {
  padding: 55px 25px;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center
}

.lj-es-empty-state>i {
  color: var(--color-primary);
  font-size: 58px
}

.lj-es-empty-state h3 {
  margin: 14px 0 7px;
  font-family: var(--font-heading);
  font-size: 30px
}

.lj-es-empty-reset {
  min-height: 44px;
  margin-top: 18px;
  padding: 0 17px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs)
}

.lj-es-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 38px
}

.lj-es-pagination button {
  min-width: 40px;
  height: 40px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-es-pagination button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-es-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  background: rgba(1, 52, 130, .58);
  border: 0;
  opacity: 0
}

@keyframes ljEsHeroZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.13)
  }
}

@keyframes ljEsCardZoom {
  from {
    transform: scale(1.04)
  }
  to {
    transform: scale(1.11)
  }
}

@keyframes ljEsCursorBlink {
  0%,
  45% {
    opacity: 1
  }
  46%,
  100% {
    opacity: 0
  }
}

@media(max-width:1199.98px) {
  .lj-es-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:991.98px) {
  .lj-es-layout {
    grid-template-columns: 1fr
  }
  .lj-es-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: min(88vw, 360px);
    height: 100dvh;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    transform: translateX(-105%);
    transition: var(--transition-normal)
  }
  .lj-es-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-es-filter-close {
    display: flex
  }
  .lj-es-filter-backdrop.is-visible {
    display: block;
    opacity: 1
  }
  .lj-es-toolbar {
    grid-template-columns: auto repeat(3, minmax(0, 1fr))
  }
  .lj-es-filter-trigger {
    display: flex;
    min-width: 52px
  }
}

@media(max-width:767.98px) {
  .lj-es-hero,
  .lj-es-hero>.container {
    min-height: 530px
  }
  .lj-es-hero-content {
    padding: 82px 0 98px;
    text-align: center
  }
  .lj-es-hero-kicker {
    justify-content: center
  }
  .lj-es-typing-heading {
    min-height: 118px;
    font-size: clamp(39px, 11vw, 58px)
  }
  .lj-es-hero-content>p {
    margin-left: auto;
    margin-right: auto;
    font-size: 13px
  }
  .lj-es-search-field {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 6px
  }
  .lj-es-search-field button {
    grid-column: 1/-1;
    width: 100%;
    margin-top: 3px
  }
  .lj-es-hero-pagination {
    right: 50% !important;
    transform: translateX(50%)
  }
  .lj-es-toolbar {
    grid-template-columns: 44px repeat(3, minmax(0, 1fr));
    gap: 6px
  }
  .lj-es-filter-trigger span {
    display: none
  }
  .lj-es-location-select {
    padding: 0 8px
  }
  .lj-es-location-select>i:last-child {
    display: none
  }
  .lj-es-location-select select {
    padding: 0 4px;
    font-size: 9px
  }
  .lj-es-results-panel {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-es-active-filters-wrap {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-es-grid {
    grid-template-columns: 1fr
  }
  .lj-es-product-media {
    height: 260px
  }
  .lj-es-product-body h3 {
    min-height: 0;
    font-size: 26px
  }
}

@media(max-width:430px) {
  .lj-es-location-select>i:first-child {
    display: none
  }
  .lj-es-location-select select {
    font-size: 8px;
    text-align: center
  }
  .lj-es-product-footer {
    padding: 13px 12px
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-electronics-page *,
  .lj-electronics-page *:before,
  .lj-electronics-page *:after {
    animation: none !important;
    transition: none !important
  }
}

/*****************************PRODUCT DETAILS********************/















/* LINJUST PRODUCT DETAILS — additional page CSS only */

/* =========================================================
   LINJUST PRODUCT DETAILS PAGE
   Additional page styles only.
   Existing global CSS variables are retained.
========================================================= */

.lj-pd-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-off-white);
  font-family: var(--font-body);
}

.lj-pd-page *,
.lj-pd-page *::before,
.lj-pd-page *::after {
  box-sizing: border-box;
}

.lj-pd-page button,
.lj-pd-page input,
.lj-pd-page select,
.lj-pd-page textarea {
  font-family: var(--font-body);
}

.lj-pd-page button {
  cursor: pointer;
}

.lj-pd-page a {
  text-decoration: none;
}

/* =========================================================
   PAGE LAYOUT
========================================================= */

.lj-pd-section {
  position: relative;
  padding: 48px 0 90px;
}

.lj-pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 26px;
  align-items: start;
}

.lj-pd-main,
.lj-pd-sidebar {
  display: grid;
  min-width: 0;
  gap: 22px;
}

.lj-pd-card {
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
}

/* =========================================================
   PRODUCT GALLERY CARD
========================================================= */

.lj-pd-product-card {
  min-width: 0;
  padding: 22px;
}

.lj-pd-frame {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-pd-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lj-pd-stage img,
.lj-pd-stage video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.lj-pd-stage img {
  transform: scale(1);
  transform-origin: center;
  transition: transform var(--transition-normal);
}

.lj-pd-stage.is-zoomed {
  cursor: zoom-out;
}

.lj-pd-stage.is-zoomed img {
  transform: scale(1.65);
}

.lj-pd-media-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--color-muted);
  text-align: center;
}

.lj-pd-media-empty i {
  font-size: 52px;
}

.lj-pd-media-empty p {
  margin: 0;
  font-size: 12px;
}

/* =========================================================
   PRODUCT VIDEO
========================================================= */

.lj-pd-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-dark);
}

.lj-pd-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-dark);
  cursor: pointer;
}

.lj-pd-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-round);
  box-shadow: 0 18px 40px rgba(1, 52, 130, .30);
  font-size: 25px;
  transform: translate(-50%, -50%);
  transition: var(--transition-normal);
}

.lj-pd-video-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* =========================================================
   MEDIA BADGES
========================================================= */

.lj-pd-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: grid;
  gap: 7px;
  pointer-events: none;
}

.lj-pd-badges span,
.lj-pd-badges small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-pd-badges span {
  color: var(--color-dark);
  background: var(--color-secondary);
}

.lj-pd-badges small {
  color: var(--color-white);
  background: rgba(1, 52, 130, .75);
  backdrop-filter: blur(8px);
}

/* =========================================================
   MEDIA FRAME TOOLS
========================================================= */

.lj-pd-frame-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: grid;
  gap: 8px;
}

.lj-pd-frame-tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-primary);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal);
}

.lj-pd-frame-tools button:hover,
.lj-pd-frame-tools button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  transform: translateY(-2px);
}

/* =========================================================
   THUMBNAIL SWIPER
========================================================= */

.lj-pd-thumbs-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 10px;
  margin-top: 14px;
}

.lj-pd-thumbs {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.lj-pd-thumbs .swiper-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: auto;
  box-sizing: content-box;
}

.lj-pd-thumbs .swiper-slide {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 100px;
}

.lj-pd-thumb {
  position: relative;
  height: 100px;
  overflow: hidden;
  background-color: var(--color-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 2px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition-normal);
}

.lj-pd-thumb::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient( 180deg, transparent, rgba(1, 52, 130, .12));
  pointer-events: none;
}

.lj-pd-thumb:hover {
  border-color: rgba(7, 104, 207, .42);
  transform: translateY(-2px);
}

.lj-pd-thumb.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(7, 104, 207, .08);
}

.lj-pd-thumb.is-video-thumb::after,
.lj-pd-thumb[data-type="video"]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  content: "\f144";
  color: var(--color-white);
  background: rgba(1, 52, 130, .75);
  border-radius: var(--radius-round);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.lj-pd-thumb-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 54px;
  padding: 0;
  color: var(--color-white);
  background: var(--color-dark);
  border: 0;
  border-radius: var(--radius-xs);
  transition: var(--transition-normal);
}

.lj-pd-thumb-nav:hover {
  background: var(--color-primary);
}

.lj-pd-thumb-nav.swiper-button-disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* =========================================================
   PRODUCT HEADING
========================================================= */

.lj-pd-heading {
  padding: 25px 2px 4px;
}

.lj-pd-heading>span {
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lj-pd-heading h1 {
  margin: 8px 0 18px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
}

.lj-pd-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lj-pd-price-row>strong {
  color: var(--color-primary);
  font-size: 26px;
  font-weight: var(--weight-bold);
}

.lj-pd-price-row>div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lj-pd-price-row span {
  color: var(--color-text);
  font-size: 11px;
}

.lj-pd-save {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  transition: var(--transition-normal);
}

.lj-pd-save:hover,
.lj-pd-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   PRODUCT TABS
========================================================= */

.lj-pd-tabs {
  margin-top: 20px;
}

.lj-pd-tab-list {
  display: flex;
  width: 100%;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
}

.lj-pd-tab-list::-webkit-scrollbar {
  display: none;
}

.lj-pd-tab-list button {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 15px 16px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.lj-pd-tab-list button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: transparent;
}

.lj-pd-tab-list button.is-active {
  color: var(--color-primary);
}

.lj-pd-tab-list button.is-active::after {
  background: var(--color-primary);
}

.lj-pd-tab-panel {
  padding: 24px 2px 4px;
  font-size: 14px;
  line-height: 1.8;
}

.lj-pd-tab-panel[hidden] {
  display: none !important;
}

.lj-pd-tab-panel p {
  margin: 0 0 14px;
}

/* =========================================================
   FEATURES TAB
========================================================= */

.lj-pd-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lj-pd-features li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px;
  /* background:var(--color-surface);
    border:1px solid var(--color-border); */
  font-size: 12px;
}

.lj-pd-features i {
  color: var(--color-primary);
}

/* =========================================================
   SOCIAL VIDEO TAB
========================================================= */

.lj-pd-social-video {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background: var(--color-dark);
}

.lj-pd-social-video iframe,
.lj-pd-social-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}

.lj-pd-video-fallback {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 30px;
  color: var(--color-white);
  text-align: center;
}

.lj-pd-video-fallback a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 10px;
  padding: 0 15px;
  color: var(--color-white);
  background: var(--color-primary);
}

/* =========================================================
   STORE AND DELIVERY TABS
========================================================= */

.lj-pd-store {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

.lj-pd-store p {
  padding: 14px;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.lj-pd-store span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary);
  font-size: 10px;
  text-transform: uppercase;
}

.lj-pd-map {
  height: 320px;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.lj-pd-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lj-pd-delivery {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.lj-pd-delivery i {
  margin-right: 7px;
  color: var(--color-success);
}

/* =========================================================
   ACTION CARD
========================================================= */

.lj-pd-action-card,
.lj-pd-share-card,
.lj-pd-report-card {
  padding: 20px;
}

.lj-pd-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.lj-pd-call-wrap {
  position: relative;
  min-width: 0;
}

.lj-pd-big-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  gap: 9px;
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-xs);
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-pd-big-btn:hover {
  transform: translateY(-2px);
}

.lj-pd-big-btn.call {
  background: linear-gradient( 135deg, var(--color-dark), var(--color-dark-soft));
}

.lj-pd-big-btn.offer {
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
}

/* =========================================================
   PHONE DROPDOWNS
========================================================= */

.lj-pd-phone-dropdown,
.lj-pd-seller-phones {
  position: relative;
  z-index: 20;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-medium);
}

.lj-pd-phone-dropdown[hidden],
.lj-pd-seller-phones[hidden] {
  display: none;
}

.lj-pd-phone-dropdown>div,
.lj-pd-seller-phones>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}

.lj-pd-phone-dropdown>div:last-of-type,
.lj-pd-seller-phones>div:last-of-type {
  border-bottom: 0;
}

.lj-pd-phone-dropdown button,
.lj-pd-seller-phones button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 0;
  border-radius: var(--radius-xs);
}

.lj-pd-phone-dropdown p,
.lj-pd-seller-phones p {
  margin: 9px 0 0;
  font-size: 10px;
  line-height: 1.5;
}

/* =========================================================
   SHARE CARD
========================================================= */

.lj-pd-share-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lj-pd-share-card span,
.lj-pd-report-card span,
.lj-pd-disclaimer span {
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-pd-share-card h2,
.lj-pd-report-card h2 {
  margin: 5px 0 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 25px;
}

.lj-pd-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lj-pd-share-list button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-none);
  transition: var(--transition-normal);
}

.lj-pd-share-list button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-small);
}

.lj-pd-share-list .facebook {
  background: #0687F1;
}

.lj-pd-share-list .whatsapp {
  background: #1F9EFC;
}

.lj-pd-share-list .twitter {
  background: #013482;
}

.lj-pd-share-list .pinterest {
  background: #0768CF;
}

.lj-pd-share-list .linkedin {
  background: #0768CF;
}

.lj-pd-share-list .copy {
  background: #082E5C;
}

/* =========================================================
   REPORT CARD
========================================================= */

.lj-pd-report-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lj-pd-report-card>div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lj-pd-report-card>div>i {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-round);
  font-size: 22px;
}

.lj-pd-report-card>button {
  min-height: 44px;
  padding: 0 15px;
  color: var(--color-white);
  background: var(--color-danger);
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   SELLER CARD
========================================================= */

.lj-pd-seller-card {
  padding: 22px;
}

.lj-pd-seller-top {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.lj-pd-avatar {
  position: relative;
  flex: 0 0 auto;
}

.lj-pd-avatar img {
  display: block;
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.lj-pd-avatar span {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 15px;
  height: 15px;
  background: var(--color-muted);
  border: 3px solid var(--color-white);
  border-radius: var(--radius-round);
}

.lj-pd-avatar span.is-online {
  background: #1F9EFC;
  animation: ljPdPulse 1.5s infinite;
}

.lj-pd-seller-top h2 {
  margin: 3px 0 7px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 25px;
}

.lj-pd-rating {
  margin: 0;
  color: var(--color-secondary-dark);
}

.lj-pd-rating small {
  color: var(--color-muted);
}

.lj-pd-seller-badges {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.lj-pd-seller-badges span {
  font-size: 11px;
}

.lj-pd-seller-actions {
  display: grid;
  min-width: 0;
  gap: 10px;
  margin-top: 20px;
}

.lj-pd-seller-actions>button,
.lj-pd-seller-actions>a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  gap: 8px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-bold);
}

.lj-pd-seller-actions>button {
  border: 0;
}

.lj-pd-seller-actions>button:first-child {
  color: var(--color-white);
  background: var(--color-dark);
}

.lj-pd-seller-actions>button:nth-of-type(2) {
  color: var(--color-white);
  background: var(--color-primary);
}

.lj-pd-seller-actions>a {
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

/* =========================================================
   FEEDBACK CARD
========================================================= */

.lj-pd-feedback-card {
  min-width: 0;
  overflow: hidden;
}

.lj-pd-feedback-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 20px;
  color: var(--color-title);
  background: var(--color-white);
  border: 0;
  text-align: left;
}

.lj-pd-feedback-head span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-bold);
}

.lj-pd-feedback-head strong {
  color: var(--color-primary);
}

.lj-pd-feedback-body {
  display: block;
  padding: 18px;
  border-top: 1px solid var(--color-border);
}

.lj-pd-feedback-body[hidden] {
  display: none;
}

.lj-pd-feedback-body textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 12px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  outline: 0;
  resize: vertical;
}

.lj-pd-feedback-body textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-pd-feedback-body form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  gap: 7px;
  margin-top: 10px;
  padding: 0 14px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs);
}

.lj-pd-comments {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.lj-pd-comments article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
}

.lj-pd-comments img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-round);
}

.lj-pd-comments article>div>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lj-pd-comments span {
  color: var(--color-muted);
  font-size: 9px;
}

.lj-pd-comment {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.6;
}

.lj-pd-readmore {
  display: inline;
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  border: 0;
  font-size: 10px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   WHATSAPP CARD
========================================================= */

.lj-pd-whatsapp-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 15px;
  color: var(--color-white);
  background: linear-gradient( 135deg, #0687F1, #4AB3FC);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  cursor: pointer;
  transition: var(--transition-normal);
}

.lj-pd-whatsapp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.lj-pd-whatsapp-card>span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--radius-round);
  font-size: 27px;
}

.lj-pd-whatsapp-card small {
  font-size: 8px;
  text-transform: uppercase;
}

.lj-pd-whatsapp-card h3 {
  margin: 3px 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 23px;
}

.lj-pd-whatsapp-card p {
  margin: 0;
  font-size: 10px;
}

/* =========================================================
   DISCLAIMER
========================================================= */

.lj-pd-disclaimer {
  display: flex;
  gap: 13px;
  padding: 20px;
}

.lj-pd-disclaimer>i {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 24px;
}

.lj-pd-disclaimer h3 {
  margin: 6px 0;
  color: var(--color-title);
  font-size: 15px;
}

.lj-pd-disclaimer p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

/* =========================================================
   SELLER POSITION SLOTS
========================================================= */

.lj-pd-mobile-seller-slot {
  display: none;
}

.lj-pd-desktop-seller-slot {
  min-width: 0;
}

/* =========================================================
   LIGHTBOX
========================================================= */

.lj-pd-lightbox,
.offer_m_modal,
.lj-pd-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  background: rgba(1, 52, 130, .88);
  backdrop-filter: blur(8px);
}

.lj-pd-lightbox.is-open,
.offer_m_modal.is-open,
.lj-pd-modal.is-open {
  display: flex;
}

.lj-pd-lightbox {
  align-items: center;
  justify-content: center;
}

.lj-pd-lightbox-stage {
  display: grid;
  place-items: center;
  width: min(1100px, 88vw);
  height: min(760px, 82vh);
}

.lj-pd-lightbox-stage img,
.lj-pd-lightbox-stage video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lj-pd-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-dark);
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-round);
}

.lj-pd-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 70px;
  padding: 0;
  color: var(--color-white);
  background: rgba(255, 255, 255, .15);
  border: 0;
  transform: translateY(-50%);
}

.lj-pd-lightbox-nav.prev {
  left: 18px;
}

.lj-pd-lightbox-nav.next {
  right: 18px;
}

.lj-pd-lightbox-count {
  position: absolute;
  bottom: 20px;
  color: var(--color-white);
}

/* =========================================================
   MODALS
========================================================= */

.offer_m_modal,
.lj-pd-modal {
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.offer_m_panel,
.lj-pd-modal-panel {
  position: relative;
  width: min(500px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-large);
}

.offer_m_close,
.lj-pd-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 0;
  border-radius: var(--radius-round);
}

.offer_m_panel>span,
.lj-pd-modal-panel>span {
  color: var(--color-primary);
  font-size: 9px;
  text-transform: uppercase;
}

.offer_m_panel h2,
.lj-pd-modal-panel h2 {
  margin: 6px 0 20px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 30px;
}

.offer_m_panel form,
.lj-pd-modal-panel form {
  display: grid;
  gap: 14px;
}

.offer_m_panel label,
.lj-pd-modal-panel label {
  display: grid;
  gap: 7px;
  font-size: 11px;
  font-weight: var(--weight-bold);
}

.offer_m_panel label>div,
.lj-pd-modal-panel label>div {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
}

.lj-pd-modal-panel .textarea {
  align-items: flex-start;
  padding-top: 12px;
}

.offer_m_panel label i,
.lj-pd-modal-panel label i {
  margin-right: 9px;
  color: var(--color-primary);
}

.offer_m_panel input,
.lj-pd-modal-panel input,
.lj-pd-modal-panel select,
.lj-pd-modal-panel textarea {
  width: 100%;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
}

.lj-pd-modal-panel textarea {
  resize: vertical;
}

.offer_m_panel form>button,
.lj-pd-modal-panel form>button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: 8px;
  color: var(--color-white);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-xs);
  font-weight: var(--weight-bold);
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes ljPdPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 158, 252, .50);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(31, 158, 252, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(31, 158, 252, 0);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-pd-layout {
    grid-template-columns: 1fr;
  }
  .lj-pd-mobile-seller-slot {
    display: block;
    margin-bottom: 22px;
  }
  .lj-pd-desktop-seller-slot {
    display: none;
  }
  .lj-pd-mobile-seller-slot .lj-pd-seller-card {
    width: 100%;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-pd-section {
    padding: 24px 0 65px;
  }
  .lj-pd-product-card {
    padding: 12px;
  }
  .lj-pd-frame {
    height: 360px;
  }
  .lj-pd-thumbs-row {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 7px;
  }
  .lj-pd-thumb-nav {
    width: 34px;
    height: 48px;
  }
  .lj-pd-thumb,
  .lj-pd-thumbs .swiper-slide {
    height: 68px;
  }
  .lj-pd-tab-list button {
    padding: 12px 10px;
    font-size: 9px;
  }
  .lj-pd-features {
    grid-template-columns: 1fr;
  }
  .lj-pd-store {
    grid-template-columns: 1fr;
  }
  .lj-pd-action-grid {
    grid-template-columns: 1fr;
  }
  .lj-pd-share-card,
  .lj-pd-report-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .lj-pd-price-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .lj-pd-lightbox-stage {
    width: 100vw;
    height: 78vh;
    padding: 15px;
  }
  .lj-pd-lightbox-nav {
    width: 38px;
    height: 58px;
  }
  .lj-pd-lightbox-nav.prev {
    left: 5px;
  }
  .lj-pd-lightbox-nav.next {
    right: 5px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:430px) {
  .lj-pd-frame {
    height: 300px;
  }
  .lj-pd-heading h1 {
    font-size: 29px;
  }
  .lj-pd-tab-list button span {
    font-size: 8px;
  }
  .lj-pd-whatsapp-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .lj-pd-whatsapp-card>i:last-child {
    display: none;
  }
  .lj-pd-seller-top {
    align-items: center;
  }
  .lj-pd-avatar img {
    width: 70px;
    height: 70px;
  }
  .lj-pd-report-card>button {
    width: 100%;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-pd-page *,
  .lj-pd-page *::before,
  .lj-pd-page *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   PRODUCT DETAILS — PREMIUM 2026 REDESIGN
   Loaded after the original page rules so this block is intentionally
   authoritative. It keeps the existing variables, markup behaviour and JS.
============================================================================ */

/* --------------------------------------------------------------------------
   PAGE / GLOBAL SURFACES
---------------------------------------------------------------------------- */
.lj-pd-page{
  background:
    radial-gradient(circle at 8% 7%,rgba(7, 104, 207, .035),transparent 28rem),
    radial-gradient(circle at 92% 28%,rgba(31, 158, 252, .055),transparent 24rem),
    var(--color-off-white);
  font-family:var(--font-body);
}

.lj-pd-section{padding:42px 0 88px}
.lj-pd-layout{grid-template-columns:minmax(0,1.95fr) minmax(310px,.88fr);gap:24px}
.lj-pd-main,.lj-pd-sidebar{gap:18px}

.lj-pd-card{
  position:relative;
  overflow:hidden;
  background:rgba(255, 255, 255, .98);
  border:1px solid rgba(7, 104, 207, .14);
  border-radius:var(--radius-sm);
  box-shadow:0 2px 6px rgba(1, 52, 130, .025),0 13px 34px rgba(1, 52, 130, .055);
  transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-fast);
}

.lj-pd-card:hover{border-color:rgba(7, 104, 207, .24);box-shadow:0 4px 10px rgba(1, 52, 130, .03),0 20px 46px rgba(1, 52, 130, .085)}

.lj-pd-main>.lj-pd-card,.lj-pd-sidebar>article,.lj-pd-desktop-seller-slot>.lj-pd-card,.lj-pd-mobile-seller-slot>.lj-pd-card{
  animation:ljPdPremiumReveal .58s cubic-bezier(.22,1,.36,1) both;
}

/* --------------------------------------------------------------------------
   PRODUCT / GALLERY CARD
---------------------------------------------------------------------------- */
.lj-pd-product-card{padding:16px 16px 20px}
.lj-pd-frame{
  height:520px;
  background:linear-gradient(145deg,#F6FBFD,#D5EAF8);
  border:1px solid rgba(1, 52, 130, .08);
  border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.lj-pd-stage img,.lj-pd-stage video{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.lj-pd-frame:hover .lj-pd-stage:not(.is-zoomed) img{transform:scale(1.012)}

.lj-pd-badges{top:12px;left:12px;gap:6px}
.lj-pd-badges span,.lj-pd-badges small{
  min-height:27px;padding:0 9px;gap:5px;font-size:8px;letter-spacing:.035em;
  box-shadow:0 5px 15px rgba(1, 52, 130, .10);backdrop-filter:blur(9px)
}
.lj-pd-badges span{color:#013482;background:rgba(74, 179, 252, .96)}
.lj-pd-badges small{background:rgba(1, 52, 130, .76)}

.lj-pd-frame-tools{top:12px;right:12px;gap:7px}
.lj-pd-frame-tools button{
  width:38px;height:38px;color:var(--color-primary);background:rgba(255, 255, 255, .96);
  border:1px solid rgba(255, 255, 255, .8);box-shadow:0 7px 20px rgba(1, 52, 130, .12);backdrop-filter:blur(8px)
}
.lj-pd-frame-tools button:hover,.lj-pd-frame-tools button.is-active{box-shadow:0 9px 24px rgba(7, 104, 207, .18)}

/* Thumbnails */
.lj-pd-thumbs-row{grid-template-columns:38px minmax(0,1fr) 38px;gap:8px;margin-top:10px}
.lj-pd-thumbs .swiper-slide,.lj-pd-thumb{height:82px}
.lj-pd-thumb{border:1px solid rgba(1, 52, 130, .08);border-radius:var(--radius-xs);box-shadow:0 4px 10px rgba(1, 52, 130, .04)}
.lj-pd-thumb.is-active{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(7, 104, 207, .08),0 6px 14px rgba(1, 52, 130, .06)}
.lj-pd-thumb-nav{width:38px;height:48px;background:linear-gradient(145deg,#013482,#013482);box-shadow:0 5px 12px rgba(1, 52, 130, .1)}

/* --------------------------------------------------------------------------
   PRODUCT HEADING / PRICE
---------------------------------------------------------------------------- */
.lj-pd-heading{padding:22px 3px 4px}
.lj-pd-heading>span{
  display:inline-flex;align-items:center;min-height:24px;padding:0 8px;
  color:var(--color-primary);background:var(--color-primary-soft);border:1px solid rgba(7, 104, 207, .10);
  border-radius:var(--radius-pill);font-size:8px;font-weight:var(--weight-bold);letter-spacing:.10em
}

.lj-pd-heading h1{
  max-width:920px;
  margin:10px 0 15px;
  color:var(--color-title);
  font-family:var(--font-heading);
  font-size:clamp(25px,2.65vw,36px);
  font-weight:var(--weight-semibold);
  line-height:1.2;
  letter-spacing:-.028em;
  text-wrap:balance;
}

.lj-pd-price-row{align-items:center;gap:16px}
.lj-pd-price-copy{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.lj-pd-main-price{
  color:var(--color-primary)!important;
  font-size:27px!important;
  font-weight:var(--weight-bold)!important;
  line-height:1.1;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}

/* Negotiable is deliberately before price in PHP markup */
.lj-pd-negotiable-text{
  display:inline-flex!important;align-items:center;gap:4px;min-height:22px;padding:0 7px;
  color:var(--color-success)!important;background:rgba(7, 104, 207, .08);
  border:1px solid rgba(7, 104, 207, .14);border-radius:var(--radius-pill);
  font-size:8px!important;font-weight:var(--weight-semibold);line-height:1;white-space:nowrap
}
.lj-pd-negotiable-text i{font-size:8px}

.lj-pd-price-row>div:last-child{display:flex;align-items:center;gap:9px;color:var(--color-muted)}
.lj-pd-price-row>div:last-child>span{display:inline-flex;align-items:center;gap:5px;font-size:9px}
.lj-pd-save{width:36px;height:36px;box-shadow:0 5px 14px rgba(1, 52, 130, .06)}

/* --------------------------------------------------------------------------
   TABS / PRODUCT CONTENT
---------------------------------------------------------------------------- */
.lj-pd-tabs{margin-top:16px}
.lj-pd-tab-list{gap:2px;border-bottom:1px solid rgba(1, 52, 130, .08)}
.lj-pd-tab-list button{padding:13px 13px;font-size:10px;font-weight:var(--weight-semibold)}
.lj-pd-tab-list button i{font-size:12px}
.lj-pd-tab-list button.is-active{background:linear-gradient(180deg,transparent,var(--color-primary-soft))}
.lj-pd-tab-panel{padding:20px 3px 4px;color:#082E5C;font-size:13px;line-height:1.75}

.lj-pd-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lj-pd-features li{
  min-width:0;padding:11px 12px;gap:9px;background:#FFFFFF;border:1px solid rgba(1, 52, 130, .07);
  border-radius:var(--radius-xs);font-size:11px;transition:var(--transition-fast)
}
.lj-pd-features li:hover{border-color:rgba(7, 104, 207, .18);background:var(--color-primary-soft);transform:translateY(-1px)}
.lj-pd-features i{flex:0 0 auto;font-size:12px}
.lj-pd-features li span{display:grid;gap:2px;min-width:0}
.lj-pd-features li small{color:var(--color-muted);font-size:7px;font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.06em}
.lj-pd-features li strong{color:var(--color-title);font-size:10px;font-weight:var(--weight-semibold)}

.lj-pd-store p{padding:13px;background:#FFFFFF;border:1px solid rgba(1, 52, 130, .07);border-radius:var(--radius-xs)}
.lj-pd-store span{font-size:8px;font-weight:var(--weight-bold);letter-spacing:.06em}
.lj-pd-store strong{color:var(--color-title);font-size:11px}
.lj-pd-map{border-radius:var(--radius-xs);border-color:rgba(1, 52, 130, .08)}

/* --------------------------------------------------------------------------
   ACTION CARD
---------------------------------------------------------------------------- */
.lj-pd-action-card,.lj-pd-share-card,.lj-pd-report-card{padding:16px}
.lj-pd-action-grid{gap:10px}
.lj-pd-big-btn{min-height:48px;font-size:10px;border-radius:var(--radius-xs);letter-spacing:.02em;box-shadow:0 6px 14px rgba(1, 52, 130, .07)}
.lj-pd-big-btn.call{background:linear-gradient(135deg,#013482,#013482)}
.lj-pd-big-btn.offer{box-shadow:0 8px 18px rgba(7, 104, 207, .15)}

.lj-pd-phone-dropdown,.lj-pd-seller-phones{padding:10px;border:1px solid rgba(7, 104, 207, .15);box-shadow:0 16px 38px rgba(1, 52, 130, .12)}
.lj-pd-phone-dropdown>div,.lj-pd-seller-phones>div{padding:7px 0;font-size:10px}

/* --------------------------------------------------------------------------
   SHARE / REPORT
---------------------------------------------------------------------------- */
.lj-pd-share-card h2,.lj-pd-report-card h2{font-size:17px;line-height:1.3;letter-spacing:-.015em}
.lj-pd-share-card span,.lj-pd-report-card span,.lj-pd-disclaimer span{font-size:8px;letter-spacing:.07em}
.lj-pd-share-list{gap:6px}
.lj-pd-share-list button{width:33px;height:33px;border-radius:var(--radius-xs);font-size:11px}
.lj-pd-report-card>div>i{width:44px;height:44px;flex-basis:44px;font-size:17px}
.lj-pd-report-card>button{min-height:38px;padding:0 12px;font-size:9px}

/* --------------------------------------------------------------------------
   SELLER CARD — CLEAN PREMIUM STRUCTURE
---------------------------------------------------------------------------- */
.lj-pd-seller-card{
  padding:18px;
  overflow:visible;
  border-color:rgba(7, 104, 207, .18);
  background:
    radial-gradient(circle at 100% 0,rgba(7, 104, 207, .045),transparent 10rem),
    var(--color-white);
}

.lj-pd-seller-card::before{
  position:absolute;top:0;right:18px;left:18px;height:2px;content:"";
  background:linear-gradient(90deg,transparent,var(--color-primary),transparent);opacity:.72
}

.lj-pd-seller-top{align-items:center;gap:13px}
.lj-pd-avatar{display:grid;place-items:center;flex:0 0 72px;width:72px;height:72px}
.lj-pd-avatar img,.lj-pd-avatar-fallback{
  display:grid;place-items:center;width:68px;height:68px;overflow:hidden;
  object-fit:cover;color:var(--color-primary);background:linear-gradient(145deg,#F6FBFD,#FFFFFF);
  border:3px solid var(--color-white);border-radius:var(--radius-round);
  box-shadow:0 0 0 1px rgba(7, 104, 207, .28),0 8px 20px rgba(1, 52, 130, .10);
  font-size:23px;font-weight:var(--weight-bold)
}
.lj-pd-avatar::after{
  position:absolute;right:0;bottom:3px;width:14px;height:14px;content:"";
  background:var(--color-success);border:3px solid var(--color-white);border-radius:var(--radius-round);
  box-shadow:0 0 0 1px rgba(7, 104, 207, .18)
}

.lj-pd-seller-identity{min-width:0;flex:1}
.lj-pd-seller-eyebrow{display:block;margin-bottom:3px;color:var(--color-muted);font-size:7px;font-weight:var(--weight-bold);letter-spacing:.10em;text-transform:uppercase}
.lj-pd-seller-name-row{display:flex;align-items:center;gap:6px;min-width:0}
.lj-pd-seller-top h2{margin:0;min-width:0;overflow:hidden;color:var(--color-title);font-size:17px;font-weight:var(--weight-semibold);line-height:1.25;letter-spacing:-.018em;text-overflow:ellipsis;white-space:nowrap}
.lj-pd-seller-verified-icon{display:inline-grid!important;place-items:center;position:static!important;width:auto!important;height:auto!important;flex:0 0 auto;color:var(--color-primary);background:transparent!important;border:0!important;font-size:13px}

.lj-pd-rating{display:flex;align-items:center;gap:5px;margin:5px 0 0;color:var(--color-secondary-dark)}
.lj-pd-rating i{font-size:10px}
.lj-pd-rating small{color:var(--color-muted);font-size:8px;font-weight:var(--weight-medium)}

.lj-pd-seller-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.lj-pd-seller-badges span{
  display:inline-flex!important;position:static!important;align-items:center;gap:4px;width:auto!important;height:auto!important;
  padding:4px 6px;color:#082E5C;background:#F6FBFD;border:1px solid rgba(1, 52, 130, .07);border-radius:var(--radius-pill);
  font-size:7px!important;font-weight:var(--weight-semibold);line-height:1.15;white-space:nowrap
}
.lj-pd-seller-badges span.is-verified{color:var(--color-primary);background:var(--color-primary-soft);border-color:rgba(7, 104, 207, .10)}

.lj-pd-seller-location{
  display:flex;align-items:center;gap:9px;margin-top:15px;padding:11px 12px;
  background:#FFFFFF;border:1px solid rgba(1, 52, 130, .07);border-radius:var(--radius-xs)
}
.lj-pd-seller-location>i{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;color:var(--color-primary);background:var(--color-primary-soft);border-radius:var(--radius-round);font-size:11px}
.lj-pd-seller-location div{display:grid;gap:2px;min-width:0}
.lj-pd-seller-location small{color:var(--color-muted);font-size:7px;font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase}
.lj-pd-seller-location strong{overflow:hidden;color:var(--color-title);font-size:9px;font-weight:var(--weight-semibold);line-height:1.35;text-overflow:ellipsis;white-space:nowrap}

.lj-pd-seller-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.lj-pd-seller-actions>button,.lj-pd-seller-actions>a{
  min-height:40px;padding:0 10px;gap:6px;border-radius:var(--radius-xs);font-size:9px;font-weight:var(--weight-semibold);transition:var(--transition-fast)
}
.lj-pd-seller-actions>button:first-child{background:linear-gradient(135deg,#013482,#013482);box-shadow:0 6px 14px rgba(1, 52, 130, .10)}
.lj-pd-seller-actions>button:nth-of-type(2){background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));box-shadow:0 7px 16px rgba(7, 104, 207, .15)}
.lj-pd-seller-actions>a{grid-column:1/-1;justify-content:space-between;background:#FFFFFF;border:1px solid rgba(7, 104, 207, .18);color:var(--color-title)}
.lj-pd-seller-actions>a:hover{color:var(--color-primary);background:var(--color-primary-soft);border-color:rgba(7, 104, 207, .28)}
.lj-pd-seller-actions>button:hover,.lj-pd-seller-actions>a:hover{transform:translateY(-1px)}
.lj-pd-seller-phones{grid-column:1/-1;margin-top:0}

/* --------------------------------------------------------------------------
   ESCROW SUPPORT CARD
---------------------------------------------------------------------------- */
.lj-pd-escrow-card{
  display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;
  padding:14px 15px;
  background:
    radial-gradient(circle at 10% 10%,rgba(7, 104, 207, .08),transparent 8rem),
    linear-gradient(145deg,#FFFFFF,#FFFFFF);
  border:1px solid rgba(7, 104, 207, .20);
  box-shadow:0 8px 24px rgba(1, 52, 130, .05);
}
.lj-pd-escrow-card:hover{border-color:rgba(7, 104, 207, .34);box-shadow:0 14px 32px rgba(1, 52, 130, .075);transform:translateY(-2px)}
.lj-pd-escrow-logo{display:grid;place-items:center;width:46px;height:46px;background:rgba(7, 104, 207, .08);border:1px solid rgba(7, 104, 207, .14);border-radius:var(--radius-sm)}
.lj-pd-escrow-logo svg{width:29px;height:29px;fill:var(--color-success)}
.lj-pd-escrow-logo .lj-pd-escrow-lock{fill:var(--color-white)}
.lj-pd-escrow-copy{display:grid;gap:2px;min-width:0}
.lj-pd-escrow-copy small{color:var(--color-success);font-size:7px;font-weight:var(--weight-bold);letter-spacing:.08em;text-transform:uppercase}
.lj-pd-escrow-copy strong{color:var(--color-title);font-size:13px;font-weight:var(--weight-semibold);letter-spacing:-.01em}
.lj-pd-escrow-copy span{color:var(--color-text);font-size:8px;line-height:1.4}
.lj-pd-escrow-check{display:grid;place-items:center;width:27px;height:27px;color:var(--color-success);background:rgba(7, 104, 207, .08);border-radius:var(--radius-round);font-size:11px}

/* Seller and escrow order remains correct when JS moves seller into mobile slot */
.lj-pd-mobile-seller-slot{flex-direction:column;gap:10px}
.lj-pd-mobile-seller-slot .lj-pd-seller-card{order:1}
.lj-pd-mobile-seller-slot .lj-pd-escrow-card{order:2}
.lj-pd-desktop-seller-slot{display:grid;gap:10px}

/* --------------------------------------------------------------------------
   FEEDBACK / WHATSAPP / MESSAGE / DISCLAIMER
---------------------------------------------------------------------------- */
.lj-pd-feedback-head{padding:16px 17px;font-size:10px}
.lj-pd-feedback-head span{font-size:10px}
.lj-pd-feedback-head strong{font-size:10px}
.lj-pd-feedback-body{padding:15px}
.lj-pd-feedback-body textarea{min-height:96px;padding:11px;font-size:11px;background:#FFFFFF}
.lj-pd-comments{gap:13px;margin-top:18px}
.lj-pd-comments article{grid-template-columns:35px minmax(0,1fr);gap:9px}
.lj-pd-comments img,.lj-pd-comment-avatar{width:35px;height:35px}

.lj-pd-whatsapp-card{
  grid-template-columns:42px minmax(0,1fr) auto;gap:11px;padding:13px 14px;
  background:linear-gradient(135deg,#0687F1,#0687F1);border:1px solid rgba(255, 255, 255, .18);border-radius:var(--radius-sm);box-shadow:0 8px 22px rgba(6, 135, 241, .13)
}
.lj-pd-whatsapp-card>span{width:42px;height:42px;font-size:19px}
.lj-pd-whatsapp-card h3{margin:0 0 2px;font-size:13px;font-weight:var(--weight-semibold)}
.lj-pd-whatsapp-card p{font-size:8px;opacity:.86}

.lj-pd-disclaimer{gap:10px;padding:15px 16px}
.lj-pd-disclaimer>i{font-size:17px}
.lj-pd-disclaimer p{font-size:9px;line-height:1.55}

/* Existing private-message card gets consistent premium treatment */
.lj-pd-sidebar .lj-job-message-card{border:1px solid rgba(7, 104, 207, .14)!important;border-radius:var(--radius-sm)!important;box-shadow:0 8px 22px rgba(1, 52, 130, .045)!important;overflow:hidden}
.lj-pd-sidebar .lj-job-quick-action{min-height:66px;padding:12px 14px!important}
.lj-pd-sidebar .lj-job-quick-action-copy small{font-size:7px!important}
.lj-pd-sidebar .lj-job-quick-action-copy strong{font-size:11px!important}
.lj-pd-sidebar .lj-job-quick-action-copy em{font-size:8px!important}

/* --------------------------------------------------------------------------
   MODALS
---------------------------------------------------------------------------- */
.offer_m_panel,.lj-pd-modal-panel{border-radius:var(--radius-sm);box-shadow:0 28px 80px rgba(1, 52, 130, .24)}
.offer_m_panel h2,.lj-pd-modal-panel h2{font-size:25px;letter-spacing:-.025em}
.offer_m_panel label,.lj-pd-modal-panel label{font-size:9px;font-weight:var(--weight-semibold)}
.offer_m_panel input,.lj-pd-modal-panel input,.lj-pd-modal-panel select,.lj-pd-modal-panel textarea{font-size:11px}

/* --------------------------------------------------------------------------
   TABLET
---------------------------------------------------------------------------- */
@media(max-width:991.98px){
  .lj-pd-layout{grid-template-columns:1fr}
  .lj-pd-mobile-seller-slot{display:flex;margin-bottom:18px}
  .lj-pd-desktop-seller-slot{display:none}
  .lj-pd-mobile-seller-slot .lj-pd-seller-card,.lj-pd-mobile-seller-slot .lj-pd-escrow-card{width:100%}
  .lj-pd-seller-actions{grid-template-columns:1fr 1fr}
}

/* --------------------------------------------------------------------------
   MOBILE
---------------------------------------------------------------------------- */
@media(max-width:767.98px){
  .lj-pd-section{padding:20px 0 58px}
  .lj-pd-main,.lj-pd-sidebar{gap:12px}
  .lj-pd-card{border-radius:var(--radius-xs)}
  .lj-pd-product-card{padding:8px 8px 14px}
  .lj-pd-frame{height:330px;border-radius:var(--radius-xs)}
  .lj-pd-thumbs-row{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px;margin-top:7px}
  .lj-pd-thumb-nav{width:30px;height:42px}
  .lj-pd-thumb,.lj-pd-thumbs .swiper-slide{height:58px}
  .lj-pd-heading{padding:17px 4px 2px}
  .lj-pd-heading>span{min-height:20px;padding:0 6px;font-size:7px}
  .lj-pd-heading h1{margin:8px 0 12px;font-size:clamp(20px,6.1vw,27px);line-height:1.22;letter-spacing:-.024em}
  .lj-pd-price-row{align-items:center;flex-direction:row;justify-content:space-between;gap:8px}
  .lj-pd-price-copy{gap:6px}
  .lj-pd-main-price{font-size:20px!important}
  .lj-pd-negotiable-text{min-height:19px;padding:0 5px;font-size:7px!important}
  .lj-pd-price-row>div:last-child{gap:6px}
  .lj-pd-price-row>div:last-child>span{font-size:7px}
  .lj-pd-save{width:31px;height:31px}
  .lj-pd-tab-list button{padding:10px 8px;font-size:8px}
  .lj-pd-tab-panel{padding:15px 3px 2px;font-size:11px;line-height:1.65}
  .lj-pd-features{grid-template-columns:1fr 1fr;gap:5px}
  .lj-pd-features li{padding:8px 7px;gap:6px}
  .lj-pd-features li small{font-size:6px}.lj-pd-features li strong{font-size:8px}
  .lj-pd-action-card,.lj-pd-share-card,.lj-pd-report-card{padding:11px}
  .lj-pd-action-grid{grid-template-columns:1fr 1fr;gap:6px}
  .lj-pd-big-btn{min-height:42px;font-size:8px}
  .lj-pd-share-card,.lj-pd-report-card{gap:10px}
  .lj-pd-share-card h2,.lj-pd-report-card h2{font-size:14px}
  .lj-pd-share-list button{width:30px;height:30px}
  .lj-pd-report-card>button{width:auto;min-height:34px;font-size:8px}
  .lj-pd-seller-card{padding:14px}
  .lj-pd-avatar{width:62px;height:62px;flex-basis:62px}
  .lj-pd-avatar img,.lj-pd-avatar-fallback{width:58px;height:58px}
  .lj-pd-seller-top h2{font-size:15px}
  .lj-pd-seller-location{margin-top:11px;padding:9px 10px}
  .lj-pd-seller-actions{grid-template-columns:1fr 1fr;gap:6px;margin-top:11px}
  .lj-pd-seller-actions>button,.lj-pd-seller-actions>a{min-height:37px;font-size:8px}
  .lj-pd-escrow-card{grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding:11px}
  .lj-pd-escrow-logo{width:40px;height:40px}.lj-pd-escrow-logo svg{width:25px;height:25px}
  .lj-pd-escrow-copy strong{font-size:11px}.lj-pd-escrow-copy span{font-size:7px}
  .lj-pd-lightbox-stage{width:100vw;height:78vh;padding:12px}
}

/* --------------------------------------------------------------------------
   SMALL MOBILE
---------------------------------------------------------------------------- */
@media(max-width:430px){
  .lj-pd-frame{height:285px}
  .lj-pd-heading h1{font-size:22px}
  .lj-pd-main-price{font-size:18px!important}
  .lj-pd-negotiable-text{font-size:6.5px!important}
  .lj-pd-price-row>div:last-child>span{display:none}
  .lj-pd-features{grid-template-columns:1fr 1fr}
  .lj-pd-seller-top{align-items:center}
  .lj-pd-avatar{width:58px;height:58px;flex-basis:58px}
  .lj-pd-avatar img,.lj-pd-avatar-fallback{width:54px;height:54px}
  .lj-pd-seller-badges span{font-size:6px!important}
  .lj-pd-seller-location strong{font-size:8px}
  .lj-pd-escrow-copy span{display:none}
  .lj-pd-escrow-card{grid-template-columns:36px minmax(0,1fr) 24px}
  .lj-pd-escrow-logo{width:36px;height:36px}.lj-pd-escrow-logo svg{width:22px;height:22px}
  .lj-pd-escrow-check{width:24px;height:24px;font-size:9px}
  .lj-pd-report-card>button{width:100%}
}

@keyframes ljPdPremiumReveal{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .lj-pd-main>.lj-pd-card,.lj-pd-sidebar>article,.lj-pd-desktop-seller-slot>.lj-pd-card,.lj-pd-mobile-seller-slot>.lj-pd-card{animation:none!important}
}






















/********************************************USER DASHBOARD*************************/

/* =========================================================
   LINJUST USER DASHBOARD
   Additional page styles only.
========================================================= */

.lj-dashboard-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: radial-gradient(circle at 8% 10%, rgba(7, 104, 207, .045), transparent 26rem), var(--color-off-white);
  font-family: var(--font-body)
}

.lj-dashboard-page *,
.lj-dashboard-page *::before,
.lj-dashboard-page *::after {
  box-sizing: border-box
}

.lj-dashboard-page button,
.lj-dashboard-page input,
.lj-dashboard-page select {
  font-family: var(--font-body)
}

.lj-dashboard-page button {
  cursor: pointer
}

.lj-dashboard-page a {
  text-decoration: none
}

.lj-dashboard-section {
  padding: 46px 0 90px
}

.lj-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(0, 3fr);
  gap: 26px;
  align-items: start
}

.lj-dashboard-card {
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-dashboard-sidebar {
  position: sticky;
  top: 105px;
  display: grid;
  gap: 18px;
  min-width: 0
}

/* Profile */

.lj-dashboard-profile-card {
  position: relative;
  padding: 28px 20px 22px;
  text-align: center
}

.lj-dashboard-sidebar-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-round)
}

.lj-dashboard-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 14px
}

.lj-dashboard-avatar {
  display: block;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 4px solid var(--color-white);
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 2px var(--color-secondary), 0 14px 32px rgba(1, 52, 130, .16)
}

.lj-dashboard-avatar-edit {
  position: absolute;
  right: 0;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-white);
  background: var(--color-primary);
  border: 3px solid var(--color-white);
  border-radius: var(--radius-round);
  font-size: 12px
}

.lj-dashboard-profile-card h2 {
  margin: 0 0 10px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--weight-semibold)
}

.lj-dashboard-verification {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-dashboard-verification.is-verified {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10)
}

.lj-dashboard-verification.is-pending {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .15)
}

.lj-dashboard-account-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 11px;
  font-weight: var(--weight-semibold)
}

.lj-dashboard-account-state.is-active {
  color: var(--color-success)
}

.lj-dashboard-account-state.is-inactive {
  color: var(--color-danger)
}

.lj-dashboard-state-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round)
}

.is-active .lj-dashboard-state-dot {
  background: var(--color-success);
  animation: ljDashboardGreenWave 1.6s infinite
}

.is-inactive .lj-dashboard-state-dot {
  background: var(--color-danger);
  animation: ljDashboardRedWave 1.6s infinite
}

.lj-dashboard-account-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  margin-top: 19px;
  padding: 13px;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-dashboard-account-code span {
  grid-column: 1/-1;
  color: var(--color-muted);
  font-size: 8px;
  text-transform: uppercase
}

.lj-dashboard-account-code strong {
  color: var(--color-title);
  font-size: 17px;
  letter-spacing: .12em
}

.lj-dashboard-account-code button {
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 0;
  border-radius: var(--radius-xs)
}

/* Menu */

.lj-dashboard-menu-card {
  padding: 12px
}

.lj-dashboard-menu {
  display: grid;
  gap: 4px
}

.lj-dashboard-menu-link,
.lj-dashboard-menu-dropdown-toggle,
.lj-dashboard-add-listing,
.lj-dashboard-logout {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 48px;
  gap: 8px;
  padding: 0 13px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-align: left;
  transition: var(--transition-normal)
}

.lj-dashboard-menu-link>i,
.lj-dashboard-menu-dropdown-toggle span>i,
.lj-dashboard-add-listing>i,
.lj-dashboard-logout>i {
  color: var(--color-primary);
  font-size: 15px
}

.lj-dashboard-menu-link:hover,
.lj-dashboard-menu-link.is-active,
.lj-dashboard-menu-dropdown-toggle:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft)
}

.lj-dashboard-menu-dropdown-toggle {
  display: flex;
  justify-content: space-between
}

.lj-dashboard-menu-dropdown-toggle>span {
  display: flex;
  align-items: center;
  gap: 8px
}

.lj-dashboard-menu-dropdown-toggle>i {
  font-size: 10px;
  transition: var(--transition-normal)
}

.lj-dashboard-menu-dropdown-toggle.is-open>i {
  transform: rotate(180deg)
}

.lj-dashboard-menu-submenu {
  display: grid;
  gap: 3px;
  margin: 4px 0 5px 31px;
  padding-left: 10px;
  border-left: 1px dashed var(--color-border)
}

.lj-dashboard-menu-submenu[hidden] {
  display: none
}

.lj-dashboard-menu-submenu a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 41px;
  gap: 7px;
  padding: 0 10px;
  color: var(--color-text);
  border-radius: var(--radius-xs);
  font-size: 10px
}

.lj-dashboard-menu-submenu a:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft)
}

.lj-dashboard-menu-submenu i {
  color: var(--color-primary)
}

.lj-dashboard-menu-submenu small,
.lj-dashboard-menu-badge {
  min-width: 24px;
  padding: 4px 6px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  font-size: 8px;
  text-align: center
}

.lj-dashboard-add-listing {
  margin-top: 7px;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark))
}

.lj-dashboard-add-listing>i {
  color: var(--color-white)
}

.lj-dashboard-logout {
  margin-top: 5px;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .06)
}

.lj-dashboard-logout>i {
  color: var(--color-danger)
}

/* Content */

.lj-dashboard-content {
  display: grid;
  min-width: 0;
  gap: 22px
}

.lj-dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px
}

.lj-dashboard-heading span,
.lj-dashboard-card-heading span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-dashboard-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: var(--weight-semibold);
  line-height: 1
}

.lj-dashboard-heading p {
  max-width: 680px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7
}

.lj-dashboard-heading-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 38px;
  gap: 8px;
  padding: 0 16px;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-xs);
  font-size: var(--main-font-size);
  font-weight: var(--weight-bold)
}

/* Alerts */

.lj-dashboard-alerts {
  display: grid;
  gap: 12px
}

.lj-dashboard-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 17px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-small)
}

.lj-dashboard-alert>i {
  margin-top: 2px;
  font-size: 20px
}

.lj-dashboard-alert strong {
  display: block;
  color: var(--color-title);
  font-size: 12px
}

.lj-dashboard-alert p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.6
}

.lj-dashboard-alert.is-success {
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .20)
}

.lj-dashboard-alert.is-warning {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .12);
  border-color: rgba(31, 158, 252, .30)
}

.lj-dashboard-alert.is-danger {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .20)
}

.lj-dashboard-alert-close {
  width: 30px;
  height: 30px;
  padding: 0;
  color: currentColor;
  background: transparent;
  border: 0
}

/* Widgets */

.lj-dashboard-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px
}

.lj-dashboard-widget {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 15px;
  overflow: hidden;
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal)
}

.lj-dashboard-widget::after {
  position: absolute;
  top: -40px;
  right: -35px;
  width: 110px;
  height: 110px;
  content: "";
  background: rgba(7, 104, 207, .035);
  border-radius: var(--radius-round)
}

.lj-dashboard-widget:hover {
  transform: translateY(-6px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: var(--shadow-medium)
}

.lj-dashboard-widget-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-size: 21px
}

.lj-dashboard-widget-icon.jobs {
  background: linear-gradient(135deg, #0687F1, #1F9EFC)
}

.lj-dashboard-widget-icon.products {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark))
}

.lj-dashboard-widget-icon.events {
  background: linear-gradient(135deg, var(--color-secondary-dark), var(--color-secondary))
}

.lj-dashboard-widget>div:last-child {
  position: relative;
  z-index: 2;
  min-width: 0
}

.lj-dashboard-widget span {
  display: block;
  font-size: 10px
}

.lj-dashboard-widget strong {
  display: block;
  margin: 3px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 31px;
  line-height: 1
}

.lj-dashboard-widget small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-success);
  font-size: 8px
}

/* Chart and shared headings */

.lj-dashboard-chart-card,
.lj-dashboard-table-card {
  padding: 22px
}

.lj-dashboard-card-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px
}

.lj-dashboard-card-heading h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: var(--weight-semibold)
}

.lj-dashboard-card-heading select {
  min-height: 42px;
  padding: 0 34px 0 12px;
  color: var(--color-title);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  outline: 0;
  font-size: 10px
}

.lj-dashboard-chart-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(210px, .7fr);
  align-items: center;
  gap: 25px
}

.lj-dashboard-chart-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 320px
}

.lj-dashboard-chart-canvas-wrap canvas {
  width: 100% !important;
  height: 320px !important
}

.lj-dashboard-chart-legend {
  display: grid;
  gap: 11px
}

.lj-dashboard-chart-legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-dashboard-chart-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-round)
}

.lj-dashboard-chart-legend-item span {
  font-size: 10px
}

.lj-dashboard-chart-legend-item strong {
  color: var(--color-title);
  font-size: 12px
}

/* Table */

.lj-dashboard-table-view-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold)
}

.lj-dashboard-table-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
  gap: 12px;
  margin-bottom: 17px
}

.lj-dashboard-table-search,
.lj-dashboard-table-filter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-dashboard-table-search i,
.lj-dashboard-table-filter i {
  color: var(--color-primary)
}

.lj-dashboard-table-search input,
.lj-dashboard-table-filter select {
  width: 100%;
  height: 46px;
  padding: 0 10px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 10px
}

.lj-dashboard-table-responsive {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs)
}

.lj-dashboard-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse
}

.lj-dashboard-table th,
.lj-dashboard-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap
}

.lj-dashboard-table th {
  color: var(--color-title);
  background: var(--color-surface);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer
}

.lj-dashboard-table th:last-child {
  cursor: default
}

.lj-dashboard-table td {
  font-size: 10px
}

.lj-dashboard-table tbody tr {
  transition: var(--transition-fast)
}

.lj-dashboard-table tbody tr:hover {
  background: rgba(7, 104, 207, .025)
}

.lj-dashboard-table tbody tr:last-child td {
  border-bottom: 0
}

.lj-dashboard-product-cell {
  display: flex;
  align-items: center;
  gap: 10px
}

.lj-dashboard-product-cell img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border)
}

.lj-dashboard-product-cell strong {
  display: block;
  max-width: 180px;
  overflow: hidden;
  color: var(--color-title);
  font-size: 10px;
  text-overflow: ellipsis
}

.lj-dashboard-product-cell small {
  color: var(--color-muted);
  font-size: 8px
}

.lj-dashboard-status {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-dashboard-status.is-active {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10)
}

.lj-dashboard-status.is-pending {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .16)
}

.lj-dashboard-status.is-inactive {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .10)
}

.lj-dashboard-table-actions {
  display: flex;
  align-items: center;
  gap: 6px
}

.lj-dashboard-table-actions a,
.lj-dashboard-table-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  font-size: 10px;
  transition: var(--transition-fast)
}

.lj-dashboard-table-actions a:hover,
.lj-dashboard-table-actions button:hover {
  transform: translateY(-2px)
}

.lj-dashboard-table-actions .edit {
  color: #0687F1;
  background: #F6FBFD
}

.lj-dashboard-table-actions .view {
  color: #0768CF;
  background: #D5EAF8
}

.lj-dashboard-table-actions .add {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10)
}

.lj-dashboard-table-actions .link {
  color: var(--color-tertiary);
  background: rgba(1, 52, 130, .08)
}

.lj-dashboard-table-actions .delete {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .09)
}

.lj-dashboard-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 16px
}

.lj-dashboard-table-footer p {
  margin: 0;
  font-size: 9px
}

.lj-dashboard-table-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.lj-dashboard-table-pagination button {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 9px
}

.lj-dashboard-table-pagination button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

/* Mobile drawer */

.lj-dashboard-mobile-trigger {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 62px;
  padding: 0;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-medium);
  transform: translateY(-50%)
}

.lj-dashboard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1085;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(1, 52, 130, .60);
  border: 0;
  opacity: 0;
  backdrop-filter: blur(4px)
}

@keyframes ljDashboardGreenWave {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, .48)
  }
  70% {
    box-shadow: 0 0 0 8px rgba(7, 104, 207, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, 0)
  }
}

@keyframes ljDashboardRedWave {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, .48)
  }
  70% {
    box-shadow: 0 0 0 8px rgba(7, 104, 207, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, 0)
  }
}

@media(max-width:1199.98px) {
  .lj-dashboard-layout {
    grid-template-columns: 270px minmax(0, 1fr)
  }
  .lj-dashboard-widget {
    padding: 17px
  }
  .lj-dashboard-widget-icon {
    flex-basis: 50px;
    width: 50px;
    height: 50px
  }
}

@media(max-width:991.98px) {
  .lj-dashboard-layout {
    grid-template-columns: 1fr
  }
  .lj-dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1090;
    width: min(88vw, 360px);
    height: 100dvh;
    padding: 14px;
    overflow-y: auto;
    background: var(--footer-background);
    transform: translateX(-106%);
    transition: transform var(--transition-normal)
  }
  .lj-dashboard-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-dashboard-sidebar-close {
    display: flex
  }
  .lj-dashboard-mobile-trigger {
    display: flex
  }
  .lj-dashboard-backdrop.is-visible {
    display: block;
    opacity: 1
  }
  .lj-dashboard-chart-layout {
    grid-template-columns: 1fr
  }
  .lj-dashboard-chart-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:767.98px) {
  .lj-dashboard-section {
    padding: 28px 0 70px
  }
  .lj-dashboard-heading {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-dashboard-heading-action {
    width: 100%
  }
  .lj-dashboard-widget-grid {
    grid-template-columns: 1fr
  }
  .lj-dashboard-widget {
    min-height: 95px
  }
  .lj-dashboard-chart-card,
  .lj-dashboard-table-card {
    padding: 15px
  }
  .lj-dashboard-card-heading {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-dashboard-table-toolbar {
    grid-template-columns: 1fr
  }
  .lj-dashboard-table-responsive {
    overflow: visible;
    border: 0
  }
  .lj-dashboard-table {
    display: block;
    min-width: 0
  }
  .lj-dashboard-table thead {
    display: none
  }
  .lj-dashboard-table tbody {
    display: grid;
    gap: 14px
  }
  .lj-dashboard-table tr {
    display: grid;
    gap: 0;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-small)
  }
  .lj-dashboard-table td {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--color-border);
    white-space: normal
  }
  .lj-dashboard-table td::before {
    content: attr(data-label);
    color: var(--color-title);
    font-size: 8px;
    font-weight: var(--weight-bold);
    text-transform: uppercase
  }
  .lj-dashboard-table td:last-child {
    border-bottom: 0
  }
  .lj-dashboard-product-cell strong {
    max-width: none
  }
  .lj-dashboard-table-footer {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-dashboard-chart-legend {
    grid-template-columns: 1fr
  }
}

@media(max-width:430px) {
  .lj-dashboard-table td {
    grid-template-columns: 82px minmax(0, 1fr)
  }
  .lj-dashboard-chart-canvas-wrap {
    min-height: 270px
  }
  .lj-dashboard-chart-canvas-wrap canvas {
    height: 270px !important
  }
  .lj-dashboard-product-cell img {
    width: 42px;
    height: 42px
  }
  .lj-dashboard-table-actions {
    flex-wrap: wrap
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-dashboard-page *,
  .lj-dashboard-page *::before,
  .lj-dashboard-page *::after {
    animation: none !important;
    transition: none !important
  }
}

.lj-profile-dashboard-page {
  position: relative;
  overflow-x: hidden;
  background: radial-gradient(circle at 8% 10%, rgba(7, 104, 207, .045), transparent 26rem), var(--color-off-white);
  color: var(--color-text);
  font-family: var(--font-body)
}

.lj-profile-dashboard-page *,
.lj-profile-dashboard-page *:before,
.lj-profile-dashboard-page *:after {
  box-sizing: border-box
}

.lj-profile-dashboard-page button,
.lj-profile-dashboard-page input,
.lj-profile-dashboard-page select,
.lj-profile-dashboard-page textarea {
  font-family: var(--font-body)
}

.lj-profile-dashboard-page button {
  cursor: pointer
}

.lj-profile-dashboard-page a {
  text-decoration: none
}

.lj-profile-dashboard-section {
  padding: 46px 0 90px
}

.lj-profile-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(0, 3fr);
  gap: 26px;
  align-items: start
}

.lj-profile-dashboard-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-profile-dashboard-sidebar {
  position: sticky;
  top: 65px;
  display: grid;
  gap: 18px
}

.lj-profile-summary-card {
  position: relative;
  padding: 28px 20px 22px;
  text-align: center
}

.lj-profile-sidebar-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, .1);
  color: #FFFFFF
}

.lj-profile-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 14px
}

.lj-profile-avatar {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 4px solid #FFFFFF;
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 2px var(--color-secondary), 0 14px 32px rgba(1, 52, 130, .16)
}

.lj-profile-avatar-edit {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 34px;
  height: 34px;
  border: 3px solid #FFFFFF;
  border-radius: var(--radius-round);
  background: var(--color-primary);
  color: #FFFFFF
}

.lj-profile-summary-card h2 {
  margin: 0 0 10px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 28px
}

.lj-profile-verification {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-profile-verification.is-verified {
  color: var(--color-success);
  background: rgba(7, 104, 207, .1)
}

.lj-profile-verification.is-pending {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .15)
}

.lj-profile-account-state {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 11px;
  font-weight: var(--weight-semibold)
}

.lj-profile-account-state.is-active {
  color: var(--color-success)
}

.lj-profile-account-state.is-inactive {
  color: var(--color-danger)
}

.lj-profile-state-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round)
}

.is-active .lj-profile-state-dot {
  background: var(--color-success);
  animation: ljProfileGreenWave 1.6s infinite
}

.is-inactive .lj-profile-state-dot {
  background: var(--color-danger);
  animation: ljProfileRedWave 1.6s infinite
}

.lj-profile-account-code {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  align-items: center;
  margin-top: 19px;
  padding: 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  text-align: left
}

.lj-profile-account-code span {
  grid-column: 1/-1;
  color: var(--color-muted);
  font-size: 8px;
  text-transform: uppercase
}

.lj-profile-account-code strong {
  color: var(--color-title);
  font-size: 17px;
  letter-spacing: .12em
}

.lj-profile-account-code button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--color-primary-soft);
  color: var(--color-primary)
}

.lj-profile-menu-card {
  padding: 12px
}

.lj-profile-menu {
  display: grid;
  gap: 4px
}

.lj-profile-menu-link,
.lj-profile-menu-dropdown-toggle,
.lj-profile-add-listing,
.lj-profile-logout {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 48px;
  gap: 8px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text);
  font-size: var(--main-font-size);
  font-weight: var(--weight-semibold);
  text-align: left;
  transition: var(--transition-normal)
}

.lj-profile-menu-link>i,
.lj-profile-menu-dropdown-toggle span>i,
.lj-profile-add-listing>i,
.lj-profile-logout>i {
  color: var(--color-primary);
  font-size: 15px
}

.lj-profile-menu-link:hover,
.lj-profile-menu-link.is-active,
.lj-profile-menu-dropdown-toggle:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary)
}

.lj-profile-menu-dropdown-toggle {
  display: flex;
  justify-content: space-between
}

.lj-profile-menu-dropdown-toggle>span {
  display: flex;
  align-items: center;
  gap: 8px
}

.lj-profile-menu-dropdown-toggle>i {
  font-size: 10px;
  transition: var(--transition-normal)
}

.lj-profile-menu-dropdown-toggle.is-open>i {
  transform: rotate(180deg)
}

.lj-profile-menu-submenu {
  display: grid;
  gap: 3px;
  margin: 4px 0 5px 31px;
  padding-left: 10px;
  border-left: 1px dashed var(--color-border)
}

.lj-profile-menu-submenu[hidden] {
  display: none
}

.lj-profile-menu-submenu a {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  min-height: 41px;
  gap: 7px;
  padding: 0 10px;
  color: var(--color-text);
  font-size: 10px
}

.lj-profile-menu-submenu a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary)
}

.lj-profile-menu-submenu i {
  color: var(--color-primary)
}

.lj-profile-menu-submenu small,
.lj-profile-menu-badge {
  min-width: 24px;
  padding: 4px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 8px;
  text-align: center
}

.lj-profile-add-listing {
  margin-top: 7px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #FFFFFF
}

.lj-profile-add-listing>i {
  color: #FFFFFF
}

.lj-profile-logout {
  margin-top: 5px;
  background: rgba(7, 104, 207, .06);
  color: var(--color-danger)
}

.lj-profile-logout>i {
  color: var(--color-danger)
}

.lj-profile-dashboard-content {
  display: grid;
  gap: 22px;
  min-width: 0
}

.lj-profile-dashboard-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px
}

.lj-profile-dashboard-heading span,
.lj-profile-card-heading>div>span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-profile-dashboard-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1
}

.lj-profile-dashboard-heading p {
  max-width: 680px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7
}

.lj-profile-preview-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: #FFFFFF;
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-bold)
}

.lj-profile-dashboard-alerts {
  display: grid;
  gap: 12px
}

.lj-profile-dashboard-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: start;
  padding: 16px 17px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-small)
}

.lj-profile-dashboard-alert>i {
  margin-top: 2px;
  font-size: 20px
}

.lj-profile-dashboard-alert strong {
  display: block;
  color: var(--color-title);
  font-size: 12px
}

.lj-profile-dashboard-alert p {
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.6
}

.lj-profile-dashboard-alert.is-success {
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .2)
}

.lj-profile-dashboard-alert.is-warning {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .12);
  border-color: rgba(31, 158, 252, .3)
}

.lj-profile-dashboard-alert.is-danger {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .2)
}

.lj-profile-alert-close {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: currentColor
}

.lj-profile-form-card {
  padding: 24px
}

.lj-profile-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px
}

.lj-profile-card-heading h2 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 32px
}

.lj-profile-card-heading p {
  margin: 6px 0 0;
  font-size: 10px
}

.lj-profile-completion {
  width: min(260px, 100%)
}

.lj-profile-completion>span {
  font-size: 9px
}

.lj-profile-completion>strong {
  float: right;
  color: var(--color-primary);
  font-size: 12px
}

.lj-profile-completion-track {
  clear: both;
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-border)
}

.lj-profile-completion-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transition: width var(--transition-normal)
}

.lj-profile-form {
  display: grid;
  gap: 22px
}

.lj-profile-form-group {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #FFFFFF
}

.lj-profile-form-group legend {
  display: flex;
  align-items: center;
  gap: 11px;
  width: auto;
  margin: 0 0 18px;
  padding: 0 8px 0 0;
  color: var(--color-title)
}

.lj-profile-form-group legend>span:last-child {
  display: grid
}

.lj-profile-form-group legend strong {
  font-family: var(--font-heading);
  font-size: 22px
}

.lj-profile-form-group legend small {
  color: var(--color-text);
  font-size: 9px
}

.lj-profile-form-group-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--color-primary-soft);
  color: var(--color-primary)
}

.lj-profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.lj-profile-field {
  display: grid;
  gap: 7px
}

.lj-profile-field>span {
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold)
}

.lj-profile-field-full {
  grid-column: 1/-1
}

.lj-profile-input-wrap,
.lj-profile-textarea-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-off-white);
  transition: var(--transition-fast)
}

.lj-profile-textarea-wrap {
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-top: 13px
}

.lj-profile-input-wrap:focus-within,
.lj-profile-textarea-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06)
}

.lj-profile-input-wrap>i:first-child,
.lj-profile-textarea-wrap>i {
  margin-right: 10px;
  color: var(--color-primary)
}

.lj-profile-input-wrap>i:last-child {
  color: var(--color-muted);
  font-size: 10px
}

.lj-profile-input-wrap input,
.lj-profile-input-wrap select,
.lj-profile-textarea-wrap textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-title);
  font-size: 11px
}

.lj-profile-input-wrap select {
  appearance: none
}

.lj-profile-textarea-wrap textarea {
  resize: vertical
}

.lj-profile-field-error {
  min-height: 12px;
  color: var(--color-danger);
  font-size: 8px
}

.lj-profile-field.has-error .lj-profile-input-wrap,
.lj-profile-field.has-error .lj-profile-textarea-wrap {
  border-color: var(--color-danger)
}

.lj-profile-textarea-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px
}

.lj-profile-textarea-meta>span {
  font-size: 8px
}

.lj-profile-switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.lj-profile-switch {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-off-white);
  cursor: pointer
}

.lj-profile-switch input {
  position: absolute;
  opacity: 0
}

.lj-profile-switch-control {
  position: relative;
  width: 42px;
  height: 23px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: var(--transition-fast)
}

.lj-profile-switch-control:after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  content: "";
  border-radius: var(--radius-round);
  background: #FFFFFF;
  box-shadow: var(--shadow-small);
  transition: var(--transition-fast)
}

.lj-profile-switch input:checked+.lj-profile-switch-control {
  background: var(--color-primary)
}

.lj-profile-switch input:checked+.lj-profile-switch-control:after {
  transform: translateX(19px)
}

.lj-profile-switch>span:last-child {
  display: grid;
  gap: 3px
}

.lj-profile-switch strong {
  color: var(--color-title);
  font-size: 10px
}

.lj-profile-switch small {
  font-size: 8px;
  line-height: 1.5
}

.lj-profile-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px
}

.lj-profile-form-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: var(--weight-bold)
}

.lj-profile-reset-button {
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: var(--color-title)
}

.lj-profile-save-button {
  border: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #FFFFFF
}

.lj-profile-mobile-trigger {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1080;
  display: none;
  width: 44px;
  height: 62px;
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #FFFFFF;
  box-shadow: var(--shadow-medium);
  transform: translateY(-50%)
}

.lj-profile-dashboard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1085;
  display: none;
  border: 0;
  background: rgba(1, 52, 130, .6);
  opacity: 0;
  backdrop-filter: blur(4px)
}

@keyframes ljProfileGreenWave {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, .48)
  }
  70% {
    box-shadow: 0 0 0 8px rgba(7, 104, 207, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, 0)
  }
}

@keyframes ljProfileRedWave {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, .48)
  }
  70% {
    box-shadow: 0 0 0 8px rgba(7, 104, 207, 0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7, 104, 207, 0)
  }
}

@media(max-width:1199.98px) {
  .lj-profile-dashboard-layout {
    grid-template-columns: 270px minmax(0, 1fr)
  }
}

@media(max-width:991.98px) {
  .lj-profile-dashboard-layout {
    grid-template-columns: 1fr
  }
  .lj-profile-dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1090;
    width: min(88vw, 360px);
    height: 100dvh;
    padding: 14px;
    overflow-y: auto;
    background: var(--footer-background);
    transform: translateX(-106%);
    transition: transform var(--transition-normal)
  }
  .lj-profile-dashboard-sidebar.is-open {
    transform: translateX(0)
  }
  .lj-profile-sidebar-close {
    display: block
  }
  .lj-profile-mobile-trigger {
    display: block
  }
  .lj-profile-dashboard-backdrop.is-visible {
    display: block;
    opacity: 1
  }
  .lj-profile-card-heading {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-profile-completion {
    width: 100%
  }
}

@media(max-width:767.98px) {
  .lj-profile-dashboard-section {
    padding: 28px 0 70px
  }
  .lj-profile-dashboard-heading {
    align-items: flex-start;
    flex-direction: column
  }
  .lj-profile-preview-button {
    width: 100%;
    justify-content: center
  }
  .lj-profile-form-card {
    padding: 14px
  }
  .lj-profile-form-group {
    padding: 15px
  }
  .lj-profile-form-grid,
  .lj-profile-switch-grid {
    grid-template-columns: 1fr
  }
  .lj-profile-field-full {
    grid-column: auto
  }
  .lj-profile-form-actions {
    flex-direction: column-reverse
  }
  .lj-profile-form-actions button {
    width: 100%
  }
}

@media(max-width:430px) {
  .lj-profile-dashboard-alert {
    grid-template-columns: auto 1fr
  }
  .lj-profile-alert-close {
    grid-column: 2;
    justify-self: end
  }
  .lj-profile-form-group legend strong {
    font-size: 19px
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-profile-dashboard-page *,
  .lj-profile-dashboard-page *:before,
  .lj-profile-dashboard-page *:after {
    animation: none !important;
    transition: none !important
  }
}

/* =========================================================
   PROFESSIONAL MOBILE PROFILE SIDE NAVIGATION DRAWER
   Add this AFTER the existing profile dashboard CSS
========================================================= */

@media (max-width:991.98px) {
  /* =====================================================
       PAGE / DRAWER LAYERING
    ====================================================== */
  .lj-profile-dashboard-page {
    overflow-x: hidden;
  }
  /*
     * Drawer must sit above the header, page content,
     * cards, floating controls and normal components.
     */
  .lj-profile-dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    width: min(90vw, 380px);
    height: 100dvh;
    /*
         * Important:
         * remove desktop spacing between the two cards.
         */
    gap: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-white);
    border: 0;
    border-right: 1px solid rgba(1, 52, 130, .08);
    box-shadow: 18px 0 60px rgba(1, 52, 130, .24), 4px 0 18px rgba(1, 52, 130, .08);
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
    opacity: 0;
    transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility .25s ease;
    /*
         * Improves scrolling on iOS.
         */
    -webkit-overflow-scrolling: touch;
    /*
         * Keep movement smooth.
         */
    will-change: transform;
  }
  /* =====================================================
       OPEN DRAWER
    ====================================================== */
  .lj-profile-dashboard-sidebar.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    opacity: 1;
  }
  /* =====================================================
       BACKDROP
    ====================================================== */
  .lj-profile-dashboard-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(1, 52, 130, .62);
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity .3s ease, visibility .3s ease;
    pointer-events: none;
  }
  .lj-profile-dashboard-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* =====================================================
       SUMMARY CARD
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-summary-card {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    padding: max(42px, env(safe-area-inset-top)) 22px 24px;
    background: radial-gradient( circle at 90% 0, rgba(31, 158, 252, .15), transparent 32%), linear-gradient( 145deg, var(--color-white), var(--color-off-white));
    /*
         * Join the summary card directly to menu card.
         */
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
  }
  /* =====================================================
       MENU CARD
       NO SPACE BETWEEN SUMMARY AND MENU
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-card {
    flex: 1 0 auto;
    margin: 0;
    padding: 10px 12px 24px;
    background: var(--color-white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /*
     * Explicitly remove any inherited margins that could
     * create space between both cards.
     */
  .lj-profile-dashboard-sidebar .lj-profile-summary-card+.lj-profile-menu-card {
    margin-top: 0;
  }
  /* =====================================================
       SIDEBAR CLOSE BUTTON
    ====================================================== */
  .lj-profile-sidebar-close {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: 5;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-round);
    background: rgba(255, 255, 255, .94);
    color: var(--color-title);
    box-shadow: var(--shadow-small);
    transition: var(--transition-fast);
  }
  .lj-profile-sidebar-close:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: rotate(90deg);
  }
  .lj-profile-sidebar-close i {
    font-size: 18px;
  }
  /* =====================================================
       PROFILE AVATAR AREA
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-avatar-wrap {
    margin-bottom: 14px;
  }
  .lj-profile-dashboard-sidebar .lj-profile-avatar {
    width: 100px;
    height: 100px;
    border-width: 4px;
    box-shadow: 0 0 0 2px var(--color-secondary), 0 12px 30px rgba(1, 52, 130, .13);
  }
  .lj-profile-dashboard-sidebar .lj-profile-avatar-edit {
    width: 32px;
    height: 32px;
  }
  .lj-profile-dashboard-sidebar .lj-profile-summary-card h2 {
    font-size: 25px;
  }
  /* =====================================================
       MENU
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu {
    display: grid;
    gap: 3px;
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-link,
  .lj-profile-dashboard-sidebar .lj-profile-menu-dropdown-toggle,
  .lj-profile-dashboard-sidebar .lj-profile-add-listing,
  .lj-profile-dashboard-sidebar .lj-profile-logout {
    min-height: 50px;
    padding: 0 14px;
    border-radius: var(--radius-xs);
    font-size: 11px;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  }
  /* =====================================================
       NORMAL MENU HOVER / ACTIVE
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-link:hover,
  .lj-profile-dashboard-sidebar .lj-profile-menu-link.is-active,
  .lj-profile-dashboard-sidebar .lj-profile-menu-dropdown-toggle:hover,
  .lj-profile-dashboard-sidebar .lj-profile-menu-dropdown-toggle.is-open {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-link.is-active {
    position: relative;
    font-weight: var(--weight-bold);
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-link.is-active::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  }
  /* =====================================================
       MENU ICONS
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-link>i,
  .lj-profile-dashboard-sidebar .lj-profile-menu-dropdown-toggle span>i,
  .lj-profile-dashboard-sidebar .lj-profile-add-listing>i,
  .lj-profile-dashboard-sidebar .lj-profile-logout>i {
    font-size: 15px;
  }
  /* =====================================================
       LISTINGS SUBMENU
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-submenu {
    margin: 3px 0 6px 31px;
    padding: 3px 0 3px 11px;
    border-left: 1px solid var(--color-border);
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-submenu a {
    min-height: 42px;
    padding: 0 10px;
    border-radius: var(--radius-xs);
    transition: var(--transition-fast);
  }
  .lj-profile-dashboard-sidebar .lj-profile-menu-submenu a:hover {
    padding-left: 13px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  /* =====================================================
       MESSAGE BADGE
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-menu-badge {
    min-width: 24px;
    padding: 4px 7px;
    background: var(--color-primary);
    color: var(--color-white);
  }
  /* =====================================================
       ADD LISTING
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-add-listing {
    margin-top: 10px;
    background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    box-shadow: 0 10px 25px rgba(7, 104, 207, .17);
  }
  .lj-profile-dashboard-sidebar .lj-profile-add-listing:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(7, 104, 207, .22);
  }
  /* =====================================================
       LOGOUT
    ====================================================== */
  .lj-profile-dashboard-sidebar .lj-profile-logout {
    margin-top: 6px;
    background: rgba(7, 104, 207, .06);
    color: var(--color-danger);
  }
  .lj-profile-dashboard-sidebar .lj-profile-logout:hover {
    background: rgba(7, 104, 207, .11);
  }
  /* =====================================================
       FLOATING OPEN BUTTON
    ====================================================== */
  .lj-profile-mobile-trigger {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 99990;
    display: grid;
    width: 44px;
    height: 62px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: linear-gradient( 145deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    box-shadow: 8px 8px 25px rgba(1, 52, 130, .18);
    transform: translateY(-50%);
    transition: var(--transition-normal);
  }
  .lj-profile-mobile-trigger:hover {
    width: 49px;
  }
  .lj-profile-mobile-trigger i {
    font-size: 17px;
  }
  /*
     * Optional:
     * Hide the floating trigger while the drawer is open.
     */
  .lj-profile-dashboard-sidebar.is-open~.lj-profile-mobile-trigger {
    pointer-events: none;
  }
}

/************************EMAIL VERIFICATION******************/

/* =========================================================
   LINJUST EMAIL VERIFICATION PAGE
   Additional page styles only.
========================================================= */

.lj-email-verification-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: radial-gradient(circle at 12% 16%, rgba(7, 104, 207, .06), transparent 26rem), radial-gradient(circle at 88% 82%, rgba(31, 158, 252, .09), transparent 24rem), var(--color-off-white);
  font-family: var(--font-body);
}

.lj-email-verification-page *,
.lj-email-verification-page *::before,
.lj-email-verification-page *::after {
  box-sizing: border-box;
}

.lj-email-verification-page button,
.lj-email-verification-page input {
  font-family: var(--font-body);
}

.lj-email-verification-page button {
  cursor: pointer;
}

.lj-email-verification-page a {
  text-decoration: none;
}

/* =========================================================
   CENTERED SECTION
========================================================= */

.lj-email-verification-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - var(--mobile-bottom-height));
  padding: 70px 0;
}

.lj-email-verification-card {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  overflow: hidden;
  padding: 44px 38px 36px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

.lj-email-verification-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  content: "";
  background: var(--topbar-background);
}

.lj-email-verification-card::after {
  position: absolute;
  top: -110px;
  right: -110px;
  width: 220px;
  height: 220px;
  content: "";
  background: rgba(7, 104, 207, .045);
  border-radius: var(--radius-round);
  pointer-events: none;
}

/* =========================================================
   ICON AND HEADING
========================================================= */

.lj-email-verification-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 22px;
  color: var(--color-white);
  background: linear-gradient( 145deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 10px rgba(7, 104, 207, .07), 0 18px 35px rgba(7, 104, 207, .22);
  font-size: 32px;
}

.lj-email-verification-heading {
  position: relative;
  z-index: 2;
}

.lj-email-verification-heading>span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-email-verification-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(34px, 6vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.lj-email-verification-heading p {
  max-width: 440px;
  margin: 17px auto 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.75;
}

.lj-email-verification-heading strong {
  color: var(--color-title);
}

/* =========================================================
   VERIFICATION FORM
========================================================= */

.lj-email-verification-form {
  margin-top: 30px;
}

.lj-email-code-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.lj-email-code-input {
  width: 100%;
  min-width: 0;
  height: 64px;
  padding: 0;
  color: var(--color-title);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: 0;
  font-size: 26px;
  font-weight: var(--weight-bold);
  text-align: center;
  transition: var(--transition-normal);
}

.lj-email-code-input:hover {
  border-color: rgba(7, 104, 207, .28);
}

.lj-email-code-input:focus,
.lj-email-code-input.is-filled {
  color: var(--color-primary);
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
  transform: translateY(-2px);
}

.lj-email-code-input.is-invalid {
  color: var(--color-danger);
  border-color: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
}

.lj-email-verification-message {
  display: none;
  margin-top: 15px;
  padding: 11px 13px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  line-height: 1.5;
}

.lj-email-verification-message.is-error {
  display: block;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

.lj-email-verification-message.is-success {
  display: block;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

.lj-email-verification-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  gap: 9px;
  margin-top: 20px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 15px 30px rgba(7, 104, 207, .20);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-email-verification-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .27);
}

.lj-email-verification-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   COUNTDOWN AND RESEND
========================================================= */

.lj-email-verification-timer-wrap {
  margin-top: 23px;
}

.lj-email-verification-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text);
  font-size: 10px;
}

.lj-email-verification-timer i {
  color: var(--color-primary);
}

.lj-email-verification-timer strong {
  color: var(--color-title);
  font-size: 11px;
  letter-spacing: .04em;
}

.lj-email-resend-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 8px;
  padding: 0 15px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px dashed rgba(7, 104, 207, .28);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-email-resend-button[hidden] {
  display: none;
}

.lj-email-resend-button:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   HELP TEXT
========================================================= */

.lj-email-verification-help {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.lj-email-verification-help p {
  margin: 0 0 11px;
  color: var(--color-muted);
  font-size: 9px;
  line-height: 1.6;
}

.lj-email-verification-help a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:767.98px) {
  .lj-email-verification-section {
    min-height: calc(100vh - var(--mobile-bottom-height));
    padding: 35px 0 90px;
  }
  .lj-email-verification-card {
    padding: 36px 20px 28px;
    border-radius: var(--radius-md);
  }
  .lj-email-verification-icon {
    width: 74px;
    height: 74px;
    font-size: 27px;
  }
  .lj-email-code-grid {
    gap: 7px;
  }
  .lj-email-code-input {
    height: 55px;
    font-size: 22px;
  }
}

@media(max-width:430px) {
  .lj-email-verification-card {
    padding-right: 15px;
    padding-left: 15px;
  }
  .lj-email-code-grid {
    gap: 5px;
  }
  .lj-email-code-input {
    height: 50px;
    border-radius: var(--radius-xs);
    font-size: 20px;
  }
  .lj-email-verification-heading p {
    font-size: 11px;
  }
}

@media(max-width:360px) {
  .lj-email-code-grid {
    gap: 4px;
  }
  .lj-email-code-input {
    height: 45px;
    font-size: 18px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-email-verification-page *,
  .lj-email-verification-page *::before,
  .lj-email-verification-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/*****************FORGOT PASSWORD************/

/* =========================================================
   LINJUST FORGOT PASSWORD PAGE
   Additional page styles only.
========================================================= */

.lj-forgot-password-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: radial-gradient(circle at 12% 18%, rgba(7, 104, 207, .06), transparent 26rem), radial-gradient(circle at 88% 82%, rgba(31, 158, 252, .09), transparent 24rem), var(--color-off-white);
  font-family: var(--font-body);
}

.lj-forgot-password-page *,
.lj-forgot-password-page *::before,
.lj-forgot-password-page *::after {
  box-sizing: border-box;
}

.lj-forgot-password-page button,
.lj-forgot-password-page input {
  font-family: var(--font-body);
}

.lj-forgot-password-page button {
  cursor: pointer;
}

.lj-forgot-password-page a {
  text-decoration: none;
}

/* =========================================================
   CENTERED SECTION
========================================================= */

.lj-forgot-password-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - var(--mobile-bottom-height));
  padding: 70px 0;
}

.lj-forgot-password-card {
  position: relative;
  width: min(540px, 100%);
  margin: 0 auto;
  overflow: hidden;
  padding: 44px 38px 34px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

.lj-forgot-password-card::before {
  position: absolute;
  top: -110px;
  right: -110px;
  width: 220px;
  height: 220px;
  content: "";
  background: rgba(7, 104, 207, .045);
  border-radius: var(--radius-round);
  pointer-events: none;
}

.lj-forgot-password-card::after {
  position: absolute;
  bottom: -120px;
  left: -120px;
  width: 240px;
  height: 240px;
  content: "";
  background: rgba(31, 158, 252, .06);
  border-radius: var(--radius-round);
  pointer-events: none;
}

.lj-forgot-password-accent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--topbar-background);
}

/* =========================================================
   ICON
========================================================= */

.lj-forgot-password-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 22px;
  color: var(--color-white);
  background: linear-gradient( 145deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 10px rgba(7, 104, 207, .07), 0 18px 35px rgba(7, 104, 207, .22);
  font-size: 30px;
}

/* =========================================================
   HEADING
========================================================= */

.lj-forgot-password-heading {
  position: relative;
  z-index: 2;
}

.lj-forgot-password-heading>span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-forgot-password-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(34px, 6vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.lj-forgot-password-heading p {
  max-width: 430px;
  margin: 17px auto 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   FORM
========================================================= */

.lj-forgot-password-form {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 17px;
  margin-top: 30px;
  text-align: left;
}

.lj-forgot-password-field {
  display: grid;
  gap: 8px;
}

.lj-forgot-password-field>span {
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.lj-forgot-password-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 56px;
  padding: 0 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

.lj-forgot-password-input-wrap:focus-within {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
  transform: translateY(-1px);
}

.lj-forgot-password-input-wrap>i {
  color: var(--color-primary);
  font-size: 15px;
}

.lj-forgot-password-input-wrap input {
  width: 100%;
  height: 54px;
  padding: 0 12px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.lj-forgot-password-input-wrap input::placeholder {
  color: var(--color-muted);
}

.lj-forgot-password-input-wrap.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
}

.lj-forgot-password-error {
  min-height: 14px;
  color: var(--color-danger);
  font-size: 9px;
}

/* =========================================================
   FORM MESSAGE
========================================================= */

.lj-forgot-password-message {
  display: none;
  padding: 11px 13px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  line-height: 1.5;
}

.lj-forgot-password-message.is-error {
  display: block;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

.lj-forgot-password-message.is-success {
  display: block;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-forgot-password-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  gap: 9px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 15px 30px rgba(7, 104, 207, .20);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-forgot-password-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .27);
}

.lj-forgot-password-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   LOGIN LINK
========================================================= */

.lj-forgot-password-login {
  position: relative;
  z-index: 2;
  margin-top: 21px;
}

.lj-forgot-password-login a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  transition: var(--transition-fast);
}

.lj-forgot-password-login a:hover {
  gap: 11px;
}

/* =========================================================
   SECURITY NOTE
========================================================= */

.lj-forgot-password-note {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  text-align: left;
  border-top: 1px solid var(--color-border);
}

.lj-forgot-password-note i {
  margin-top: 1px;
  color: var(--color-secondary-dark);
}

.lj-forgot-password-note p {
  margin: 0;
  color: var(--color-muted);
  font-size: 9px;
  line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:767.98px) {
  .lj-forgot-password-section {
    min-height: calc(100vh - var(--mobile-bottom-height));
    padding: 35px 0 90px;
  }
  .lj-forgot-password-card {
    padding: 36px 20px 28px;
    border-radius: var(--radius-md);
  }
  .lj-forgot-password-icon {
    width: 74px;
    height: 74px;
    font-size: 26px;
  }
}

@media(max-width:430px) {
  .lj-forgot-password-card {
    padding-right: 15px;
    padding-left: 15px;
  }
  .lj-forgot-password-heading p {
    font-size: 11px;
  }
  .lj-forgot-password-input-wrap {
    min-height: 52px;
  }
  .lj-forgot-password-input-wrap input {
    height: 50px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-forgot-password-page *,
  .lj-forgot-password-page *::before,
  .lj-forgot-password-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/*********************************PASSWORD RESET************************/

/* =========================================================
   LINJUST PASSWORD RESET PAGE
   Additional page styles only.
========================================================= */

.lj-password-reset-page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: radial-gradient(circle at 12% 18%, rgba(7, 104, 207, .06), transparent 26rem), radial-gradient(circle at 88% 82%, rgba(31, 158, 252, .09), transparent 24rem), var(--color-off-white);
  font-family: var(--font-body);
}

.lj-password-reset-page *,
.lj-password-reset-page *::before,
.lj-password-reset-page *::after {
  box-sizing: border-box;
}

.lj-password-reset-page button,
.lj-password-reset-page input {
  font-family: var(--font-body);
}

.lj-password-reset-page button {
  cursor: pointer;
}

.lj-password-reset-page a {
  text-decoration: none;
}

/* =========================================================
   CENTERED SECTION
========================================================= */

.lj-password-reset-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - var(--mobile-bottom-height));
  padding: 70px 0;
}

.lj-password-reset-card {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  overflow: hidden;
  padding: 44px 38px 34px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

.lj-password-reset-card::before {
  position: absolute;
  top: -110px;
  right: -110px;
  width: 220px;
  height: 220px;
  content: "";
  background: rgba(7, 104, 207, .045);
  border-radius: var(--radius-round);
  pointer-events: none;
}

.lj-password-reset-card::after {
  position: absolute;
  bottom: -120px;
  left: -120px;
  width: 240px;
  height: 240px;
  content: "";
  background: rgba(31, 158, 252, .06);
  border-radius: var(--radius-round);
  pointer-events: none;
}

.lj-password-reset-accent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--topbar-background);
}

/* =========================================================
   ICON
========================================================= */

.lj-password-reset-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 22px;
  color: var(--color-white);
  background: linear-gradient( 145deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-round);
  box-shadow: 0 0 0 10px rgba(7, 104, 207, .07), 0 18px 35px rgba(7, 104, 207, .22);
  font-size: 30px;
}

/* =========================================================
   HEADING
========================================================= */

.lj-password-reset-heading {
  position: relative;
  z-index: 2;
}

.lj-password-reset-heading>span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-password-reset-heading h1 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(34px, 6vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.lj-password-reset-heading p {
  max-width: 450px;
  margin: 17px auto 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.75;
}

/* =========================================================
   FORM
========================================================= */

.lj-password-reset-form {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 17px;
  margin-top: 30px;
  text-align: left;
}

.lj-password-reset-field {
  display: grid;
  gap: 8px;
}

.lj-password-reset-field>span {
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.lj-password-reset-input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 56px;
  padding: 0 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

.lj-password-reset-input-wrap:focus-within {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
  transform: translateY(-1px);
}

.lj-password-reset-input-wrap>i {
  color: var(--color-primary);
  font-size: 15px;
}

.lj-password-reset-input-wrap input {
  width: 100%;
  height: 54px;
  padding: 0 12px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.lj-password-reset-input-wrap input::placeholder {
  color: var(--color-muted);
}

.lj-password-reset-input-wrap.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .07);
}

.lj-password-reset-input-wrap.is-valid {
  border-color: var(--color-success);
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .06);
}

.lj-password-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-round);
}

.lj-password-toggle:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lj-password-reset-error {
  min-height: 14px;
  color: var(--color-danger);
  font-size: 9px;
}

/* =========================================================
   PASSWORD MATCH STATUS
========================================================= */

.lj-password-match-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 10px;
}

.lj-password-match-status.is-matching {
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .18);
}

.lj-password-match-status.is-not-matching {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .18);
}

/* =========================================================
   PASSWORD STRENGTH
========================================================= */

.lj-password-strength {
  display: grid;
  gap: 8px;
}

.lj-password-strength-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
}

.lj-password-strength-heading span {
  color: var(--color-text);
}

.lj-password-strength-heading strong {
  color: var(--color-title);
}

.lj-password-strength-track {
  width: 100%;
  height: 7px;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
}

.lj-password-strength-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-danger);
  border-radius: inherit;
  transition: var(--transition-normal);
}

/* =========================================================
   PASSWORD REQUIREMENTS
========================================================= */

.lj-password-requirements {
  padding: 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-password-requirements p {
  margin: 0 0 10px;
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.lj-password-requirements ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lj-password-requirements li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text);
  font-size: 9px;
}

.lj-password-requirements li i {
  color: var(--color-muted);
  font-size: 7px;
}

.lj-password-requirements li.is-valid {
  color: var(--color-success);
}

.lj-password-requirements li.is-valid i {
  color: var(--color-success);
}

/* =========================================================
   FORM MESSAGE
========================================================= */

.lj-password-reset-message {
  display: none;
  padding: 11px 13px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  line-height: 1.5;
}

.lj-password-reset-message.is-error {
  display: block;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

.lj-password-reset-message.is-success {
  display: block;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border: 1px solid rgba(7, 104, 207, .17);
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.lj-password-reset-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  gap: 9px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 15px 30px rgba(7, 104, 207, .20);
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal);
}

.lj-password-reset-submit:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(7, 104, 207, .27);
}

.lj-password-reset-submit:disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.25);
}

/* =========================================================
   LOGIN LINK AND SECURITY NOTE
========================================================= */

.lj-password-reset-login {
  position: relative;
  z-index: 2;
  margin-top: 21px;
}

.lj-password-reset-login a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  transition: var(--transition-fast);
}

.lj-password-reset-login a:hover {
  gap: 11px;
}

.lj-password-reset-note {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  text-align: left;
  border-top: 1px solid var(--color-border);
}

.lj-password-reset-note i {
  margin-top: 1px;
  color: var(--color-secondary-dark);
}

.lj-password-reset-note p {
  margin: 0;
  color: var(--color-muted);
  font-size: 9px;
  line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:767.98px) {
  .lj-password-reset-section {
    min-height: calc(100vh - var(--mobile-bottom-height));
    padding: 35px 0 90px;
  }
  .lj-password-reset-card {
    padding: 36px 20px 28px;
    border-radius: var(--radius-md);
  }
  .lj-password-reset-icon {
    width: 74px;
    height: 74px;
    font-size: 26px;
  }
  .lj-password-requirements ul {
    grid-template-columns: 1fr;
  }
}

@media(max-width:430px) {
  .lj-password-reset-card {
    padding-right: 15px;
    padding-left: 15px;
  }
  .lj-password-reset-heading p {
    font-size: 11px;
  }
  .lj-password-reset-input-wrap {
    min-height: 52px;
  }
  .lj-password-reset-input-wrap input {
    height: 50px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-password-reset-page *,
  .lj-password-reset-page *::before,
  .lj-password-reset-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/***************************SIGNUP RULES******************/

/* =========================================================
   SIGNUP PASSWORD REQUIREMENTS
========================================================= */

.lj-signup-password-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}

.lj-signup-password-rules li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-text);
  font-size: 10px;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  transition: var(--transition-fast);
}

.lj-signup-password-rules li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  content: "\f00d";
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 900;
  transition: var(--transition-normal);
}

/* Requirement successfully met */

.lj-signup-password-rules li.is-valid {
  color: var(--color-success);
}

.lj-signup-password-rules li.is-valid::before {
  content: "\f00c";
  color: var(--color-white);
  background: var(--color-success);
  border-color: var(--color-success);
  box-shadow: 0 5px 14px rgba(7, 104, 207, .18);
  transform: scale(1.05);
}

/* Optional invalid state */

.lj-signup-password-rules li.is-invalid {
  color: var(--color-danger);
}

.lj-signup-password-rules li.is-invalid::before {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-color: rgba(7, 104, 207, .22);
}

/* Password strength bar */

.lj-signup-password-strength {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  margin-top: 10px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
}

.lj-signup-password-strength span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-danger);
  border-radius: inherit;
  transition: width var(--transition-normal), background-color var(--transition-normal);
}

/* Mobile responsiveness */

@media(max-width:575.98px) {
  .lj-signup-password-rules {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .lj-signup-password-rules li {
    font-size: 9px;
  }
  .lj-signup-password-rules li::before {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    font-size: 7px;
  }
}

/* =========================================================
   PROFILE DROPDOWN USER SUMMARY
========================================================= */

.lj-profile-dropdown-user {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 16px;
  background: linear-gradient( 135deg, var(--color-primary-soft), var(--color-white));
  border-bottom: 1px solid var(--color-border);
}

.lj-profile-dropdown-code {
  display: block;
  color: var(--color-text);
  font-size: 9px;
  line-height: 1.4;
}

.lj-profile-dropdown-code strong {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
}

.lj-profile-dropdown-name {
  overflow: hidden;
  color: var(--color-title);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-profile-dropdown-email {
  overflow: hidden;
  color: var(--color-text);
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-profile-dropdown-divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

.lj-profile-dropdown .lj-profile-logout {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  gap: 10px;
  padding: 10px 16px;
  color: var(--color-danger);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  transition: var(--transition-fast);
}

.lj-profile-dropdown .lj-profile-logout i {
  font-size: 17px;
}

.lj-profile-dropdown .lj-profile-logout:hover {
  color: var(--color-white);
  background: var(--color-danger);
}

.lj-profile-dropdown .lj-profile-logout:disabled {
  opacity: .7;
  cursor: not-allowed;
}

/*******************************PROFILE USAGE*********************************/

.lj-profile-stepper {
  position: relative;
  margin: 0 0 30px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-small)
}

.lj-profile-stepper-track {
  position: absolute;
  top: 42px;
  right: 56px;
  left: 56px;
  height: 4px;
  overflow: hidden;
  background: var(--color-surface)
}

.lj-profile-stepper-track span {
  display: block;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), var(--color-secondary));
  transition: var(--transition-normal)
}

.lj-profile-stepper-items {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px
}

.lj-profile-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--color-muted);
  background: transparent;
  border: 0;
  font-family: var(--font-body)
}

.lj-profile-step>span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--color-text);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--weight-bold);
  transition: var(--transition-normal)
}

.lj-profile-step small {
  font-size: 10px;
  font-weight: var(--weight-semibold)
}

.lj-profile-step.is-active>span,
.lj-profile-step.is-complete>span {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 8px 22px rgba(7, 104, 207, .2)
}

.lj-profile-stepper-percentage {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
  margin-top: 18px
}

.lj-profile-stepper-percentage strong {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 24px
}

.lj-profile-step-panel {
  animation: ljStep .35s ease
}

@keyframes ljStep {
  from {
    opacity: 0;
    transform: translateY(12px)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.lj-profile-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px
}

.lj-profile-upload-field {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.lj-profile-upload-field.lj-profile-field-full {
  grid-column: 1/-1
}

.lj-profile-upload-title {
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold)
}

.lj-profile-upload-title em {
  color: var(--color-danger);
  font-style: normal
}

.lj-profile-dropzone {
  position: relative;
  display: flex;
  min-height: 190px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  overflow: hidden;
  background: radial-gradient(circle, var(--color-primary-soft), var(--color-white) 68%);
  border: 1px dashed var(--color-secondary-dark);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-normal)
}

.lj-profile-dropzone:hover,
.lj-profile-dropzone.is-dragging {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-small)
}

.lj-profile-dropzone.has-file {
  border-style: solid;
  border-color: var(--color-success)
}

.lj-profile-dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer
}

.lj-profile-dropzone-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-small)
}

.lj-profile-dropzone strong {
  color: var(--color-title);
  font-size: 12px
}

.lj-profile-dropzone small {
  color: var(--color-text);
  font-size: 9px
}

.lj-profile-preview-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border)
}

.lj-profile-preview-item img,
.lj-profile-preview-item video,
.lj-profile-preview-file-icon {
  width: 72px;
  height: 62px;
  object-fit: cover;
  background: var(--color-dark)
}

.lj-profile-preview-file-icon {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-white)
}

.lj-profile-preview-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px
}

.lj-profile-preview-meta strong {
  overflow: hidden;
  color: var(--color-title);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lj-profile-preview-meta small {
  color: var(--color-text);
  font-size: 9px
}

.lj-profile-preview-remove {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--color-danger);
  background: var(--color-white);
  border: 1px solid var(--color-border)
}

.lj-profile-field-error {
  display: block;
  min-height: 14px;
  color: var(--color-danger);
  font-size: 9px
}

.is-invalid {
  border-color: var(--color-danger) !important
}

.lj-profile-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border)
}

.lj-profile-step-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold)
}

.lj-profile-step-button.next {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-profile-submit-message {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 4px solid transparent;
  font-size: 11px
}

.lj-profile-submit-message.is-success {
  display: block;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-left-color: var(--color-success)
}

.lj-profile-submit-message.is-error {
  display: block;
  color: var(--color-danger);
  background: rgba(7, 104, 207, .08);
  border-left-color: var(--color-danger)
}

@media(max-width:767.98px) {
  .lj-profile-stepper {
    padding: 18px 14px
  }
  .lj-profile-stepper-track {
    top: 36px;
    right: 30px;
    left: 30px
  }
  .lj-profile-stepper-items {
    gap: 4px
  }
  .lj-profile-step>span {
    width: 32px;
    height: 32px;
    font-size: 10px
  }
  .lj-profile-step small {
    font-size: 8px
  }
  .lj-profile-upload-grid {
    grid-template-columns: 1fr
  }
  .lj-profile-upload-field.lj-profile-field-full {
    grid-column: auto
  }
  .lj-profile-step-actions {
    flex-wrap: wrap
  }
  .lj-profile-step-button,
  .lj-profile-save-button {
    width: 100%;
    flex: 1 1 100%
  }
}

/*====================================================
PROFILE REVIEW NOTICE
====================================================*/

.lj-profile-review-notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 26px 28px;
  margin-top: 30px;
  overflow: hidden;
  background: radial-gradient(circle at top right, rgba(31, 158, 252, .16), transparent 38%), linear-gradient( 135deg, rgba(7, 104, 207, .05), rgba(31, 158, 252, .10));
  border: 1px solid rgba(31, 158, 252, .30);
  border-left: 6px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small);
  transition: var(--transition-normal);
}

.lj-profile-review-notice:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}

/* Decorative glow */

.lj-profile-review-notice::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -70px;
  top: -70px;
  border-radius: 50%;
  background: rgba(31, 158, 252, .10);
  pointer-events: none;
}

/* Shield Icon */

.lj-profile-review-notice>i {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--color-secondary);
  background: linear-gradient( 145deg, rgba(31, 158, 252, .18), rgba(7, 104, 207, .08));
  border: 1px solid rgba(31, 158, 252, .35);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(31, 158, 252, .06);
  animation: ljProfileShieldPulse 2.6s infinite;
}

/* Content */

.lj-profile-review-notice div {
  flex: 1;
}

.lj-profile-review-notice strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-title);
}

.lj-profile-review-notice p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
}

/* Animated Gold Line */

.lj-profile-review-notice::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient( 90deg, transparent, var(--color-secondary), transparent);
  animation: ljProfileReviewLine 3s linear infinite;
}

/*====================================================
ANIMATION
====================================================*/

@keyframes ljProfileShieldPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(31, 158, 252, .35);
  }
  70% {
    transform: scale(1.06);
    box-shadow: 0 0 0 14px rgba(31, 158, 252, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(31, 158, 252, 0);
  }
}

@keyframes ljProfileReviewLine {
  from {
    background-position: -250px;
  }
  to {
    background-position: 250px;
  }
}

/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:767px) {
  .lj-profile-review-notice {
    padding: 22px 18px;
    gap: 15px;
  }
  .lj-profile-review-notice>i {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }
  .lj-profile-review-notice strong {
    font-size: 22px;
  }
  .lj-profile-review-notice p {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* Pending Verification */

.lj-profile-verification.is-pending {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border-radius: var(--radius-pill);
  background: #F6FBFD;
  color: #0687F1;
  border: 1px solid rgba(6, 135, 241, .18);
  font-size: .92rem;
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-small);
}

.lj-profile-verification.is-pending i {
  color: #1F9EFC;
  animation: ljPendingPulse 1.8s infinite;
}

@keyframes ljPendingPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: .7;
  }
}

/*=========================================================
ACCOUNT STATUS
=========================================================*/

.lj-profile-account-state {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border-radius: var(--radius-pill);
  font-size: .9rem;
  font-weight: var(--weight-semibold);
  border: 1px solid transparent;
  box-shadow: var(--shadow-small);
}

.lj-profile-state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

/*=====================================
ACTIVE
=====================================*/

.lj-profile-account-state.is-active {
  background: #F6FBFD;
  color: #0768CF;
  border-color: rgba(7, 104, 207, .18);
}

.lj-profile-account-state.is-active .lj-profile-state-dot {
  background: #1F9EFC;
}

.lj-profile-account-state.is-active .lj-profile-state-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(31, 158, 252, .35);
  animation: ljAccountPulse 2s infinite;
}

/*=====================================
PENDING
=====================================*/

.lj-profile-account-state.is-pending {
  background: #F6FBFD;
  color: #0687F1;
  border-color: rgba(31, 158, 252, .22);
}

.lj-profile-account-state.is-pending .lj-profile-state-dot {
  background: #1F9EFC;
}

.lj-profile-account-state.is-pending .lj-profile-state-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(31, 158, 252, .35);
  animation: ljAccountPulse 2s infinite;
}

/*=====================================
INACTIVE
=====================================*/

.lj-profile-account-state.is-inactive {
  background: #D5EAF8;
  color: #082E5C;
  border-color: #6F8DA8;
}

.lj-profile-account-state.is-inactive .lj-profile-state-dot {
  background: #355A7D;
}

.lj-profile-account-state.is-inactive .lj-profile-state-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(53, 90, 125, .28);
  animation: ljAccountPulse 2s infinite;
}

/*=====================================
SUSPENDED
=====================================*/

.lj-profile-account-state.is-suspended {
  background: #D5EAF8;
  color: #0768CF;
  border-color: rgba(7, 104, 207, .18);
}

.lj-profile-account-state.is-suspended .lj-profile-state-dot {
  background: #0687F1;
}

.lj-profile-account-state.is-suspended .lj-profile-state-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(6, 135, 241, .35);
  animation: ljAccountPulse 2s infinite;
}

/*=====================================
Pulse Animation
=====================================*/

@keyframes ljAccountPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/******************************subscription**************************/

/* =========================================================
   TRANSACTION ICON
========================================================= */

.lj-dashboard-transaction-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: linear-gradient(145deg, var(--color-primary-soft), var(--color-white));
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.lj-dashboard-transaction-icon i {
  font-size: 18px;
}

.lj-dashboard-transaction-gateway,
.lj-dashboard-transaction-days,
.lj-dashboard-transaction-time {
  display: block;
}

.lj-dashboard-transaction-days,
.lj-dashboard-transaction-time {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 11px;
}

.lj-dashboard-transaction-empty {
  padding: 55px 20px !important;
  text-align: center;
}

.lj-dashboard-transaction-empty>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lj-dashboard-transaction-empty i {
  margin-bottom: 12px;
  color: var(--color-primary);
  font-size: 30px;
}

.lj-dashboard-transaction-empty strong {
  color: var(--color-title);
  font-size: 16px;
  font-weight: var(--weight-semibold);
}

.lj-dashboard-transaction-empty p {
  margin: 5px 0 0;
  color: var(--color-text);
  font-size: 12px;
}

/* =========================================================
   TRANSACTION MODAL
========================================================= */

.payment-transaction-modal {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.payment-transaction-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   BACKDROP
========================================================= */

.payment-transaction-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 52, 130, .72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* =========================================================
   MODAL DIALOG
========================================================= */

.payment-transaction-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  transform: translateY(20px) scale(.985);
  transition: var(--transition-normal);
}

.payment-transaction-modal.is-open .payment-transaction-dialog {
  transform: translateY(0) scale(1);
}

/* =========================================================
   MODAL CONTENT
========================================================= */

.payment-transaction-content {
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

/* =========================================================
   MODAL HEADER
========================================================= */

.payment-transaction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  color: var(--color-white);
  background: var(--topbar-background);
}

.payment-transaction-header>div {
  min-width: 0;
}

.payment-transaction-header span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-secondary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.payment-transaction-header h3 {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 27px);
  font-weight: var(--weight-bold);
  line-height: 1.15;
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.payment-transaction-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-white);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-round);
  cursor: pointer;
  transition: var(--transition-fast);
}

.payment-transaction-close:hover {
  color: var(--color-primary);
  background: var(--color-white);
  transform: rotate(90deg);
}

.payment-transaction-close i {
  font-size: 18px;
}

/* =========================================================
   MODAL BODY
========================================================= */

.payment-transaction-body {
  max-height: calc(92vh - 82px);
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-white);
}

/* Custom scrollbar */

.payment-transaction-body::-webkit-scrollbar {
  width: 6px;
}

.payment-transaction-body::-webkit-scrollbar-track {
  background: var(--color-surface);
}

.payment-transaction-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.payment-transaction-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* =========================================================
   LOADING STATE
========================================================= */

.payment-transaction-loading {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text);
  text-align: center;
}

.payment-transaction-loading i {
  color: var(--color-primary);
  font-size: 26px;
}

.payment-transaction-loading span {
  font-size: 12px;
}

/* =========================================================
   TRANSACTION SUMMARY
========================================================= */

.payment-transaction-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.payment-transaction-summary>div {
  min-width: 0;
}

.payment-transaction-summary small {
  color: var(--color-secondary-dark);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-transaction-summary h4 {
  margin: 5px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-bold);
  line-height: 1.15;
}

.payment-transaction-summary p {
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.6;
}

.payment-transaction-summary-amount {
  text-align: right;
  white-space: nowrap;
}

.payment-transaction-summary-amount strong {
  display: block;
  margin-top: 5px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(23px, 4vw, 32px);
  font-weight: var(--weight-bold);
}

/* =========================================================
   TRANSACTION DETAILS GRID
========================================================= */

.payment-transaction-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.payment-transaction-detail {
  min-width: 0;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.payment-transaction-detail:hover {
  border-color: rgba(7, 104, 207, .25);
  box-shadow: var(--shadow-small);
  transform: translateY(-2px);
}

.payment-transaction-detail span {
  display: block;
  margin-bottom: 5px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.payment-transaction-detail strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--color-title);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}

/* =========================================================
   FEATURE HEADING
========================================================= */

.payment-transaction-feature-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.payment-transaction-feature-heading>div {
  min-width: 0;
}

.payment-transaction-feature-heading span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-transaction-feature-heading h4 {
  margin: 3px 0 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   PLAN FEATURES
========================================================= */

.payment-transaction-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.payment-transaction-feature {
  min-width: 0;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.payment-transaction-feature:hover {
  border-color: rgba(7, 104, 207, .22);
  box-shadow: var(--shadow-small);
}

.payment-transaction-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.payment-transaction-feature-top strong {
  min-width: 0;
  color: var(--color-title);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

.payment-transaction-feature-top i {
  flex: 0 0 auto;
  color: var(--color-success);
  font-size: 16px;
}

/* =========================================================
   FEATURE STATISTICS
========================================================= */

.payment-transaction-feature-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.payment-transaction-feature-stat {
  min-width: 0;
  padding: 8px;
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xs);
}

.payment-transaction-feature-stat span {
  display: block;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 9px;
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.payment-transaction-feature-stat strong {
  display: block;
  margin-top: 2px;
  color: var(--color-title);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

/* =========================================================
   STATUS BADGES
========================================================= */

.payment-transaction-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: capitalize;
}

.payment-transaction-status.is-active,
.payment-transaction-status.is-success,
.payment-transaction-status.is-paid {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10);
}

.payment-transaction-status.is-pending {
  color: var(--color-secondary-dark);
  background: rgba(31, 158, 252, .14);
}

.payment-transaction-status.is-failed,
.payment-transaction-status.is-expired,
.payment-transaction-status.is-cancelled {
  color: var(--color-danger);
  background: rgba(7, 104, 207, .09);
}

/* =========================================================
   TABLE ACTION VIEW BUTTON
========================================================= */

.lj-dashboard-table-actions .payment-transaction-view {
  display: grid;
  place-items: center;
  transition: var(--transition-fast);
}

.lj-dashboard-table-actions .payment-transaction-view:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* =========================================================
   TABLE TRANSACTION TEXT
========================================================= */

.lj-dashboard-transaction-gateway {
  margin-top: 2px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-medium);
}

.lj-dashboard-transaction-days {
  color: var(--color-muted);
}

.lj-dashboard-transaction-time {
  color: var(--color-muted);
}

/* =========================================================
   TABLE ICON HOVER
========================================================= */

tr:hover .lj-dashboard-transaction-icon {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:767.98px) {
  .payment-transaction-modal {
    padding: 12px;
  }
  .payment-transaction-dialog {
    max-width: 680px;
  }
  .payment-transaction-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .payment-transaction-features {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  .payment-transaction-modal {
    align-items: flex-end;
    padding: 0;
  }
  .payment-transaction-dialog {
    width: 100%;
    max-width: none;
    max-height: 96dvh;
  }
  .payment-transaction-content {
    max-height: 96dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .payment-transaction-header {
    gap: 12px;
    padding: 17px 16px;
  }
  .payment-transaction-header h3 {
    font-size: 22px;
  }
  .payment-transaction-close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .payment-transaction-body {
    max-height: calc( 96dvh - 75px - env(safe-area-inset-bottom));
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .payment-transaction-summary {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 15px;
  }
  .payment-transaction-summary-amount {
    padding-top: 12px;
    text-align: left;
    border-top: 1px solid var(--color-border);
  }
  .payment-transaction-details-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .payment-transaction-feature-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .payment-transaction-feature-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:375px) {
  .payment-transaction-header {
    padding: 14px 13px;
  }
  .payment-transaction-header span {
    font-size: 8px;
  }
  .payment-transaction-header h3 {
    font-size: 19px;
  }
  .payment-transaction-body {
    padding: 13px 13px calc(13px + env(safe-area-inset-bottom));
  }
  .payment-transaction-summary,
  .payment-transaction-detail,
  .payment-transaction-feature {
    padding: 12px;
  }
  .payment-transaction-feature-stat {
    padding: 7px 4px;
  }
  .payment-transaction-feature-stat span {
    font-size: 8px;
  }
  .payment-transaction-feature-stat strong {
    font-size: 12px;
  }
}

/******************************************** subscription payment*********************/

/* =========================================================
   PAYMENT MODAL
========================================================= */

.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.payment-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   MODAL BACKDROP
========================================================= */

.payment-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 52, 130, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* =========================================================
   MODAL DIALOG
========================================================= */

.payment-modal-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  max-height: 94vh;
  transform: translateY(18px) scale(0.98);
  transition: var(--transition-normal);
}

.payment-modal.is-open .payment-modal-dialog {
  transform: translateY(0) scale(1);
}

/* =========================================================
   MODAL CONTENT
========================================================= */

.payment-modal-content {
  width: 100%;
  max-height: 94vh;
  overflow: hidden;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
}

/* =========================================================
   MODAL HEADER
========================================================= */

.payment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  color: var(--color-white);
  background: var(--topbar-background);
}

.payment-modal-header>div {
  min-width: 0;
}

.payment-modal-header small {
  display: block;
  margin-bottom: 4px;
  color: var(--color-secondary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.payment-modal-header h3 {
  margin: 4px 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp( 21px, 3vw, 28px);
  font-weight: var(--weight-bold);
  line-height: 1.15;
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.payment-modal-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-round);
  font-size: 22px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.payment-modal-close:hover {
  color: var(--color-primary);
  background: var(--color-white);
  transform: rotate(90deg);
}

/* =========================================================
   MODAL BODY
========================================================= */

.payment-modal-body {
  max-height: calc( 94vh - 82px);
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-white);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

.payment-modal-body::-webkit-scrollbar {
  width: 6px;
}

.payment-modal-body::-webkit-scrollbar-track {
  background: var(--color-surface);
}

.payment-modal-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.payment-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* =========================================================
   PLAN SUMMARY
========================================================= */

.payment-plan-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.payment-plan-summary>div {
  min-width: 0;
}

.payment-plan-summary span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.payment-plan-summary h4 {
  margin: 5px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-bold);
  line-height: 1.15;
}

.payment-plan-summary p {
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
   PLAN PRICE
========================================================= */

.payment-plan-price {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.payment-plan-price span {
  display: inline;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-semibold);
}

.payment-plan-price strong {
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp( 26px, 4vw, 34px);
  font-weight: var(--weight-bold);
}

/* =========================================================
   PLAN FEATURES
========================================================= */

.payment-plan-features {
  margin: 14px 0 20px;
}

.payment-plan-features ul {
  display: grid;
  grid-template-columns: repeat( 2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.6;
}

.payment-plan-features i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-success);
  font-size: 15px;
}

/* =========================================================
   FORM GRID
========================================================= */

.payment-form-grid {
  display: grid;
  grid-template-columns: repeat( 2, minmax(0, 1fr));
  gap: 12px;
}

/* =========================================================
   FORM FIELD
========================================================= */

.payment-field {
  display: block;
  margin-bottom: 14px;
}

.payment-field>span {
  display: block;
  margin-bottom: 6px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.payment-field input,
.payment-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  outline: none;
  font-family: var(--font-body);
  font-size: 12px;
  transition: var(--transition-fast);
}

.payment-field input::placeholder {
  color: var(--color-muted);
}

.payment-field input:hover,
.payment-field select:hover {
  border-color: rgba(7, 104, 207, 0.25);
}

.payment-field input:focus,
.payment-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(7, 104, 207, 0.07);
}

.payment-field input[readonly] {
  color: var(--color-text);
  background: var(--color-surface);
  cursor: default;
}

.payment-field-full {
  grid-column: 1 / -1;
}

/* =========================================================
   PAYMENT METHOD TITLE
========================================================= */

.payment-method-title {
  display: block;
  margin: 8px 0 10px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

/* =========================================================
   PAYMENT METHOD GRID
========================================================= */

.payment-method-grid {
  display: grid;
  grid-template-columns: repeat( 4, minmax(0, 1fr));
  gap: 10px;
}

.payment-method {
  position: relative;
  cursor: pointer;
}

.payment-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method>span {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  color: var(--color-title);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.payment-method:hover>span {
  border-color: rgba(7, 104, 207, 0.28);
  box-shadow: var(--shadow-small);
  transform: translateY(-2px);
}

.payment-method img {
  width: 88px;
  height: 24px;
  object-fit: contain;
}

.payment-method strong {
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.payment-method input:checked+span {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(7, 104, 207, 0.07);
}

/* =========================================================
   PAYMENT METHOD CHECK INDICATOR
========================================================= */

.payment-method>span::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-white);
  transition: var(--transition-fast);
}

.payment-method input:checked+span::after {
  border: 4px solid var(--color-primary);
  background: var(--color-white);
}

/* =========================================================
   SECURITY NOTE
========================================================= */

.payment-security-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0;
  padding: 12px 14px;
  color: var(--color-text);
  background: var(--color-surface);
  border-left: 3px solid var(--color-secondary);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 11px;
  line-height: 1.6;
}

.payment-security-note i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-secondary-dark);
  font-size: 18px;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.payment-submit {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  box-shadow: 0 12px 28px rgba(7, 104, 207, 0.16);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.payment-submit:hover {
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-primary));
  transform: translateY(-1px);
  box-shadow: 0 15px 32px rgba(7, 104, 207, 0.20);
}

.payment-submit i {
  font-size: 18px;
  transition: var(--transition-fast);
}

.payment-submit:hover i {
  transform: translateX(3px);
}

.payment-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {
  .payment-method-grid {
    grid-template-columns: repeat( 2, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {
  .payment-modal {
    align-items: flex-end;
    padding: 10px;
  }
  .payment-modal-dialog {
    max-width: 100%;
    max-height: 96dvh;
  }
  .payment-modal-content {
    max-height: 96dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
  .payment-modal-header {
    padding: 17px 16px;
  }
  .payment-modal-body {
    max-height: calc( 96dvh - 76px);
    padding: 16px;
  }
  .payment-plan-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .payment-plan-price {
    width: 100%;
    padding-top: 12px;
    text-align: left;
    border-top: 1px solid var(--color-border);
  }
  .payment-plan-features ul,
  .payment-form-grid {
    grid-template-columns: 1fr;
  }
  .payment-field-full {
    grid-column: auto;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {
  .payment-modal {
    padding: 0;
  }
  .payment-modal-content {
    border-right: 0;
    border-left: 0;
  }
  .payment-modal-header h3 {
    font-size: 21px;
  }
  .payment-modal-close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .payment-modal-body {
    padding: 15px 15px calc( 15px + env( safe-area-inset-bottom));
  }
  .payment-method-grid {
    grid-template-columns: repeat( 2, minmax(0, 1fr));
  }
  .payment-method>span {
    min-height: 72px;
  }
  .payment-plan-summary {
    padding: 15px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {
  .payment-modal-header {
    padding: 14px 13px;
  }
  .payment-modal-header small {
    font-size: 8px;
  }
  .payment-modal-header h3 {
    font-size: 19px;
  }
  .payment-modal-body {
    padding: 13px 13px calc( 13px + env( safe-area-inset-bottom));
  }
  .payment-plan-summary {
    padding: 13px;
  }
  .payment-method-grid {
    gap: 8px;
  }
  .payment-method img {
    width: 76px;
    height: 22px;
  }
  .payment-method strong {
    font-size: 9px;
  }
}

/* =========================================================
   CURRENT SUBSCRIPTION
========================================================= */

.lj-dashboard-current-plan {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   ACTIVE STATUS
========================================================= */

.lj-dashboard-plan-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.lj-dashboard-plan-status.is-active {
  color: var(--color-success);
  background: rgba(7, 104, 207, .10);
}

.lj-dashboard-plan-status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(7, 104, 207, .10);
  animation: ljPlanPulse 1.8s infinite;
}

@keyframes ljPlanPulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(7, 104, 207, .10);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(7, 104, 207, 0);
  }
}

/* =========================================================
   PLAN OVERVIEW
========================================================= */

.lj-dashboard-plan-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding: 20px;
  background: linear-gradient( 135deg, var(--color-off-white), var(--color-white));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.lj-dashboard-plan-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.lj-dashboard-plan-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(7, 104, 207, .16);
}

.lj-dashboard-plan-icon i {
  font-size: 22px;
}

.lj-dashboard-plan-main-copy {
  min-width: 0;
}

.lj-dashboard-plan-main-copy>span,
.lj-dashboard-plan-price>span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lj-dashboard-plan-main-copy h3 {
  margin: 3px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp(23px, 3vw, 30px);
  line-height: 1.15;
}

.lj-dashboard-plan-main-copy p {
  max-width: 540px;
  margin: 4px 0 0;
  color: var(--color-text);
  font-size: 11px;
  line-height: 1.65;
}

.lj-dashboard-plan-price {
  flex: 0 0 auto;
  text-align: right;
}

.lj-dashboard-plan-price strong {
  display: block;
  margin-top: 3px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 32px);
}

.lj-dashboard-plan-price small {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 10px;
}

/* =========================================================
   DATE CARDS
========================================================= */

.lj-dashboard-plan-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.lj-dashboard-plan-date-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-dashboard-plan-date-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  color: var(--color-success);
  background: rgba(7, 104, 207, .08);
  border-radius: var(--radius-xs);
}

.lj-dashboard-plan-date-card.is-expiry .lj-dashboard-plan-date-icon {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.lj-dashboard-plan-date-card small {
  display: block;
  color: var(--color-muted);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.lj-dashboard-plan-date-card strong {
  display: block;
  margin-top: 2px;
  color: var(--color-title);
  font-size: 12px;
}

.lj-dashboard-plan-date-card div>span {
  display: block;
  margin-top: 2px;
  color: var(--color-text);
  font-size: 9px;
}

/* =========================================================
   COUNTDOWN
========================================================= */

.lj-dashboard-plan-countdown {
  position: relative;
  margin-top: 14px;
  padding: 20px;
  overflow: hidden;
  color: var(--color-white);
  background: linear-gradient( 120deg, var(--color-dark), var(--color-tertiary), var(--color-primary-dark));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
}

.lj-dashboard-plan-countdown::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -130px;
  right: -70px;
  border-radius: var(--radius-round);
  background: rgba(31, 158, 252, .12);
  filter: blur(5px);
  pointer-events: none;
}

.lj-dashboard-plan-countdown-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.lj-dashboard-plan-countdown-heading span {
  display: block;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lj-dashboard-plan-countdown-heading h4 {
  margin: 3px 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 21px;
}

.lj-dashboard-plan-countdown-heading>i {
  color: var(--color-secondary);
  font-size: 24px;
}

.lj-dashboard-plan-countdown-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(60px, 1fr) auto minmax(60px, 1fr) auto minmax(60px, 1fr) auto minmax(60px, 1fr);
  align-items: center;
  gap: 10px;
}

.lj-dashboard-plan-countdown-item {
  min-width: 0;
  padding: 14px 8px;
  text-align: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(5px);
}

.lj-dashboard-plan-countdown-item strong {
  display: block;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lj-dashboard-plan-countdown-item strong.is-changing {
  animation: ljCountdownTick .32s ease;
}

@keyframes ljCountdownTick {
  0% {
    opacity: .35;
    transform: translateY(-5px) scale(.92);
  }
  55% {
    transform: translateY(2px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.lj-dashboard-plan-countdown-item span {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, .6);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-dashboard-plan-countdown-divider {
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: var(--weight-bold);
}

.lj-dashboard-plan-countdown-expired {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  padding: 10px 12px;
  color: #4AB3FC;
  background: rgba(7, 104, 207, .18);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-xs);
  font-size: 10px;
}

.lj-dashboard-plan-countdown-expired[hidden] {
  display: none;
}

/* =========================================================
   FEATURES
========================================================= */

.lj-dashboard-plan-features {
  margin-top: 22px;
}

.lj-dashboard-plan-features-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.lj-dashboard-plan-features-heading>div>span {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-dashboard-plan-features-heading h4 {
  margin: 3px 0 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 21px;
}

.lj-dashboard-plan-feature-count {
  padding: 5px 9px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-semibold);
}

.lj-dashboard-plan-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.lj-dashboard-plan-feature-card {
  min-width: 0;
  padding: 15px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.lj-dashboard-plan-feature-card:hover {
  border-color: rgba(7, 104, 207, .2);
  box-shadow: var(--shadow-small);
  transform: translateY(-2px);
}

.lj-dashboard-plan-feature-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.lj-dashboard-plan-feature-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-xs);
}

.lj-dashboard-plan-feature-top>div {
  min-width: 0;
}

.lj-dashboard-plan-feature-top>div>span {
  display: block;
  color: var(--color-muted);
  font-size: 8px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
}

.lj-dashboard-plan-feature-top h5 {
  margin: 2px 0 0;
  color: var(--color-title);
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.lj-dashboard-plan-feature-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.lj-dashboard-plan-feature-numbers>div {
  padding: 9px 6px;
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-xs);
}

.lj-dashboard-plan-feature-numbers span {
  display: block;
  color: var(--color-muted);
  font-size: 8px;
  text-transform: uppercase;
}

.lj-dashboard-plan-feature-numbers strong {
  display: block;
  margin-top: 2px;
  color: var(--color-title);
  font-size: 14px;
}

.lj-dashboard-plan-feature-numbers .is-remaining strong {
  color: var(--color-success);
}

/* =========================================================
   FEATURE PROGRESS
========================================================= */

.lj-dashboard-plan-feature-progress {
  margin-top: 12px;
}

.lj-dashboard-plan-feature-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--color-muted);
  font-size: 8px;
}

.lj-dashboard-plan-feature-progress-heading strong {
  color: var(--color-title);
}

.lj-dashboard-plan-feature-progress-track {
  height: 5px;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
}

.lj-dashboard-plan-feature-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient( 90deg, var(--color-primary), var(--color-secondary));
  border-radius: inherit;
  transition: width .6s ease;
}

.lj-dashboard-plan-feature-unlimited {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 9px;
  color: var(--color-success);
  background: rgba(7, 104, 207, .07);
  border-radius: var(--radius-xs);
  font-size: 9px;
  font-weight: var(--weight-medium);
}

/* =========================================================
   NO FEATURES
========================================================= */

.lj-dashboard-plan-no-features {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
}

.lj-dashboard-plan-no-features>i {
  color: var(--color-primary);
  font-size: 22px;
}

.lj-dashboard-plan-no-features strong {
  display: block;
  color: var(--color-title);
  font-size: 11px;
}

.lj-dashboard-plan-no-features p {
  margin: 3px 0 0;
  color: var(--color-text);
  font-size: 9px;
}

/* =========================================================
   EMPTY PLAN
========================================================= */

.lj-dashboard-plan-empty {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  text-align: left;
}

.lj-dashboard-plan-empty-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-round);
  font-size: 22px;
}

.lj-dashboard-plan-empty>div>span {
  color: var(--color-secondary-dark);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-dashboard-plan-empty h3 {
  margin: 4px 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 24px;
}

.lj-dashboard-plan-empty p {
  max-width: 470px;
  margin: 0 0 14px;
  color: var(--color-text);
  font-size: 10px;
  line-height: 1.7;
}

.lj-dashboard-plan-empty-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: var(--transition-fast);
}

.lj-dashboard-plan-empty-button:hover {
  color: var(--color-white);
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:767.98px) {
  .lj-dashboard-plan-overview {
    align-items: flex-start;
    flex-direction: column;
  }
  .lj-dashboard-plan-price {
    width: 100%;
    padding-top: 12px;
    text-align: left;
    border-top: 1px solid var(--color-border);
  }
  .lj-dashboard-plan-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  .lj-dashboard-plan-overview {
    padding: 15px;
  }
  .lj-dashboard-plan-main {
    align-items: flex-start;
  }
  .lj-dashboard-plan-icon {
    width: 47px;
    height: 47px;
    flex-basis: 47px;
  }
  .lj-dashboard-plan-date-grid {
    grid-template-columns: 1fr;
  }
  .lj-dashboard-plan-countdown {
    padding: 15px;
  }
  .lj-dashboard-plan-countdown-grid {
    gap: 4px;
  }
  .lj-dashboard-plan-countdown-item {
    min-width: 0;
    padding: 11px 3px;
  }
  .lj-dashboard-plan-countdown-item strong {
    font-size: 24px;
  }
  .lj-dashboard-plan-countdown-divider {
    font-size: 18px;
  }
  .lj-dashboard-plan-countdown-item span {
    font-size: 7px;
  }
  .lj-dashboard-plan-features-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .lj-dashboard-plan-feature-card {
    padding: 13px;
  }
  .lj-dashboard-plan-empty {
    flex-direction: column;
    padding: 30px 15px;
    text-align: center;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:375px) {
  .lj-dashboard-plan-countdown {
    padding: 13px 10px;
  }
  .lj-dashboard-plan-countdown-grid {
    gap: 2px;
  }
  .lj-dashboard-plan-countdown-item strong {
    font-size: 21px;
  }
  .lj-dashboard-plan-countdown-item span {
    font-size: 6px;
    letter-spacing: .03em;
  }
  .lj-dashboard-plan-countdown-divider {
    font-size: 15px;
  }
  .lj-dashboard-plan-feature-numbers {
    gap: 4px;
  }
  .lj-dashboard-plan-feature-numbers>div {
    padding: 8px 3px;
  }
}

/* =========================================================
   CATEGORY NAVIGATION ICON
========================================================= */

.lj-category-nav-icon,
.lj-category-main-icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  color: var(--color-primary);
  background: linear-gradient( 145deg, var(--color-primary-soft), var(--color-white));
  border: 1px solid rgba(7, 104, 207, 0.10);
  border-radius: var(--radius-xs);
  box-shadow: 0 5px 14px rgba(1, 52, 130, 0.04);
  transition: transform var(--transition-fast), color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* =========================================================
   DECORATIVE ICON GLOW
========================================================= */

.lj-category-nav-icon::before,
.lj-category-main-icon::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  top: -17px;
  right: -14px;
  border-radius: var(--radius-round);
  background: rgba(31, 158, 252, 0.20);
  transition: var(--transition-fast);
}

/* =========================================================
   ICON
========================================================= */

.lj-category-nav-icon i,
.lj-category-main-icon i {
  position: relative;
  z-index: 2;
  font-size: 16px;
  line-height: 1;
  transition: transform var(--transition-fast);
}

/* =========================================================
   SMALL SUB-SUBCATEGORY ICON
========================================================= */

.lj-category-nav-icon.is-small {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: var(--radius-xs);
}

.lj-category-nav-icon.is-small i {
  font-size: 14px;
}

/* =========================================================
   LINKS WITH ICON
========================================================= */

.lj-subcategory-menu>a,
.lj-subcategory-item>a,
.lj-subsubcategory-menu>a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

/* =========================================================
   SUBCATEGORY HOVER
========================================================= */

.lj-subcategory-menu>a:hover .lj-category-nav-icon,
.lj-subcategory-item>a:hover .lj-category-nav-icon,
.lj-subsubcategory-menu>a:hover .lj-category-nav-icon {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(7, 104, 207, 0.17);
  transform: translateY(-1px) rotate(-2deg);
}

/* =========================================================
   ICON HOVER ANIMATION
========================================================= */

.lj-subcategory-menu>a:hover .lj-category-nav-icon i,
.lj-subcategory-item>a:hover .lj-category-nav-icon i,
.lj-subsubcategory-menu>a:hover .lj-category-nav-icon i {
  animation: ljCategoryIconBounce 0.42s ease;
}

@keyframes ljCategoryIconBounce {
  0% {
    transform: scale(1) translateY(0);
  }
  35% {
    transform: scale(1.12) translateY(-2px);
  }
  65% {
    transform: scale(0.96) translateY(1px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* =========================================================
   GOLD GLOW ON HOVER
========================================================= */

.lj-subcategory-menu>a:hover .lj-category-nav-icon::before,
.lj-subcategory-item>a:hover .lj-category-nav-icon::before,
.lj-subsubcategory-menu>a:hover .lj-category-nav-icon::before {
  width: 45px;
  height: 45px;
  top: -24px;
  right: -23px;
  background: rgba(31, 158, 252, 0.28);
}

/* =========================================================
   CHILD ARROW
========================================================= */

.lj-category-arrow {
  margin-left: auto;
  color: var(--color-muted);
  font-size: 18px;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.lj-subcategory-item:hover>a>.lj-category-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

/* =========================================================
   MAIN CATEGORY IMAGE
========================================================= */

.lj-main-category-list .lj-category-item>a>img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  box-shadow: 0 4px 12px rgba(1, 52, 130, 0.05);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.lj-main-category-list .lj-category-item:hover>a>img {
  border-color: rgba(7, 104, 207, 0.25);
  box-shadow: 0 7px 18px rgba(7, 104, 207, 0.10);
  transform: scale(1.05);
}

/* =========================================================
   EMPTY CATEGORY
========================================================= */

.lj-category-navigation-empty {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--color-muted);
  text-align: center;
}

.lj-category-navigation-empty i {
  color: var(--color-primary);
  font-size: 28px;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-category-nav-icon,
  .lj-category-main-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .lj-category-nav-icon i,
  .lj-category-main-icon i {
    font-size: 15px;
  }
  .lj-category-nav-icon.is-small {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .lj-category-nav-icon.is-small i {
    font-size: 13px;
  }
  .lj-main-category-list .lj-category-item>a>img {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

/* =========================================================
   CATEGORY DROPDOWN WRAPPER
========================================================= */

.lj-mobile-category-dropdown {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* =========================================================
   CATEGORY TOGGLE
========================================================= */

.lj-mobile-category-dropdown .lj-mobile-sell-item {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lj-mobile-sell-circle {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow var(--transition-fast), background var(--transition-fast);
}

.lj-mobile-sell-circle i {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lj-mobile-sell-item.is-open .lj-mobile-sell-circle {
  box-shadow: 0 9px 24px rgba(7, 104, 207, .22);
}

.lj-mobile-sell-item.is-open .lj-mobile-sell-circle i {
  transform: rotate(45deg);
}

.lj-mobile-sell-item.is-open {
  color: var(--color-primary);
}

/* =========================================================
   CATEGORY DROPDOWN
========================================================= */

.lj-mobile-category-menu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: 90vw;
  max-width: 520px;
  z-index: 9999999;
  overflow: visible;
  background: var(--color-white);
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 70px rgba(1, 52, 130, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(14px) scale(.96);
  transform-origin: bottom center;
  transition: opacity .22s ease, visibility .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.lj-mobile-category-menu[hidden] {
  display: block;
}

.lj-mobile-category-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* =========================================================
   POINTER
========================================================= */

.lj-mobile-category-pointer {
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border-right: 1px solid rgba(7, 104, 207, .12);
  border-bottom: 1px solid rgba(7, 104, 207, .12);
  transform: translateX(-50%) rotate(45deg);
  z-index: 3;
}

/* =========================================================
   DROPDOWN HEADER
========================================================= */

.lj-mobile-category-menu-header {
  position: relative;
  padding: 8px 15px;
  overflow: hidden;
  color: var(--color-white);
  background: var(--topbar-background);
  border-radius: 10px 10px 0px 0px;
}

.lj-mobile-category-menu-header::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  top: -72px;
  right: -35px;
  border-radius: var(--radius-round);
  background: radial-gradient( circle, rgba(31, 158, 252, .24), transparent 70%);
  pointer-events: none;
}

.lj-mobile-category-menu-header>div {
  position: relative;
  z-index: 2;
}

.lj-mobile-category-menu-header span {
  display: block;
  color: var(--color-secondary);
  font-size: 8px;
  font-weight: var(--weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lj-mobile-category-menu-header h4 {
  margin: 3px 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-bold);
}

/* =========================================================
   CATEGORY GRID
========================================================= */

.lj-mobile-category-grid {
  display: grid;
  grid-template-columns: repeat( 4, minmax(0, 1fr));
  gap: 10px 7px;
  max-height: min( 52vh, 430px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 10px 16px;
  background: linear-gradient( 180deg, var(--color-white), var(--color-off-white));
  border-radius: 10px 10px 0px 0px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   SCROLLBAR
========================================================= */

.lj-mobile-category-grid::-webkit-scrollbar {
  width: 4px;
}

.lj-mobile-category-grid::-webkit-scrollbar-track {
  background: transparent;
}

.lj-mobile-category-grid::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

/* =========================================================
   CATEGORY CARD
========================================================= */

.lj-mobile-category-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 7px 2px 8px;
  color: var(--color-title);
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(8px) scale(.95);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card {
  animation: ljMobileDropdownCategoryIn .34s ease forwards;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(1) {
  animation-delay: .03s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(2) {
  animation-delay: .05s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(3) {
  animation-delay: .07s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(4) {
  animation-delay: .09s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(5) {
  animation-delay: .11s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(6) {
  animation-delay: .13s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(7) {
  animation-delay: .15s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(8) {
  animation-delay: .17s;
}

.lj-mobile-category-menu.is-open .lj-mobile-category-card:nth-child(n+9) {
  animation-delay: .19s;
}

@keyframes ljMobileDropdownCategoryIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   CATEGORY IMAGE
========================================================= */

.lj-mobile-category-image-wrap {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  /**background:
        var(--color-surface);**/
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-sm);
  box-shadow: 0 5px 14px rgba(1, 52, 130, .06);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.lj-mobile-category-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.lj-mobile-category-card:hover,
.lj-mobile-category-card:focus-visible {
  color: var(--color-primary);
  background: var(--color-white);
  box-shadow: var(--shadow-small);
}

.lj-mobile-category-card:hover .lj-mobile-category-image-wrap,
.lj-mobile-category-card:focus-visible .lj-mobile-category-image-wrap {
  border-color: rgba(7, 104, 207, .24);
  box-shadow: 0 8px 20px rgba(7, 104, 207, .11);
  transform: translateY(-2px);
}

.lj-mobile-category-card:hover .lj-mobile-category-image-wrap img {
  transform: scale(1.07);
}

/* =========================================================
   FALLBACK ICON
========================================================= */

.lj-mobile-category-fallback-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: linear-gradient( 145deg, var(--color-primary-soft), var(--color-white));
}

.lj-mobile-category-fallback-icon i {
  font-size: 23px;
}

/* =========================================================
   CATEGORY NAME
========================================================= */

.lj-mobile-category-name {
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: inherit;
  font-size: 8px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.lj-mobile-category-empty {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px;
  color: var(--color-muted);
  text-align: center;
}

.lj-mobile-category-empty i {
  color: var(--color-primary);
  font-size: 26px;
}

.lj-mobile-category-empty strong {
  color: var(--color-title);
  font-size: 10px;
}

/* =========================================================
   ENSURE NOTHING OBSTRUCTS DROPDOWN
========================================================= */

.lj-mobile-bottom-nav {
  overflow: visible !important;
  z-index: 9999990;
}

.lj-mobile-bottom-nav>* {
  overflow: visible;
}

.lj-mobile-category-dropdown {
  overflow: visible !important;
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:375px) {
  .lj-mobile-category-menu {
    width: 94vw;
  }
  .lj-mobile-category-grid {
    gap: 8px 5px;
    padding: 12px 7px 14px;
    border-radius: 10px 10px 0px 0px;
  }
  .lj-mobile-category-image-wrap {
    width: 48px;
    height: 48px;
  }
  .lj-mobile-category-name {
    font-size: var(--main-font-size-2);
  }
}

/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:992px) {
  .lj-mobile-category-menu {
    display: none !important;
  }
}

/* =========================================================
   LINJUST — PREMIUM DYNAMIC LISTING FORM
   Clean • Luxury • Warm • Professional • Responsive

   Uses the existing LINJUST frontend CSS variables.
   Form components intentionally use NO border-radius.
========================================================= */

/* =========================================================
   1. MAIN LISTING CARD
========================================================= */

.lj-listing-card {
  position: relative;
  width: 100%;
  overflow: visible;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: 0 20px 55px rgba(1, 52, 130, .055);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
}

.lj-listing-card *,
.lj-listing-card *::before,
.lj-listing-card *::after {
  box-sizing: border-box;
}

/* =========================================================
   2. FORM HEADER
========================================================= */

.lj-listing-heading {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 34px 36px 31px;
  overflow: hidden;
  background: linear-gradient( 115deg, var(--color-white) 0%, var(--color-off-white) 68%, var(--color-primary-soft) 100%);
  border-bottom: 1px solid var(--color-border);
}

/* Elegant top accent */

.lj-listing-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient( 90deg, var(--color-primary), var(--color-primary-dark), var(--color-secondary));
}

.lj-listing-heading-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 800px;
}

.lj-listing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-listing-kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--color-secondary);
}

.lj-listing-heading h2,
.lj-listing-section-head h3,
.lj-city-header h3 {
  font-family: var(--font-heading);
  color: var(--color-title);
  font-weight: var(--weight-bold);
}

.lj-listing-heading h2 {
  margin: 0 0 9px;
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.lj-listing-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.8;
}

/* =========================================================
   3. DRAFT STATUS
========================================================= */

.lj-listing-draft-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 13px;
  color: var(--color-muted);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: 0 5px 18px rgba(1, 52, 130, .04);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: .02em;
  transition: var(--transition-fast);
}

.lj-listing-draft-state i {
  color: var(--color-secondary-dark);
  font-size: 15px;
}

.lj-listing-draft-state.is-saving {
  color: var(--color-secondary-dark);
  border-color: rgba(31, 158, 252, .55);
}

.lj-listing-draft-state.is-saved {
  color: var(--color-success);
}

/* =========================================================
   4. FORM SECTIONS
========================================================= */

.lj-listing-section {
  position: relative;
  padding: 31px 36px 34px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.lj-listing-section:nth-of-type(even) {
  background: linear-gradient( 90deg, var(--color-white), var(--color-off-white));
}

.lj-listing-section:last-of-type {
  border-bottom: 0;
}

.lj-listing-section.is-hidden,
.lj-listing-field.is-hidden,
.lj-listing-upload-progress.is-hidden {
  display: none !important;
}

/* =========================================================
   5. SECTION HEADERS
========================================================= */

.lj-listing-section-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 25px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--color-border);
}

.lj-listing-section-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  font-size: 16px;
  transition: var(--transition-fast);
}

.lj-listing-section-head:hover .lj-listing-section-icon {
  color: var(--color-white);
  background: var(--color-primary);
  border-left-color: var(--color-secondary);
  transform: translateY(-2px);
}

.lj-listing-section-head h3 {
  margin: 0 0 3px;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -.01em;
}

.lj-listing-section-head p {
  margin: 0;
  color: var(--color-text);
  font-size: 11px;
  line-height: 1.65;
}

/* =========================================================
   6. FORM GRID
========================================================= */

.lj-listing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 21px;
}

.lj-listing-field {
  min-width: 0;
}

.lj-listing-field-full {
  grid-column: 1 / -1;
}

/* =========================================================
   7. LABELS
========================================================= */

.lj-listing-field label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  color: var(--color-title);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: .015em;
}

.lj-listing-field label span {
  color: var(--color-primary);
}

.lj-listing-field small {
  display: block;
  margin-top: 7px;
  color: var(--color-muted);
  font-size: 10px;
  line-height: 1.6;
}

/* =========================================================
   8. FORM CONTROL WRAPPERS
========================================================= */

.lj-listing-control,
.lj-listing-price-control {
  position: relative;
  min-height: 52px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px transparent;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.lj-listing-control:hover,
.lj-listing-price-control:hover {
  border-color: rgba(1, 56, 131, .35);
}

.lj-listing-control:focus-within,
.lj-listing-price-control:focus-within {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary), 0 8px 22px rgba(1, 52, 130, .045);
}

/* =========================================================
   9. INPUT ICONS
========================================================= */

.lj-listing-control>i {
  position: absolute;
  left: 15px;
  z-index: 2;
  color: var(--color-secondary-dark);
  font-size: 15px;
  pointer-events: none;
  transition: var(--transition-fast);
}

.lj-listing-control:focus-within>i {
  color: var(--color-primary);
  transform: scale(1.05);
}

/* =========================================================
   10. INPUT / SELECT / TEXTAREA
========================================================= */

.lj-listing-control input,
.lj-listing-control select,
.lj-listing-control textarea,
.lj-listing-price-control input {
  width: 100%;
  min-width: 0;
  color: var(--color-title);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-regular);
}

.lj-listing-control input,
.lj-listing-control select {
  height: 50px;
  padding: 0 14px 0 42px;
}

.lj-listing-control textarea {
  min-height: 145px;
  padding: 15px 15px 15px 42px;
  resize: vertical;
  line-height: 1.75;
}

.lj-listing-control select {
  cursor: pointer;
}

.lj-listing-control select[multiple] {
  height: auto;
  min-height: 125px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.lj-listing-control input::placeholder,
.lj-listing-control textarea::placeholder {
  color: var(--color-muted);
  opacity: .72;
}

.lj-listing-control input:disabled,
.lj-listing-control select:disabled,
.lj-listing-control textarea:disabled {
  cursor: not-allowed;
  color: var(--color-muted);
  opacity: .65;
  background: var(--color-off-white) !important;
}

/* =========================================================
   11. PRICE CONTROL
========================================================= */

.lj-listing-price-control {
  overflow: hidden;
}

.lj-listing-currency {
  align-self: stretch;
  min-width: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-title);
  background: linear-gradient( 135deg, var(--color-off-white), var(--color-primary-soft));
  border-right: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.lj-listing-price-control input {
  height: 50px;
  padding: 0 14px;
}

.lj-listing-price-period-label {
  flex: 0 0 auto;
  padding-right: 14px;
  color: var(--color-muted);
  font-size: 10px;
  white-space: nowrap;
}

/* =========================================================
   12. ADD CITY LINK
========================================================= */

.lj-listing-city-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 0 0 2px;
  color: var(--color-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-listing-city-trigger:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-dark);
  transform: translateX(2px);
}

/* =========================================================
   13. DYNAMIC FEATURE CARD
========================================================= */

.lj-listing-feature-card {
  position: relative;
  padding: 17px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  transition: var(--transition-fast);
}

.lj-listing-feature-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: transparent;
  transition: var(--transition-fast);
}

.lj-listing-feature-card:hover {
  background: var(--color-white);
  border-color: rgba(1, 56, 131, .25);
  box-shadow: 0 10px 25px rgba(1, 52, 130, .045);
}

.lj-listing-feature-card:hover::before,
.lj-listing-feature-card:focus-within::before {
  background: var(--color-primary);
}

.lj-listing-feature-card:focus-within {
  background: var(--color-white);
  border-color: rgba(7, 104, 207, .42);
  box-shadow: 0 12px 30px rgba(1, 52, 130, .055);
}

/* =========================================================
   14. FEATURE LABEL / ICON
========================================================= */

.lj-listing-feature-label {
  display: flex !important;
  align-items: center;
  gap: 9px;
}

.lj-listing-feature-label .lj-feature-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-left: 2px solid var(--color-primary);
  border-radius: 0;
  font-size: 12px;
}

/* =========================================================
   15. RADIO / CHECKBOX OPTIONS
========================================================= */

.lj-listing-radio-group,
.lj-listing-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lj-listing-choice {
  position: relative;
  cursor: pointer;
}

.lj-listing-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lj-listing-choice>span {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-size: 11px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-listing-choice>span:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: rgba(7, 104, 207, .30);
}

.lj-listing-choice input:checked+span {
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* =========================================================
   16. FILE DROPZONE
========================================================= */

.lj-listing-dropzone {
  position: relative;
  min-height: 205px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 24px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient( 145deg, var(--color-white) 0%, var(--color-off-white) 72%, var(--color-primary-soft) 100%);
  border: 1px dashed rgba(1, 56, 131, .42);
  border-radius: 0;
  cursor: pointer;
  transition: var(--transition-normal);
}

.lj-listing-dropzone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient( 90deg, var(--color-primary), var(--color-secondary));
  transition: width .35s ease;
}

.lj-listing-dropzone:hover::before,
.lj-listing-dropzone.is-dragover::before {
  width: 100%;
}

.lj-listing-dropzone:hover,
.lj-listing-dropzone.is-dragover {
  border-color: var(--color-primary);
  background: linear-gradient( 145deg, var(--color-white), var(--color-primary-soft));
  box-shadow: 0 15px 38px rgba(1, 52, 130, .07);
  transform: translateY(-2px);
}

/* Native input covers entire dropzone */

.lj-listing-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* =========================================================
   17. DROPZONE ICON
========================================================= */

.lj-listing-dropzone-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 1px solid rgba(31, 158, 252, .45);
  border-radius: 0;
  box-shadow: 8px 8px 0 rgba(31, 158, 252, .12);
  font-size: 22px;
  animation: ljListingDropPulse 2.7s ease-in-out infinite;
}

.lj-listing-dropzone strong {
  color: var(--color-title);
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

.lj-listing-dropzone>span:not(.lj-listing-dropzone-icon) {
  margin-top: 5px;
  color: var(--color-text);
  font-size: 11px;
}

.lj-listing-dropzone small {
  max-width: 520px;
  margin-top: 9px;
  color: var(--color-muted);
  font-size: 10px;
  line-height: 1.6;
}

@keyframes ljListingDropPulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* =========================================================
   18. UPLOAD PROGRESS
========================================================= */

.lj-listing-upload-progress {
  margin-top: 16px;
  padding: 14px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
}

.lj-listing-upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 9px;
  color: var(--color-text);
  font-size: 10px;
  font-weight: var(--weight-medium);
}

.lj-listing-upload-track {
  width: 100%;
  height: 5px;
  overflow: hidden;
  background: var(--color-border);
  border-radius: 0;
}

.lj-listing-upload-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient( 90deg, var(--color-primary-dark), var(--color-primary), var(--color-secondary));
  border-radius: 0;
  transition: width var(--transition-fast);
}

/* =========================================================
   19. FILE PREVIEW GRID
========================================================= */

.lj-listing-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 100px));
  gap: 12px;
  margin-top: 18px;
}

.lj-listing-preview {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: 0 5px 15px rgba(1, 52, 130, .055);
  cursor: grab;
  user-select: none;
  transition: var(--transition-fast);
}

.lj-listing-preview:hover {
  border-color: var(--color-primary);
  box-shadow: 0 9px 22px rgba(1, 52, 130, .09);
  transform: translateY(-2px);
}

.lj-listing-preview:active {
  cursor: grabbing;
}

.lj-listing-preview.is-dragging {
  opacity: .45;
  transform: scale(.96);
}

.lj-listing-preview img,
.lj-listing-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =========================================================
   20. FILE TYPE BADGE
========================================================= */

.lj-listing-preview-type {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 4px 6px;
  color: var(--color-white);
  background: rgba(1, 52, 130, .78);
  border-radius: 0;
  font-size: 8px;
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* =========================================================
   21. FILE DELETE
========================================================= */

.lj-listing-preview-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: rgba(7, 104, 207, .95);
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(1, 52, 130, .18);
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-listing-preview-delete:hover {
  background: var(--color-primary-dark);
  transform: scale(1.07);
}

/* =========================================================
   22. FORM ACTIONS
========================================================= */

.lj-listing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 23px 36px;
  background: linear-gradient( 90deg, var(--color-off-white), var(--color-white));
  border-top: 1px solid var(--color-border);
}

/* =========================================================
   23. BUTTONS
========================================================= */

.lj-listing-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: .015em;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-listing-btn i {
  font-size: 16px;
}

.lj-listing-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

.lj-listing-btn-light {
  color: var(--color-title);
  background: var(--color-white);
  border-color: var(--color-border);
}

.lj-listing-btn-light:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.lj-listing-btn-primary {
  position: relative;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: var(--color-primary);
  box-shadow: 0 9px 22px rgba(7, 104, 207, .16);
}

.lj-listing-btn-primary:hover {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-tertiary));
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 13px 27px rgba(7, 104, 207, .20);
}

/* =========================================================
   24. CITY MODAL
========================================================= */

.lj-city-modal {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-normal);
}

.lj-city-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lj-city-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(1, 52, 130, .76);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.lj-city-dialog {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  max-height: calc(100dvh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  box-shadow: 0 35px 100px rgba(1, 52, 130, .28);
  transform: translateY(20px) scale(.985);
  transition: var(--transition-normal);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.lj-city-modal.is-open .lj-city-dialog {
  transform: translateY(0) scale(1);
}

/* =========================================================
   25. CITY MODAL HEADER
========================================================= */

.lj-city-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  color: var(--color-white);
  background: var(--topbar-background);
  border-bottom: 2px solid var(--color-secondary);
}

.lj-city-header span {
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lj-city-header h3 {
  margin: 4px 0 0;
  color: var(--color-white);
  font-size: 26px;
}

.lj-city-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  color: var(--color-white);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lj-city-close:hover {
  color: var(--color-dark);
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  transform: rotate(90deg);
}

/* =========================================================
   26. CITY BODY / FOOTER
========================================================= */

.lj-city-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 23px;
}

.lj-city-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 17px 22px;
  background: var(--color-off-white);
  border-top: 1px solid var(--color-border);
}

/* =========================================================
   27. VALIDATION
========================================================= */

.lj-listing-field.has-error .lj-listing-control,
.lj-listing-field.has-error .lj-listing-price-control {
  border-color: var(--color-danger);
  box-shadow: inset 3px 0 0 var(--color-danger);
}

.lj-listing-field.has-error label {
  color: var(--color-danger);
}

.lj-listing-field-error {
  display: block;
  margin-top: 6px;
  color: var(--color-danger);
  font-size: 10px;
  font-weight: var(--weight-medium);
}

.lj-listing-field.is-valid .lj-listing-control,
.lj-listing-field.is-valid .lj-listing-price-control {
  border-color: rgba(7, 104, 207, .55);
  box-shadow: inset 3px 0 0 rgba(7, 104, 207, .55);
}

/* =========================================================
   28. LOADING
========================================================= */

.lj-listing-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  color: var(--color-muted);
  font-size: 11px;
}

.lj-listing-loading i {
  color: var(--color-primary);
  font-size: 18px;
  animation: ljListingSpinner .75s linear infinite;
}

@keyframes ljListingSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   29. TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-listing-heading {
    padding: 29px 26px;
  }
  .lj-listing-section {
    padding: 27px 26px 30px;
  }
  .lj-listing-actions {
    padding: 21px 26px;
  }
}

/* =========================================================
   30. MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-listing-card {
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  .lj-listing-heading {
    flex-direction: column;
    gap: 15px;
    padding: 25px 18px 23px;
  }
  .lj-listing-heading h2 {
    font-size: clamp(28px, 9vw, 35px);
  }
  .lj-listing-draft-state {
    align-self: flex-start;
  }
  .lj-listing-section {
    padding: 24px 18px 27px;
  }
  .lj-listing-grid,
  .lj-city-body {
    grid-template-columns: 1fr;
  }
  .lj-listing-grid {
    gap: 18px;
  }
  .lj-listing-field-full {
    grid-column: auto;
  }
  .lj-listing-section-head {
    align-items: flex-start;
    margin-bottom: 21px;
    padding-bottom: 15px;
  }
  .lj-listing-section-head h3 {
    font-size: 22px;
  }
  .lj-listing-control,
  .lj-listing-price-control {
    min-height: 52px;
  }
  .lj-listing-control input,
  .lj-listing-control select {
    height: 50px;
    font-size: 16px;
  }
  .lj-listing-control textarea {
    font-size: 16px;
  }
  /* Prevent iOS input zoom */
  .lj-listing-price-control input {
    font-size: 16px;
  }
  .lj-listing-dropzone {
    min-height: 185px;
    padding: 27px 18px;
  }
  .lj-listing-preview-grid {
    grid-template-columns: repeat( auto-fill, minmax(90px, 1fr));
    gap: 9px;
  }
  .lj-listing-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* Sticky mobile actions */
  .lj-listing-actions {
    position: sticky;
    bottom: calc( var(--mobile-bottom-height) + env(safe-area-inset-bottom));
    z-index: 15;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 18px;
    background: rgba(246, 251, 253, .97);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -10px 28px rgba(1, 52, 130, .065);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }
  .lj-listing-btn {
    width: 100%;
    min-height: 48px;
    padding: 0 11px;
  }
  /* Modal remains centered rather than becoming
       a rounded mobile bottom-sheet */
  .lj-city-modal {
    align-items: center;
    padding: 12px;
  }
  .lj-city-dialog {
    width: 100%;
    max-height: calc( 100dvh - var(--mobile-bottom-height) - 28px);
    border-radius: 0;
  }
  .lj-city-body {
    padding: 19px 17px;
  }
  .lj-city-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px 17px;
  }
}

/* =========================================================
   31. SMALL MOBILE
========================================================= */

@media(max-width:480px) {
  .lj-listing-heading {
    padding: 23px 15px 21px;
  }
  .lj-listing-heading h2 {
    font-size: 29px;
  }
  .lj-listing-heading p {
    font-size: 11px;
    line-height: 1.7;
  }
  .lj-listing-section {
    padding: 22px 15px 25px;
  }
  .lj-listing-section-icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }
  .lj-listing-section-head h3 {
    font-size: 21px;
  }
  .lj-listing-dropzone {
    min-height: 175px;
    padding: 24px 14px;
  }
  .lj-listing-dropzone-icon {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .lj-listing-actions {
    padding: 11px 15px;
  }
  .lj-city-header {
    padding: 17px 16px;
  }
  .lj-city-header h3 {
    font-size: 23px;
  }
  .lj-city-footer {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   32. VERY SMALL MOBILE
========================================================= */

@media(max-width:360px) {
  .lj-listing-heading {
    padding: 20px 13px;
  }
  .lj-listing-section {
    padding: 20px 13px 23px;
  }
  .lj-listing-grid {
    gap: 15px;
  }
  .lj-listing-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .lj-listing-choice>span {
    padding: 8px 10px;
    font-size: 10px;
  }
}

/* =========================================================
   33. ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-listing-card *,
  .lj-listing-card *::before,
  .lj-listing-card *::after,
  .lj-city-modal *,
  .lj-city-modal *::before,
  .lj-city-modal *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* General dropdown content */

.lj-dropdown-wrap .lj-dropdown {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   OPTIONAL CUSTOM SCROLLBAR
   ============================================================ */

.lj-dropdown::-webkit-scrollbar,
.lj-language-dropdown::-webkit-scrollbar,
.lj-mega-menu::-webkit-scrollbar {
  width: 6px;
}

.lj-dropdown::-webkit-scrollbar-track,
.lj-language-dropdown::-webkit-scrollbar-track,
.lj-mega-menu::-webkit-scrollbar-track {
  background: #D5EAF8;
}

.lj-dropdown::-webkit-scrollbar-thumb,
.lj-language-dropdown::-webkit-scrollbar-thumb,
.lj-mega-menu::-webkit-scrollbar-thumb {
  background: #0768CF;
  border-radius: 10px;
}

.lj-dropdown::-webkit-scrollbar-thumb:hover,
.lj-language-dropdown::-webkit-scrollbar-thumb:hover,
.lj-mega-menu::-webkit-scrollbar-thumb:hover {
  background: #013883;
}

/* Firefox */

.lj-dropdown,
.lj-language-dropdown,
.lj-mega-menu {
  scrollbar-width: thin;
  scrollbar-color: #0768CF #D5EAF8;
}

.lj-manage-thumb {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  color: var(--color-primary)
}

.lj-manage-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-manage-subcat {
  display: block;
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 10px
}

.lj-manage-status-wrap {
  display: flex;
  align-items: center;
  gap: 9px
}

.lj-manage-switch {
  position: relative;
  display: inline-flex;
  cursor: pointer
}

.lj-manage-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.lj-manage-switch-track {
  position: relative;
  width: 42px;
  height: 22px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  transition: var(--transition-fast)
}

.lj-manage-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--color-white);
  box-shadow: 0 2px 6px rgba(1, 52, 130, .18);
  transition: var(--transition-fast)
}

.lj-manage-switch input:checked+.lj-manage-switch-track {
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-manage-switch input:checked+.lj-manage-switch-track .lj-manage-switch-knob {
  transform: translateX(20px)
}

.lj-manage-status-text {
  font-size: 10px;
  font-weight: var(--weight-semibold)
}

.lj-manage-status-text.is-active {
  color: var(--color-success)
}

.lj-manage-status-text.is-inactive {
  color: var(--color-muted)
}

.lj-manage-status-text.is-pending {
  color: var(--color-secondary-dark)
}

.lj-manage-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-normal)
}

.lj-manage-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

.lj-manage-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(1, 52, 130, .78);
  backdrop-filter: blur(5px)
}

.lj-manage-modal-dialog {
  position: relative;
  z-index: 2;
  width: min(100%, 980px);
  max-height: 94vh;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-large);
  transform: translateY(18px) scale(.985);
  transition: var(--transition-normal)
}

.lj-manage-modal.is-open .lj-manage-modal-dialog {
  transform: none
}

.lj-manage-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  color: var(--color-white);
  background: var(--topbar-background);
  border-bottom: 2px solid var(--color-secondary)
}

.lj-manage-modal-header small {
  display: block;
  color: var(--color-secondary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-manage-modal-header h3 {
  margin: 3px 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 27px
}

.lj-manage-modal-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .24);
  transition: var(--transition-fast)
}

.lj-manage-modal-close:hover {
  background: var(--color-secondary);
  color: var(--color-dark)
}

.lj-manage-modal-body {
  max-height: calc(94vh - 82px);
  overflow-y: auto
}

.lj-manage-modal .is-hidden {
  display: none !important
}

.lj-manage-modal .lj-listing-section {
  padding: 27px 28px
}

.lj-manage-modal .lj-listing-control,
.lj-manage-modal .lj-listing-price-control,
.lj-manage-modal .lj-listing-feature-card,
.lj-manage-modal .lj-listing-btn,
.lj-manage-modal .lj-listing-dropzone,
.lj-manage-modal .lj-listing-preview {
  border-radius: 0 !important
}

.lj-manage-modal .lj-listing-preview {
  position: relative
}

.lj-manage-modal .lj-listing-preview-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3
}

.lj-manage-modal .lj-listing-preview-handle {
  position: absolute;
  bottom: 5px;
  right: 5px;
  z-index: 3;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  background: rgba(1, 52, 130, .72);
  color: #FFFFFF;
  cursor: grab
}

@media(max-width:767.98px) {
  .lj-manage-modal {
    padding: 8px
  }
  .lj-manage-modal-dialog {
    max-height: calc(100dvh - 16px)
  }
  .lj-manage-modal-body {
    max-height: calc(100dvh - 86px)
  }
  .lj-manage-modal .lj-listing-section {
    padding: 22px 15px
  }
  .lj-manage-modal .lj-listing-grid {
    grid-template-columns: 1fr
  }
  .lj-manage-modal .lj-listing-field-full {
    grid-column: auto
  }
  .lj-manage-status-wrap {
    justify-content: flex-end
  }
}

@media(max-width:480px) {
  .lj-manage-modal-header {
    padding: 17px 15px
  }
  .lj-manage-modal-header h3 {
    font-size: 23px
  }
}

.lj-google-translate-engine {
  position: fixed;
  left: -10000px;
  bottom: 0;
  width: 220px;
  height: auto;
  overflow: hidden;
  z-index: -1;
}

.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame {
  display: none !important;
}

.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-yAWNEb-L7lbkb>div,
.VIpgJd-yAWNEb-L7lbkb div,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
  display: none !important;
  z-index: 0 !important;
}

.VIpgJd-ZVi9od-aZ2wEe-OiiCO-ti6hGc {
  display: none !important;
  z-index: 0 !important;
}

.translated-ltr {
  top: initial;
  position: sticky;
  margin-top: -40px;
}

/* =========================================================
   DASHBOARD WIDGET ICONS
   ========================================================= */

.lj-dashboard-widget-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  color: #FFFFFF;
  border: 0;
  font-size: 20px;
  box-shadow: 0 8px 22px rgba(1, 52, 130, .12);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

/* Always keep the actual icon white */

.lj-dashboard-widget-icon i {
  color: #FFFFFF !important;
  transition: transform .3s ease;
}

/* =========================================================
   1. BLUE
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 1) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0768CF, #0768CF);
}

/* =========================================================
   2. GREEN
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 2) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0687F1, #0768CF);
}

/* =========================================================
   3. RED
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 3) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0768CF, #013883);
}

/* =========================================================
   4. YELLOW / GOLD
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 4) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #4AB3FC, #1F9EFC);
}

/* =========================================================
   5. VIOLET
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 5) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0687F1, #0768CF);
}

/* =========================================================
   6. PURPLE
   ========================================================= */

.lj-dashboard-widget:nth-child(7n + 6) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #0768CF, #013883);
}

/* =========================================================
   7. #013482
   ========================================================= */

.lj-dashboard-widget:nth-child(7n) .lj-dashboard-widget-icon {
  background: linear-gradient( 135deg, #013482, #013482);
}

/* =========================================================
   HOVER
   ========================================================= */

.lj-dashboard-widget:hover .lj-dashboard-widget-icon {
  transform: translateY(-4px) scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 13px 30px rgba(1, 52, 130, .18);
}

.lj-dashboard-widget:hover .lj-dashboard-widget-icon i {
  transform: scale(1.12);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:575.98px) {
  .lj-dashboard-widget-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 18px;
  }
}

/* =========================================================
   MY LISTINGS TOOLBAR
========================================================= */

.lj-dashboard-table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.lj-dashboard-table-toolbar .lj-dashboard-table-search {
  flex: 1 1 auto;
  min-width: 260px;
}

.lj-dashboard-table-toolbar .lj-dashboard-table-filter {
  flex: 0 0 210px;
  min-width: 0;
}

.lj-dashboard-table-toolbar input,
.lj-dashboard-table-toolbar select {
  width: 100%;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-dashboard-table-toolbar {
    flex-wrap: wrap;
  }
  .lj-dashboard-table-toolbar .lj-dashboard-table-search {
    flex: 1 1 100%;
  }
  .lj-dashboard-table-toolbar .lj-dashboard-table-filter {
    flex: 1 1 calc(50% - 6px);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  .lj-dashboard-table-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .lj-dashboard-table-toolbar .lj-dashboard-table-search,
  .lj-dashboard-table-toolbar .lj-dashboard-table-filter {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   LIVE AUCTION FLOATING BUTTON
   Circular • Premium • Always Above Components
========================================================= */

.lj-live-auction-fab {
  position: fixed;
  left: 18px;
  bottom: 50%;
  z-index: 999999;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  text-decoration: none;
  border-radius: 50%;
  isolation: isolate;
}

/* =========================================================
   MAIN ROUND BUTTON
========================================================= */

.lj-live-auction-fab-inner {
  position: relative;
  z-index: 5;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(7, 104, 207, .28), 0 4px 10px rgba(1, 52, 130, .16);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  animation: ljLiveAuctionFloat 3s ease-in-out infinite;
}

/* =========================================================
   GAVEL
========================================================= */

.lj-live-auction-fab-inner>i {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  font-size: 19px;
  transition: transform var(--transition-fast);
}

/* =========================================================
   LIVE INDICATOR
========================================================= */

.lj-live-auction-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 8px;
  height: 8px;
  background: #FFFFFF;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .75);
  animation: ljLiveAuctionDotPulse 1.5s ease-out infinite;
}

@keyframes ljLiveAuctionDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .75);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* =========================================================
   RIPPLE WAVES
========================================================= */

.lj-live-auction-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(7, 104, 207, .38);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  opacity: 0;
  animation: ljLiveAuctionRipple 2.4s ease-out infinite;
}

.lj-live-auction-ripple.ripple-two {
  animation-delay: .8s;
}

.lj-live-auction-ripple.ripple-three {
  animation-delay: 1.6s;
}

@keyframes ljLiveAuctionRipple {
  0% {
    opacity: .75;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.75);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.75);
  }
}

/* =========================================================
   FLOATING MOTION
========================================================= */

@keyframes ljLiveAuctionFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* =========================================================
   HOVER
========================================================= */

.lj-live-auction-fab:hover .lj-live-auction-fab-inner {
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-tertiary));
  transform: translateY(-3px) scale(1.07);
  box-shadow: 0 16px 36px rgba(7, 104, 207, .34), 0 5px 14px rgba(1, 52, 130, .18);
}

.lj-live-auction-fab:hover .lj-live-auction-fab-inner>i {
  transform: rotate(-12deg) scale(1.10);
}

/* =========================================================
   ACTIVE CLICK
========================================================= */

.lj-live-auction-fab:active .lj-live-auction-fab-inner {
  transform: scale(.94);
}

/* =========================================================
   KEEP ABOVE MODALS / NAV / COMPONENTS
========================================================= */

.lj-live-auction-fab {
  pointer-events: auto;
  /*
     * Intentionally very high because this button should remain
     * above dashboard cards, headers, bottom navs and dropdowns.
     */
  z-index: 2147483000;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-live-auction-fab {
    left: 12px;
    bottom: calc( 20% + env(safe-area-inset-bottom));
    width: 50px;
    height: 50px;
  }
  .lj-live-auction-fab-inner,
  .lj-live-auction-ripple {
    width: 50px;
    height: 50px;
  }
  .lj-live-auction-fab-inner>i {
    font-size: 17px;
  }
  .lj-live-auction-dot {
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px) {
  .lj-live-auction-fab {
    left: 10px;
    width: 46px;
    height: 46px;
  }
  .lj-live-auction-fab-inner,
  .lj-live-auction-ripple {
    width: 46px;
    height: 46px;
  }
  .lj-live-auction-fab-inner>i {
    font-size: 16px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-live-auction-fab-inner,
  .lj-live-auction-ripple,
  .lj-live-auction-dot {
    animation: none !important;
  }
}

/* =========================================================
   LINJUST 404 PAGE
   Premium • Elegant • Warm • Responsive
========================================================= */

.lj-error-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: radial-gradient( circle at 20% 30%, rgba(31, 158, 252, .12), transparent 34%), radial-gradient( circle at 85% 65%, rgba(7, 104, 207, .08), transparent 30%), var(--color-off-white);
  font-family: var(--font-body);
}

/* =========================================================
   SECTION
========================================================= */

.lj-error-section {
  position: relative;
  min-height: calc( 100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  overflow: hidden;
}

/* =========================================================
   CONTAINER
========================================================= */

.lj-error-container {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 70px;
}

/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.lj-error-bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: .14;
  filter: blur(2px);
}

.lj-error-bg-shape-one {
  width: 320px;
  height: 320px;
  top: -110px;
  left: -100px;
  background: linear-gradient( 135deg, var(--color-secondary), transparent);
  animation: ljErrorFloatOne 7s ease-in-out infinite;
}

.lj-error-bg-shape-two {
  width: 420px;
  height: 420px;
  right: -170px;
  bottom: -170px;
  background: linear-gradient( 135deg, var(--color-primary), transparent);
  animation: ljErrorFloatTwo 9s ease-in-out infinite;
}

@keyframes ljErrorFloatOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d( 20px, 22px, 0);
  }
}

@keyframes ljErrorFloatTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d( -20px, -16px, 0);
  }
}

/* =========================================================
   VISUAL
========================================================= */

.lj-error-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lj-error-number-wrap {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1 / .82;
  display: grid;
  place-items: center;
}

/* =========================================================
   LARGE 404
========================================================= */

.lj-error-number {
  position: relative;
  z-index: 3;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp( 118px, 17vw, 220px);
  font-weight: var(--weight-bold);
  line-height: .78;
  letter-spacing: -.07em;
  text-shadow: 0 16px 35px rgba(7, 104, 207, .12);
  animation: ljErrorNumberFloat 4.5s ease-in-out infinite;
}

@keyframes ljErrorNumberFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* =========================================================
   SHADOW NUMBER
========================================================= */

.lj-error-number-shadow {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(1.04);
  color: transparent;
  -webkit-text-stroke: 1px rgba(1, 56, 131, .10);
  font-family: var(--font-heading);
  font-size: clamp( 128px, 18vw, 235px);
  font-weight: var(--weight-bold);
  line-height: .78;
  letter-spacing: -.07em;
  z-index: 1;
}

/* =========================================================
   ORBIT ICON
========================================================= */

.lj-error-orbit {
  position: absolute;
  z-index: 4;
  width: 84px;
  height: 84px;
  right: 8%;
  top: 12%;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border: 5px solid var(--color-off-white);
  border-radius: 50%;
  box-shadow: 0 16px 35px rgba(1, 52, 130, .15);
  animation: ljErrorOrbitFloat 3.5s ease-in-out infinite;
}

.lj-error-orbit i {
  position: relative;
  z-index: 2;
  font-size: 27px;
  animation: ljErrorCompass 5s linear infinite;
}

.lj-error-orbit span {
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(7, 104, 207, .30);
  border-radius: 50%;
  animation: ljErrorRipple 2.3s ease-out infinite;
}

@keyframes ljErrorOrbitFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes ljErrorCompass {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ljErrorRipple {
  0% {
    opacity: .8;
    transform: scale(.75);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

/* =========================================================
   CONTENT
========================================================= */

.lj-error-content {
  position: relative;
  max-width: 650px;
}

/* =========================================================
   KICKER
========================================================= */

.lj-error-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lj-error-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--color-secondary);
}

.lj-error-kicker i {
  color: var(--color-secondary-dark);
}

/* =========================================================
   HEADING
========================================================= */

.lj-error-content h2 {
  margin: 0 0 18px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: clamp( 38px, 5vw, 62px);
  font-weight: var(--weight-bold);
  line-height: .98;
  letter-spacing: -.03em;
}

/* =========================================================
   PARAGRAPH
========================================================= */

.lj-error-content p {
  max-width: 600px;
  margin: 0 0 27px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.85;
}

/* =========================================================
   BUTTONS
========================================================= */

.lj-error-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.lj-error-btn {
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.lj-error-btn i {
  font-size: 14px;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.lj-error-btn-primary {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: var(--color-primary);
  box-shadow: 0 10px 25px rgba(7, 104, 207, .18);
}

.lj-error-btn-primary:hover {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark), var(--color-tertiary));
  transform: translateY(-2px);
  box-shadow: 0 14px 31px rgba(7, 104, 207, .22);
}

/* =========================================================
   LIGHT BUTTON
========================================================= */

.lj-error-btn-light {
  color: var(--color-title);
  background: var(--color-white);
  border-color: var(--color-border);
  box-shadow: 0 7px 18px rgba(1, 52, 130, .05);
}

.lj-error-btn-light:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* =========================================================
   HELPFUL LINKS
========================================================= */

.lj-error-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.lj-error-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.lj-error-links a i {
  color: var(--color-secondary-dark);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.lj-error-links a:hover {
  color: var(--color-primary);
  transform: translateX(3px);
}

.lj-error-links a:hover i {
  color: var(--color-primary);
  transform: scale(1.1);
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-error-section {
    min-height: auto;
    padding: 80px 22px;
  }
  .lj-error-container {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }
  .lj-error-visual {
    order: 1;
  }
  .lj-error-content {
    order: 2;
    margin: auto;
  }
  .lj-error-kicker,
  .lj-error-actions,
  .lj-error-links {
    justify-content: center;
  }
  .lj-error-content p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767.98px) {
  .lj-error-section {
    padding: 65px 17px 80px;
  }
  .lj-error-container {
    gap: 25px;
  }
  .lj-error-number-wrap {
    max-width: 330px;
  }
  .lj-error-number {
    font-size: clamp( 110px, 34vw, 155px);
  }
  .lj-error-number-shadow {
    font-size: clamp( 120px, 37vw, 168px);
  }
  .lj-error-orbit {
    width: 65px;
    height: 65px;
    right: 6%;
    top: 8%;
    border-width: 4px;
  }
  .lj-error-orbit i {
    font-size: 21px;
  }
  .lj-error-content h2 {
    font-size: clamp( 34px, 10vw, 47px);
  }
  .lj-error-content p {
    font-size: 12px;
    line-height: 1.8;
  }
  .lj-error-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .lj-error-btn {
    width: 100%;
    padding: 0 13px;
  }
  .lj-error-links {
    gap: 12px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px) {
  .lj-error-section {
    padding: 55px 14px 72px;
  }
  .lj-error-content h2 {
    font-size: 35px;
  }
  .lj-error-actions {
    grid-template-columns: 1fr;
  }
  .lj-error-links {
    flex-direction: column;
    align-items: center;
    gap: 11px;
  }
  .lj-error-orbit {
    width: 58px;
    height: 58px;
  }
  .lj-error-orbit i {
    font-size: 18px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-error-page *,
  .lj-error-page *::before,
  .lj-error-page *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/*
|--------------------------------------------------------------------------
| STORE SAVE + MEDIA WATERMARK ADDITIONS
|--------------------------------------------------------------------------
| Add this file after your existing store stylesheet.
|--------------------------------------------------------------------------
*/

.lj-es-product-swiper .swiper-slide {
  position: relative;
}

.lj-es-media-watermark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  max-width: calc(100% - 24px);
  padding: 5px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .94);
  background: rgba(1, 52, 130, .46);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lj-es-product-save.is-saving {
  cursor: wait;
  opacity: .72;
  pointer-events: none;
}

.lj-es-product-save.is-saved {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

@media (max-width: 575.98px) {
  .lj-es-media-watermark {
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 7px;
    font-size: 9px;
  }
}

/* =========================================================
   PROPERTY CARD BUSINESS LOGO
========================================================= */

.lj-property-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
}

.lj-property-agent-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
}

.lj-property-agent-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lj-property-agent-logo-empty {
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-dark));
  border-color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
}

.lj-property-agent>div {
  min-width: 0;
}

.lj-property-agent small {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.2;
}

.lj-property-agent>div>span {
  display: block;
  max-width: 180px;
  overflow: hidden;
  color: var(--color-title);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.lj-property-agent:hover>div>span {
  color: var(--color-primary);
}

@media(max-width:575.98px) {
  .lj-property-agent-logo {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .lj-property-agent>div>span {
    max-width: 130px;
  }
}

.lj-job-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.lj-job-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 0;
  padding: 16px;
  /* background: var(--color-off-white, #F6FBFD);*/
  /*border: 1px solid var(--color-border, #6F8DA8);*/
  /*border-radius: 14px;*/
  transition: var(--transition-fast, .25s ease)
}

.lj-job-feature-item:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 104, 207, .25);
  box-shadow: 0 10px 25px rgba(1, 52, 130, .06)
}

.lj-job-feature-item>i {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
  font-size: 19px
}

.lj-job-feature-item>span {
  min-width: 0
}

.lj-job-feature-item small {
  display: block;
  margin-bottom: 4px;
  color: var(--color-muted, #355A7D);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .45px
}

.lj-job-feature-item strong {
  display: block;
  color: var(--color-title, #013482);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere
}

.lj-job-heading-logo span,
.lj-job-recruiter-logo span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-primary, #0768CF), var(--color-primary-dark, #013883));
  color: #FFFFFF;
  font-weight: 800
}

.lj-job-main-apply-btn:disabled,
.lj-job-submit-application:disabled {
  opacity: .62;
  cursor: not-allowed;
  transform: none !important
}

.lj-job-application-message,
.lj-job-review-message {
  display: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55
}

.lj-job-application-message:not(:empty),
.lj-job-review-message:not(:empty) {
  display: block
}

.lj-job-application-message.is-error,
.lj-job-review-message.is-error {
  background: #D5EAF8;
  border: 1px solid #4AB3FC;
  color: #013883
}

.lj-job-application-message.is-success,
.lj-job-review-message.is-success {
  background: #F6FBFD;
  border: 1px solid #4AB3FC;
  color: #0768CF
}

.lj-job-feedback-avatar-fallback {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #0768CF), var(--color-primary-dark, #013883));
  color: #FFFFFF;
  font-weight: 800
}

.lj-job-feedback-item>img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border, #6F8DA8)
}

a.lj-job-quick-action {
  text-decoration: none
}

@media(max-width:767.98px) {
  .lj-job-feature-grid {
    grid-template-columns: 1fr
  }
  .lj-job-feature-item {
    padding: 14px
  }
}

/*
|--------------------------------------------------------------------------
| PRODUCT DETAILS — SMALL PROJECT OVERRIDES
|--------------------------------------------------------------------------
*/

.lj-pd-price-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.lj-pd-negotiable-text {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-primary-dark, #013883);
}

.lj-pd-save.is-saved {
  background: #FFFFFF !important;
  color: var(--color-primary, #0768CF) !important;
  border-color: var(--color-primary, #0768CF) !important;
}

.lj-pd-save.is-saved i {
  color: var(--color-primary, #0768CF) !important;
}

.lj-pd-offer-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 10px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-text, #082E5C);
  font-size: 12px;
  line-height: 1.55;
}

.lj-pd-offer-note i {
  margin-top: 2px;
  color: var(--color-primary, #0768CF);
}

.lj-pd-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none
}

.lj-pd-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background: var(--color-off-white, #F6FBFD);
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 12px
}

.lj-pd-features li>i {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF)
}

.lj-pd-features li span {
  min-width: 0
}

.lj-pd-features li small {
  display: block;
  margin-bottom: 3px;
  color: var(--color-muted, #355A7D);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .45px
}

.lj-pd-features li strong {
  display: block;
  color: var(--color-title, #013482);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere
}

.lj-pd-avatar-fallback,
.lj-pd-comment-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #0768CF), var(--color-primary-dark, #013883));
  color: #FFFFFF;
  font-weight: 800
}

.lj-pd-avatar-fallback {
  width: 100%;
  height: 100%
}

.lj-pd-comment-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px
}

.lj-pd-comments article>img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  object-fit: cover
}

.lj-pd-save.is-saved {
  color: var(--color-primary, #0768CF)
}

.lj-pd-features+* {
  margin-top: 0
}

@media(max-width:767.98px) {
  .lj-pd-features {
    grid-template-columns: 1fr
  }
}

.lj-pd-price-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* Main product price */

.lj-pd-main-price {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-primary, #0768CF);
  letter-spacing: -0.7px;
}

/* Slightly negotiable */

.lj-pd-negotiable-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-success, #0768CF);
}

.lj-pd-negotiable-text i {
  font-size: 11px;
  color: var(--color-success, #0768CF);
}

/* Mobile */

@media (max-width: 575.98px) {
  .lj-pd-main-price {
    font-size: 29px;
  }
  .lj-pd-negotiable-text {
    font-size: 11px;
  }
}

/* ============================================================
   LINJUST PROFILE DASHBOARD - REVIEWS & OFFERS
============================================================ */

.lj-engagement-card {
  overflow: hidden;
}

.lj-engagement-heading-copy span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary, #0768CF);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lj-engagement-heading-copy h2 {
  margin: 0;
}

.lj-engagement-product-cell {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 220px;
}

.lj-engagement-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 1px solid rgba(7, 104, 207, .10);
  border-radius: 12px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
}

.lj-engagement-product-icon i {
  font-size: 16px;
}

.lj-engagement-product-cell strong,
.lj-engagement-person-cell strong {
  display: block;
  max-width: 260px;
  overflow: hidden;
  color: var(--color-title, #013482);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-engagement-product-cell small,
.lj-engagement-person-cell small,
.lj-engagement-date small {
  display: block;
  margin-top: 2px;
  color: var(--color-muted, #355A7D);
  font-size: 11px;
}

.lj-engagement-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  padding: 7px 9px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--color-text, #082E5C);
  font-size: 11px;
  font-weight: 700;
}

.lj-engagement-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: 9px;
  background: rgba(7, 104, 207, .05);
  color: var(--color-primary, #0768CF);
  transition: var(--transition-fast, all .2s ease);
}

.lj-engagement-view:hover,
.lj-engagement-view:focus {
  border-color: var(--color-primary, #0768CF);
  background: var(--color-primary, #0768CF);
  color: #FFFFFF;
}

.lj-engagement-empty {
  padding: 60px 20px !important;
  text-align: center !important;
}

.lj-engagement-empty div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--color-muted, #355A7D);
}

.lj-engagement-empty i {
  margin-bottom: 4px;
  color: var(--color-primary, #0768CF);
  font-size: 34px;
}

.lj-engagement-empty strong {
  color: var(--color-title, #013482);
  font-size: 14px;
}

.lj-engagement-empty p {
  margin: 0;
  font-size: 12px;
}

/* ============================================================
   MODAL
============================================================ */

.lj-engagement-modal-shell {
  position: fixed;
  z-index: 1080;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.lj-engagement-modal-shell.is-open {
  display: flex;
}

.lj-engagement-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(1, 52, 130, .58);
  cursor: default;
}

.lj-engagement-modal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(88vh, 860px);
  overflow: hidden;
  border: 2px solid var(--color-primary, #0768CF);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 30px 90px rgba(1, 52, 130, .28);
}

.lj-engagement-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  border-bottom: 1px solid var(--color-border, #6F8DA8);
  background: #FFFFFF;
}

.lj-engagement-modal-header span {
  display: block;
  margin-bottom: 3px;
  color: var(--color-primary, #0768CF);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lj-engagement-modal-header h3 {
  margin: 0;
  color: var(--color-title, #013482);
  font-size: 21px;
  font-weight: 800;
}

.lj-engagement-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-title, #013482);
}

.lj-engagement-modal-close:hover {
  border-color: var(--color-primary, #0768CF);
  color: var(--color-primary, #0768CF);
}

.lj-engagement-modal-body {
  overflow-y: auto;
  padding: 21px;
  background: var(--color-off-white, #F6FBFD);
}

.lj-engagement-modal-section {
  padding: 17px;
  margin-bottom: 15px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 13px;
  background: #FFFFFF;
}

.lj-engagement-modal-section:last-child {
  margin-bottom: 0;
}

.lj-engagement-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 11px;
  margin-bottom: 14px;
  border-bottom: 1px solid #D5EAF8;
  color: var(--color-primary, #0768CF);
  font-size: 13px;
  font-weight: 800;
}

.lj-engagement-section-title i {
  font-size: 17px;
}

.lj-engagement-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 20px;
}

.lj-engagement-info span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-muted, #355A7D);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lj-engagement-info strong,
.lj-engagement-info p {
  margin: 0;
  color: var(--color-title, #013482);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.lj-engagement-info.is-full {
  grid-column: 1 / -1;
}

.lj-engagement-info.is-full p {
  color: var(--color-text, #082E5C);
  font-weight: 450;
  line-height: 1.75;
  white-space: pre-line;
}

.lj-engagement-product-link {
  color: var(--color-primary, #0768CF);
  font-weight: 750;
  text-decoration: none;
}

.lj-engagement-product-link:hover {
  color: var(--color-primary-dark, #013883);
  text-decoration: underline;
}

.lj-engagement-list {
  display: grid;
  gap: 12px;
}

.lj-engagement-person-card {
  padding: 14px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 12px;
  background: #FFFFFF;
}

.lj-engagement-person-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.lj-engagement-person {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.lj-engagement-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 50%;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
  font-size: 16px;
  font-weight: 800;
}

.lj-engagement-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lj-engagement-person-copy {
  min-width: 0;
}

.lj-engagement-person-copy strong {
  display: block;
  overflow: hidden;
  color: var(--color-title, #013482);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lj-engagement-person-copy span {
  display: block;
  margin-top: 2px;
  color: var(--color-muted, #355A7D);
  font-size: 10px;
}

.lj-engagement-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
  margin-top: 12px;
}

.lj-engagement-contact-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--color-text, #082E5C);
  font-size: 11px;
}

.lj-engagement-contact-item i {
  color: var(--color-primary, #0768CF);
}

.lj-engagement-contact-item span {
  overflow-wrap: anywhere;
}

.lj-engagement-reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  padding: 8px 11px;
  border: 1px solid var(--color-primary, #0768CF);
  border-radius: 9px;
  background: var(--color-primary, #0768CF);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.lj-engagement-reply:hover {
  background: var(--color-primary-dark, #013883);
  color: #FFFFFF;
}

.lj-engagement-comment,
.lj-engagement-offer-history {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #D5EAF8;
}

.lj-engagement-comment p {
  margin: 0;
  color: var(--color-text, #082E5C);
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-line;
}

.lj-engagement-comment small {
  display: block;
  margin-top: 7px;
  color: var(--color-muted, #355A7D);
  font-size: 10px;
}

.lj-engagement-offer-history {
  display: grid;
  gap: 8px;
}

.lj-engagement-offer-item {
  display: grid;
  grid-template-columns: minmax(120px, .65fr) minmax(110px, .45fr) 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--color-off-white, #F6FBFD);
}

.lj-engagement-offer-item strong {
  color: var(--color-primary, #0768CF);
  font-size: 13px;
  font-weight: 800;
}

.lj-engagement-offer-status {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
  font-size: 9px;
  font-weight: 800;
  text-transform: capitalize;
}

.lj-engagement-offer-item small {
  color: var(--color-muted, #355A7D);
  font-size: 10px;
  text-align: right;
}

.lj-engagement-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 13px 20px;
  border-top: 1px solid var(--color-border, #6F8DA8);
  background: #FFFFFF;
}

.lj-engagement-modal-footer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 9px;
  background: #FFFFFF;
  color: var(--color-title, #013482);
  font-size: 11px;
  font-weight: 750;
}

body.lj-engagement-modal-open {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .lj-engagement-product-grid,
  .lj-engagement-contact-grid {
    grid-template-columns: 1fr;
  }
  .lj-engagement-modal-shell {
    padding: 10px;
  }
  .lj-engagement-modal {
    max-height: 94vh;
    border-radius: 14px;
  }
  .lj-engagement-modal-header,
  .lj-engagement-modal-body {
    padding: 15px;
  }
  .lj-engagement-person-head {
    align-items: stretch;
    flex-direction: column;
  }
  .lj-engagement-reply {
    justify-content: center;
    width: 100%;
  }
  .lj-engagement-offer-item {
    grid-template-columns: 1fr;
  }
  .lj-engagement-offer-item small {
    text-align: left;
  }
}

/* =========================================================
   LINJUST SELLER STOREFRONT PAGE
   Uses existing frontend CSS variables and visual language.
========================================================= */

.lj-seller-page {
  width: 100%;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-off-white);
  font-family: var(--font-body);
}

.lj-seller-page *,
.lj-seller-page *::before,
.lj-seller-page *::after {
  box-sizing: border-box
}

/* HERO */

.lj-seller-hero {
  position: relative;
  min-height: 360px;
  height: min(450px, 72vh);
  overflow: visible;
  isolation: isolate;
  background: var(--color-dark);
}

.lj-seller-hero-media,
.lj-seller-hero-overlay {
  position: absolute;
  inset: 0;
}

.lj-seller-hero-media {
  z-index: -3;
  background: linear-gradient(135deg, #013482, #013482)
}

.lj-seller-hero-media img,
.lj-seller-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.lj-seller-hero-overlay {
  z-index: -2;
  background: var(--lj-page-hero-overlay, rgba(1, 52, 130, .62));
  opacity: var(--lj-page-hero-opacity, .7);
}

.lj-seller-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  z-index: -1;
  content: "";
  background: linear-gradient(to top, rgba(1, 52, 130, .58), transparent);
  pointer-events: none;
}

.lj-seller-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 56px 20px 95px;
  text-align: center;
  color: #FFFFFF;
}

.lj-seller-hero-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  margin-bottom: 10px;
  color: var(--color-dark);
  background: var(--color-secondary);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lj-seller-hero-content h1 {
  max-width: 900px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(39px, 6vw, 72px);
  font-weight: var(--weight-semibold);
  line-height: .98;
  letter-spacing: -.02em;
  text-shadow: 0 4px 28px rgba(1, 52, 130, .28);
}

.lj-seller-hero-content p {
  max-width: 700px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(11px, 1.3vw, 14px);
  line-height: 1.75;
}

.lj-seller-verified-badge {
  position: absolute;
  z-index: 5;
  top: 20px;
  right: max(20px, calc((100vw - 1320px)/2));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  color: var(--color-dark);
  background: rgba(31, 158, 252, .96);
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-small);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.lj-seller-verified-badge i {
  font-size: 13px
}

.lj-seller-identity-wrap {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: -42px;
  left: 0;
  pointer-events: none;
}

.lj-seller-identity {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  pointer-events: auto
}

.lj-seller-avatar {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #FFFFFF;
  background: var(--color-primary);
  border: 5px solid #FFFFFF;
  border-radius: 5%;
  box-shadow: 0 16px 38px rgba(1, 52, 130, .22);
  font-family: var(--font-heading);
  font-size: 55px;
  font-weight: var(--weight-bold);
}

.lj-seller-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-seller-identity-copy {
  padding-bottom: 12px;
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(1, 52, 130, .5)
}

.lj-seller-identity-copy strong {
  display: block;
  max-width: 520px;
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1
}

.lj-seller-identity-copy small {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  color: rgba(255, 255, 255, .76)
}

/* TAB NAV */

.lj-seller-tab-nav-section {
  /** position:relative **/
  z-index: 4;
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(1, 52, 130, .04);
}

.lj-seller-tab-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 68px;
  overflow-x: auto;
  scrollbar-width: none
}

.lj-seller-tab-nav::-webkit-scrollbar {
  display: none
}

.lj-seller-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 60px;
  padding: 0 23px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.lj-seller-tab i {
  font-size: 14px
}

.lj-seller-tab::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: transparent
}

.lj-seller-tab:hover,
.lj-seller-tab.is-active {
  color: var(--color-primary)
}

.lj-seller-tab.is-active::after {
  background: var(--color-primary)
}

/* CONTENT */

.lj-seller-content-section {
  padding: 52px 0 70px
}

.lj-seller-content-card {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-small)
}

.lj-seller-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
  background: #FFFFFF
}

.lj-seller-content-header span {
  display: block;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .06em
}

.lj-seller-content-header h2 {
  margin: 2px 0 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: var(--weight-semibold)
}

.lj-seller-listing-total {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 7px 10px !important;
  color: var(--color-text) !important;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill)
}

.lj-seller-listing-total strong {
  color: var(--color-primary);
  font-size: 12px
}

.lj-seller-tab-panel {
  padding: 22px
}

.lj-seller-tab-panel[hidden] {
  display: none !important
}

/* TOOLBAR */

.lj-seller-listing-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 12px;
  margin-bottom: 22px
}

.lj-seller-search,
.lj-seller-category-filter {
  display: flex;
  align-items: center;
  min-height: 48px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast)
}

.lj-seller-search:focus-within,
.lj-seller-category-filter:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(7, 104, 207, .06)
}

.lj-seller-search>i,
.lj-seller-category-filter>i:first-child {
  margin-left: 14px;
  color: var(--color-primary);
  font-size: 14px
}

.lj-seller-search input,
.lj-seller-category-filter select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px
}

.lj-seller-category-filter select {
  appearance: none;
  cursor: pointer
}

.lj-seller-category-filter>i:last-child {
  margin-right: 13px;
  color: var(--color-muted);
  font-size: 10px;
  pointer-events: none
}

/* LISTING GRID */

.lj-seller-listing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px
}

.lj-seller-listing-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 25px rgba(1, 52, 130, .05);
  transition: var(--transition-normal)
}

.lj-seller-listing-item:hover {
  transform: translateY(-3px);
  border-color: rgba(7, 104, 207, .18);
  box-shadow: 0 18px 38px rgba(1, 52, 130, .09)
}

.lj-seller-card-media {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--color-surface)
}

.lj-seller-media-swiper,
.lj-seller-media-swiper .swiper-wrapper,
.lj-seller-media-swiper .swiper-slide {
  width: 100%;
  height: 100%
}

.lj-seller-media-swiper img,
.lj-seller-media-swiper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.lj-seller-media-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background: #FFFFFF;
  opacity: .55
}

.lj-seller-media-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--color-primary)
}

.lj-seller-media-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--color-muted);
  font-size: 38px
}

.lj-seller-save {
  position: absolute;
  z-index: 8;
  top: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--color-primary);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 7px 18px rgba(1, 52, 130, .13);
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-seller-save:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary)
}

.lj-seller-save.is-saved {
  color: var(--color-primary);
  background: #FFFFFF;
  border-color: var(--color-primary)
}

.lj-seller-product-body {
  padding: 15px
}

.lj-seller-product-category {
  display: block;
  margin-bottom: 6px;
  color: var(--color-primary);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em
}

.lj-seller-product-body h3 {
  min-height: 43px;
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.06
}

.lj-seller-product-body h3 a:hover {
  color: var(--color-primary)
}

.lj-seller-product-price {
  display: block;
  margin-top: 11px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: var(--weight-bold)
}

.lj-seller-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-size: 8px
}

.lj-seller-product-footer span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-muted)
}

.lj-seller-product-footer span i {
  color: var(--color-primary)
}

.lj-seller-product-footer a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary);
  font-weight: var(--weight-bold)
}

/* PROPERTY - complements existing property classes */

.lj-seller-property-card .lj-property-card-body {
  min-height: 126px
}

.lj-seller-property-card .lj-property-price small {
  font-size: 8px;
  color: var(--color-text);
  font-weight: var(--weight-semibold)
}

.lj-seller-property-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px
}

.lj-seller-property-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 8px
}

.lj-seller-property-stats i {
  color: var(--color-primary)
}

.lj-seller-mini-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--color-title);
  font-size: 8px;
  font-weight: var(--weight-semibold)
}

.lj-seller-mini-brand i {
  color: var(--color-primary)
}

/* EVENTS */

.lj-seller-event-card .lj-event-card-body {
  min-height: 150px
}

.lj-seller-event-card .lj-event-price-title h3 {
  font-size: 20px;
  min-height: 43px
}

.lj-seller-event-card .lj-event-card-meta {
  margin-top: 12px
}

.lj-seller-event-card .lj-event-card-footer {
  min-height: 52px
}

/* JOBS - same grid personality as jobs page, adapted to 4 columns */

.lj-seller-job-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 22px 16px 15px;
  text-align: center;
  overflow: visible
}

.lj-seller-job-card .lj-job-card-status {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 8px;
  color: #FFFFFF;
  background: var(--color-success);
  border-radius: var(--radius-pill);
  font-size: 7px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-seller-job-card .lj-job-card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0
}

.lj-seller-job-card .lj-job-logo {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: 22px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 50%
}

.lj-seller-job-card .lj-job-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-seller-job-card .lj-job-logo i {
  color: var(--color-primary);
  font-size: 24px
}

.lj-seller-job-card .lj-job-card-content {
  width: 100%;
  margin-top: 14px
}

.lj-seller-job-card .lj-job-card-content h3 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.04
}

.lj-seller-job-card .lj-job-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 11px
}

.lj-seller-job-card .lj-job-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  font-size: 7px
}

.lj-seller-job-card .lj-job-meta i {
  color: var(--color-primary)
}

.lj-seller-job-card .lj-job-description {
  display: -webkit-box;
  overflow: hidden;
  margin: 12px 0 0;
  color: var(--color-text);
  font-size: 9px;
  line-height: 1.65;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}

.lj-seller-job-card .lj-job-card-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--color-border)
}

.lj-seller-job-card .lj-seller-save {
  position: static;
  box-shadow: none
}

.lj-seller-job-card .lj-job-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 10px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 7px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

/* EMPTY + PAGINATION */

.lj-seller-empty {
  padding: 55px 20px;
  text-align: center;
  border: 1px dashed var(--color-border);
  background: var(--color-off-white)
}

.lj-seller-empty i {
  color: var(--color-primary);
  font-size: 44px
}

.lj-seller-empty h3 {
  margin: 12px 0 5px;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 28px
}

.lj-seller-empty p {
  margin: 0;
  font-size: 11px
}

.lj-seller-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 28px
}

.lj-seller-pagination:empty {
  display: none
}

.lj-seller-page-btn {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 9px;
  color: var(--color-title);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 10px;
  font-weight: var(--weight-semibold)
}

.lj-seller-page-btn:hover,
.lj-seller-page-btn.is-active {
  color: #FFFFFF;
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-seller-page-btn:disabled {
  opacity: .4;
  pointer-events: none
}

/* ABOUT */

.lj-seller-about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 18px
}

.lj-seller-about-copy,
.lj-seller-social-card,
.lj-seller-contact-intro {
  padding: 25px;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm)
}

.lj-seller-panel-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase
}

.lj-seller-about-layout h3,
.lj-seller-contact-layout h3 {
  margin: 0;
  color: var(--color-title);
  font-family: var(--font-heading);
  font-size: 31px;
  line-height: 1.05
}

.lj-seller-about-copy p,
.lj-seller-contact-intro>p {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.9
}

.lj-seller-social-links {
  display: grid;
  gap: 8px;
  margin-top: 17px
}

.lj-seller-social-links a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 11px;
  color: var(--color-title);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  transition: var(--transition-fast)
}

.lj-seller-social-links a>i:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 50%
}

.lj-seller-social-links a>i:last-child {
  color: var(--color-muted);
  font-size: 8px
}

.lj-seller-social-links a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateX(2px)
}

.lj-seller-muted {
  margin: 12px 0 0;
  color: var(--color-muted);
  font-size: 11px
}

/* CONTACT */

.lj-seller-contact-layout {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: 18px
}

.lj-seller-contact-intro {
  background: linear-gradient(145deg, var(--color-off-white), #FFFFFF)
}

.lj-seller-contact-trust {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  padding: 12px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  font-size: 9px;
  line-height: 1.6
}

.lj-seller-contact-trust i {
  color: var(--color-success);
  font-size: 15px
}

.lj-seller-contact-form {
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm)
}

.lj-seller-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.lj-seller-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--color-title);
  font-size: 10px;
  font-weight: var(--weight-bold)
}

.lj-seller-form-grid label.is-full {
  grid-column: 1/-1
}

.lj-seller-form-grid label>div {
  display: flex;
  align-items: center;
  min-height: 49px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  transition: var(--transition-fast)
}

.lj-seller-form-grid label>div:focus-within {
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary)
}

.lj-seller-form-grid label>div.textarea {
  align-items: flex-start;
  padding-top: 13px
}

.lj-seller-form-grid label i {
  margin-right: 9px;
  color: var(--color-primary)
}

.lj-seller-form-grid input,
.lj-seller-form-grid textarea {
  width: 100%;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px
}

.lj-seller-form-grid textarea {
  min-height: 125px;
  resize: vertical;
  line-height: 1.7
}

.lj-seller-contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 18px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  transition: var(--transition-normal)
}

.lj-seller-contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 24px rgba(7, 104, 207, .16)
}

.lj-seller-contact-submit:disabled {
  opacity: .65;
  pointer-events: none
}

.lj-seller-honeypot {
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important
}

/* LOCATION */

.lj-seller-location-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px
}

.lj-seller-location-cards article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 95px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 22px rgba(1, 52, 130, .04)
}

.lj-seller-location-cards article>i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 50%;
  font-size: 17px
}

.lj-seller-location-cards span {
  display: block;
  color: var(--color-muted);
  font-size: 8px;
  font-weight: var(--weight-bold);
  text-transform: uppercase
}

.lj-seller-location-cards strong {
  display: block;
  margin-top: 4px;
  color: var(--color-title);
  font-size: 10px;
  line-height: 1.55;
  overflow-wrap: anywhere
}

.lj-seller-map-wrap {
  position: relative;
  width: 100%;
  height: 430px;
  margin-top: 16px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm)
}

.lj-seller-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

.lj-seller-map-empty {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: var(--color-muted);
  text-align: center
}

.lj-seller-map-empty i {
  color: var(--color-primary);
  font-size: 44px
}

.lj-seller-map-empty p {
  margin: 0;
  font-size: 11px
}

/* WHATSAPP */

.lj-seller-whatsapp {
  position: fixed;
  z-index: 1350;
  right: 22px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #FFFFFF;
  background: #1F9EFC;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(31, 158, 252, .3)
}

.lj-seller-whatsapp i {
  position: relative;
  z-index: 2;
  font-size: 26px
}

.lj-seller-whatsapp-wave {
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(31, 158, 252, .7);
  border-radius: 50%;
  animation: ljSellerWhatsappWave 1.8s ease-out infinite
}

@keyframes ljSellerWhatsappWave {
  0% {
    opacity: .8;
    transform: scale(.82)
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.45)
  }
}

/* COPYRIGHT */

.lj-seller-copyright-section {
  padding: 15px 0;
  background: #FFFFFF;
  border-top: 1px solid var(--color-border);
  text-align: center
}

.lj-seller-copyright-section p {
  margin: 0;
  color: var(--color-muted);
  font-size: 10px
}

@media(max-width:1199.98px) {
  .lj-seller-listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:991.98px) {
  .lj-seller-hero {
    height: 410px
  }
  .lj-seller-identity-wrap {
    bottom: -34px
  }
  .lj-seller-avatar {
    width: 118px;
    height: 118px;
    border-width: 4px;
    font-size: 42px
  }
  .lj-seller-identity-copy strong {
    font-size: 28px
  }
  .lj-seller-tab-nav {
    justify-content: flex-start;
    padding-left: 135px
  }
  .lj-seller-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .lj-seller-about-layout,
  .lj-seller-contact-layout {
    grid-template-columns: 1fr
  }
}

@media(max-width:767.98px) {
  .lj-seller-hero {
    min-height: 300px;
    height: 350px
  }
  .lj-seller-hero-content {
    padding: 18px 16px 20px
  }
  .lj-seller-verified-badge {
    top: 12px;
    right: 12px;
    padding: 7px 9px;
    font-size: 7px
  }
  .lj-seller-identity-wrap {
    bottom: -29px;
    padding: 0 14px
  }
  .lj-seller-avatar {
    width: 94px;
    height: 94px;
    border-width: 4px;
    font-size: 34px
  }
  .lj-seller-identity {
    gap: 10px
  }
  .lj-seller-identity-copy {
    padding-bottom: 7px
  }
  .lj-seller-identity-copy strong {
    max-width: 230px;
    font-size: 21px
  }
  .lj-seller-identity-copy small {
    font-size: 8px
  }
  .lj-seller-tab-nav-section {
    padding-top: 0
  }
  .lj-seller-tab-nav {
    justify-content: flex-start;
    min-height: 58px;
    padding-left: 104px
  }
  .lj-seller-tab {
    min-height: 58px;
    padding: 0 13px;
    font-size: 9px;
    gap: 5px
  }
  .lj-seller-content-section {
    padding: 35px 0 55px
  }
  .lj-seller-content-card {
    border-right: 0;
    border-left: 0;
    border-radius: 0
  }
  .lj-seller-content-header {
    padding: 14px 13px
  }
  .lj-seller-content-header h2 {
    font-size: 24px
  }
  .lj-seller-tab-panel {
    padding: 14px 10px
  }
  .lj-seller-listing-toolbar {
    grid-template-columns: 1fr;
    gap: 8px
  }
  .lj-seller-listing-grid {
    grid-template-columns: 1fr;
    gap: 13px
  }
  .lj-seller-card-media {
    height: 260px
  }
  .lj-seller-form-grid {
    grid-template-columns: 1fr
  }
  .lj-seller-form-grid label.is-full {
    grid-column: auto
  }
  .lj-seller-contact-form,
  .lj-seller-about-copy,
  .lj-seller-social-card,
  .lj-seller-contact-intro {
    padding: 17px
  }
  .lj-seller-location-cards {
    grid-template-columns: 1fr
  }
  .lj-seller-map-wrap {
    height: 340px
  }
  .lj-seller-whatsapp {
    right: 14px;
    bottom: calc(var(--mobile-bottom-height) + 15px);
    width: 50px;
    height: 50px
  }
  .lj-seller-whatsapp i {
    font-size: 23px
  }
}

@media(max-width:430px) {
  .lj-seller-hero-content h1 {
    font-size: 38px
  }
  .lj-seller-tab-nav {
    padding-left: 0;
  }
  .lj-seller-tab {
    flex: 1 0 auto;
    padding: 0 11px
  }
  .lj-seller-avatar {
    width: 72px;
    height: 72px
  }
  .lj-seller-identity-wrap {
    bottom: -35px
  }
  .lj-seller-identity-copy strong {
    max-width: 190px;
    font-size: 19px
  }
  .lj-seller-card-media {
    height: 235px
  }
  .lj-seller-listing-total {
    display: none !important
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-seller-page *,
  .lj-seller-page *::before,
  .lj-seller-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }
}

/* =========================================================
   PREMIUM V2 CARD OVERRIDES
========================================================= */

.lj-seller-page {
  --listing-border-color: var(--color-primary, #0768CF)
}

.lj-seller-hero {
  overflow: visible
}

.lj-seller-identity-wrap {
  z-index: 20;
  bottom: 0;
}

.lj-seller-tab-nav-section {
  z-index: 10;
  /**min-height: 84px**/
}

.lj-seller-tab-nav {
  min-height: 30px;
  padding-left: 165px;
  /**justify-content: flex-start**/
}

.lj-seller-listing-item {
  display: flex;
  /*min-height: 470px;**/
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--listing-border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(1, 52, 130, .06)
}

.lj-seller-listing-item:hover {
  border-color: var(--listing-border-color);
  box-shadow: 0 24px 55px rgba(1, 52, 130, .11)
}

.lj-seller-card-media {
  position: relative;
  height: 225px;
  flex: 0 0 225px
}

.lj-property-media-category {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  padding: 7px 9px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .72);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-property-media-feature {
  position: absolute;
  bottom: 12px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 9px;
  color: #FFFFFF;
  background: rgba(1, 52, 130, .74);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px)
}

.lj-property-media-feature.is-left {
  left: 12px
}

.lj-property-media-feature.is-right {
  right: 12px
}

.lj-property-media-feature i {
  color: var(--color-secondary);
  font-size: 11px
}

.lj-property-media-feature strong {
  font-size: 9px
}

.lj-property-media-feature small {
  font-size: 6px;
  font-weight: 700;
  text-transform: uppercase
}

.lj-premium-card-body {
  padding: 17px 16px 14px
}

.lj-premium-card-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--color-secondary-dark);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-premium-card-price {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700
}

.lj-premium-card-price small {
  color: var(--color-text);
  font-size: 8px;
  font-weight: 600
}

.lj-premium-card-body h3 {
  display: -webkit-box;
  min-height: 46px;
  margin: 0;
  overflow: hidden;
  color: var(--color-title);
  font: 500 22px/1.08 var(--font-heading);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 17px;
  line-height: 1.28;
}

.lj-premium-card-body h3 a {
  color: inherit
}

.lj-premium-card-body h3 a:hover {
  color: var(--color-primary)
}

.lj-premium-card-location,
.lj-premium-job-location {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  color: var(--color-text);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.5;
  font-size: 12px;
}

.lj-premium-card-location i,
.lj-premium-job-location i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-primary);
  font-size: 11px
}

.lj-premium-card-footer,
.lj-premium-job-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  /**min-height: 60px;**/
  margin-top: auto;
  padding: 4px 10px;
  background: linear-gradient(180deg, #FFFFFF, var(--color-surface));
  border-top: 1px solid var(--color-border)
}

.lj-premium-card-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0
}

.lj-premium-card-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  flex: 0 0 36px;
  color: #FFFFFF;
  background: var(--color-primary);
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(1, 52, 130, .1);
  font: 700 14px var(--font-heading)
}

.lj-premium-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-premium-card-brand>div:last-child {
  min-width: 0
}

.lj-premium-card-brand small {
  display: block;
  color: var(--color-muted);
  font-size: 6px;
  font-weight: 700;
  text-transform: uppercase
}

.lj-premium-card-brand strong {
  display: block;
  max-width: 125px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-title);
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lj-premium-footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 34px;
  padding: 0 11px;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-premium-event-footer {
  /**min-height: 64px;**/
  padding: 5px 10px
}

.lj-event-countdown {
  display: flex;
  align-items: center;
  gap: 3px
}

.lj-event-countdown>span {
  display: grid;
  min-width: 27px;
  text-align: center
}

.lj-event-countdown strong {
  color: var(--color-primary);
  font-size: 10px;
  line-height: 1
}

.lj-event-countdown small {
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 5px;
  font-weight: 700;
  text-transform: uppercase
}

.lj-event-countdown>b {
  margin-top: -9px;
  color: var(--color-secondary-dark);
  font-size: 8px
}

.lj-event-countdown.is-expired::before {
  content: 'Event started';
  color: var(--color-primary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-event-countdown.is-expired>* {
  display: none
}

.lj-seller-job-card {
  min-height: 470px;
  padding: 0;
  text-align: left;
  overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgba(31, 158, 252, .10), transparent 27%), linear-gradient(180deg, #FFFFFF, #FFFFFF)
}

.lj-premium-job-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 20px 5px
}

.lj-premium-job-logo {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  overflow: hidden;
  color: var(--color-primary);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(1, 52, 130, .08);
  font-size: 23px
}

.lj-premium-job-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-premium-job-top-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.lj-premium-job-status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-success);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase
}

.lj-premium-job-status i {
  font-size: 6px
}

.lj-premium-job-top .lj-seller-save {
  position: static;
  width: 34px;
  height: 34px;
  box-shadow: none;
  border-color: var(--color-border)
}

.lj-premium-job-content {
  padding: 14px 20px 18px
}

.lj-premium-job-company {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase
}

.lj-premium-job-content h3 {
  display: -webkit-box;
  /** min-height: 58px;**/
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--color-title);
  font: 500 27px/1.05 var(--font-heading);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 17px;
  line-height: 1.28;
}

.lj-premium-job-content h3 a {
  color: inherit
}

.lj-premium-job-content h3 a:hover {
  color: var(--color-primary)
}

.lj-premium-job-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border)
}

.lj-premium-job-features span {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 7px;
  color: var(--color-text)
}

.lj-premium-job-features i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-primary) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 14px
}

.lj-premium-job-features b {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--color-title);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.45;
  text-overflow: ellipsis
}

.lj-premium-job-description {
  display: -webkit-box;
  min-height: 48px;
  margin: 15px 0 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: 8px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3
}

.lj-premium-job-footer>span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-muted);
  font-size: 6px;
  font-weight: 700
}

.lj-premium-job-footer>span i {
  color: var(--color-secondary-dark)
}

.lj-premium-job-footer>a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-xs);
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase
}

@media(max-width:767.98px) {
  .lj-seller-identity-wrap {
    bottom: 0px
  }
  .lj-seller-tab-nav {
    /**min-height: 78px;**/
    padding-left: 65px;
    justify-content: flex-start
  }
  .lj-seller-listing-grid {
    grid-template-columns: 1fr
  }
  .lj-seller-card-media {
    height: 255px;
    flex-basis: 255px
  }
  .lj-premium-card-body h3 {
    font-size: 24px
  }
  .lj-premium-job-content h3 {
    font-size: 30px
  }
}

@media(max-width:430px) {
  .lj-seller-identity-wrap {
    /*bottom: -43px*/
  }
  .lj-seller-tab-nav {
    padding-left: 4px
  }
  .lj-seller-card-media {
    height: 235px;
    flex-basis: 235px
  }
}

/* =========================================================
   LINJUST PREMIUM HOME HERO
========================================================= */

.lj-home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 450px;
  max-height: 450px;
  overflow: hidden;
  color: var(--color-white);
  background: radial-gradient( circle at 18% 30%, rgba(255, 255, 255, .15), transparent 27%), radial-gradient( circle at 85% 75%, rgba(74, 179, 252, .13), transparent 28%), linear-gradient( 135deg, #013482 0%, #013883 43%, #0768CF 76%, #0687F1 100%);
  isolation: isolate;
}

/* =========================================================
   SUBTLE BACKGROUND GRID
========================================================= */

.lj-home-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: linear-gradient( rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient( 90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 82px 82px;
  pointer-events: none;
  opacity: .65;
  z-index: -2;
}

/* =========================================================
   BOTTOM SHADE
========================================================= */

.lj-home-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100px;
  content: "";
  background: linear-gradient( to top, rgba(1, 52, 130, .16), transparent);
  pointer-events: none;
  z-index: -1;
}

/* =========================================================
   MAIN HERO CONTAINER
========================================================= */

.lj-home-hero-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc( 100% - 40px);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  z-index: 5;
}

/* =========================================================
   HEADING AREA
========================================================= */

.lj-home-hero-heading-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 27px;
  text-align: center;
}

/* =========================================================
   EYEBROW
========================================================= */

.lj-home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .76);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: .05em;
}

.lj-home-hero-eyebrow i {
  color: var(--color-secondary);
  font-size: 16px;
}

/* =========================================================
   HERO TITLE
========================================================= */

.lj-home-hero-title {
  width: 100%;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  /*
     * Larger than the previous 64px maximum.
     */
  font-size: clamp( 44px, 5.5vw, 60px);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -.045em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 5px 30px rgba(1, 52, 130, .13);
}

/* =========================================================
   ANIMATED TITLE TEXT
========================================================= */

.lj-home-hero-title-accent {
  display: inline;
  margin-left: 5px;
  color: #4AB3FC;
  font-style: normal;
}

.lj-home-typewriter {
  color: #4AB3FC;
}

.lj-home-typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: .76em;
  margin-left: 5px;
  vertical-align: -.03em;
  background: #4AB3FC;
  border-radius: var(--radius-pill);
  animation: ljHeroCursorBlink .78s step-end infinite;
}

@keyframes ljHeroCursorBlink {
  0%,
  45% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}

/* =========================================================
   SEARCH BAR
========================================================= */

.lj-home-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 1.45fr) minmax(180px, .85fr) minmax(185px, .9fr) auto;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  min-height: 76px;
  margin: 0 auto;
  padding: 8px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: var(--radius-pill);
  box-shadow: 0 24px 70px rgba(1, 52, 130, .24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: left;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.lj-home-search:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 30px 80px rgba(1, 52, 130, .29);
}

/* =========================================================
   SEARCH FIELDS
========================================================= */

.lj-home-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 8px 18px;
  border-right: 1px solid var(--color-border);
  text-align: left;
}

/* =========================================================
   FIELD ICON
========================================================= */

.lj-home-search-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid rgba(7, 104, 207, .07);
  border-radius: var(--radius-round);
  font-size: 18px;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.lj-home-search-field:focus-within .lj-home-search-icon {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.06);
}

/* =========================================================
   INPUT WRAPPER
========================================================= */

.lj-home-search-input-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

/* =========================================================
   LABEL
========================================================= */

.lj-home-search-label {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* =========================================================
   INPUTS / SELECT
========================================================= */

.lj-home-search input,
.lj-home-search select {
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  color: var(--color-title);
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
}

.lj-home-search input::placeholder {
  color: #355A7D;
  opacity: 1;
}

.lj-home-search select {
  padding-right: 24px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* =========================================================
   SELECT ARROW
========================================================= */

.lj-home-select-arrow {
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--color-muted);
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
  transition: color var(--transition-fast);
}

.lj-home-search-category:focus-within .lj-home-select-arrow {
  color: var(--color-primary);
}

/* =========================================================
   SEARCH BUTTON
========================================================= */

.lj-home-search-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 145px;
  margin-left: 8px;
  padding: 0 25px;
  overflow: hidden;
  color: var(--color-white);
  background: linear-gradient( 135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  box-shadow: 0 10px 25px rgba(7, 104, 207, .25);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* BUTTON SHINE */

.lj-home-search-button::before {
  position: absolute;
  top: -40%;
  left: -55%;
  width: 45%;
  height: 180%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: rotate(20deg);
  transition: left .55s ease;
}

.lj-home-search-button:hover::before {
  left: 120%;
}

.lj-home-search-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 32px rgba(7, 104, 207, .31);
}

.lj-home-search-button:active {
  transform: translateY(0) scale(.985);
}

.lj-home-search-button i {
  position: relative;
  font-size: 18px;
  z-index: 2;
}

.lj-home-search-button span {
  position: relative;
  z-index: 2;
}

/* =========================================================
   FEATURED CATEGORIES WRAPPER
========================================================= */

.lj-home-featured {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 1100px;
  margin: 28px auto 0;
  text-align: center;
}

/* =========================================================
   FEATURED LABEL
========================================================= */

.lj-home-featured-label {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .67);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
}

/* =========================================================
   FEATURED LIST
========================================================= */

.lj-home-featured-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lj-home-featured-list::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   FEATURED CATEGORY ITEM
========================================================= */

.lj-home-featured-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 5px 14px 5px 6px;
  color: rgba(255, 255, 255, .90);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.lj-home-featured-item:hover {
  color: var(--color-title);
  background: var(--color-white);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

/* =========================================================
   FEATURED ICON
========================================================= */

.lj-home-featured-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: #4AB3FC;
  background: rgba(255, 255, 255, .10);
  border-radius: var(--radius-round);
  font-size: 13px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.lj-home-featured-item:hover .lj-home-featured-icon {
  color: var(--color-white);
  background: var(--color-primary);
}

/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.lj-home-hero-decoration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* =========================================================
   CIRCLES
========================================================= */

.lj-home-hero-circle {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-round);
}

.lj-circle-one {
  top: -270px;
  right: -90px;
  width: 620px;
  height: 620px;
  animation: ljHeroFloatOne 12s ease-in-out infinite;
}

.lj-circle-two {
  right: 85px;
  bottom: -390px;
  width: 590px;
  height: 590px;
  border-color: rgba(74, 179, 252, .10);
  animation: ljHeroFloatTwo 15s ease-in-out infinite;
}

/* =========================================================
   DECORATIVE CURVES
========================================================= */

.lj-home-hero-line {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
}

.lj-line-one {
  top: -185px;
  right: 90px;
  width: 480px;
  height: 600px;
  transform: rotate(20deg);
}

.lj-line-two {
  top: -120px;
  right: -120px;
  width: 480px;
  height: 600px;
  transform: rotate(-16deg);
}

/* =========================================================
   BACKGROUND GLOW
========================================================= */

.lj-home-hero-glow {
  position: absolute;
  top: 70px;
  left: 7%;
  width: 260px;
  height: 260px;
  background: rgba(255, 255, 255, .055);
  border-radius: var(--radius-round);
  filter: blur(65px);
  animation: ljHeroGlow 6s ease-in-out infinite;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes ljHeroFloatOne {
  0%,
  100% {
    transform: translate3d( 0, 0, 0);
  }
  50% {
    transform: translate3d( -15px, 12px, 0);
  }
}

@keyframes ljHeroFloatTwo {
  0%,
  100% {
    transform: translate3d( 0, 0, 0);
  }
  50% {
    transform: translate3d( 12px, -14px, 0);
  }
}

@keyframes ljHeroGlow {
  0%,
  100% {
    opacity: .55;
    transform: scale(1);
  }
  50% {
    opacity: .85;
    transform: scale(1.08);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-home-hero {
    height: auto;
    max-height: none;
    min-height: 450px;
    padding: 45px 0 36px;
  }
  /* =====================================================
       CONTAINER
    ====================================================== */
  .lj-home-hero-container {
    width: calc( 100% - 30px);
    max-width: 760px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }
  /* =====================================================
       HEADING
    ====================================================== */
  .lj-home-hero-heading-wrap {
    max-width: 760px;
    margin-bottom: 23px;
    text-align: center;
  }
  .lj-home-hero-title {
    font-size: clamp( 48px, 7.7vw, 66px);
    line-height: .98;
  }
  /* =====================================================
       SEARCH
    ====================================================== */
  .lj-home-search {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 760px;
    min-height: 0;
    padding: 8px;
    border-radius: var(--radius-lg);
  }
  .lj-home-search-field {
    min-height: 62px;
  }
  .lj-home-search-keyword,
  .lj-home-search-location {
    border-bottom: 1px solid var(--color-border);
  }
  .lj-home-search-location {
    border-right: 0;
  }
  .lj-home-search-category {
    border-right: 1px solid var(--color-border);
  }
  .lj-home-search-button {
    min-height: 54px;
    margin: 4px 0 4px 8px;
  }
  /* =====================================================
       FEATURED
    ====================================================== */
  .lj-home-featured {
    max-width: 760px;
  }
  .lj-home-featured-list {
    justify-content: flex-start;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  /* =====================================================
       HERO
    ====================================================== */
  .lj-home-hero {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 44px 0 57px;
  }
  /* =====================================================
       CONTAINER
    ====================================================== */
  .lj-home-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc( 100% - 24px);
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  /* =====================================================
       HEADING
    ====================================================== */
  .lj-home-hero-heading-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 22px;
    text-align: center;
  }
  .lj-home-hero-eyebrow {
    justify-content: center;
    margin-bottom: 8px;
    font-size: 10px;
  }
  /*
     * Larger mobile heading while still preventing
     * horizontal overflow.
     */
  .lj-home-hero-title {
    max-width: 100%;
    font-size: clamp( 38px, 4vw, 38px);
    line-height: .97;
    letter-spacing: -.04em;
    text-align: center;
  }
  .lj-home-hero-title-accent {
    display: block;
    min-height: 1em;
    margin: 5px 0 0;
    line-height: 1;
  }
  /* =====================================================
       PREMIUM MOBILE SEARCH PANEL
    ====================================================== */
  .lj-home-search {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 9px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 8px;
    box-shadow: 0 22px 55px rgba(1, 52, 130, .25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: none;
  }
  .lj-home-search:focus-within {
    transform: none;
    box-shadow: 0 25px 60px rgba(1, 52, 130, .29);
  }
  /* =====================================================
       MOBILE FIELD
    ====================================================== */
  .lj-home-search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 59px;
    padding: 8px 12px;
    background: var(--color-off-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  }
  /*
     * Remove all desktop separators.
     */
  .lj-home-search-keyword,
  .lj-home-search-location,
  .lj-home-search-category {
    border: 1px solid var(--color-border);
  }
  /* =====================================================
       FIELD FOCUS
    ====================================================== */
  .lj-home-search-field:focus-within {
    background: var(--color-white);
    border-color: rgba(7, 104, 207, .30);
    box-shadow: 0 8px 22px rgba(7, 104, 207, .07);
    transform: translateY(-1px);
  }
  /* =====================================================
       MOBILE ICON
    ====================================================== */
  .lj-home-search-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px solid rgba(7, 104, 207, .07);
    border-radius: 10px;
    font-size: 17px;
  }
  .lj-home-search-field:focus-within .lj-home-search-icon {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.04);
  }
  /* =====================================================
       MOBILE LABEL
    ====================================================== */
  .lj-home-search-label {
    margin-bottom: 3px;
    color: var(--color-muted);
    font-size: 8px;
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
  }
  /* =====================================================
       MOBILE INPUT
    ====================================================== */
  .lj-home-search input,
  .lj-home-search select {
    width: 100%;
    height: 27px;
    padding: 0;
    color: var(--color-title);
    background: transparent;
    font-size: 12px;
    font-weight: var(--weight-medium);
  }
  .lj-home-search input::placeholder {
    color: #355A7D;
  }
  .lj-home-search select {
    padding-right: 26px;
  }
  /* =====================================================
       SELECT ARROW
    ====================================================== */
  .lj-home-select-arrow {
    right: 14px;
    color: var(--color-muted);
    font-size: 17px;
  }
  /* =====================================================
       PREMIUM MOBILE SEARCH BUTTON
    ====================================================== */
  .lj-home-search-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    margin: 2px 0 0;
    padding: 0 20px;
    color: var(--color-white);
    background: linear-gradient( 135deg, var(--color-primary-dark) 0%, var(--color-primary) 62%, #0687F1 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(7, 104, 207, .24);
    font-size: 13px;
    font-weight: var(--weight-semibold);
  }
  .lj-home-search-button i {
    font-size: 18px;
  }
  .lj-home-search-button:active {
    transform: scale(.985);
  }
  /* =====================================================
       FEATURED CATEGORIES
    ====================================================== */
  .lj-home-featured {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 16px auto 0;
    text-align: left;
  }
  .lj-home-featured-label {
    display: block;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .70);
    font-size: 10px;
    text-align: center;
  }
  /*
     * Horizontal scrolling is intentional.
     * Categories remain on one row.
     */
  .lj-home-featured-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    padding: 0 2px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lj-home-featured-list::-webkit-scrollbar {
    display: none;
  }
  .lj-home-featured-item {
    flex: 0 0 auto;
    min-height: 35px;
    padding: 4px 12px 4px 5px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-pill);
    font-size: 10px;
    scroll-snap-align: start;
  }
  .lj-home-featured-icon {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
  /* =====================================================
       MOBILE DECORATIONS
    ====================================================== */
  .lj-circle-one {
    top: -210px;
    right: -270px;
    width: 480px;
    height: 480px;
  }
  .lj-circle-two {
    display: none;
  }
  .lj-line-one,
  .lj-line-two {
    opacity: .40;
  }
  .lj-home-hero-glow {
    top: 40px;
    left: -80px;
    width: 220px;
    height: 220px;
    opacity: .55;
  }
}

/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media(max-width:389.98px) {
  .lj-home-hero {
    padding: 40px 0 44px;
  }
  .lj-home-hero-container {
    width: calc( 100% - 18px);
  }
  .lj-home-hero-title {
    font-size: clamp( 35px, 3.8vw, 35px);
  }
  .lj-home-search {
    padding: 7px;
    border-radius: 8px;
  }
  .lj-home-search-field {
    min-height: 56px;
    padding: 7px 10px;
    border-radius: 10px;
  }
  .lj-home-search-icon {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border-radius: 9px;
  }
  .lj-home-search-button {
    min-height: 51px;
    border-radius: 10px;
  }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-home-hero *,
  .lj-home-hero *::before,
  .lj-home-hero *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   HOME QUICK LINKS
========================================================= */

.lj-home-quick-links {
  position: relative;
  width: 100%;
  padding: 22px 0 28px;
  /*** background:
        var(--color-off-white); **/
  overflow: hidden;
}

/* =========================================================
   CONTAINER
========================================================= */

.lj-home-quick-links-container {
  width: calc( 100% - 40px);
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================================================
   SWIPER
========================================================= */

.lj-quick-links-swiper {
  width: 100%;
  overflow: visible;
}

.lj-quick-links-swiper .swiper-wrapper {
  align-items: stretch;
}

.lj-quick-links-swiper .swiper-slide {
  height: auto;
}

/* =========================================================
   CARD
========================================================= */

.lj-quick-link-card {
  --quick-bg: rgba(7, 104, 207, .06);
  --quick-color: var(--color-primary);
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 13px;
  width: 100%;
  height: 100%;
  min-height: 96px;
  padding: 13px 14px;
  overflow: hidden;
  color: var(--color-title);
  background: var(--quick-bg);
  border: 1px solid color-mix( in srgb, var(--quick-color) 34%, transparent);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(1, 52, 130, .045);
  isolation: isolate;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-fast);
}

/* =========================================================
   SOFT GLOW
========================================================= */

.lj-quick-link-card::before {
  position: absolute;
  top: -65px;
  right: -55px;
  width: 150px;
  height: 150px;
  content: "";
  background: radial-gradient( circle, color-mix( in srgb, var(--quick-color) 16%, transparent), transparent 68%);
  border-radius: var(--radius-round);
  pointer-events: none;
  z-index: -1;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* =========================================================
   SUBTLE SHINE
========================================================= */

.lj-quick-link-card::after {
  position: absolute;
  top: -40%;
  left: -55%;
  width: 34%;
  height: 180%;
  content: "";
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: rotate(20deg);
  opacity: 0;
  pointer-events: none;
  transition: left .65s ease, opacity .25s ease;
}

/* =========================================================
   HOVER
========================================================= */

.lj-quick-link-card:hover {
  transform: translateY(-5px);
  border-color: color-mix( in srgb, var(--quick-color) 52%, transparent);
  box-shadow: 0 18px 42px rgba(1, 52, 130, .10);
}

.lj-quick-link-card:hover::before {
  transform: scale(1.15);
  opacity: 1;
}

.lj-quick-link-card:hover::after {
  left: 125%;
  opacity: 1;
}

/* =========================================================
   IMAGE
========================================================= */

.lj-quick-link-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
}

.lj-quick-link-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow( 0 7px 10px rgba(1, 52, 130, .12));
  transition: transform var(--transition-normal);
}

.lj-quick-link-card:hover .lj-quick-link-media img {
  transform: translateY(-3px) rotate(-3deg) scale(1.06);
}

/* =========================================================
   CONTENT
========================================================= */

.lj-quick-link-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.lj-quick-link-content strong {
  display: block;
  min-width: 0;
  color: var(--quick-color);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

.lj-quick-link-content small {
  display: block;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-regular);
  line-height: 1.35;
}

/* =========================================================
   ARROW
========================================================= */

.lj-quick-link-arrow {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: var(--quick-color);
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: var(--radius-round);
  font-size: 16px;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.lj-quick-link-card:hover .lj-quick-link-arrow {
  color: var(--color-white);
  background: var(--quick-color);
  transform: translateX(2px);
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px) {
  .lj-home-quick-links {
    padding: 18px 0 24px;
  }
  .lj-home-quick-links-container {
    width: calc( 100% - 30px);
  }
  .lj-quick-link-card {
    grid-template-columns: 56px minmax(0, 1fr) 28px;
    min-height: 90px;
    padding: 11px 12px;
    border-radius: 14px;
  }
  .lj-quick-link-media {
    width: 56px;
    height: 56px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px) {
  .lj-home-quick-links {
    padding: 15px 0 20px;
  }
  .lj-home-quick-links-container {
    width: calc( 100% - 20px);
  }
  /*
     * Compact card because two appear at once.
     */
  .lj-quick-link-card {
    display: flex;
    /** flex-direction:column;**/
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    min-height: 55px;
    padding: 10px;
    border-radius: 13px;
    text-align: left;
  }
  .lj-quick-link-media {
    width: 36px;
    height: 36px;
    margin-bottom: 1px;
  }
  .lj-quick-link-media img {
    width: 36px;
    height: 36px;
  }
  .lj-quick-link-content {
    width: 100%;
    gap: 2px;
  }
  .lj-quick-link-content strong {
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }
  .lj-quick-link-content small {
    max-width: 120px;
    font-size: 8px;
    line-height: 1.3;
  }
  .lj-quick-link-arrow {
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 25px;
    height: 25px;
    font-size: 14px;
    display: none;
  }
}

/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media(max-width:389.98px) {
  .lj-home-quick-links-container {
    width: calc( 100% - 16px);
  }
  .lj-quick-link-card {
    min-height: 45px;
    padding: 9px 3px;
  }
  .lj-quick-link-media {
    width: 35px;
    height: 35px;
  }
  .lj-quick-link-content strong {
    font-size: 10px;
  }
  .lj-quick-link-media img {
    width: 35px;
    height: 35px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-quick-link-card,
  .lj-quick-link-card::before,
  .lj-quick-link-card::after,
  .lj-quick-link-media img,
  .lj-quick-link-arrow {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   TRENDING LISTINGS
   PREMIUM MARKETPLACE DESIGN
========================================================= */

.lj-trending-listings {
  padding: 34px 0 58px;
  background: radial-gradient( circle at 10% 15%, rgba(7, 104, 207, .025), transparent 26rem), var(--color-off-white, #F6FBFD);
  color: var(--color-text, #082E5C);
  font-family: var(--font-body);
}

/* =========================================================
   CONTAINER
========================================================= */

.lj-trending-listings-container {
  width: calc(100% - 40px);
  max-width: 1380px;
  margin: 0 auto;
}

/* =========================================================
   SECTION HEADER
========================================================= */

.lj-trending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.lj-trending-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lj-trending-heading-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: var(--color-primary, #0768CF);
  background: var(--color-primary-soft, #D5EAF8);
  border: 1px solid rgba(7, 104, 207, .14);
  border-radius: var(--radius-round, 50%);
  box-shadow: 0 6px 16px rgba(7, 104, 207, .07);
}

.lj-trending-heading-icon i {
  font-size: 15px;
}

.lj-trending-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--color-secondary-dark, #0687F1);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold, 700);
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lj-trending-heading h2 {
  margin: 0;
  color: var(--color-title, #013482);
  font-family: var(--font-heading);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: var(--weight-bold, 700);
  line-height: 1.05;
  letter-spacing: -.025em;
}

/* =========================================================
   GRID / LIST VIEW SWITCH
========================================================= */

.lj-trending-view-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  background: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 6px 20px rgba(1, 52, 130, .05);
}

.lj-trending-view-btn {
  display: grid;
  place-items: center;
  width: 37px;
  height: 35px;
  padding: 0;
  color: var(--color-muted, #355A7D);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--transition-fast, .2s ease), background var(--transition-fast, .2s ease), transform var(--transition-fast, .2s ease);
}

.lj-trending-view-btn:hover {
  color: var(--color-primary, #0768CF);
  background: var(--color-primary-soft, #D5EAF8);
}

.lj-trending-view-btn.is-active {
  color: var(--color-white, #FFFFFF);
  background: linear-gradient( 135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  box-shadow: 0 5px 13px rgba(7, 104, 207, .18);
}

/* =========================================================
   RESULTS GRID
========================================================= */

.lj-trending-results {
  display: grid;
  gap: 16px;
  align-items: stretch;
  transition: opacity .2s ease;
}

.lj-trending-results.is-loading {
  opacity: .42;
  pointer-events: none;
}

.lj-trending-results.is-grid-view {
  grid-template-columns: repeat( 4, minmax(0, 1fr));
  gap: 9px;
}

.lj-trending-results.is-list-view {
  grid-template-columns: repeat( 2, minmax(0, 1fr));
}

/* =========================================================
   CARD
========================================================= */

.lj-trending-card {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--color-white, #FFFFFF);
  border: 1px solid rgba(7, 104, 207, .30);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 2px 5px rgba(1, 52, 130, .025), 0 10px 28px rgba(1, 52, 130, .055);
  transition: transform var(--transition-normal, .35s cubic-bezier(.22, 1, .36, 1)), box-shadow var(--transition-normal, .35s cubic-bezier(.22, 1, .36, 1)), border-color var(--transition-fast, .2s ease);
}

.lj-trending-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  opacity: 0;
  background: linear-gradient( 90deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF), #0687F1);
  transform: scaleX(.35);
  transform-origin: center;
  pointer-events: none;
  transition: opacity var(--transition-normal, .35s ease), transform var(--transition-normal, .35s ease);
  z-index: 5;
}

.lj-trending-card:hover {
  border-color: var(--color-primary, #0768CF);
  box-shadow: 0 4px 8px rgba(1, 52, 130, .035), 0 18px 42px rgba(1, 52, 130, .10);
  transform: translateY(-5px);
}

.lj-trending-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* =========================================================
   CARD LAYOUT MODES
========================================================= */

.is-grid-view .lj-trending-card {
  flex-direction: column;
}

.is-list-view .lj-trending-card {
  flex-direction: row;
}

/* =========================================================
   MEDIA
========================================================= */

.lj-trending-card-media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface, #D5EAF8);
}

.is-grid-view .lj-trending-card-media {
  height: 250px;
  flex: 0 0 250px;
}

.is-list-view .lj-trending-card-media {
  width: 42%;
  min-width: 42%;
  align-self: stretch;
}

/* =========================================================
   SWIPER MEDIA
========================================================= */

.lj-trending-media-swiper,
.lj-trending-media-swiper .swiper-wrapper,
.lj-trending-media-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.lj-trending-media-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
}

.lj-trending-media-swiper img,
.lj-trending-media-swiper video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.lj-trending-card:hover .lj-trending-media-swiper img {
  transform: scale(1.045);
}

/* =========================================================
   NO MEDIA
========================================================= */

.lj-trending-no-media {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-muted, #355A7D);
  font-size: 32px;
  background: radial-gradient( circle at center, #FFFFFF, transparent 65%), linear-gradient( 145deg, #F6FBFD, #D5EAF8);
}

/* =========================================================
   MEDIA PAGINATION
========================================================= */

.lj-trending-media-swiper .swiper-pagination {
  bottom: 10px !important;
  z-index: 7;
}

.lj-trending-media-swiper .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 3px !important;
  opacity: .68;
  background: var(--color-white, #FFFFFF);
  box-shadow: 0 1px 5px rgba(1, 52, 130, .30);
  border-radius: var(--radius-round, 50%);
}

.lj-trending-media-swiper .swiper-pagination-bullet-active {
  width: 16px;
  opacity: 1;
  background: var(--color-secondary, #1F9EFC);
  border-radius: var(--radius-pill, 999px);
}

/* =========================================================
   SAVE BUTTON
========================================================= */

.lj-trending-save {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--color-primary, #0768CF);
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: var(--radius-round, 50%);
  box-shadow: 0 5px 14px rgba(1, 52, 130, .12);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  cursor: pointer;
  transition: transform var(--transition-fast, .2s ease), color var(--transition-fast, .2s ease), background var(--transition-fast, .2s ease), border-color var(--transition-fast, .2s ease);
}

.lj-trending-save i {
  font-size: 14px;
}

.lj-trending-save:hover {
  color: var(--color-white, #FFFFFF);
  background: var(--color-primary, #0768CF);
  border-color: var(--color-primary, #0768CF);
  transform: translateY(-2px);
}

.lj-trending-save.is-saved {
  color: var(--color-white, #FFFFFF);
  background: var(--color-primary, #0768CF);
  border-color: var(--color-primary, #0768CF);
}

/* =========================================================
   PROPERTY TYPE BADGE
========================================================= */

.lj-trending-property-type {
  position: absolute;
  z-index: 7;
  top: 12px;
  right: 12px;
  max-width: 55%;
  padding: 7px 10px;
  overflow: hidden;
  color: var(--color-white, #FFFFFF);
  background: rgba(1, 52, 130, .72);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-pill, 999px);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--weight-bold, 700);
  letter-spacing: .055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =========================================================
   PROPERTY STATS
========================================================= */

.lj-trending-property-stats {
  position: absolute;
  z-index: 7;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

.lj-trending-property-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 8px;
  color: var(--color-white, #FFFFFF);
  background: rgba(1, 52, 130, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-pill, 999px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(1, 52, 130, .10);
}

.lj-trending-property-stats i {
  color: var(--color-secondary, #1F9EFC);
  font-size: 10px;
}

.lj-trending-property-stats b {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold, 700);
}

.lj-trending-property-stats small {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: var(--weight-semibold, 600);
  text-transform: uppercase;
}

/* =========================================================
   CARD SIDE
   Important for footer positioning
========================================================= */

.lj-trending-card-side {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

/* =========================================================
   CARD BODY
========================================================= */

.lj-trending-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 17px 17px 16px;
}

/* =========================================================
   KICKER
========================================================= */

.lj-trending-card-kicker {
  margin-bottom: 6px;
  color: var(--color-secondary-dark, #0687F1);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--weight-bold, 700);
  line-height: 1.2;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* =========================================================
   PRICE
========================================================= */

.lj-trending-card-price {
  margin-bottom: 7px;
  color: var(--color-primary, #0768CF);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--weight-bold, 700);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.lj-trending-card-price small {
  margin-left: 3px;
  color: var(--color-text, #082E5C);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-medium, 500);
  letter-spacing: 0;
}

/* =========================================================
   TITLE
========================================================= */

.lj-trending-card h3 {
  min-height: 40px;
  margin: 0;
  color: var(--color-title, #013482);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--weight-semibold, 600);
  line-height: 1.38;
  letter-spacing: -.015em;
}

.lj-trending-card h3 a {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: color var(--transition-fast, .2s ease);
}

.lj-trending-card h3 a:hover {
  color: var(--color-primary, #0768CF);
}

/* =========================================================
   DESCRIPTION
========================================================= */

.lj-trending-description {
  display: none;
  margin: 11px 0 0;
  color: var(--color-text, #082E5C);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.6;
}

.is-list-view .lj-trending-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* =========================================================
   LOCATION
   Stronger visibility
========================================================= */

.lj-trending-location {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  color: #013482;
  border-top: 1px solid rgba(111, 141, 168, .72);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-medium, 500);
  line-height: 1.45;
}

.lj-trending-location i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-primary, #0768CF);
  font-size: 12px;
}

.lj-trending-location strong {
  color: var(--color-title, #013482);
  font-weight: var(--weight-semibold, 600);
}

.lj-trending-location span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   FOOTER
   Always stays at bottom of card
========================================================= */

.lj-trending-card-footer {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  margin-top: auto;
  padding: 8px 12px;
  background: linear-gradient( 180deg, #F6FBFD 0%, #F6FBFD 100%);
  border-top: 1px solid var(--color-border, #6F8DA8);
}

.lj-trending-card-footer::before {
  position: absolute;
  top: -1px;
  left: 12px;
  width: 34px;
  height: 1px;
  content: "";
  background: var(--color-primary, #0768CF);
}

/* =========================================================
   SELLER
========================================================= */

.lj-trending-seller {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.lj-trending-seller-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  color: var(--color-primary, #0768CF);
  background: var(--color-white, #FFFFFF);
  border: 2px solid var(--color-white, #FFFFFF);
  border-radius: var(--radius-round, 50%);
  box-shadow: 0 0 0 1px var(--color-border, #6F8DA8), 0 4px 10px rgba(1, 52, 130, .07);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold, 700);
}

.lj-trending-seller-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lj-trending-seller>div:last-child {
  min-width: 0;
}

.lj-trending-seller small {
  display: block;
  margin-bottom: 2px;
  color: var(--color-muted, #355A7D);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: var(--weight-semibold, 600);
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lj-trending-seller strong {
  display: block;
  max-width: 145px;
  overflow: hidden;
  color: var(--color-title, #013482);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold, 600);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   VIEW BUTTON
========================================================= */

.lj-trending-view-link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: var(--color-white, #FFFFFF);
  background: linear-gradient( 135deg, var(--color-primary, #0768CF), var(--color-primary-dark, #013883));
  border: 1px solid var(--color-primary, #0768CF);
  border-radius: var(--radius-xs, 4px);
  text-decoration: none;
  box-shadow: 0 5px 13px rgba(7, 104, 207, .16);
  transition: transform var(--transition-fast, .2s ease), box-shadow var(--transition-fast, .2s ease);
}

.lj-trending-view-link i {
  font-size: 10px;
}

.lj-trending-view-link:hover {
  color: var(--color-white, #FFFFFF);
  transform: translateX(2px);
  box-shadow: 0 7px 16px rgba(7, 104, 207, .24);
}

/* =========================================================
   LIST VIEW OVERRIDES
========================================================= */

.is-list-view .lj-trending-card-body {
  padding: 18px 18px 15px;
}

.is-list-view .lj-trending-card h3 {
  min-height: 0;
  font-size: 17px;
}

.is-list-view .lj-trending-card-price {
  font-size: 18px;
}

.is-list-view .lj-trending-location {
  margin-top: auto;
}

.is-list-view .lj-trending-card-footer {
  min-height: 56px;
  padding: 8px 11px;
}

.is-list-view .lj-trending-seller-avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

/* =========================================================
   LOADING
========================================================= */

.lj-trending-loading {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 32px;
}

.lj-trending-loading span {
  width: 8px;
  height: 8px;
  background: var(--color-primary, #0768CF);
  border-radius: var(--radius-round, 50%);
  animation: ljTrendPulse .8s ease-in-out infinite alternate;
}

.lj-trending-loading span:nth-child(2) {
  animation-delay: .15s;
}

.lj-trending-loading span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes ljTrendPulse {
  to {
    opacity: .25;
    transform: translateY(-5px);
  }
}

/* =========================================================
   EMPTY STATE
========================================================= */

.lj-trending-empty {
  padding: 52px 20px;
  text-align: center;
  background: var(--color-white, #FFFFFF);
  border: 1px dashed var(--color-border, #6F8DA8);
  border-radius: var(--radius-md, 4px);
}

.lj-trending-empty i {
  color: var(--color-primary, #0768CF);
  font-size: 30px;
}

.lj-trending-empty h3 {
  margin: 12px 0 4px;
  color: var(--color-title, #013482);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: var(--weight-semibold, 600);
}

.lj-trending-empty p {
  margin: 0;
  color: var(--color-text, #082E5C);
  font-family: var(--font-body);
  font-size: 11px;
}

/* =========================================================
   PAGINATION
========================================================= */

.lj-trending-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
}

.lj-trending-pagination button,
.lj-trending-pagination span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  color: var(--color-title, #013482);
  background: var(--color-white, #FFFFFF);
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: var(--radius-sm, 8px);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold, 600);
}

.lj-trending-pagination button {
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(1, 52, 130, .035);
  transition: transform var(--transition-fast, .2s ease), color var(--transition-fast, .2s ease), background var(--transition-fast, .2s ease), border-color var(--transition-fast, .2s ease);
}

.lj-trending-pagination button:hover:not(:disabled),
.lj-trending-pagination button.is-active {
  color: var(--color-white, #FFFFFF);
  background: linear-gradient( 135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  border-color: var(--color-primary, #0768CF);
  transform: translateY(-2px);
}

.lj-trending-pagination button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.lj-trending-pagination span {
  border: 0;
  background: transparent;
}

/* =========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================= */

@media(max-width:1199px) {
  .lj-trending-results.is-grid-view {
    grid-template-columns: repeat( 3, minmax(0, 1fr));
  }
  .lj-trending-results.is-list-view {
    grid-template-columns: 1fr;
  }
  .is-grid-view .lj-trending-card-media {
    height: 235px;
    flex-basis: 235px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:899px) {
  .lj-trending-results.is-grid-view {
    grid-template-columns: repeat( 2, minmax(0, 1fr));
  }
  .is-grid-view .lj-trending-card-media {
    height: 225px;
    flex-basis: 225px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575px) {
  .lj-trending-listings {
    padding: 26px 0 40px;
  }
  .lj-trending-listings-container {
    width: calc(100% - 0px);
  }
  /* HEADER */
  .lj-trending-head {
    align-items: flex-end;
    margin-bottom: 15px;
  }
  .lj-trending-heading {
    gap: 9px;
  }
  .lj-trending-heading-icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
  }
  .lj-trending-eyebrow {
    font-size: 7px;
  }
  .lj-trending-heading h2 {
    font-size: 25px;
  }
  /* VIEW SWITCH */
  .lj-trending-view-switch {
    gap: 3px;
    padding: 3px;
  }
  .lj-trending-view-btn {
    width: 33px;
    height: 31px;
  }
  
  
  .lj-trending-results.is-grid-view
   {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  
 
  .lj-trending-results.is-list-view {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 5px;
  }
  
  /* =====================================================
       MOBILE GRID
       Compact height — not too long
    ===================================================== */
  .is-grid-view .lj-trending-card {
    min-height: 0;
  }
  .is-grid-view .lj-trending-card-media {
    height: 180px;
    flex-basis: 180px;
  }
  .is-grid-view .lj-trending-card-body {
    padding: 14px 14px 13px;
  }
  .is-grid-view .lj-trending-card-kicker {
    margin-bottom: 5px;
    font-size: 7px;
  }
  .is-grid-view .lj-trending-card-price {
    margin-bottom: 6px;
    font-size: 16px;
  }
  .is-grid-view .lj-trending-card-price small {
    font-size: 8px;
  }
  .is-grid-view .lj-trending-card h3 {
    min-height: 36px;
    font-size: 14px;
    line-height: 1.35;
  }
  .is-grid-view .lj-trending-location {
    margin-top: 10px;
    padding-top: 9px;
    font-size: 10px;
    line-height: 1.4;
  }
  .is-grid-view .lj-trending-card-footer {
    min-height: 54px;
    padding: 7px 10px;
  }
  .is-grid-view .lj-trending-seller-avatar {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
  .is-grid-view .lj-trending-seller small {
    font-size: 7px;
  }
  .is-grid-view .lj-trending-seller strong {
    max-width: 135px;
    font-size: 9px;
  }
  .is-grid-view .lj-trending-view-link {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
  /* =====================================================
       MOBILE LIST
    ===================================================== */
  .is-list-view .lj-trending-card {
    min-height: 140px;
  }
  .is-list-view .lj-trending-card-media {
    width: 40%;
    min-width: 40%;
  }
  .is-list-view .lj-trending-card-body {
    padding: 12px 11px 9px;
  }
  .is-list-view .lj-trending-card-kicker {
    margin-bottom: 5px;
    font-size: 6px;
  }
  .is-list-view .lj-trending-card-price {
    margin-bottom: 5px;
    font-size: 13px;
  }
  .is-list-view .lj-trending-card-price small {
    font-size: 7px;
  }
  .is-list-view .lj-trending-card h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.32;
  }
  .is-list-view .lj-trending-description {
    display: none;
  }
  .is-list-view .lj-trending-location {
    margin-top: 8px;
    padding-top: 7px;
    font-size: 8px;
  }
  .is-list-view .lj-trending-card-footer {
    min-height: 50px;
    padding: 6px 8px;
  }
  .is-list-view .lj-trending-seller {
    gap: 6px;
  }
  .is-list-view .lj-trending-seller-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  .is-list-view .lj-trending-seller small {
    font-size: 6px;
  }
  .is-list-view .lj-trending-seller strong {
    max-width: 83px;
    font-size: 7px;
  }
  .is-list-view .lj-trending-view-link {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
  /* PROPERTY STATS */
  .lj-trending-property-stats {
    right: 7px;
    bottom: 8px;
    left: 7px;
    gap: 4px;
  }
  .lj-trending-property-stats span {
    min-height: 25px;
    padding: 4px 6px;
  }
  .lj-trending-property-stats small {
    display: none;
  }
  .lj-trending-property-stats b {
    font-size: 8px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:390px) {
  .is-grid-view .lj-trending-card-media {
    height: 160px;
    flex-basis: 160px;
  }
  .is-grid-view .lj-trending-card-body {
    padding: 13px 13px 12px;
  }
  .is-grid-view .lj-trending-card-price {
    font-size: 15px;
  }
  .is-grid-view .lj-trending-card h3 {
    font-size: 13px;
  }
  .is-grid-view .lj-trending-location {
    font-size: 9px;
  }
  .is-grid-view .lj-trending-seller strong {
    max-width: 110px;
  }
  .is-list-view .lj-trending-card-media {
    width: 38%;
    min-width: 38%;
  }
  .is-list-view .lj-trending-seller strong {
    max-width: 65px;
  }
  
  
}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce) {
  .lj-trending-card,
  .lj-trending-media-swiper img,
  .lj-trending-view-link,
  .lj-trending-view-btn {
    transition: none !important;
  }
  .lj-trending-loading span {
    animation: none;
  }
}

/* ===== Search result page ===== */

.lj-search-results-page {
  background: var(--color-off-white, #F6FBFD);
  min-height: 70vh
}

.lj-sr-container {
  width: calc(100% - 40px);
  max-width: 1100px;
  margin: 0 auto
}

.lj-sr-hero {
  padding: 58px 0 34px;
  background: radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .15), transparent 27%), radial-gradient(circle at 85% 75%, rgba(74, 179, 252, .13), transparent 28%), linear-gradient(135deg, #013482 0%, #013883 43%, #0768CF 76%, #0687F1 100%);
  color: #FFFFFF
}

.lj-sr-hero-copy {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 27px
}

.lj-sr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4AB3FC
}

.lj-sr-hero h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(44px, 6vw, 70px);
  line-height: .95;
  font-weight: 700
}

.lj-sr-hero h1 span {
  color: #4AB3FC
}

.lj-sr-hero p {
  margin: 13px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .82)
}

.lj-sr-search {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 8px;
  max-width: 1050px;
  margin: 0 auto;
  padding: 8px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(1, 52, 130, .22)
}

.lj-sr-search label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 9px 12px;
  border-right: 1px solid var(--color-border, #6F8DA8)
}

.lj-sr-search label>span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary, #0768CF);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em
}

.lj-sr-search input,
.lj-sr-search select {
  width: 100%;
  height: 25px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-title, #013482);
  font: 500 12px var(--font-body, "Inter", sans-serif)
}

.lj-sr-search button {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--color-primary-dark, #013883), var(--color-primary, #0768CF));
  color: #FFFFFF;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease
}

.lj-sr-search button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(7, 104, 207, .22)
}

.lj-sr-listings-section {
  padding: 34px 0 64px
}

.lj-sr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px
}

.lj-sr-toolbar>div:first-child {
  display: flex;
  align-items: center;
  gap: 11px
}

.lj-sr-toolbar-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(7, 104, 207, .12);
  border-radius: 12px;
  background: var(--color-primary-soft, #D5EAF8);
  color: var(--color-primary, #0768CF);
  font-size: 20px
}

.lj-sr-toolbar small {
  display: block;
  color: var(--color-muted, #355A7D);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em
}

.lj-sr-toolbar h2 {
  margin: 1px 0 0;
  font: 700 28px/1 var(--font-heading, "Cormorant Garamond", serif);
  color: var(--color-title, #013482)
}

.lj-sr-view-switch {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--color-border, #6F8DA8);
  border-radius: 11px;
  background: #FFFFFF
}

.lj-sr-view-switch button {
  display: grid;
  place-items: center;
  width: 37px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-muted, #355A7D);
  font-size: 18px;
  cursor: pointer
}

.lj-sr-view-switch button.is-active {
  background: var(--color-primary, #0768CF);
  color: #FFFFFF;
  box-shadow: 0 7px 18px rgba(7, 104, 207, .18)
}

.lj-sr-empty {
  text-align: center;
  padding: 70px 20px;
  border: 1px dashed var(--color-border, #6F8DA8);
  border-radius: 18px;
  background: #FFFFFF
}

.lj-sr-empty i {
  font-size: 42px;
  color: var(--color-primary, #0768CF)
}

.lj-sr-empty h3 {
  margin: 10px 0 5px;
  font: 700 29px var(--font-heading, "Cormorant Garamond", serif);
  color: var(--color-title, #013482)
}

.lj-sr-empty p {
  margin: 0;
  color: var(--color-text, #082E5C);
  font-size: 12px
}

.lj-sr-loading {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 35px
}

.lj-sr-loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary, #0768CF);
  animation: ljSrPulse .8s infinite alternate
}

.lj-sr-loading span:nth-child(2) {
  animation-delay: .15s
}

.lj-sr-loading span:nth-child(3) {
  animation-delay: .3s
}

@keyframes ljSrPulse {
  to {
    opacity: .25;
    transform: translateY(-5px)
  }
}

.lj-sr-verified {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  color: var(--color-primary, #0768CF);
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(1, 52, 130, .12)
}

.lj-sr-verified~.lj-trending-save {
  left: 14px;
  right: auto
}

.lj-sr-seller-link {
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%
}

.lj-sr-seller-link .lj-trending-seller-avatar {
  transition: transform .25s ease
}

.lj-sr-seller-link:hover .lj-trending-seller-avatar {
  transform: scale(1.06)
}

.lj-sr-seller-name {
  display: block;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-title, #013482);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none
}

.lj-sr-seller-name:hover {
  color: var(--color-primary, #0768CF)
}

@media(max-width:800px) {
  .lj-sr-hero {
    padding: 42px 0 26px
  }
  .lj-sr-search {
    grid-template-columns: 1fr 1fr
  }
  .lj-sr-search label {
    border-right: 0;
    background: var(--color-off-white, #F6FBFD);
    border-radius: 11px
  }
  .lj-sr-search button {
    min-height: 50px
  }
  .lj-sr-container {
    width: calc(100% - 28px)
  }
}

@media(max-width:575px) {
  .lj-sr-container {
    width: calc(100% - 22px)
  }
  .lj-sr-hero {
    padding: 34px 0 22px
  }
  .lj-sr-hero h1 {
    font-size: 43px
  }
  .lj-sr-search {
    grid-template-columns: 1fr;
    padding: 7px;
    border-radius: 15px
  }
  .lj-sr-search label {
    padding: 8px 11px
  }
  .lj-sr-search button {
    min-height: 47px
  }
  .lj-sr-listings-section {
    padding: 25px 0 48px
  }
  .lj-sr-toolbar h2 {
    font-size: 24px
  }
  .lj-sr-toolbar-icon {
    width: 38px;
    height: 38px
  }
  .lj-sr-view-switch button {
    width: 34px;
    height: 32px
  }
  .lj-sr-verified {
    top: 10px;
    right: 10px
  }
  .lj-sr-verified~.lj-trending-save {
    left: 10px
  }
  .lj-sr-toolbar {
    gap: 10px
  }
}


























/* PeMarket premium palette:
   Primary #0687F1 | Primary Dark #013883 | Deep Navy #013482
   Medium Blue #0768CF | Light Blue #4AB3FC | Soft Blue #A1D7FB
   Ice Blue #F1F9FC | Cool White #F6FBFD | Border #BCCCDC
*/


/* =========================================================
   PEMARKET MESSENGER
   Premium blue visual language using the existing PeMarket frontend vars
========================================================= */

.lj-chat-app {
  height: min(780px, calc(100dvh - 150px));
  min-height: 620px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-medium);
  font-family: var(--font-body);
  color: var(--color-text)
}

.lj-chat-app * {
  box-sizing: border-box
}

.lj-chat-eyebrow {
  display: block;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase
}

.lj-chat-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--color-white), var(--color-off-white));
  border-right: 1px solid var(--color-border)
}

.lj-chat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 24px 22px 18px;
  border-bottom: 1px solid var(--color-border)
}

.lj-chat-sidebar-head h2 {
  margin: 4px 0 0;
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--color-title)
}

.lj-chat-search {
  margin: 16px 18px 12px;
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: var(--transition-fast)
}

.lj-chat-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary)
}

.lj-chat-search i {
  color: var(--color-secondary-dark)
}

.lj-chat-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-title);
  font-family: var(--font-body);
  font-size: 12px
}

.lj-chat-conversation-list {
  flex: 1;
  overflow: auto;
  padding: 0 10px 15px
}

.lj-chat-conversation {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid rgba(188, 204, 220, .75);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-chat-conversation:hover,
.lj-chat-conversation.is-active {
  background: var(--color-primary-soft)
}

.lj-chat-conversation.is-active {
  box-shadow: inset 3px 0 0 var(--color-primary)
}

.lj-chat-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px
}

.lj-chat-avatar-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border)
}

.lj-chat-online-dot {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-success);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px rgba(7, 104, 207, .18)
}

.lj-chat-conversation-copy {
  min-width: 0
}

.lj-chat-conversation-copy strong {
  display: block;
  color: var(--color-title);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lj-chat-conversation-copy small {
  display: block;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lj-chat-conversation-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px
}

.lj-chat-conversation-meta time {
  font-size: 9px;
  color: var(--color-muted)
}

.lj-chat-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 700
}

.lj-chat-list-loading {
  padding: 28px 16px;
  text-align: center;
  color: var(--color-muted);
  font-size: 11px
}

.lj-chat-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-off-white), var(--color-white))
}

.lj-chat-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px
}

.lj-chat-empty-icon {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: 1px solid rgba(6, 135, 241, .15);
  font-size: 33px;
  transform: rotate(-3deg);
  animation: ljChatFloat 3.5s ease-in-out infinite
}

.lj-chat-empty h2 {
  margin: 7px 0 8px;
  font: var(--weight-bold) 34px/1 var(--font-heading);
  color: var(--color-title)
}

.lj-chat-empty p {
  max-width: 440px;
  margin: 0;
  color: var(--color-text);
  font-size: var(--main-font-size);
  line-height: 1.75
}

@keyframes ljChatFloat {
  50% {
    transform: translateY(-7px) rotate(3deg)
  }
}

.lj-chat-thread {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto
}

.lj-chat-thread[hidden] {
  display: none !important
}

.lj-chat-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 7px 18px rgba(7, 26, 51, .03);
  z-index: 3
}

.lj-chat-thread-person {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0
}

.lj-chat-thread-person .lj-chat-avatar-wrap {
  width: 43px;
  height: 43px;
  flex-basis: 43px
}

.lj-chat-thread-person strong {
  display: block;
  color: var(--color-title);
  font-size: 13px
}

.lj-chat-thread-person small {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 10px
}

.lj-chat-thread-person small.is-online {
  color: var(--color-success)
}

.lj-chat-remove-conversation,
.lj-chat-mobile-open,
.lj-chat-mobile-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-chat-remove-conversation:hover {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-chat-mobile-open,
.lj-chat-mobile-close {
  display: none
}

.lj-chat-messages {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: 22px 22px 12px;
  scroll-behavior: smooth;
  background-image: radial-gradient(rgba(74, 179, 252, .11) .7px, transparent .7px);
  background-size: 18px 18px
}

.lj-chat-day {
  display: flex;
  justify-content: center;
  margin: 10px 0 16px
}

.lj-chat-day span {
  padding: 6px 10px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase
}

.lj-chat-row {
  display: flex;
  margin: 7px 0
}

.lj-chat-row.is-mine {
  justify-content: flex-end
}

.lj-chat-bubble {
  position: relative;
  max-width: min(74%, 660px);
  padding: 10px 12px 7px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 5px 14px rgba(7, 26, 51, .045)
}

.lj-chat-row.is-mine .lj-chat-bubble {
  background: linear-gradient(135deg, var(--color-primary-soft), #F1F9FC);
  border-color: rgba(6, 135, 241, .18)
}

.lj-chat-row.is-mine.is-read .lj-chat-bubble {
  background: linear-gradient(135deg, #EAF6FF, var(--color-white));
  border-color: rgba(74, 179, 252, .45)
}

.lj-chat-bubble p {
  margin: 0;
  color: var(--color-title);
  font-size: 12px;
  line-height: 1.58;
  white-space: pre-wrap;
  word-break: break-word
}

.lj-chat-message-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--color-muted);
  font-size: 8px
}

.lj-chat-message-meta .is-read {
  color: var(--color-secondary-dark)
}

.lj-chat-message-meta .is-unread {
  color: var(--color-primary)
}

.lj-chat-edited {
  font-style: italic
}

.lj-chat-deleted {
  color: var(--color-muted) !important;
  font-style: italic
}

.lj-chat-reply-quote {
  margin-bottom: 8px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, .65);
  border-left: 3px solid var(--color-secondary);
  font-size: 9px;
  color: var(--color-muted)
}

.lj-chat-reply-quote strong {
  display: block;
  color: var(--color-primary);
  margin-bottom: 2px
}

.lj-chat-message-menu {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 8
}

.lj-chat-message-menu-toggle {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-chat-message-menu-toggle:hover,
.lj-chat-message-menu.is-open .lj-chat-message-menu-toggle {
  background: rgba(7, 26, 51, .06);
  color: var(--color-title)
}

.lj-chat-row.is-mine .lj-chat-message-menu-toggle:hover,
.lj-chat-row.is-mine .lj-chat-message-menu.is-open .lj-chat-message-menu-toggle {
  background: rgba(6, 135, 241, .08);
  color: var(--color-primary)
}

.lj-chat-message-actions {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 132px;
  display: none;
  padding: 5px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 30px rgba(7, 26, 51, .14);
  z-index: 20
}

.lj-chat-message-menu.is-open .lj-chat-message-actions {
  display: block;
  animation: ljChatMenuIn .14s ease
}

@keyframes ljChatMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.lj-chat-message-actions button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 10px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-chat-message-actions button i {
  width: 15px;
  text-align: center;
  color: var(--color-secondary-dark)
}

.lj-chat-message-actions button:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary)
}

.lj-chat-message-actions button:hover i {
  color: var(--color-primary)
}

.lj-chat-message-actions .lj-chat-delete-btn:hover {
  background: rgba(1, 56, 131, .08);
  color: var(--color-danger)
}

.lj-chat-message-actions .lj-chat-delete-btn:hover i {
  color: var(--color-danger)
}

.lj-chat-bubble {
  padding-right: 37px
}

.lj-chat-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 8px
}

.lj-chat-media-grid:has(:only-child) {
  grid-template-columns: 1fr
}

.lj-chat-media {
  display: block;
  width: 100%;
  max-height: 290px;
  object-fit: cover;
  background: var(--color-dark);
  cursor: pointer
}

.lj-chat-media-grid video {
  cursor: default
}

.lj-chat-media-grid video[controls] {
  max-height: 290px
}

.lj-chat-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: var(--color-off-white);
  border-top: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary)
}

.lj-chat-reply-preview[hidden] {
  display: none !important
}

.lj-chat-reply-preview small {
  display: block;
  color: var(--color-secondary-dark);
  font-size: 9px;
  text-transform: uppercase
}

.lj-chat-reply-preview strong {
  font-size: 11px;
  color: var(--color-title)
}

.lj-chat-reply-preview p {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--color-muted);
  max-width: 550px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lj-chat-reply-preview button {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer
}

.lj-chat-media-preview {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border)
}

.lj-chat-media-preview[hidden] {
  display: none !important
}

.lj-chat-media-preview-item {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border: 1px solid var(--color-border);
  background: var(--color-off-white)
}

.lj-chat-media-preview-item img,
.lj-chat-media-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lj-chat-media-preview-item button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--color-primary);
  color: #FFFFFF;
  cursor: pointer
}

.lj-chat-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
  padding: 12px 14px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border)
}

.lj-chat-attach {
  position: relative;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  color: var(--color-secondary-dark);
  cursor: pointer;
  transition: var(--transition-fast)
}

.lj-chat-attach:hover {
  color: var(--color-primary);
  border-color: var(--color-primary)
}

.lj-chat-attach input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer
}

.lj-chat-input-wrap {
  min-height: 43px;
  display: flex;
  align-items: center;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  transition: var(--transition-fast)
}

.lj-chat-input-wrap:focus-within {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary)
}

.lj-chat-input-wrap textarea {
  width: 100%;
  max-height: 130px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 11px 13px;
  color: var(--color-title);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5
}

.lj-chat-send {
  width: 46px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-primary);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(6, 135, 241, .16);
  transition: var(--transition-fast)
}

.lj-chat-send:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-tertiary))
}

.lj-chat-send:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none
}

.lj-chat-viewer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 25px;
  background: rgba(7, 26, 51, .90);
  backdrop-filter: blur(7px)
}

.lj-chat-viewer[hidden] {
  display: none !important
}

.lj-chat-viewer img,
.lj-chat-viewer video {
  max-width: min(100%, 1050px);
  max-height: 88dvh;
  object-fit: contain
}

.lj-chat-viewer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer
}

.lj-chat-viewer-close:hover {
  background: var(--color-primary)
}

@media(max-width:991.98px) {
  .lj-chat-app {
    grid-template-columns: 300px minmax(0, 1fr);
    height: calc(100dvh - 120px);
    min-height: 560px
  }
  .lj-chat-bubble {
    max-width: 82%
  }
}

@media(max-width:767.98px) {
  .lj-chat-app {
    position: relative;
    display: block;
    height: calc(100dvh - var(--mobile-bottom-height) - 85px);
    min-height: 520px;
    border-left: 0;
    border-right: 0
  }
  .lj-chat-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 20;
    width: min(88vw, 340px);
    transform: translateX(-102%);
    box-shadow: 20px 0 50px rgba(7, 26, 51, .16);
    transition: transform .28s ease
  }
  .lj-chat-sidebar.is-open {
    transform: none
  }
  .lj-chat-mobile-open,
  .lj-chat-mobile-close {
    display: grid
  }
  .lj-chat-main,
  .lj-chat-thread {
    height: 100%
  }
  .lj-chat-messages {
    padding: 17px 11px 10px
  }
  .lj-chat-bubble {
    max-width: 88%;
    padding: 9px 10px 6px
  }
  .lj-chat-composer {
    padding: 9px 8px
  }
  .lj-chat-input-wrap textarea {
    font-size: 16px
  }
  .lj-chat-message-menu {
    top: 5px;
    right: 5px
  }
  .lj-chat-message-menu-toggle {
    width: 27px;
    height: 27px;
    font-size: 13px
  }
  .lj-chat-message-actions {
    width: 136px
  }
  .lj-chat-message-actions button {
    min-height: 38px;
    font-size: 11px
  }
  .lj-chat-thread-head {
    padding: 10px 11px
  }
}

@media(max-width:420px) {
  .lj-chat-bubble {
    max-width: 92%
  }
  .lj-chat-media-grid {
    grid-template-columns: 1fr
  }
  .lj-chat-conversation-list {
    padding-left: 7px;
    padding-right: 7px
  }
  .lj-chat-sidebar-head {
    padding: 20px 16px 15px
  }
  .lj-chat-search {
    margin: 12px 12px 10px
  }
}

@media(prefers-reduced-motion:reduce) {
  .lj-chat-app * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important
  }
}



/* =========================================================
   COMING SOON PAGE
========================================================= */

.lj-coming-page{
    position:relative;
    overflow:hidden;
    background:var(--color-off-white);
}


/* =========================================================
   MAIN SECTION
========================================================= */

.lj-coming-section{
    position:relative;

    display:flex;
    align-items:center;

    /*** min-height:680px; **/

    padding:40px 20px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(7, 104, 207, .055),
            transparent 27%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(31, 158, 252, .10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F6FBFD 52%,
            #F6FBFD 100%
        );
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.lj-coming-glow{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(2px);
}


.lj-coming-glow-one{
    top:-160px;
    right:-140px;

    width:440px;
    height:440px;

    background:
        radial-gradient(
            circle,
            rgba(7, 104, 207, .07),
            rgba(7, 104, 207, 0) 70%
        );
}


.lj-coming-glow-two{
    bottom:-180px;
    left:-160px;

    width:480px;
    height:480px;

    background:
        radial-gradient(
            circle,
            rgba(31, 158, 252, .12),
            rgba(31, 158, 252, 0) 70%
        );
}


.lj-coming-pattern{
    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.28;

    background-image:
        linear-gradient(
            rgba(7, 104, 207, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7, 104, 207, .025) 1px,
            transparent 1px
        );

    background-size:44px 44px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #013482 25%,
            #013482 75%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #013482 25%,
            #013482 75%,
            transparent
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.lj-coming-container{
    position:relative;

    z-index:3;

    display:grid;

    grid-template-columns:
        minmax(320px,.85fr)
        minmax(400px,1.15fr);

    align-items:center;

    gap:75px;

    width:100%;
    max-width:1150px;

    margin:0 auto;
}


/* =========================================================
   VISUAL AREA
========================================================= */

.lj-coming-visual{
    display:flex;

    align-items:center;
    justify-content:center;

    min-height:410px;
}


/* =========================================================
   ICON WRAPPER
========================================================= */

.lj-coming-icon-wrap{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    width:330px;
    height:330px;
}


/* =========================================================
   CIRCULAR RINGS
========================================================= */

.lj-coming-icon-ring{
    position:absolute;

    border-radius:50%;

    pointer-events:none;
}


.lj-coming-ring-one{
    inset:18px;

    border:
        1px solid rgba(7, 104, 207, .12);

    animation:
        ljComingRotate 24s linear infinite;
}


.lj-coming-ring-one::before{
    position:absolute;

    top:-5px;
    left:50%;

    width:10px;
    height:10px;

    content:"";

    background:var(--color-primary);

    border:
        3px solid var(--color-white);

    border-radius:50%;

    box-shadow:
        0 3px 12px rgba(7, 104, 207, .25);

    transform:translateX(-50%);
}


.lj-coming-ring-two{
    inset:55px;

    border:
        1px dashed rgba(31, 158, 252, .55);

    animation:
        ljComingRotateReverse 19s linear infinite;
}


/* =========================================================
   MAIN ICON
========================================================= */

.lj-coming-icon{
    position:relative;

    z-index:4;

    display:flex;

    align-items:center;
    justify-content:center;

    width:170px;
    height:170px;

    color:var(--color-white);

    background:
        linear-gradient(
            145deg,
            var(--color-primary),
            var(--color-primary-dark)
        );

    border:
        8px solid rgba(255, 255, 255, .96);

    border-radius:
        46% 54% 52% 48% /
        48% 46% 54% 52%;

    box-shadow:
        0 25px 60px rgba(1, 56, 131, .20),
        0 8px 22px rgba(1, 52, 130, .10);

    animation:
        ljComingMorph 8s ease-in-out infinite;
}


.lj-coming-icon::before{
    position:absolute;

    inset:9px;

    content:"";

    border:
        1px solid rgba(255, 255, 255, .22);

    border-radius:inherit;
}


.lj-coming-icon i{
    position:relative;

    z-index:2;

    font-size:54px;

    filter:
        drop-shadow(
            0 5px 10px rgba(1, 52, 130, .12)
        );
}


/* =========================================================
   FLOATING ICONS
========================================================= */

.lj-coming-float-icon{
    position:absolute;

    z-index:5;

    display:flex;

    align-items:center;
    justify-content:center;

    width:48px;
    height:48px;

    color:var(--color-primary);

    background:rgba(255, 255, 255, .96);

    border:
        1px solid rgba(7, 104, 207, .10);

    border-radius:var(--radius-round);

    box-shadow:
        0 12px 30px rgba(1, 52, 130, .10);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);
}


.lj-coming-float-icon i{
    font-size:16px;
}


.lj-coming-float-one{
    top:50px;
    right:24px;

    animation:
        ljComingFloat 4s ease-in-out infinite;
}


.lj-coming-float-two{
    bottom:40px;
    left:45px;

    color:var(--color-secondary-dark);

    animation:
        ljComingFloat 4.8s ease-in-out infinite .5s;
}


.lj-coming-float-three{
    top:65px;
    left:25px;

    animation:
        ljComingFloat 4.4s ease-in-out infinite 1s;
}


/* =========================================================
   CONTENT
========================================================= */

.lj-coming-content{
    position:relative;

    max-width:650px;
}


/* =========================================================
   KICKER
========================================================= */

.lj-coming-kicker{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:17px;

    padding:7px 11px;

    color:var(--color-primary);

    background:var(--color-primary-soft);

    border:
        1px solid rgba(7, 104, 207, .10);

    border-radius:var(--radius-pill);

    font-family:var(--font-body);

    font-size:9px;
    font-weight:var(--weight-bold);

    line-height:1;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.lj-coming-kicker i{
    font-size:10px;
}


/* =========================================================
   HEADING
========================================================= */

.lj-coming-content h1{
    max-width:620px;

    margin:0;

    color:var(--color-title);

    font-family:var(--font-heading);

    font-size:48px;
    font-weight:var(--weight-bold);

    line-height:1.08;

    letter-spacing:-.045em;
}


.lj-coming-content h1 span{
    position:relative;

    display:inline-block;

    color:var(--color-primary);
}


.lj-coming-content h1 span::after{
    position:absolute;

    right:2px;
    bottom:-7px;
    left:2px;

    height:3px;

    content:"";

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

    border-radius:var(--radius-pill);

    transform:scaleX(.78);

    transform-origin:left;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.lj-coming-description{
    max-width:590px;

    margin:
        25px 0 0;

    color:var(--color-text);

    font-family:var(--font-body);

    font-size:14px;
    font-weight:var(--weight-regular);

    line-height:1.8;
}


/* =========================================================
   STATUS CARD
========================================================= */

.lj-coming-status{
    display:flex;

    align-items:center;

    gap:13px;

    max-width:540px;

    margin-top:27px;

    padding:14px 16px;

    background:rgba(255, 255, 255, .80);

    border:
        1px solid rgba(7, 104, 207, .10);

    border-left:
        3px solid var(--color-primary);

    border-radius:var(--radius-sm);

    box-shadow:
        0 8px 25px rgba(1, 52, 130, .045);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);
}


.lj-coming-status-icon{
    display:flex;

    flex:0 0 39px;

    align-items:center;
    justify-content:center;

    width:39px;
    height:39px;

    color:var(--color-primary);

    background:var(--color-primary-soft);

    border-radius:var(--radius-round);
}


.lj-coming-status-icon i{
    font-size:13px;
}


.lj-coming-status div{
    min-width:0;
}


.lj-coming-status small{
    display:block;

    margin-bottom:3px;

    color:var(--color-primary);

    font-family:var(--font-body);

    font-size:8px;
    font-weight:var(--weight-bold);

    letter-spacing:.07em;

    text-transform:uppercase;
}


.lj-coming-status strong{
    display:block;

    color:var(--color-title);

    font-family:var(--font-body);

    font-size:11px;
    font-weight:var(--weight-semibold);

    line-height:1.45;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.lj-coming-actions{
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    margin-top:29px;
}


.lj-coming-btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:43px;

    padding:0 18px;

    border-radius:var(--radius-xs);

    font-family:var(--font-body);

    font-size:10px;
    font-weight:var(--weight-bold);

    line-height:1;

    letter-spacing:.02em;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}


.lj-coming-btn i{
    font-size:11px;
}


/* PRIMARY */

.lj-coming-btn-primary{
    color:var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-dark)
        );

    border:
        1px solid var(--color-primary);

    box-shadow:
        0 8px 20px rgba(7, 104, 207, .16);
}


.lj-coming-btn-primary:hover{
    color:var(--color-white);

    box-shadow:
        0 12px 26px rgba(7, 104, 207, .23);

    transform:translateY(-2px);
}


/* LIGHT */

.lj-coming-btn-light{
    color:var(--color-title);

    background:var(--color-white);

    border:
        1px solid var(--color-border);

    box-shadow:
        0 5px 14px rgba(1, 52, 130, .04);
}


.lj-coming-btn-light:hover{
    color:var(--color-primary);

    border-color:
        rgba(7, 104, 207, .30);

    box-shadow:
        0 9px 20px rgba(1, 52, 130, .07);

    transform:translateY(-2px);
}


/* =========================================================
   NOTE
========================================================= */

.lj-coming-note{
    display:flex;

    align-items:flex-start;

    gap:9px;

    max-width:570px;

    margin-top:25px;

    padding-top:19px;

    color:var(--color-muted);

    border-top:
        1px solid var(--color-border);

    font-family:var(--font-body);

    font-size:9px;

    line-height:1.65;
}


.lj-coming-note i{
    flex:0 0 auto;

    margin-top:2px;

    color:var(--color-success);

    font-size:11px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes ljComingRotate{

    from{
        transform:rotate(0);
    }

    to{
        transform:rotate(360deg);
    }

}


@keyframes ljComingRotateReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0);
    }

}


@keyframes ljComingFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-9px);
    }

}


@keyframes ljComingMorph{

    0%,
    100%{
        border-radius:
            46% 54% 52% 48% /
            48% 46% 54% 52%;
    }

    50%{
        border-radius:
            54% 46% 47% 53% /
            54% 52% 48% 46%;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991.98px){

    .lj-coming-section{
        min-height:auto;

        padding:
            65px 20px 75px;
    }


    .lj-coming-container{
        grid-template-columns:1fr;

        gap:25px;

        max-width:720px;

        text-align:center;
    }


    .lj-coming-visual{
        min-height:300px;
    }


    .lj-coming-icon-wrap{
        width:280px;
        height:280px;
    }


    .lj-coming-icon{
        width:145px;
        height:145px;
    }


    .lj-coming-icon i{
        font-size:46px;
    }


    .lj-coming-content{
        max-width:650px;

        margin:0 auto;
    }


    .lj-coming-content h1{
        margin:0 auto;

        font-size:42px;
    }


    .lj-coming-description{
        margin:
            23px auto 0;
    }


    .lj-coming-status{
        margin:
            25px auto 0;

        text-align:left;
    }


    .lj-coming-actions{
        justify-content:center;
    }


    .lj-coming-note{
        justify-content:center;

        margin:
            24px auto 0;

        text-align:left;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:575.98px){

    .lj-coming-section{
        padding:
            42px 16px 55px;
    }


    .lj-coming-container{
        gap:16px;
    }


    .lj-coming-visual{
        min-height:240px;
    }


    .lj-coming-icon-wrap{
        width:220px;
        height:220px;
    }


    .lj-coming-ring-one{
        inset:10px;
    }


    .lj-coming-ring-two{
        inset:40px;
    }


    .lj-coming-icon{
        width:115px;
        height:115px;

        border-width:6px;
    }


    .lj-coming-icon i{
        font-size:35px;
    }


    .lj-coming-float-icon{
        width:37px;
        height:37px;
    }


    .lj-coming-float-icon i{
        font-size:12px;
    }


    .lj-coming-float-one{
        top:31px;
        right:13px;
    }


    .lj-coming-float-two{
        bottom:24px;
        left:28px;
    }


    .lj-coming-float-three{
        top:39px;
        left:16px;
    }


    /* KICKER */

    .lj-coming-kicker{
        margin-bottom:14px;

        padding:6px 9px;

        font-size:7px;
    }


    /* TITLE */

    .lj-coming-content h1{
        max-width:400px;

        font-size:30px;

        line-height:1.12;

        letter-spacing:-.035em;
    }


    .lj-coming-content h1 span::after{
        bottom:-5px;

        height:2px;
    }


    /* DESCRIPTION */

    .lj-coming-description{
        margin-top:20px;

        font-size:11px;

        line-height:1.75;
    }


    /* STATUS */

    .lj-coming-status{
        gap:10px;

        margin-top:20px;

        padding:11px 12px;
    }


    .lj-coming-status-icon{
        flex-basis:34px;

        width:34px;
        height:34px;
    }


    .lj-coming-status-icon i{
        font-size:11px;
    }


    .lj-coming-status small{
        font-size:6.5px;
    }


    .lj-coming-status strong{
        font-size:9px;

        line-height:1.4;
    }


    /* ACTIONS */

    .lj-coming-actions{
        gap:7px;

        margin-top:22px;
    }


    .lj-coming-btn{
        min-height:39px;

        padding:0 14px;

        font-size:8px;
    }


    .lj-coming-btn i{
        font-size:9px;
    }


    /* NOTE */

    .lj-coming-note{
        margin-top:20px;

        padding-top:15px;

        font-size:8px;

        line-height:1.55;
    }

    .lj-footer-main{
      display:none;
    }
    .lj-footer-main{
        display:none;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px){

    .lj-coming-content h1{
        font-size:27px;
    }


    .lj-coming-actions{
        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        width:100%;
    }


    .lj-coming-btn{
        width:100%;

        padding:
            0 9px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .lj-coming-icon-ring,
    .lj-coming-icon,
    .lj-coming-float-icon{
        animation:none !important;
    }


    .lj-coming-btn{
        transition:none !important;
    }

}






p {
  font-size: var(--main-font-size) !important;
}

.r {
  padding-right: 4px;
}

.lj-trending-card-kicker {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

button,
input,
select,
textarea,
a,
li,
p,
span {
  font-family: var(--font-body);
}
h1.lj-home-hero-title{
  font-family: var(--font-body) !important;  
}
.lj-quick-link-content small {
    color: #486581;
}