/* BigDot Global - 03/02/2026*/

/* Fonts URL */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap");

/* Theme Controls Starts */
:root {
  --site-primary-font: "Familjen Grotesk", sans-serif !important;
  --site-secondary-font: "Bricolage Grotesque", sans-serif !important;
  --site-tertiary-font: "Fraunces", serif !important;

  --site-primary-color: #3a1593;
  --site-secondary-color: #f4f0ff;
  --site-tertiary-color: #2255e8;
  --site-quaternary-color: #f15a25;
  --site-text-color: #1c1a16;
  --site-text-muted-color: #808080;
  --site-cta-color: #f15a25;
  --site-cta-text-color: #ffffff;
}

/* Responsive Height Control Starts */

body {
  font-size: 14px;
  /* line-height: 24px; */
  font-family: var(--site-primary-font) !important;
  background-color: #f9f9f9;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Fill full height of viewport */
app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Sticky footer: app-root is a flex column (min-height: 100vh), so giving
   the footer an auto top margin makes it absorb the leftover space and stay
   pinned to the bottom of the viewport even when page content is short. */
app-footer {
  margin-top: auto;
}

ul {
  padding: 0 !important;
  margin: 0 !important;
}

ol {
  padding: 0 !important;
  margin: 0 !important;
}

li {
  list-style: none !important;
}

a {
  text-decoration: none !important;
  color: var(--site-primary-color);
}

.primaryColor {
  color: var(--site-primary-color) !important;
}

.primaryColor a {
  color: var(--site-primary-color) !important;
}

.primaryBgColor {
  background-color: var(--site-primary-color) !important;
}

.secondaryColor {
  color: var(--site-primary-color) !important;
}

.secondaryColor a {
  color: var(--site-primary-color) !important;
}

.secondaryBgColor {
  background-color: var(--Secondary_BGColor) !important;
}

.headingColor {
  color: var(--Heading_Color) !important;
}

.headingColor a {
  color: var(--Heading_Color) !important;
}

.linkColor {
  color: var(--Link_Color) !important;
}

.linkColor a {
  color: var(--Link_Color) !important;
}

.iconColor {
  color: var(--Icon_Color) !important;
}

.iconColor a {
  color: var(--Icon_Color) !important;
}

.borderColor {
  border-color: var(--site-primary-color) !important;
}

.paragraphColor {
  color: var(--Paragraph_Color) !important;
}

.offerBg {
  background-color: var(--Secondary_BtnBgColor) !important;
}

.secondaryBtnBgColor {
  background-color: var(--Secondary_BtnBgColor) !important;
}

.HdrCTA1BG {
  background-color: var(--HdrCTA1BG) !important;
}

.HdrCTA2BG {
  background-color: var(--HdrCTA2BG) !important;
}

.HdrCTA3BG {
  background-color: var(--HdrCTA3BG) !important;
}

.HdrCTA1Text {
  color: var(--HdrCTA1Text) !important;
}

.HdrCTA2Text {
  color: var(--HdrCTA2Text) !important;
}

.HdrCTA3Text {
  color: var(--HdrCTA3Text) !important;
}

.instaPrimaryColor {
  color: var(--site-primary-color);
}

.instaPrimaryBgColor {
  background-color: var(--site-primary-color);
}

.smallTag.active {
  background-color: var(--site-primary-color);
}

.smallTag:hover {
  background-color: var(--site-primary-color);
}

.otherSearchtext {
  color: var(--site-primary-color);
}

/* Theme Controls Ends Here */

/* Typography Controls Starts Here */

.font400 {
  font-weight: 400 !important;
}

.font500 {
  font-weight: 500 !important;
}

.font600 {
  font-weight: 600 !important;
}

.font700 {
  font-weight: 700 !important;
}

.font800 {
  font-weight: 800 !important;
}

.font900 {
  font-weight: 900 !important;
}

.font9 {
  font-size: 9px;
  line-height: 13px;
}

.font10 {
  font-size: 10px;
  line-height: 15px;
}

.font11 {
  font-size: 11px;
  line-height: 16px;
}

.font12 {
  font-size: 12px;
  line-height: 18px;
}

.font13 {
  font-size: 13px;
  line-height: 20px;
}

.font14 {
  font-size: 14px;
  line-height: 21px;
}

.font16 {
  font-size: 15px;
  line-height: 24px;
}

.font18 {
  font-size: 18px;
  /* line-height: 27px; */
}

.font20 {
  font-size: 20px;
}

.font22 {
  font-size: 22px;
  line-height: 33px;
}

.font24 {
  font-size: 24px;
  line-height: 36px;
}

.font26 {
  font-size: 26px;
  line-height: 39px;
}

.font28 {
  font-size: 28px;
  line-height: 36px;
}

.font30 {
  font-size: 30px;
  line-height: 40px;
}

.font32 {
  font-size: 32px;
}

.font34 {
  font-size: 34px;
}

.font36 {
  font-size: 36px;
}

.font40 {
  font-size: 40px;
  line-height: 47px;
}

.font42 {
  font-size: 42px;
  line-height: 50px;
}

.font60 {
  font-size: 60px;
  line-height: 75px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--site-secondary-font) !important;
  /* font-weight: 500; */
}

/*  Typography Controls Ends Heres */

/* Main CSS Starts Here */

.form-check-input:checked {
  background-color: var(--site-primary-color);
  border-color: var(--site-primary-color);
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--site-primary-color);
}

/* For full custom color (track and thumb), use these webkit selectors: */
input[type="range"]#customRange2::-webkit-slider-thumb {
  background: var(--site-primary-color);
  /* Thumb color */
  border: none;
}

input[type="range"]#customRange2::-webkit-slider-runnable-track {
  background: #e4e4e4;
  /* Track color */
}

input[type="range"]#customRange2::-ms-fill-lower {
  background: #e4e4e4;
}

input[type="range"]#customRange2::-ms-fill-upper {
  background: #e4e4e4;
}

input[type="range"]#customRange2::-moz-range-thumb {
  background: var(--site-primary-color);
  border: none;
}

input[type="range"]#customRange2::-moz-range-track {
  background: #e4e4e4;
}

input[type="range"]#customRange2::-ms-thumb {
  background: var(--site-primary-color);
  border: none;
}

input[type="range"]#customRange2:focus {
  outline: none;
  /* Optional: Remove the default blue outline */
}

/* Main CSS Ends Here */

/* Navbar CSS */

header {
  background-color: #fff;
  padding: 10px 0px;
  border-bottom: 1px solid #dcdcdc;
}

header .nav .bigDotlogo a img {
  height: 40px;
  cursor: pointer;
}

header .nav .bigDotlogo {
  margin-right: 100px;
}

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

.bigDotMenuside {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
}

.bigDotallMenu ul li {
  display: inline-block;
  padding: 0px 30px;
}

.bigDotallMenu ul li a {
  font-size: 15px;
  font-weight: 500;
  line-height: 25px;
  color: #000;
  cursor: pointer;
}

.selectedLanguage a .langIcon i {
  font-size: 31px;
  color: #000;
}

.bigDotButtonsSide {
  display: flex;
  align-items: center;
}

.mainHeader.bigDotButtonsSide .bigDotListing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  right: 300px;
}

.mainHeader.bigDotButtonsSide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.selectedLanguage a {
  display: flex;
  align-items: center;
}

.selectedLanguage a .langName {
  font-size: 15px;
  color: #000;
  margin-left: 6px;
  line-height: 20px;
  font-weight: 400;
}

.bigDotSignup {
  margin-left: 48px;
  margin-right: 15px;
}

.bigDotSignup a {
  font-size: 15px;
  line-height: 20px;
  color: #000;
  font-weight: 400;
}

.bigDotListing .listingBtn {
  padding: 8px 20px;
  color: #fff;
  background-color: var(--site-cta-color);
  border: none;
  border-radius: 50px;
  display: flex;
  align-items: center;
  background-size: 0% 100%;
  transition: background-color 0.5s;
  margin-left: 15px;
}

.bigDotListing .listingBtn:hover {
  background-color: #3a1497;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.7) 100%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  transition:
    background-size 1s,
    background-color 1s;
}

.bigDotListing .listingBtn span {
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  color: #fff;
  display: inline-grid;
  transition: all 0.8s ease;
  /* position: relative; */
  /* z-index: 1; */
}

.bigDotListing .listingBtn span i {
  font-size: 18px;
  margin-right: 6px;
  transition: transform 0.4s ease;
}

.listingBtn:hover i {
  transform: rotate(180deg);
}

.searchNavigation {
  display: flex;
  align-items: center;
  gap: 12px;
}

.searchNavigation .locationSearchAreaHeader {
  width: 210px;
  height: 50px;
  border-radius: 10px;
  position: relative;
}

.searchNavigation .locationSearchAreaHeader input {
  width: 210px;
  height: 100%;
  border-radius: 10px;
  padding-left: 50px;
}

.searchNavigation .locationSearchAreaHeader input::placeholder {
  color: #747474;
}

.searchNavigation .locationSearchAreaHeader .locationSearchIcon {
  position: absolute;
  top: 5px;
  left: 20px;
}

.searchNavigation .locationSearchAreaHeader .locationSearchIcon img {
  width: 18px;
}

.searchNavigation .otherSearchAreaHeader {
  width: 100%;
  height: 50px;
  position: relative;
}

.searchNavigation .otherSearchAreaHeader {
  width: 100%;
}

.searchNavigation .otherSearchAreaHeader input {
  width: 530px;
  height: 100%;
  border-radius: 10px;
  padding-left: 70px;
}

.searchNavigation .otherSearchAreaHeader input::placeholder {
  color: #747474;
}

.searchNavigation .otherSearchAreaHeader .otherSearchtext {
  position: absolute;
  top: 25px;
  left: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 2px;
  color: var(--site-primary-color);
}

.searchNavigation .otherSearchAreaHeader .searchButton {
  position: absolute;
  top: 5px;
  right: 5px;
}

.searchNavigation .otherSearchAreaHeader .searchButton button {
  padding: 10px 30px;
  border: none;
  background-color: var(--site-primary-color);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: #fff;
  border-radius: 10px;
}

.notificationIcon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--site-primary-color);
  font-size: 24px;
  margin-right: 16px;
  cursor: pointer;
}

.userIcon {
  border: 1px solid var(--site-primary-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 16px;
  cursor: pointer;
}

.userIcon img {
  width: 100%;
  height: 100% !important;
}

.logoSider .navbar-toggler:focus {
  box-shadow: none;
}

.logoSider .navbar-toggler.border-0 {
  padding: 0px;
  font-size: 24px;
  color: #000 !important;
}

.bigDotFrontPage {
  padding: 15px 0px 15px;
  /* border-bottom: 1px solid #cccccc;; */
}

.fontPageLeftPanel {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #cccccc;
  /* border: 1px solid #dee2e6; */
}

.tabPartwithHeading {
  padding: 15px 15px 0px;
  border-bottom: 1px solid #cccccc;
}

.tabPartwithHeading h6 {
  font-size: 20px;
  font-weight: 600;
  line-height: 22.5px;
  color: #000;
  margin-bottom: 15px;
}

.tabPartwithHeading .tagButton {
  padding: 6px 15px;
  border-radius: 10px;
  border: none;
  color: #000;
  background-color: var(--site-secondary-color);

  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.tabPartwithHeading .groupTags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.classifiedPart {
  padding: 15px 15px;
  /* border: 1px solid #cccccc; */
}

.classifiedHeading h6 {
  font-size: 20px;
  font-weight: 600;
  line-height: 22.5px;
  color: #000;
  margin-bottom: 15px;
}

.classifiexIconFeatured {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}

.classifiexIconFeatured .iconSider img {
  width: 30px;
  height: 30px;
}

.classifiexIconFeatured .iconSider svg {
  width: 30px;
  height: 30px;
}

.classifiexIconFeatured .textSider h6 {
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  color: #000;
  margin-bottom: 0px;
}

.classifiexIconFeatured .textSider p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #515151;
  margin-bottom: 0;
}

.classifiexIconFeatured .textSider h6:hover {
  color: var(--site-primary-color);
}

/* .classifiexIconFeatured .textSider p:hover {
  color: var(--site-primary-color);
} */

.forntPageDetailsArea {
  padding: 0px 10px;
}

.detailsAreaAeading h1 {
  font-weight: 500;
  color: #000;
  font-size: 40px;
  margin-bottom: 15px;
  line-height: 50px;
}

.detailsAreaAeading h1 span {
  font-weight: 700;
  font-size: 50px;
  line-height: 65px;
  background: linear-gradient(
    90deg,
    #310f84 27%,
    #9784c6 44%,
    var(--site-primary-color) 80%
  );
  background: linear-gradient(
    90deg,
    var(--site-primary-color) 27%,
    var(--site-tertiary-color) 44%,
    var(--site-primary-color) 80%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
  text-transform: capitalize;
}

.locationSearchArea {
  width: 100%;
  border-radius: 10px;
  position: relative;
}

.locationSearchArea input {
  width: 100%;
  border-radius: 50px !important;
  padding-left: 50px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.locationSearchArea input::placeholder {
  color: #747474;
}

.locationSearchIcon {
  position: absolute;
  top: 11px;
  left: 25px;
}

.locationSearchIcon img {
  width: 14px;
}

.otherSearchArea {
  width: 100%;
  position: relative;
}

.otherSearchArea {
  width: 100%;
}

.otherSearchArea input {
  width: 100%;
  border-radius: 50px !important;
  padding-left: 65px !important;
}

.otherSearchArea input::placeholder {
  color: #747474;
}

.otherSearchtext {
  position: absolute;
  top: 19px;
  left: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 2px;
  color: var(--site-primary-color);
}

.searchButton i {
  position: absolute;
  top: 8px;
  right: 8px;
}

.otherSearchArea .searchButton {
  position: absolute;
  top: 21px;
  right: 8px;
  transform: translateY(-50%);
  color: #ffffff;
  cursor: pointer;
  background: var(--site-primary-color);
  width: 30px;
  height: 30px;
  border-radius: 50px;
  line-height: 18px;
}

.otherSearchArea .searchButton button {
  padding: 14px 30px;
  border: none;
  background-color: var(--site-primary-color);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: #fff;
  border-radius: 10px;
}

/* ============================================================
   Dashboard hero search bar polish
   Scoped to .frontPageDetailsArea so the shared search classes
   used in other headers are untouched. Replaces the fragile
   hardcoded top-pixel offsets with height-relative centering,
   equalises the two field heights and enlarges the search button.
   ============================================================ */

/* Equal-height, vertically-aligned fields with a consistent border. */
.frontPageDetailsArea .locationSearchArea input,
.frontPageDetailsArea .otherSearchArea input {
  height: 54px;
  border: 1px solid #e3e3e3;
  font-size: 15px;
  box-shadow: none;
}

.frontPageDetailsArea .locationSearchArea input:focus,
.frontPageDetailsArea .otherSearchArea input:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(13, 38, 89, 0.08);
}

/* Center the location pin regardless of input height. */
.frontPageDetailsArea .locationSearchIcon {
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

/* Center the "What" label. */
.frontPageDetailsArea .otherSearchtext {
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  line-height: 1;
}

/* Larger, cleanly-centered search button. */
.frontPageDetailsArea .otherSearchArea .searchButton {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color 0.2s ease;
}

.frontPageDetailsArea .otherSearchArea .searchButton:hover {
  filter: brightness(1.08);
}

/* Magnifier sits centered in the button (overrides the global
   absolute top/right positioning). */
.frontPageDetailsArea .otherSearchArea .searchButton i {
  position: static;
  top: auto;
  right: auto;
  font-size: 16px;
}

/* Give the keyword input room for the larger button on the right. */
.frontPageDetailsArea .otherSearchArea input {
  padding-right: 58px !important;
}

/* On stacked mobile layout, add breathing room between the two fields. */
@media (max-width: 991px) {
  .frontPageDetailsArea .otherSearchArea {
    margin-top: 12px;
  }
}

/* ============================================================
   Listing-page header search bar polish (property/restaurant/mart)
   Same height-relative centering as the dashboard, scoped to the
   header wrapper (.nav-item.countryCode) and sized for the compact
   header row.
   ============================================================ */
.nav-item.countryCode .locationSearchArea input,
.nav-item.countryCode .otherSearchArea input {
  height: 46px;
  border: 1px solid #e3e3e3;
  font-size: 14px;
  box-shadow: none;
}

.nav-item.countryCode .locationSearchArea input:focus,
.nav-item.countryCode .otherSearchArea input:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(13, 38, 89, 0.08);
}

.nav-item.countryCode .locationSearchIcon {
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.nav-item.countryCode .otherSearchtext {
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  line-height: 1;
}

.nav-item.countryCode .otherSearchArea .searchButton {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color 0.2s ease;
}

.nav-item.countryCode .otherSearchArea .searchButton:hover {
  filter: brightness(1.08);
}

.nav-item.countryCode .otherSearchArea .searchButton i {
  position: static;
  top: auto;
  right: auto;
  font-size: 15px;
}

.nav-item.countryCode .otherSearchArea input {
  padding-right: 50px !important;
}

.forntPageDetailsArea .mb25 {
  margin-bottom: 20px;
}

.frontMainAreaWithTags {
  margin-bottom: 70px;
}

.frontMainAreaWithTags h6 {
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
  margin-bottom: 15px;
}

.mainAreaTags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.smallTag {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  padding: 6px 14px;
  border: none;
  outline: none;
  background-color: #e4e4e4;
  color: #000;
  border-radius: 10px;
  transition: 0.3s;
}

.smallTag:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.smallTag.active {
  background-color: var(--site-primary-color);
  color: #fff;
}

.productSaveDetails .detailsView button span i {
  font-size: 22px;
  vertical-align: middle;
}

.dealIconArea {
  margin-bottom: 60px;
}

.field .ng-select-container {
  height: 42px !important;
}

.dealsAreaIcon {
  cursor: pointer;
  text-align: center;
  border: 2px solid var(--site-secondary-color);
  padding: 12px;
  border-radius: 20px;
  background: #ffffff;
}

.dealsAreaIcon:hover {
  background: var(--site-secondary-color);
  border: 1px solid var(--site-primary-color);
}

.dealsAreaIcon svg {
  height: 50px;
  display: block;
  margin: auto;
}

.dealsAreaIcon img {
  height: 60px;
  display: block;
  margin: auto;
}

.dealsAreaIcon h6 {
  font-size: 14px;
  font-weight: 500;
  color: #212529;
  margin-top: 10px;
  margin-bottom: 0;
}

.spotlightArea h6 {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: #111;
  margin-bottom: 55px;
}

.spotlightArea {
  position: relative;
}

.spotTagLines {
  display: flex;
  align-items: end;
  gap: 15px;
  flex-wrap: wrap;
  padding-left: 35px;
}

.spotTagLines a {
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  /* background: linear-gradient(90deg, #310f84 27%, #9784c6 44%, #f15a25 80%); */
  background: linear-gradient(
    90deg,
    var(--site-primary-color) 27%,
    var(--site-tertiary-color) 44%,
    var(--site-primary-color) 80%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  text-transform: lowercase;
}

.spotLightIcon {
  position: absolute;
  top: 30px;
  left: 0;
}

.spotLightIcon img {
  height: 70px;
}

.footerLinks p {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #646464;
  margin-bottom: 0;
}

.footerLinks p a {
  color: #646464;
}

.footerLinks ul li {
  display: inline-block;
  padding: 0px 22px;
  text-align: end;
}

.footerLinks ul li a {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #646464;
}

footer {
  padding: 14px 0px;
  border-top: 1px solid #dcdcdc;
}

/* Default Banner Area  Starts */

.siteBanner {
  width: 100%;
  padding: 20px 0px;
  /* background-color: #f9e9df; */
  background-color: var(--site-secondary-color);
  position: relative;
  height: 185px;
}

.pageBannerText .breadcrumb .breadcrumb-item a {
  color: #111;
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
}

.pageBannerText .breadcrumb .breadcrumb-item.active {
  color: var(--site-primary-color);
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--site-primary-color);
}

.pageHeading {
  margin-top: 10px;
}

.pageHeading h2 {
  font-size: 30px;
  font-weight: 600;
  color: #080808;
  line-height: 46px;
  font-family: var(--site-secondary-font);
}

.bannerImageArea {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 185px;
}

.plateOne img {
  /* width: 550px; */
  height: 185px;
  object-fit: cover;
}

.plateTwo img {
  width: 350px;
}

.bannerImageArea {
  position: absolute;
  top: 0;
  right: 0;
}

/* Default Banner Settings End */

/* Product Area */
.pageContentArea {
  padding: 25px 0px;
  border: 1px solid #cccccc;
}

.productSearchArea {
  padding: 15px 20px;
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 10px;
}

.searchHeadingArea {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 15px;
}

.searchHeadingArea .searchHeading {
  position: relative;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  color: #111;
}

.searchHeadingArea .searchHeading::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #e1e1e1;
}

.searchHeadingArea .searchHeading::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  height: 2px;
  width: 40%;
  background-color: var(--site-primary-color);
}

.clearSearch {
  color: red;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}

.searchFieldGroup {
  margin-top: 30px;
}

.searchFieldGroup .field {
  margin-bottom: 15px;
}

.innerSearch {
  margin-top: 15px !important;
}

.searchFieldGroup .field .form-control {
  background-color: #f9f9f9;
}

.field .form-control,
.field .form-select {
  height: 40px;
  border: 1px solid #cccccc;
  font-size: clamp(12px, 1vw, 14px);
}

.form-control:focus,
.form-select:focus {
  box-shadow: none;
  border: 1px solid var(--site-primary-color);
}

.innerSearch h6 {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #111;
}

.filterLabelArea {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 4px;
}

.filterViewAll {
  font-weight: 400 !important;
  color: #3f51b5 !important;
  font-size: 13px !important;
  margin-bottom: 2px;
}

.filterLabel {
  margin-bottom: 4px !important;
  font-size: 14px;
  font-weight: 400;
  color: #111;
}

.innerSearch span {
  color: #646464;
  font-size: 15px;
}

.innerSearch .field {
  position: relative;
}

.innerSearch .field .locationCircle {
  position: absolute;
  top: 8px;
  right: 8px;
}

.mt20 {
  margin-top: 15px;
}

.ng-select-container {
  border-radius: 10px !important;
}

.range-slider {
  width: 100%;
  position: relative;
  display: flex;
}

.rangeSlider .range {
  width: 100%;
  max-width: 100%;
  border-radius: 4rem;
  box-shadow: 0 6px 16px hsla(256, 72%, 24%, 0.15);
  display: grid;
}

.rangeSlider .rangeContent {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}

.rangeSlider .rangeSalider {
  width: 100%;
  height: 6px;
  background-color: #e9ecf2;
  border-radius: 4rem;
  overflow: hidden;
}

.rangeSlider .rangeSaliderLine {
  width: 100%;
  height: 100%;
  background: var(--site-primary-color);
  width: 0;
}

.rangeSlider .rangeThumb {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 12px hsla(256, 72%, 24%, 0.2);
  position: absolute;
  border: 2px solid var(--site-primary-color);
}

/* Value input range */
.rangeSlider .rangeValue {
  width: 24px;
  height: 24px;
  background: var(--site-primary-color);
  position: absolute;
  top: -34px;
  left: -2px;
  border-radius: 2rem 2rem 2rem 0.25rem;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
}

.rangeSlider .rangeValueNumber {
  transform: rotate(45deg);
  color: #fff;
  font-size: 12px;
}

/* Default input range */
.rangeSlider .rangeInputs {
  appearance: none;
  width: 100%;
  height: 16px;
  position: absolute;
  opacity: 0;
}

.rangeSlider .rangeInputs::-webkit-slider-thumb {
  appearance: none;
  width: 32px;
  height: 32px;
}

.rangeSlider .rangeInputs::-webkit-slider-thumb:hover {
  cursor: pointer;
}

.priceRangeFild {
  display: flex;
  align-items: center;
  gap: 20px;
}

.multiCheckField {
  margin-bottom: 30px;
}

.heignt25px {
  height: 35px;
}

.stylePosit {
  top: 10px;
  right: 10px;
  color: var(--site-primary-color);
}

.anotherBgcolor {
  background-color: var(--site-primary-color);
}

.listingBtnNewStyl {
  background-color: transparent !important;
  border: 2px solid #fff !important;
}

.checkList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  gap: 10px;
}

.checkList .form-check-input:focus {
  border-color: #f67c43;
}

.checkList .form-check {
  width: 50%;
}

.checkList .form-check-input {
  background-color: #fff4f5;
  box-shadow: none;
}

.checkList label {
  font-size: 13px;
  color: #8f9ca2;
}

.checkList .form-check-input:checked {
  background-color: var(--site-primary-color);
  border-color: var(--site-primary-color);
}

.searchMainBtn button {
  width: 100%;
  padding: 10px 25px;
  background-color: var(--site-primary-color);
  border: none;
  border-radius: 10px;
  font-size: 16px;
  line-height: 26px;
  color: #fff;
}

.productMainArea {
  padding: 15px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  background-color: #fff;
}

.mb30 {
  margin-bottom: 30px;
}

.productMainArea .searchHeadingArea .clearSearch {
  color: var(--site-primary-color);
}

/* ══════════════════════════════════════════
   RESTAURANT LISTING — MODERN CARD REDESIGN
   Used by restaurant-grid-list & restaurant-view-list.
   ══════════════════════════════════════════ */

.dishPlate {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  padding: 0;
  gap: 0;
  height: 100%;
  position: relative;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.dishPlate:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  border-color: rgba(15, 23, 42, 0.08);
}

.dishPlate:hover .dishName {
  color: var(--site-primary-color);
}

.dishPlate .dishesImageSide {
  position: relative;
  width: 100%;
  text-align: initial;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f4f4f5;
}

.dishPlate .dishesImageSide img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.dishPlate:hover .dishesImageSide img {
  transform: scale(1.05);
}

/* Legacy thumb usage (non-card contexts) — kept for safety */
.dishesImageSide {
  text-align: center;
}

.dishesImageSide img {
  width: 120px;
  border-radius: 10px;
  height: 120px;
  object-fit: cover;
}

.dishReview {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: var(--site-primary-color);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  padding: 3px 5px;
  border-radius: 4px;
}

.dishesDetailsSide {
  /* position: relative; */
  width: 100%;
}

.dishPlate .dishesDetailsSide {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
  width: 100%;
}

/* .productAvilableDtls ul li:nth-child(n + 3) {
  display: none;
}

.productAvilableDtls ul li:nth-child(5) .text::after {
  content: "...";
  display: inline-block;
  margin-left: 5px;
  font-weight: bold;
} */

.tagSpan {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 5px 3px 5px;
  font-size: 15px;
  font-weight: 400;
  line-height: 19px;
  color: #f2ad22;
  border: 1px solid #f2ad22;
  background-color: #fef9ef;
  border-radius: 10px;
}

.dishesDetailsSide .dishName {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  color: #111;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dishPlate .dishesDetailsSide .dishName {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
  margin: 0 0 8px;
  -webkit-line-clamp: 2;
  transition: color 0.2s ease;
}

.dishPlate .dishesDetailsSide > p:not(.dishHighlight) {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.2;
}

.dishesDetailsSide .dishHighlight {
  color: var(--site-primary-color);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 5px;
}

.dishPlate .dishesDetailsSide .dishHighlight {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 12px;
}

.productAvilableDtls ul li {
  margin: 8px 0px;
  display: flex;
}

.dishPlate .productAvilableDtls {
  margin: 0 0 16px;
  flex: 1;
}

.dishPlate .productAvilableDtls ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dishPlate .productAvilableDtls ul li {
  margin: 0;
  padding: 0;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.productAvilableDtls ul li .icons {
  color: var(--site-primary-color);
  font-size: 14px;
  margin-right: 5px;
  vertical-align: middle;
}

.dishPlate .productAvilableDtls ul li .icons {
  font-size: 0.85rem;
  margin: 0;
  margin-top: 2px;
  width: 16px;
  flex-shrink: 0;
}

p.breadcrumb-item.active {
  margin-bottom: 5px !important;
}

.productAvilableDtls ul li .text {
  color: #797979;
  font-size: 14px;
  line-height: 18px;
}

.dishPlate .productAvilableDtls ul li .text {
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.4;
}

.productMainArea .col-xl-6.col-lg-12 {
  margin-bottom: 10px;
}

.productSaveDetails {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* margin-top: 10px; */
}

.dishPlate .productSaveDetails {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  justify-content: stretch;
}

.dishPlate .productSaveDetails .listViewButtonGroup {
  display: flex;
  flex: 1;
  margin: 0;
  gap: 10px;
}

.dishPlate .productSaveDetails .listViewButtonGroup a {
  flex: 1;
  text-decoration: none;
  display: block;
}

.productSaveDetails .bookmark button {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: #008001;
  font-size: 16px;
  font-weight: 500;
}

.productSaveDetails .detailsView button {
  padding: 5px 16px;
  border-radius: 10px;
  background-color: var(--site-primary-color);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  border: none;
}

.productMainArea,
.mapMainArea {
  height: 100%;
  border-radius: 10px;
  border: 1px solid #cccccc;
}

.productSearchArea {
  min-height: 450px;
}

.allSearchAreas {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: end;
}

.mapView button {
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  border: 1px solid #cccccc;
  color: #282828;
  background: transparent;
  border-radius: 10px;
}

.mapView button i {
  margin-right: 10px;
  color: var(--site-primary-color);
  width: 18px;
}

.selectDishCategory .form-select {
  padding: 10px 13px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #646464;
  min-width: 240px;
}

.listGrids {
  display: flex;
  align-items: center;
  gap: 7px;
}

.listGrids button {
  font-size: 18px;
  padding: 10px 10px;
  border: 1px solid var(--site-primary-color);
  color: var(--site-primary-color);
  line-height: 0;
  background: transparent;
  transition: 0.4s;
  border-radius: 10px;
}

.listGrids button.active {
  background-color: var(--site-primary-color);
  color: #fff;
}

.listGrids button.active,
.listGrids button:hover {
  border: 1px solid #cccccc;
}

.listGrids button:hover {
  border: 1px solid #cccccc;
}

.mb20 {
  margin-bottom: 20px;
}

.mb25px {
  margin-bottom: 25px;
}

.mb50px {
  margin-bottom: 50px;
}

/* Dishes Plate list view */
.dishPlateListView {
  width: 100%;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.dishPlateListView:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  border-color: rgba(15, 23, 42, 0.08);
}

.dishPlateListView .listdetaliImageSider {
  display: flex;
  gap: 22px;
  align-items: stretch;
}

.dishPlateListView .listdetaliImageSider .dishesImageSide {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #f4f4f5;
  text-align: initial;
  width: auto;
}

.dishPlateListView .listdetaliImageSider .dishesImageSide img {
  width: 180px;
  height: 180px;
  border: none;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.dishPlateListView:hover .listdetaliImageSider .dishesImageSide img {
  transform: scale(1.05);
}

.dishPlateListView .listdetaliImageSider .dishesDetailsSide {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 2px;
}

.dishPlateListView .listdetaliImageSider .dishesDetailsSide .dishName {
  font-size: 1.35rem;
  /* font-weight: 700; */
  line-height: 1.3;
  color: #0f172a;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dishPlateListView .listdetaliImageSider .dishesDetailsSide > p {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: 1.2;
}

.dishPlateListView .listdetaliImageSider .dishesDetailsSide .dishHighlight {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--site-primary-color);
  margin: 0 0 12px;
}

.dishPlateListView
  .listdetaliImageSider
  .dishesDetailsSide
  .productAvilableDtls {
  margin: 0;
}

.dishPlateListView
  .listdetaliImageSider
  .dishesDetailsSide
  .productAvilableDtls
  ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}

.dishPlateListView
  .listdetaliImageSider
  .dishesDetailsSide
  .productAvilableDtls
  ul
  li {
  margin: 0;
  align-items: flex-start;
  gap: 8px;
}

.dishPlateListView
  .listdetaliImageSider
  .dishesDetailsSide
  .productAvilableDtls
  ul
  li
  .icons {
  font-size: 0.9rem;
  margin: 0;
  margin-top: 2px;
  width: 18px;
  flex-shrink: 0;
}

.dishPlateListView
  .listdetaliImageSider
  .dishesDetailsSide
  .productAvilableDtls
  ul
  li
  .text {
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.4;
}

.dishPlateListView
  .listdetaliImageSider
  .dishesDetailsSide
  .productSaveDetails {
  margin-top: 5px;
}

.dishPlateListView .listdetaliImageSider .productSaveDetails .bookmark button {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

/* List card right column: verified badge + QR + CTAs */
.dishPlateListView .extraDetailsScanner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  padding: 2px 0;
  gap: 12px;
}

.dishPlateListView .extraDetailsScanner > img.verifiedBadge {
  display: none;
}

/* Mobile: list card stacks vertically */
@media (max-width: 767.98px) {
  .dishPlateListView {
    padding: 14px;
  }

  .dishPlateListView .listdetaliImageSider {
    flex-direction: column;
    gap: 14px;
  }

  .dishPlateListView .listdetaliImageSider .dishesImageSide img {
    width: 100%;
    height: 200px;
  }

  .dishPlateListView
    .listdetaliImageSider
    .dishesDetailsSide
    .productAvilableDtls
    ul {
    grid-template-columns: 1fr;
  }
}

.checkAndPromote {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: end;
  margin-bottom: 20px;
}

.verifyData span img {
  height: 24px;
}

.promoteArea button {
  font-size: 15px;
  font-weight: 400;
  border-radius: 10px;
  padding: 2px 6px;
  line-height: 20px;
  background-color: #fef9ef;
  border: 1px solid #f2ad22;
  color: #f2ad22;
}

.webScanner {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 15px;
}

.dishPlateListView .webScanner {
  margin: 0;
  justify-content: flex-end;
}

.scannerImage {
  padding: 6px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  display: none;
}

/* Only show QR frame when there is a QR image inside */
.dishPlateListView .scannerImage:has(img) {
  display: block;
}

.scannerImage img {
  width: 84px;
  height: 84px;
  display: block;
}

.listViewButtonGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.productAvilableDtls ul li:last-child {
  margin-bottom: 10px;
}

.listViewButtonGroup a {
  text-decoration: none;
}

.listViewButtonGroup a button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 22px;
  border: 1.5px solid var(--site-primary-color);
  color: var(--site-primary-color);
  border-radius: 999px;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  width: 100%;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
}

.listViewButtonGroup a button.active,
.listViewButtonGroup a button:hover {
  background: var(--site-primary-color);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14);
  border-color: var(--site-primary-color);
}

.listViewButtonGroup a button span i {
  transition: transform 0.25s ease;
}

.listViewButtonGroup a button:hover span i {
  transform: translateX(3px);
}

/* List view: CTA sits inline, auto-width */
.dishPlateListView .listViewButtonGroup {
  margin-top: 0;
}

.dishPlateListView .listViewButtonGroup a button {
  width: auto;
  min-width: 150px;
}

/* Product details Page */
.detailsBannerSlider {
  overflow: hidden;
  width: 100%;
}

.detailsBannerSlider .carousel-item {
  height: 600px !important;
  object-fit: cover;
}

.detailsBannerSlider .carousel-item img {
  height: 600px !important;
  object-fit: cover;
}

.detailsBannerSlider .container {
  min-width: 100%;
  padding: 0;
}

.sliderWrapper {
  position: relative;
  width: 100%;
}

.sliderWrapper .slideButton {
  position: absolute;
  top: 50%;
  outline: none;
  border: none;
  height: 40px;
  width: 40px;
  z-index: 5;
  color: #fff;
  display: flex;
  cursor: pointer;
  font-size: 20px;
  background: #ff3c48;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: translateY(-50%);
}

.sliderWrapper .slideButton:hover {
  background: #404040;
}

.sliderWrapper .slideButton#prev-slide {
  left: 25px;
  /* display: none; */
}

.sliderWrapper .slideButton#next-slide {
  right: 25px;
}

.sliderWrapper .imageList {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  /* gap: 18px; */
  font-size: 0;
  list-style: none;
  margin-bottom: 30px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sliderWrapper .imageList::-webkit-scrollbar {
  display: none;
}

.sliderWrapper .imageList .imageItem {
  width: 360px;
  height: 350px;
  object-fit: cover;
}

.detailsBannerSlider .container .sliderScrollbar {
  height: 24px;
  width: 100%;
  display: flex;
  align-items: center;
  display: none;
}

.sliderScrollbar .scrollbarTrack {
  background: #ccc;
  width: 100%;
  height: 2px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  position: relative;
  display: none;
}

.sliderScrollbar:hover .scrollbarTrack {
  height: 4px;
}

.sliderScrollbar .scrollbarThumb {
  position: absolute;
  background: #000;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  cursor: grab;
  border-radius: inherit;
}

.sliderScrollbar .scrollbarThumb:active {
  cursor: grabbing;
  height: 8px;
  top: -2px;
}

.sliderScrollbar .scrollbarThumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

/* .dropdown {
    float: left;
    overflow: hidden;
}

.dropdown-toggle.show,
.dropdown-toggle:focus,
.dropdown-toggle:active {
    outline: none !important;
} */

.languageSelectorDropdown .form-select {
  border-color: transparent !important;
  padding: 5px 10px !important;
  font-size: 16px !important;
}

#offcanvasNavbar {
  display: none;
}

/* Shop Details */
.shopDetails {
  padding: 25px 0px;
  background-color: #fff;
}

.productShopArea {
  display: flex;
  align-items: center;
  gap: 30px;
}

.shopImage {
}

.shopImage img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px #00000040;
  background-color: #fff;
  padding: 5px;
  object-fit: cover;
}

.shopName {
  display: flex;
  align-items: center;
  gap: 32px;
}

.shopName h4 {
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 0;
}

.shopName .shopStatus {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: #61d75f;
}

.shopName .shopStatus::before {
  content: " ";
  position: absolute;
  top: 3px;
  left: -18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #61d75f;
}

.disheHighlight h6 {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--site-primary-color);
  margin: 5px 0px 10px;
}

.productShareArea {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  justify-content: end;
  padding-right: 30px;
}

.productShareArea .tooltip {
  position: relative;
  display: inline-block;
  opacity: 1;
  padding: 10px;
  border: 1px solid #ff3c48;
  background: transparent;
  border-radius: 4px;
  line-height: 0;
  color: #ff3c48;
  transition: 0.4s;
}

.productShareArea .tooltip:hover {
  background: #ff3c48;
  color: #fff;
}

.productShareArea .tooltip.active {
  background-color: #ff3c48;
  color: #fff;
}

.productShareArea .tooltip.active .tooltiptext {
  visibility: visible;
}

.productShareArea .tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #ff3c48;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 15px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
  line-height: 18px;
}

.productShareArea .tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #ff3c48 transparent transparent transparent;
}

.productShareArea .tooltip:hover .tooltiptext {
  visibility: visible;
}

.productDetailsMain {
  padding: 32px 0px;
  border-bottom: 1px solid #cccccc;
}

.aboutProduct {
  padding: 25px 22px;
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 10px;
}

.productHeadings h5 {
  width: 100%;
  position: relative;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

.productHeadings h5::before {
  content: " ";
  position: absolute;
  top: 30px;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #e1e1e1;
}

.productHeadings h5::after {
  content: " ";
  position: absolute;
  top: 30px;
  left: 0;
  height: 2px;
  width: 50px;
  background-color: var(--site-primary-color);
}

.aboutProduct p {
  font-size: 15px;
  line-height: 30px;
  font-weight: 400;
  color: #797979;
  margin-top: 16px;
  margin-bottom: 0;
}

.foodsTimesBox {
  padding: 25px 22px;
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 10px;
  margin-top: 30px;
}

.foodContent .nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
}

.foodContent .nav::before {
  content: " ";
  position: absolute;
  top: 30px;
  left: 0;
  height: 1.5px;
  width: 100%;
  background-color: #e1e1e1;
}

.foodContent .nav::after {
  content: " ";
  position: absolute;
  top: 30px;
  left: 0;
  height: 1.5px;
  width: 50px;
  background-color: var(--site-primary-color);
}

.foodContent .nav-pills .nav-link.active,
.foodContent .nav-pills .nav-link {
  padding: 0;
  background-color: transparent;
  color: #111;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
}

.foodAccordion .accordion .accordion-item {
  border: 1px solid #ff3c48;
  margin-bottom: 14px;
  border-radius: 10px;
}

.foodAccordion .accordion .accordion-item button[aria-expanded="true"] {
  /* border-bottom: 1px solid #FF3C48; */
  background-color: #ff3c48;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
}

.foodAccordion .accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em;
  color: #111;
  font-size: 1.15rem;
  font-weight: 500;
  border: none;
  background: none;
  outline: none;
}

.foodAccordion .accordion button:hover,
.foodAccordion .accordion button:focus {
  cursor: pointer;
  color: #111;
}

.foodAccordion .accordion button:hover::after,
.foodAccordion .accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}

.foodAccordion .accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.foodAccordion .accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 16px;
  width: 22px;
  height: 22px;
  background-color: #ff3c48;
  border-radius: 4px;
  color: #fff;
}

.foodAccordion .accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 6px;
  width: 10px;
  height: 2px;
  background: currentColor;
}

.foodAccordion .accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 10px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.foodAccordion .accordion button[aria-expanded="true"] {
  color: #03b5d2;
}

.foodAccordion .accordion button[aria-expanded="true"] .icon::after {
  width: 0;
}

.foodAccordion .accordion button[aria-expanded="true"] + .accordion-content {
  opacity: 1;
  max-height: 1000px;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}

.foodAccordion .accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 200ms linear,
    max-height 200ms linear;
  will-change: opacity, max-height;
}

.foodAccordion .accordion .accordion-content .menuItemDels {
  padding: 16px;
}

.menuItemDelsCart {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #fff3f3;
  padding: 10px 10px;
}

.borderBottomNone {
  border-bottom: none;
}

.menuImage img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
}

.menuHeadingPrice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.menuHeadingPrice h5,
.menuHeadingPrice h6 {
  margin-bottom: 0;
}

.menuItemDtlText p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: #646464;
}

.menuHeadingPrice h5 {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
}

.menuHeadingPrice h6 {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

.amenitiPointsBox {
  padding: 10px;
}

.aminitiPoints {
  display: flex;
  gap: 5px;
  align-items: center;
}

.aminitiPoints span {
  color: #767676;
}

.aminitiPoints span i {
  color: #ff3c48;
}

.mb10 {
  margin-bottom: 10px;
}

.locationMapping {
  padding: 25px 22px;
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 10px;
  margin-top: 40px;
}

.longButtonGroups {
  margin-bottom: 30px;
}

.longButtonGroups a button {
  padding: 15px;
  width: 100%;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}

.longButtonGroups a button i {
  margin-right: 6px;
}

.longButtonGroups a button.orderButton {
  background-color: var(--site-primary-color);
  color: #fff;
  margin-bottom: 16px;
}

.longButtonGroups a button.bigcardButton {
  background-color: #181818;
  color: #fff;
}

.openTimeTable {
  padding: 27px 22px;
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 10px;
}

.textGreen {
  color: #008001;
  font-weight: 600;
}

.timeTable .table td {
  color: #767676;
}

.timeTable .table {
  margin-bottom: 20px;
}

.timeTable h5 {
  font-size: 20px;
  color: #008001;
  font-weight: 500;
  line-height: 26px;
  margin-bottom: 0;
}

.productPromo {
  width: 100%;
}

.productPromo img {
  width: 100%;
  border-radius: 10px;
}

.productPromo {
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  color: #111;
}

.classifiGroups {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.classifiGroups a .classfiIcon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #373737;
  margin-bottom: 8px;
}

.classifiGroups a .classfiIcon img {
  width: 20px;
  /* height: 20px; */
}

.classifiGroups a {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 16px;
  color: #111;
}

.classifiedMobile {
  padding: 13px;
  display: none;
}

.showInMobile {
  display: none;
}

.searchInAdvanced {
  margin-bottom: 20px;
}

.searchInAdvanced .mapView button i {
  font-size: 20px;
  margin-right: 10px;
  color: var(--site-primary-color);
}

.searchInAdvanced .mapView button {
  font-size: 15px;
  border: 1px solid var(--site-primary-color);
}

.searchInAdvanced .selectDishCategory .form-select {
  font-size: 15px;
  min-width: 220px;
  border: 1px solid var(--site-primary-color);
}

.searchInAdvanced .selectDishCategory {
  position: relative;
}

.searchInAdvanced .selectDishCategory .listingIconns {
  position: absolute;
  top: 7px;
  right: 10px;
  color: var(--site-primary-color);
  font-size: 18px;
  background-color: #fff;
}

.advancedSearchingPart .searchOnTop {
  display: none;
}

.dsDesktopNotShowThis {
  display: none;
}

.mobileHeader .navbarMobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 4px 4px 0px #0000001a;
  padding-top: 10px;
  padding-bottom: 10px;
}

.mobileHeader .navbarMobile .logoSider img {
  height: 40px;
}

.mobileHeader .navbarMobile .iconSeder {
  display: flex;
  align-items: center;
}

.iconSeder .notificationIcon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--site-primary-color);
  font-size: 15px;
  margin-right: 0;
  position: relative;
}

.iconSeder .notificationIcon .notifiDot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff3f22;
}

.iconSeder .userIcon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--site-primary-color);
  margin: 0px 10px;
}

.iconSeder .addLister {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--site-primary-color);
  font-size: 15px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectLocateHeader .form-select {
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  border: none;
  width: 135px;
}

.selectLocateHeader label {
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  margin-top: -3px;
  color: #535353;
}

/* Google Places dropdown is hidden globally by default because the
   `<app-address>` widget renders its own custom suggestions list and
   the default `pac-container` would visually duplicate it. Components
   that DO want the default Google dropdown (e.g. the service-heroes
   lead form) opt in by adding `show-pac-container` to <body>. */
body:not(.show-pac-container) .pac-container {
  display: none !important;
}

.selectLocateHeader.position-relative {
  display: none;
}

.dishReview span.dsplayNotshowinMobile {
  display: none !important;
}

.filtersMode.mapView {
  display: none;
}

.locationSearchArea .suggestion-content strong {
  font-size: 15px;
  font-weight: 400;
  color: #777777;
}

.locationSearchArea li.custom-suggestion-item h5 {
  font-size: 17px;
  margin: 5px 0px;
  font-weight: 500;
  color: var(--site-primary-color);
}

.locationSearchArea .custom-suggestion-item {
  padding: 3px 10px !important;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

.otherSearchArea .dropdown-list li {
  padding: 4px 10px !important;
  font-size: 14px;
}

.countryCity li.custom-suggestion-item.lightDarkPurple {
  background: var(--site-secondary-color) !important;
  color: #161616;
  font-size: 16px;
  border-radius: 10px;
  font-weight: 500;
  vertical-align: middle;
  padding: 10px !important;
}

.custom-dropdown.countryCity {
  width: 270px;
  padding: 10px !important;
  border-radius: 10px;
  /* margin-top: 5px !important; */
}

.listdetaliImageSider .dishesImageSide {
  position: relative;
  height: 100%;
}

.countryDropIcon {
  width: 20px;
}

.dropdown.otherSearchArea .dropdown-menu {
  padding: 0px;
}

.dropdown-list {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  max-height: 222px;
  overflow-y: auto;
  z-index: 1000;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropdown-list li {
  padding: 10px;
  cursor: pointer;
}

.dropdown-list li:hover {
  background-color: #f0f0f0;
}

.liveBigDotSupport2 ul.dropdown-menu {
  /* max-height: 300px; */
  max-height: 325px;
  overflow-y: scroll;
  margin-top: 5px !important;
  width: 350px;
  padding: 10px !important;
  overflow-x: hidden;
}

.liveBigDotSupport2 ul.dropdown-menu li a.dropdown-item {
  padding: 8px 10px !important;
  cursor: pointer;
  border-bottom: 1px dashed #cbcbcb;
  border-radius: 0px;
}

.liveBigDotSupport2 ul.dropdown-menu li a.dropdown-item span {
  margin-left: 0.5rem !important;
}

.liveBigDotSupport2 .input-group-prepend .input-group-text {
  padding: 12px;
  background-color: #ffffff;
  border: 1px #3a1593 solid;
  border-radius: 10px !important;
}

.liveBigDotSupport2 .form-control {
  background-color: #ffffff !important;
  font-size: clamp(13px, 1vw, 14px);
  border: 1px #3a1593 solid;
  border-radius: 10px !important;
  margin-left: 5px !important;
}

.bigDotButtonsSide ul.dropdown-menu {
  max-height: 325px;
  overflow-y: auto;
  margin-top: 5px !important;
  width: 250px;
  padding: 10px !important;
  overflow-x: hidden;
}

.bigDotButtonsSide ul.dropdown-menu li a.dropdown-item {
  padding: 8px 10px !important;
  cursor: pointer;
  border-bottom: 1px dashed #cbcbcb;
  width: 100%;
  border-radius: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000000 !important;
}

.countrySelectorDropdown a#dropdownMenuLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: auto;
  max-width: 150px;
}

/* Suppress the dark focus/active edge on the toggle (the .dropdown-toggle
   outline reset elsewhere is commented out). The visible pill border lives on
   the .countrySelectorDropdown wrapper, so the inner .btn carries no border,
   outline or box-shadow in any state. Keyboard users still get a subtle
   primary focus ring on the wrapper for accessibility. */
.countrySelectorDropdown a#dropdownMenuLink,
.countrySelectorDropdown .btn.dropdown-toggle,
.countrySelectorDropdown a#dropdownMenuLink:focus,
.countrySelectorDropdown a#dropdownMenuLink:active,
.countrySelectorDropdown a#dropdownMenuLink.show,
.countrySelectorDropdown a#dropdownMenuLink:focus-visible,
.countrySelectorDropdown .btn.dropdown-toggle:focus,
.countrySelectorDropdown .btn.dropdown-toggle:active,
.countrySelectorDropdown .btn.dropdown-toggle.show,
.countrySelectorDropdown .btn.dropdown-toggle:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.countrySelectorDropdown:focus-within {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.12);
}

.countrySelectorDropdown a#dropdownMenuLink .countryFlagPicker {
  width: 24px;
  height: 16px;
  margin: 0;
  object-fit: cover;
  border-radius: 3px;
  flex: 0 0 auto;
}

.filterBox .checkbox.form-check-input {
  background-color: #fb5607;
  border-color: #fb5607;
  margin-right: 10px;
}

.locationSearchIcon img {
  filter: invert(44%) sepia(82%) saturate(2886%) hue-rotate(347deg)
    brightness(98%) contrast(93%);
}

.textSider {
  cursor: pointer;
}

.cardsOfferInfo {
  color: var(--site-primary-color);
}

.voucherBtn {
  color: #ffffff;
  background-color: #fb5607;
  border-color: #fb5607;
}

.offerHeading {
  font-size: 20px;
}

/* Support Modal CSS */

.SupportContainer {
  padding: 20px !important;
}

.cHeaderRight span {
  position: absolute;
  right: 20px;
  top: 32px;
  background: #3a1593;
  padding: 10px;
  color: #fff;
}

.mycityBgColor2 {
  color: #373737;
  font-size: 20px;
  margin-bottom: 10px;
}

.countryCode.searchLocation form.row.mb25 {
  margin-top: 20px;
}

.mobileViewHeader .iconSeder {
  align-items: center;
}

.BigDotData table,
th,
td {
  border: 1px #3a1593 solid;
  border-collapse: collapse;
  padding: 8px;
  font-weight: normal;
  font-size: 13px;
  color: #000;
  text-align: left;
}

table.BigDotData {
  width: 100%;
}

.BigDotSupport1 img {
  width: 125px;
  margin: 10px 0px 25px;
}

/* Support Modal CSS */

/* header css start here */

.bigDotSignup {
  margin-left: 48px;
  margin-right: 125px;
  position: absolute;
  right: 400px;
  top: 50%;
  transform: translateY(-50%);
}

li.bigDotListing.smallScreenOff {
  position: absolute;
  right: 370px;
  top: 50%;
  transform: translateY(-50%);
}

.mobileViewHeader {
  position: absolute;
  right: 0px;
}

.logoSider .navbar-expand-lg .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
  position: relative;
}

li.bigDotListing.smallScreenOff a.nav-link {
  padding: 0px;
}

/* header css end here */

/* wedding collections css start here */

.instaCitiTopHeaderSection {
  background: #ce3782;
  color: #fff;
  font-size: 12px;
  padding: 6px 0px;
}

.instaCitiUnderLeft {
  text-align: right;
}

.instaCitiUnderLeft span {
  margin-left: 10px;
}

.instaCitiMenuSection {
  padding: 8px 0px;
  background: #ffe4e1;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#ffffff', GradientType=1);
  box-shadow: 0px 10px 10px 0px #00000026;
  position: relative;
  z-index: 5;
}

.logoSet img {
  width: 50px;
}

.logoSet span {
  position: relative;
  top: 9px;
  left: -20px;
}

.instaLoginHere {
  text-align: right;
  position: relative;
  top: 4px;
}

.instaLoginHere button {
  font-size: 12px;
}

.instaLoginHere p {
  font-size: 11px;
  position: relative;
  top: 3px;
}

.instaCitiMenu {
  justify-content: center;
  display: flex;
  margin-top: 5px;
  text-transform: capitalize;
}

.topnav {
  overflow: hidden;
  /*background-color: #333;*/
}

.topnav a {
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 10px;
  text-decoration: none;
  font-size: 13px;
}

.topnav .icon {
  display: none;
}

.dropdown .dropbtn {
  font-size: 13px;
  border: none;
  outline: none;
  color: #000;
  padding: 14px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  text-transform: capitalize;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 5;
}

.dropdown-content a {
  float: none;
  color: #2420ca;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 12px;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #bd0c0c;
  color: white;
  transition: all 0.5s ease-out 0s;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
  transition: all 0.5s ease-out 0s;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dpCustomWidth i {
  width: 15px;
  height: 15px;
  text-align: center;
  color: #ce3782;
}

.dropdown,
.dropup {
  position: static;
}

.btn-default {
  color: #fff;
  background-color: #28acce;
  border-radius: 0;
  padding: 7px 20px;
  font-size: 12px;
  border: 0px;
  display: inline-block;
}

.btn-default:hover {
  transition: all 0.5s ease-out 0s;
  background-color: #2bd3ff;
  color: #fff;
}

.DpBground {
  background: url(http://resources.manikworks.com/instaportalimg/bridleweresee.jpg);
  background-size:
    100% 100%,
    cover;
}

.dpCustomWidth {
  width: 100%;
  left: 0;
}

.instaDpArrow:before {
  content: "\f0dd";
  width: 0;
  height: 0;
  position: absolute;
  color: #ce3782;
  font: normal normal normal 14px/1 FontAwesome;
  top: -18px;
  font-size: 30px;
  left: 43%;
}

.dpCustomWidth ul {
  width: 50%;
  float: left;
  padding: 20px 0px;
  margin: 0px;
}

.dpCustomWidth h4 {
  text-align: left;
  padding-left: 20px;
  font-weight: bold;
  color: #ce3782;
  font-size: 16px;
}

.instaDpArrow a:hover {
  transition: all 0.5s ease-out 0s;
  padding-left: 5px;
}

.instaCitiRegisterArea {
  width: 100%;
  float: left;
  border-top: 1px #ff7cf0 solid;
}

.regsterOne {
  width: 50%;
  float: left;
  text-align: left;
  padding: 14px 10px;
  font-size: 11px;
}

.regsterOne a {
  text-align: left;
}

.regsterTwo {
  width: 50%;
  float: left;
  text-align: right;
  padding: 14px 20px;
  color: #ff0000;
  font-size: 11px;
}

.regsterTwo a {
  text-align: right;
}

/* Styling the header */
.weddingHeaderSection {
  position: relative;
  background-image: url("https://dkzxkcjlbnjui.cloudfront.net/uploads/media/images/wedding-collection.jpg");
  /* Replace with the image's path */
  background-size: cover;
  background-position: center;
  text-align: center;
  display: flex;
  align-items: center;
  height: 450px;
  color: white;
  padding: 100px 20px;
}

.giftflowerHeaderSection {
  position: relative;
  background-image: url("https://www.wenghoa.com/wp-content/uploads/2022/06/BLOG-02.png");
  /* Replace with the image's path */
  background-size: cover;
  background-position: center;
  text-align: center;
  display: flex;
  align-items: center;
  height: 450px;
  color: white;
  padding: 100px 20px;
}

.partycelebrateHeaderSection {
  position: relative;
  background-image: url("https://cf.ltkcdn.net/celebrations/parties/images/orig/341607-1600x1066-birthday-party-names-1001540940.jpg");
  /* Replace with the image's path */
  background-size: cover;
  background-position: center;
  text-align: center;
  display: flex;
  align-items: center;
  height: 450px;
  color: white;
  padding: 100px 20px;
}

.weddingHeaderSection .weddingHeaderHeading {
  font-size: 64px;
}

.weddingHeaderSection .weddingHeaderText {
  font-size: 14px;
  margin-bottom: 0px;
}

.weddingHeaderSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1603e;
  opacity: 0.5;
  z-index: 1;
}

.weddingHeaderSection * {
  position: relative;
  margin-top: 10px;
}

.weddingHeaderSection .searchBar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 12px;
  background: #fff;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e3e3e3;
  color: white;
}

.weddingHeaderSection .searchBar .locationBox {
  display: flex;
  align-items: center;
  background: #ffe4e1;
  border-radius: 5px;
  padding: 10px 15px;
  margin-right: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.weddingHeaderSection .searchBar .locationBox i {
  font-size: 18px;
  color: #ff6f61;
  margin-right: 8px;
}

.weddingHeaderSection .searchBar .locationBox span {
  font-size: 16px;
  color: #333;
  white-space: nowrap;
}

.weddingHeaderSection .searchBar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  color: #333;
  padding: 10px 20px;
  background: transparent;
}

.weddingHeaderSection .searchBar input::placeholder {
  color: #aaa;
}

.weddingHeaderSection .searchBar button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #ff6f61;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.weddingHeaderSection .searchBar button i {
  font-size: 18px;
}

.weddingCategoryCards {
  padding: 40px 20px;
}

.weddingCategoryCards .categoryCardOne {
  display: flex;
  align-items: center;

  border-radius: 10px;
  margin: 20px 0;
}

.photographersCard {
  background-color: #ffe8e0;
}

.venuesCard {
  background-color: #ffefce;
}

.makeupCard {
  background-color: #d4bbd0;
}

.bridalWearCard {
  background-color: #c6e8e4;
}

.groomWearCard {
  background-color: #e0b669;
}

.jewelleryCard {
  background-color: #f2d8d4;
}

.weddingCategoryCards .categoryCardOne img {
  width: 250px;
  height: 175px;
  border-radius: 10px 0 0 10px;
  object-fit: cover;
  clip-path: polygon(30% 0%, 70% 0%, 100% 0, 84% 100%, 30% 100%, 0 100%, 0 0);
  margin-right: 20px;
}

.weddingCategoryCards .categoryCardOne .categoryCardHeading {
  font-size: 22px;
}

.weddingCategoryCards .categoryCardOne .categoryCardPara {
  font-size: 16px;
}

.weddingCategoryCards .categoryCard h5 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.weddingCategoryCards .categoryCard p {
  margin: 5px 0 0;
  font-size: 0.9rem;
  color: #555;
}

.weddingCategoryCards .categoryHeading {
  color: #aeaeae;
  font-size: 20px;
}

/* wedding collections css end here */

.cursorPointer {
  cursor: pointer;
}

div#offcanvasBottom {
  height: 60vh;
  width: 500px;
  margin: auto;
  border-radius: 20px 20px 0 0;
}

.offcanvas-backdrop {
  opacity: 0;
  transition: opacity 0.15s linear;
}

.offcanvas-backdrop.show {
  opacity: 0.5;
}

.countryDropdownText {
  font-size: 14px;
}

/* Mobile header country dropdown: the global `.dropdown-menu.show` rule
   forces a near-transparent background (#ffffff2e !important), which let the
   page content show through behind the country list. Restore a solid,
   elevated panel. The selector includes `.dropdown-menu` so it has higher
   specificity than that global override (which also uses !important and is
   declared later in the file). */
.countryDropdown.dropdown-menu,
.countryDropdown.dropdown-menu.show {
  background-color: #ffffff !important;
  border: 1px solid #e2e2e2 !important;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1055;
}

.countryDropdown .sticky-search-box {
  position: sticky;
  top: 0;
  z-index: 1;
}

.countryDropdown .dropdown-item:hover,
.countryDropdown .dropdown-item:focus {
  background-color: #f5f5f5;
}

.fi {
  border-radius: 3px;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--site-primary-color) !important;
}

.noRecordFound img {
  width: 350px !important;
}

.ng-select.ng-select-multiple
  .ng-select-container
  .ng-value-container
  .ng-value {
  background-color: var(--site-secondary-color) !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected.ng-option-marked {
  background-color: var(--site-secondary-color) !important;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
  background-color: var(--site-secondary-color) !important;
}

.portalHeaderLogo {
  /* width: 150px; */
  height: 46px;
  cursor: pointer;
}

.form-control {
  padding: 10px 10px;
  border-radius: 10px;
  font-size: clamp(12px, 1vw, 14px) !important;
}

.mobileViewHeader .mobileHeaderLogo {
  display: none;
}

.foodContent .accordion-button::after {
  display: none;
}

.foodContent .accordion-button .icon-wrapper {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.foodContent .accordion-button .toggle-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.foodContent .accordion-button.collapsed .toggle-icon {
  content: "\f067";
}

.foodContent .accordion-button:not(.collapsed) .toggle-icon {
  content: "\f068";
}

.foodContent .accordion-item {
  border: 0px !important;
  margin-bottom: 10px;
}

.foodContent .accordion-item button.accordion-button {
  justify-content: space-between;
  background: var(--site-primary-color);
  color: #fff !important;
  border-radius: 10px !important;
}

.timeTable {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: 15px;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 15px !important;
  border: 1px solid #ddd;
  min-width: 90px;
  text-align: left;
}

.table thead {
  background-color: #f4f4f4;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.table tr:hover {
  background-color: #f1f1f1;
}

/* Header Issue Fixed */

/* Header Issue Fixed */
/* Tablet Header UI */

/* Tablet Header UI */
.touristSection .card.touristBox img.card-img-top {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.HeadingSection img {
  width: 30px;
  margin-bottom: 5px;
}

.HeadingSection h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

/* ── Tourist section: modern category cards ───────────────────────── */
.touristSection {
  padding: 8px 0 24px;
  margin-top: 20px;
}

.touristGroup {
  margin-bottom: 44px;
}

.touristHeading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 12px;
}

.touristHeading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 3px;
  background: var(--site-primary-color);
}

.touristHeadingIcon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.touristHeading h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  text-transform: capitalize;
  color: #111827;
}

.touristCard {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.touristCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(17, 24, 39, 0.12);
}

.touristCardMedia {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.touristCardMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.touristCard:hover .touristCardMedia img {
  transform: scale(1.06);
}

.touristCardMedia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.28) 100%
  );
  pointer-events: none;
}

.touristCardTag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--site-primary-color);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.touristCardBody {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 18px 20px;
}

.touristCardTitle {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: #111827;
}

.touristCardText {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.touristCardBtn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--site-primary-color);
  border-radius: 999px;
  background: transparent;
  color: var(--site-primary-color);
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.touristCardBtn i {
  transition: transform 0.2s ease;
}

.touristCardBtn:hover {
  background: var(--site-primary-color);
  color: #fff;
}

.touristCardBtn:hover i {
  transform: translateX(3px);
}

@media (max-width: 575.98px) {
  .touristHeading h3 {
    font-size: 19px;
  }
  .touristGroup {
    margin-bottom: 32px;
  }
}

/* .BigDotProfessional {
    position: fixed;
    right: 0px;
    top: 50%;
    display: flex;
    align-items: center;
    background-color: #d00250;
    z-index: 1;
    padding: 10px 20px 10px 20px;
    border-radius: 100px 0px 0px 100px;
    transform: translateY(-50%);
    cursor: pointer;
} */
/*
.BigDotProfessional i {
    font-size: 22px;
    color: #fff;
    margin-right: 15px;
}

.BigDotProfessional p.mb-0 {
    font-size: 14px;
    color: #fff;
}

.BigDotProfessional h3 {
    font-size: 18px;
    color: #fff;
} */

.fontPageLeftPanel.Professional .tabPartwithHeading .tagButton {
  background: #f0e4ff;
}

/*
.BigDotProfessional.Business {
    background-color: #7c0ab1;
} */

.highlightsBand span {
  color: var(--site-primary-color);
  border-bottom: 1px dashed grey;
  font-weight: 500;
  margin-right: 10px;
  cursor: pointer;
}

.cMenu {
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0;
  max-height: 500px;
}

.cMenu ul {
  background: #fff;
  position: relative;
  width: 100%;
  padding: 0px 0px;
  z-index: 1000;
  text-transform: uppercase;
  box-shadow: 2px 2px 4px 0px #ccc;
  -webkit-box-shadow: 2px 2px 4px 0px #ccc;
  -moz-box-shadow: 2px 2px 4px 0px #ccc;
  -ms-box-shadow: 2px 2px 4px 0px #ccc;
  -o-box-shadow: 2px 2px 4px 0px #ccc;
}

.cMenu li,
.cMenu li li {
  display: block;
  list-style: none;
}

.cMenu li a {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 10px 15px;
  border-bottom: solid 1px #ededed;
  cursor: pointer;
}

.cMenu li a .categoryIcons {
  /* filter: invert(11%) sepia(85%) saturate(5909%) hue-rotate(335deg) brightness(94%) contrast(105%); */
  padding-right: 10px;
  width: 35px;
}

.mapviewCard {
  width: 280px;
  height: auto;
}

.mapviewCard h3 {
  font-size: 18px;
}

.mapviewCard img {
  height: 110px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* bigdot mart css start here */
.trendingCategories h3 {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
}

.trendingCategories {
  /* padding: 0px 5%; */
  margin-top: 10px;
  border-bottom: 1px solid #cecece;
  padding-bottom: 10px;
}

.trendingCategories ul {
  padding: 0px;
  margin: 0px;
  display: inline-block;
}

.trendingCategories ul li a {
  border-bottom: 2px dashed;
  text-decoration: none;
  color: #e53935;
  font-size: 16px;
  font-weight: 300;
}

.trendingCategories ul li {
  display: inline-block;
}

.trendingCategories ul li {
  display: inline-block;
  margin-left: 15px;
}

.height490 img.img-fluid.bannerImg1 {
  width: 100%;
  height: 350px;
  margin-bottom: 20px;
  border-radius: 10px;
  object-fit: cover;
}

.height490 img.img-fluid.bannerImg2 {
  width: 100%;
  height: 190px;
  border-radius: 10px;
  object-fit: cover;
}

.searchProducts {
  padding: 50px 20px;
  background: #ffeaeb;
  margin-top: 30px;
  border-radius: 10px;
}

.searchProducts p {
  margin-bottom: 20px;
}

.searchProducts h3 {
  font-size: 18px;
  font-weight: 600;
}

.searchProducts .input-group {
  height: 45px;
}

.searchProducts .input-group input.form-control {
  border-radius: 10px;
  border-right: 0px;
}

.searchProducts span.input-group-text {
  background: #fff;
  border-radius: 10px;
}

.searchProducts button.btn {
  background: #e53935;
  width: 100%;
  color: #ffff;
  padding: 10px;
  border-radius: 10px;
}

.searchProductsImg img {
  width: 100%;
  min-height: 215px;
  border-radius: 10px;
}

.searchProductsImg {
  margin-top: 30px;
}

.customGapping img.sectionImg {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 10px;
}

.customGapping .card {
  border-radius: 15px;
}

.sectionGroupImg img.sectionImg {
  width: 100%;
  height: 200px;
  transition: all 0.7s;
  object-fit: cover;
  margin-bottom: 5px;
  border-radius: 10px;
}

.sectionGroupImg img.sectionImg:hover {
  transform: scale(1.1);
}

.sectionGroupImg {
  overflow: hidden;
}

.sectionGroupImg span {
  overflow: hidden;
  position: relative;
  display: inline-block;
  border-radius: 10px;
}

.sectionGroupImg h4 {
  font-size: 18px;
  color: #000;
  text-align: center;
}

.card.shopByOccasions {
  border-radius: 160px 160px 10px 10px;
  overflow: hidden;
}

.card.shopByOccasions img.groupImg {
  width: 100%;
  transition: all 0.7s;
}

.card.shopByOccasions span {
  overflow: hidden;
  position: relative;
}

.card.shopByOccasions img.groupImg:hover {
  transform: scale(1.1);
}

.card.shopByOccasions h3 {
  text-align: center;
  font-size: 18px;
  margin: 10px 0px;
}

.customGapping .home-demo {
  margin-top: 20px;
}

.customGapping .home-demo .item img {
  border-radius: 15px;
}

.customGapping .home-demo .owl-nav {
  display: none;
}

.customGapping .home-demo .owl-dots {
  margin-top: 10px;
  margin-bottom: 50px;
}

.customGapping {
  padding-left: 5%;
  padding-right: 5%;
}

.purpleLightBoxShadow {
  box-shadow: 0px 10px 20px rgba(218, 203, 255, 0.25);
}

.secondaryBtnBgColor {
  background-color: var(--Secondary_BtnBgColor) !important;
}

.customGapping .carousel-inner img {
  width: 100%;
  max-height: 540px !important;
  object-fit: cover !important;
  min-height: 550px;
  border-radius: 10px;
}

.width51 {
  width: 51px;
  height: 51px;
  border-radius: 50%;
}

.removeIcon {
  background-image: none;
}

.redDarkBg {
  background-color: #e53935;
}

.height490 img.img-fluid.bannerImg2 {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  object-fit: cover;
}

.mobileView {
  display: none;
}

.darkPinkBg {
  background-color: #e53935;
}

.customGapping .contain {
  margin-top: 30px;
}

.customGapping .contain .owl-nav {
  display: none;
}

.customGapping .contain .owl-dots {
  margin-top: 10px;
  margin-bottom: 30px;
}

.customGapping .contain .item img {
  width: 100%;
  height: 370px;
  object-fit: cover;
  border-radius: 15px;
}

/* Product Page from seller css start here */

.productOccasion img.img-fluid {
  width: 100%;
  border: 8px solid #eeeeee;
  border-radius: 100%;
  padding: 10px;
  height: 200px;
  object-fit: cover;
}

.productOccasion h2 {
  font-size: 20px;
  margin-top: 15px;
  margin-bottom: 4px;
}

.productOccasion button.browseProducts.btn {
  background: #e53935;
  border-radius: 100px;
  color: #fff;
  font-size: 16px;
  padding: 7px 20px;
}

.productOccasion {
  /* border: 5px solid #eeee; */
  text-align: center;
}

.wishWhiteHeart {
  position: absolute;
  top: 10px;
  right: 10px;
}

.wishWhiteHeart img.heart-icon-size {
  width: 25px;
}

.productItemBox .productList .productImg img.img-fluid {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: all 0.7s;
  border-radius: 10px;
}

.productItemBox .productList .productImg img.img-fluid:hover {
  transform: scale(1.1);
}

.productItemBox .productList .productImg {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.productItemBox .productList .nullProdName {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.productItemBox .productList .priceOffer {
  display: flex;
  align-items: center;
}

.productItemBox .productList .prodPrice {
  font-size: 16px;
  font-weight: 500;
}

.productItemBox .productList .listPrice {
  font-size: 14px;
  color: rgba(136, 136, 136, 0.6);
  margin-left: 6px;
  font-weight: 500;
  display: inline-block;
  text-decoration: line-through;
}

.productList .discountPrice {
  margin-left: 6px;
  color: #ffa500;
  font-size: 14px;
  font-weight: 500;
}

.productList .startImgCount {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 6px;
  min-height: 24px;
}

.productItemBox .productList .startImgCount .starImgNum {
  background: #4caf50;
  border-radius: 5px;
  padding: 3px 6px;
  width: 46px;
  height: 22px;
  display: flex;
  align-items: center;
}

.productItemBox .productList .startImgCount .starImgNum .starImage {
  color: #ffffff;
  background-color: #fff;
  -webkit-clip-path: polygon(
    50% 0,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  clip-path: polygon(
    50% 0,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  height: 14px;
  width: 14px;
}

.productItemBox .productList .startImgCount .starImgNum .starNum {
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  padding-left: 4px;
}

.productItemBox .productList .startImgCount .starCount {
  position: relative;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-left: 15px;
  color: #197889;
  text-transform: capitalize;
}

.productItemBox .productList {
  border: 1px solid #cacaca;
  border-radius: 10px;
}

.productCard .productImage img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.productCard .productInfo {
  flex: 1;
}

.productCard .seller a {
  color: #e53935;
  text-decoration: none;
}

.productCard .rating {
  margin: 10px 0;
  font-size: 14px;
}

.productCard .tag.bestSeller {
  background: #e53935;
  color: white;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 4px;
  font-size: 12px;
}

.productCard .price {
  margin: 15px 0;
  font-size: 18px;
}

.productCard .discountedPrice {
  color: #e53935;
  font-weight: bold;
}

.productCard .originalPrice {
  text-decoration: line-through;
  color: gray;
  margin: 0 10px;
}

.productCard .offer {
  color: green;
}

.servings button,
.delivery button {
  margin: 5px 5px 10px 0;
  padding: 8px 12px;
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.servings button:hover,
.delivery button:hover {
  background: #e53935;
  color: white;
}

.productCard .messageInput {
  width: 100%;
  padding: 10px;
  margin: 15px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.productCard .addToCart {
  width: 100%;
  padding: 12px;
  background: #e53935;
  color: white;
  font-size: 16px;
  border: none;
  display: inline-block;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
}

.productCard .addToCart:hover {
  background: #e53935;
}

.productCard .description {
  margin-top: 20px;
  font-size: 14px;
}

.productCard.customGapping {
  margin-top: 20px;
}

.productCard .prodGroupImg img.img-fluid {
  width: 100%;
  margin-top: 20px;
  border-radius: 10px;
  height: auto;
}

.OtherSellersSection {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.OtherSellersSection .otherSellers {
  margin-bottom: 16px;
}

.OtherSellersSection .marketplaceName {
  color: #e53935;
  font-weight: 500;
}

input[formcontrolname="searchtext"] {
  padding-right: 55px !important;
  padding-left: 70px !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.OtherSellersSection .productName,
.availability {
  margin: 4px 0;
}

.home-demo {
  margin-top: 20px;
}

.OtherSellersSection .checkNow {
  color: #e53935;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
}

.OtherSellersSection .addToWishlist {
  width: 100%;
  padding: 8px;
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 16px;
}

.OtherSellersSection .offers {
  background-color: #f9f9f9;
  margin-bottom: 16px;
  font-size: 14px;
}

.OtherSellersSection .promotedProduct {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
}

.OtherSellersSection .productImage {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 10px;
}

.OtherSellersSection .productInfo {
  flex: 1;
}

.productInfo h2 {
  font-size: 22px;
}

.OtherSellersSection .productTitle {
  margin: 0;
  font-weight: 500;
}

.OtherSellersSection .productPrice {
  float: right;
  color: #000;
}

.OtherSellersSection .bakeryLink {
  text-decoration: none;
  color: #e53935;
  font-size: 14px;
}

.breadcrumbContainer {
  font-size: 14px;
  color: #888;
  margin-top: 20px;
}

.breadcrumbLink {
  color: #888;
  text-decoration: none;
}

.breadcrumbLink:hover {
  text-decoration: underline;
}

.breadcrumbSeparator {
  margin: 0 5px;
  color: #888;
}

.breadcrumbCurrent {
  color: #e53935;
  font-weight: 500;
}

.cartoffcanvas .cakeCard {
  display: flex;
}

.cartoffcanvas .cakeImage img {
  width: 150px;
  height: 190px;
  border-radius: 10px;
  object-fit: cover;
}

.cartoffcanvas .cakeDetails {
  margin-left: 16px;
  flex: 1;
}

.cartoffcanvas .cakeTitle {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}

.cartoffcanvas .cakeVendor {
  font-size: 14px;
  color: #777;
  margin: 0 0 0px;
}

.cartoffcanvas .cakeRating {
  font-size: 14px;
  margin-bottom: 0px;
}

.cartoffcanvas .ratingCount {
  color: #111111;
  margin-left: 4px;
}

.cartoffcanvas .cakePriceSection {
  margin-bottom: 10px;
}

.cartoffcanvas .cakePrice {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-right: 8px;
}

.cartoffcanvas .cakeOriginalPrice {
  font-size: 14px;
  color: #888;
  text-decoration: line-through;
  margin-right: 8px;
}

.cartoffcanvas .cakeDiscount {
  font-size: 14px;
  color: #e53935;
  font-weight: 600;
}

.cartoffcanvas .addToCartButton {
  background-color: #e53935;
  color: #fff;
  border: none;
  padding: 8px 5px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
}

.cartoffcanvas .addToCartButton:hover {
  background-color: #e53935;
}

.cartoffcanvas {
  width: 500px;
}

.cartoffcanvas .badgeWrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  border-bottom: 1px solid #bbbbbb;
  padding: 5px 0px;
  margin-bottom: 5px;
}

.cartoffcanvas .bestSellerBadge {
  background-color: #e53935;
  color: white;
  padding: 0px 8px;
  border-radius: 100px;
  font-weight: bold;
  font-size: 10px;
  line-height: 18px;
}

.cartoffcanvas .badgeCategory {
  color: #333;
  font-size: 14px;
}

.cartoffcanvas .productImage img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

.cartoffcanvas .productInfo h3.productTitle {
  font-size: 18px;
  margin-bottom: 2px;
}

.cartoffcanvas .productInfo p.storeName {
  margin-bottom: 2px;
}

.cartoffcanvas span.rating {
  color: #f2ad22;
  font-size: 18px;
}

.cartoffcanvas .productborder {
  border-bottom: 1px dashed #b5b5b5;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.cartoffcanvas .cakeCard {
  display: flex;
  border-bottom: 1px solid #b5b5b5;
  padding-bottom: 20px;
}

/* Product Page from seller css end here */

/* cart page css start here */

.addonSection {
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  background: #ffe6d7;
}

.addonSection .addonTitle {
  font-size: 1.5em;
  margin-bottom: 15px;
  font-weight: 500;
  color: #0e4d64;
}

.addonSection .addonItem {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.addonSection .addonItem img {
  width: 100% !important;
  height: 200px;
  object-fit: cover;
  border-radius: 10px 10px 0px 0px;
}

.addonSection .addonName {
  font-size: 1.1em;
  margin: 10px 0 0px;
  color: #848484;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}

.addonSection .addonPrice {
  font-weight: 500;
  margin-bottom: 10px;
  color: #000;
}

.addonSection .addonBtn {
  padding: 8px 15px;
  color: #0e4d64;
  border: 1px solid #0e4d64;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  font-size: 16px;
  text-align: center;
}

.addonSection .addonBtn:hover {
  border: 1px solid #0e4d64;
}

.addonSection .owl-nav span {
  background: #0e4d64;
  font-size: 35px;
  padding: 5px 10px;
  color: #fff;
  width: 40px;
  border-radius: 100px;
  display: inline-block;
  height: 40px;
  line-height: 20px;
}

.addonSection .owl-nav button.owl-next {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.addonSection .owl-nav button.owl-prev {
  top: 50%;
  position: absolute;
  left: 10px;
  transform: translateY(-50%);
}

.addonSection .owl-nav button.owl-prev:hover,
.addonSection .owl-nav button.owl-next:hover {
  background-color: transparent;
}

.addonSection .owl-carousel .owl-dots.disabled,
.addonSection .owl-carousel .owl-nav.disabled {
  display: block;
}

.itemSummary {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 15px;
  margin-top: 20px;
}

.itemSummary .itemCard {
  display: flex;
  justify-content: space-between;
}

.itemSummary .itemImage img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
}

.itemSummary .itemDetails {
  flex-grow: 1;
  margin-left: 12px;
}

.itemSummary .itemTitle {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
}

.itemSummary .itemVendor {
  font-size: 12px;
  color: #999;
  margin: 0px;
}

.itemSummary .vendorLink {
  color: #e53935;
  text-decoration: none;
  font-weight: 600;
}

.itemSummary .itemPrice {
  font-size: 14px;
  color: #000;
  margin: 0px;
}

.itemSummary .originalPrice {
  text-decoration: line-through;
  color: #999;
  font-size: 12px;
  margin-left: 8px;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  border-color: transparent;
}

.itemSummary .itemWeight {
  font-size: 12px;
  color: #666;
  margin-bottom: 0px;
}

.itemSummary .deleteButton {
  background: none;
  border: 1px solid #e53935;
  color: #e53935;
  width: 35px;
  height: 35px;
  border-radius: 100px;
  margin-bottom: 10px;
}

.itemSummary .quantitySelector {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e53935;
  border-radius: 10px;
  padding: 4px 8px;
  width: 100px;
}

.itemSummary .quantitySelector button {
  background: none;
  border: none;
  color: #e53935;
  font-size: 19px;
  cursor: pointer;
  width: 40px;
}

.itemSummary .itemActions {
  text-align: center;
}

.itemSummary .quantity {
  font-size: 14px;
  color: #e53935;
}

.itemSummary .messageInput {
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
}

.itemSummary h3 {
  border-bottom: 1px solid #cccccc;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
}

.cartSummary {
  width: 100%;
  max-width: 350px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.cartSummary .cartHeader {
  padding: 14px;
  font-weight: 600;
  border-bottom: 1px solid #e0e0e0;
  font-size: 20px;
}

.cartSummary .cartBody {
  padding: 16px;
}

.cartSummary .cartRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.cartSummary .cartTotalRow {
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 20px;
}

.cartSummary .placeOrderBtn {
  width: 100%;
  padding: 10px;
  background-color: #e53935;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  font-size: 16px;
}

.cartSummary .placeOrderBtn:hover {
  background-color: #e53935;
}

.instaCitiTopweddingHeaderSection {
  padding: 15px 0px;
}

/* cart page css end here */

.sellerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sellerHeader .logoContainer {
  flex: 0 0 auto;
}

.sellerHeader .logoContainer .sellerLogo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #aaaaaa;
  margin-top: 20px;
}

.sellerHeader .sellerInfo {
  flex-grow: 1;
  padding-left: 15px;
}

.sellerInfo .sellerName {
  font-size: 22px;
  margin: 0;
}

.sellerHeader .sellerInfo .sellerTags {
  margin-top: 5px;
}

.sellerHeader .sellerInfo .sellerTags .bestSellerTag {
  background-color: red;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-right: 5px;
}

.customGapping .sellerTags .categoryTag {
  color: gray;
  font-size: 12px;
}

.customGapping .ratingContainer {
  text-align: right;
}

.customGapping .ratingContainer .ratingValue {
  font-weight: bold;
  font-size: 16px;
  margin-right: 5px;
}

.customGapping .ratingContainer .starIcons {
  color: gold;
  margin-right: 5px;
}

.customGapping .ratingContainer .ratingCount {
  color: gray;
  font-size: 12px;
}

.searchBarContainer.customGapping {
  margin-bottom: 20px;
}

.categoryGroupImg img.img-fluid {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 20px;
}

.dashedUnderline {
  /* border-bottom: 1px dashed #000; */
  display: inline-block;
  padding-bottom: 2px;
}

.languageSelectorDropdown {
  border-radius: 50px;
  border: 1px solid #dcdcdc;
  float: left;
  overflow: hidden;
  width: 110px;
}

.languageSelectorDropdown.form-select {
  border: none;
}

.countrySelectorDropdown {
  /* float: left; */
  /* overflow: hidden; */
  border: 1px solid #dcdcdc;
  border-radius: 100px;
}

/* ── Modern country selector dropdown ─────────────────────────────────
   The global `.dropdown-menu.show` rule sets a translucent background with
   !important; the !important here is required to win against that. */
.countrySelectorDropdown .dropdown-menu,
.countrySelectorDropdown .dropdown-menu.show {
  background-color: #ffffff !important;
  border: 1px solid #eef0f4 !important;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.16);
  padding: 0 8px 8px !important;
  width: 300px;
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1055;
}

/* Pin the search box; full-width opaque cover so nothing peeks above it. */
.countrySelectorDropdown .dropdown-menu > li.countrySearchBox {
  position: sticky;
  top: 0;
  margin: 0 -8px 6px;
  padding: 10px 8px;
  background-color: #fff;
  border-bottom: 1px solid #f1f2f5;
  border-radius: 16px 16px 0 0;
  z-index: 2;
}

.countrySelectorDropdown .countrySearchWrap {
  position: relative;
  display: flex;
  align-items: center;
}

.countrySelectorDropdown .countrySearchIcon {
  position: absolute;
  left: 12px;
  font-size: 15px;
  color: #9aa0ab;
  pointer-events: none;
}

.countrySelectorDropdown .countrySearchInput {
  height: 40px;
  border: 1.5px solid #e3e6ec;
  border-radius: 10px;
  padding: 8px 12px 8px 34px;
  font-size: 14px;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.countrySelectorDropdown .countrySearchInput:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.1);
}

/* Country rows — override the global dashed-divider item style. */
.countrySelectorDropdown .dropdown-menu li a.dropdown-item.countryItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px !important;
  margin-bottom: 2px;
  border: 0 !important;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: #374151 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.countrySelectorDropdown .dropdown-menu .dropdown-item.countryItem:hover,
.countrySelectorDropdown .dropdown-menu .dropdown-item.countryItem:focus {
  background-color: #f4f5f8;
}

.countrySelectorDropdown
  .dropdown-menu
  .dropdown-item.countryItem.activeCountry {
  background-color: rgba(26, 35, 126, 0.08);
  color: var(--site-primary-color) !important;
  font-weight: 600;
}

.countrySelectorDropdown .countryItemName {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.countrySelectorDropdown .countryCheck {
  color: var(--site-primary-color);
  font-size: 16px;
}

.countrySelectorDropdown .countryFlagPicker {
  width: 26px;
  height: 18px;
  margin: 0;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08);
}

.countrySelectorDropdown .countryNotFound {
  display: block;
  padding: 16px 10px !important;
  text-align: center;
  color: #9aa0ab !important;
  border: 0 !important;
}

/* Custom scrollbar */
.countrySelectorDropdown .dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.countrySelectorDropdown .dropdown-menu::-webkit-scrollbar-thumb {
  background: #d8dbe2;
  border-radius: 8px;
  border: 2px solid #fff;
}

.countrySelectorDropdown .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #c4c9d4;
}

/* kanchan add css beauty live portal */

/* Hero Section */
.beautyHeaderDesktop {
  background-color: transparent !important;
  position: absolute;
  border: 0px;
  width: 100%;
  z-index: 1;
}

.heroSection {
  background: linear-gradient(135deg, #c4dbff 0%, #e2c6e4 50%, #ffffff 100%);
  min-height: 500px;
  padding: 80px 0 60px;
  overflow: hidden;
}

.textAlignment {
  padding: 40px 8px;
}

.cabinetText {
  font-weight: 700;
  font-size: clamp(32px, 5vw, 65px);
  line-height: 1.2;
  color: #000000;
  margin: 0;
  background: linear-gradient(
    102.38deg,
    #e11753 6.28%,
    #e8628a 39.32%,
    #cb406a 55.84%,
    #789ce3 72.36%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--site-secondary-font);
}

.playfairText {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 75px);
  line-height: 1.2;
  color: #e91e63;
  margin: 0;
  font-style: italic;
}

.searchContainer {
  max-width: 600px;
}

.searchBox {
  border-radius: 50px;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.searchBtnBeauty {
  border-radius: 50px !important;
  padding: 8px 25px;
  background-color: #e11753;
  color: #fff;
  border: none;
}

.beautyIllustration {
  text-align: end;
}

.beautyIllustration img {
  max-width: 100%;
  height: auto;
}

/* Services Section */
.servicesSection {
  /* max-width: 1200px; */
  margin: 0 auto;
  padding: 10px 20px;
}

.servicesTitle {
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin-bottom: 20px;
}

.servicesGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  max-width: 100%;
}

.serviceCard {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  cursor: pointer;
  background: white;
  margin-bottom: 15px;
}

.serviceCard:hover {
  transform: translateY(-2px);
}

.serviceImageContainer {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.serviceImageContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serviceLabel {
  position: absolute;
  bottom: 8px;
  left: 5%;
  /* This creates 5% space on left (half of the 10% remaining space) */
  background: #e11753;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  /* Center alignment */
  width: 90%;
  /* Keep 90% width */
  text-align: center;
  /* Center text inside */
  box-sizing: border-box;
  /* Include padding in width calculation */
}

/* Packages Section */
.packagesSection {
  background-color: #f8f9fa;
}

.packageCard .card-body {
  padding: 10px;
}

.packageCard .card-body h5 {
  margin: 0px 10px;
}

.packageCard {
  border-radius: 15px;
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.packageCard:hover {
  transform: translateY(-5px);
}

.packageImageContainer {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #f8f9fa;
  overflow: hidden;
}

.packageImageContainer img {
  width: 100%;
  object-fit: cover;
}

/* Salon Cards Section */
.salonSection {
  padding: 40px 0px;
}

.sectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.sectionTitle {
  font-size: 22px;
  font-weight: 600;
  color: #000;
  font-family: var(--site-secondary-font);
}

.viewAllLink {
  font-size: 14px;
  color: #000;
  text-decoration: underline dotted !important;
}

.salonGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.salonCard {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.salonCard:hover {
  transform: translateY(-5px);
}

.cardImageContainer {
  height: 180px;
  overflow: hidden;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cardBody {
  padding: 20px;
}

.salonName {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
}

.salonCategory {
  font-size: 14px;
  color: #e11753;
  margin-bottom: 10px;
}

.locationInfo,
.hoursInfo {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.locationIcon {
  margin-right: 6px;
  color: transparent;
  -webkit-text-stroke: 1px #e11753;
}

.clockIcon {
  margin-right: 6px;
  color: transparent;
  -webkit-text-stroke: 1px #e11753;
}

.serviceTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.serviceTag {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #3313b4;
  text-decoration: overline;
}

.placeholderText {
  color: #6c757d;
  font-size: 14px;
  text-align: center;
}

/* For Real state bigdot live Real state added by Kanchan */

/* .realEstateHeader {
    background: linear-gradient(38deg, #eab027 22%, #FF9800 75%);
} */

.realEstateHeroSection {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100vh;
  padding-top: 50px;
}

.realEstateHeroSection .heroVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ensures video covers like background */
  z-index: -1;
  /* keep video behind content */
}

.realEstateHeroSection .heroContent {
  position: relative;
  z-index: 1;
  /* ensure content appears above video */
  color: #fff;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

/* .realEstateHeroSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://dkzxkcjlbnjui.cloudfront.net/uploads/media/images/real-estate-hero.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 1;
  filter: blur(2px);
} */

.realEstateHeroSectionWithBgImage {
  background: url("https://dkzxkcjlbnjui.cloudfront.net/uploads/media/images/realestate-hero-image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 80vh;
  position: relative;
  overflow: hidden;
}

/* Add overlay for better text readability */
.realEstateHeroSectionWithBgImage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(248, 249, 250, 0.9) 0%,
    rgba(233, 236, 239, 0.8) 100%
  );
  pointer-events: none;
}

.no-data-message {
  background-color: #fff;
  border: 1px solid #dee2e6;
  margin-top: -5px;
  border-radius: 5px;
  font-size: 15px;
  padding: 10px 0px !important;
}

.realEstateHeroContent {
  position: relative;
}

/* .realEstateHeader {
  background: linear-gradient(358deg, #00128c, #1759cf);
}

.realEstateHeader .bigDotSignup a {
  color: #ffffff;
}

.realEstateHeader .nav-link {
  color: #ffffff;
} */

.realEstateHeroTitle {
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-weight: 700;
  color: #f03511;
  margin-bottom: 1rem;
  margin-top: 25px;
  color: linear-gradient(90deg, #7065f0 0%, #140994 100%);
  /* -webkit-background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
  /* background-clip: text; */
  text-fill-color: transparent;
  text-transform: capitalize;
  font-size: 48px;
  background: #f7d001fa;
  width: fit-content;
  margin: 0 auto;
  padding: 0px 20px;
}

.realEstateHeroSubtitle {
  font-family: var(--site-primary-font);
  color: #ffffff;
  margin-bottom: 2.5rem;
  font-size: 32px;
  line-height: 60px;
  text-transform: capitalize;
  background: #f03613;
  width: fit-content;
  margin: 0 auto;
  padding: 0px 20px;
}

.landingPagePropertySearchCard {
  max-width: 800px;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: none;
  padding: 2rem;
  position: relative;
  margin: 24px;
}

.landingPagePropertySearchCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(90deg, #15285d 0%, #2255e8 100%);
}

.headerIcons .text-dark i {
  font-size: 20px !important;
}

.realStatelandingPageSearchTabsNav {
  border: none;
  margin-bottom: 2rem;
}

.realStatelandingPageSearchTabsNav .nav-link {
  border: none;
  background: transparent;
  color: var(--site-text-color);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  margin-right: 1rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.realStatelandingPageSearchTabsNav .nav-link:hover {
  background-color: #eef1f7;
  color: #000;
}

.realStatelandingPageSearchTabsNav .nav-link.active {
  background-color: #15285d;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(21, 40, 93, 0.25);
}

.realStateLandingPageSearchInput {
  width: 100%;
  border: 1px solid #e2e6ee;
  border-radius: 12px;
  background-color: #fafbfd;
  font-size: 14px;
  color: #495057;
  margin-bottom: 1.5rem;
}

.realStateLandingPageSearchInput::placeholder {
  color: #6c757d;
  font-size: 15px;
}

.realStateLandingPageSearchInput:focus {
  border-color: var(--site-primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 40, 93, 0.1);
}

.realStateLandingPageFormGroup {
  margin-bottom: 1.5rem;
}

.realStateLandingPageFormGroup label {
  font-weight: 500;
  color: var(--site-text-color);
  margin-bottom: 0.5rem;
  font-size: 14px;
}

.realStateLandingPageCustomSelect {
  width: 100%;
  padding: 10px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 15px;
  color: var(--site-text-color);
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}

.realStateLandingPageCustomSelect:focus {
  border-color: var(--site-primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 40, 93, 0.1);
}

/* Selector scoped to the card so it outranks Bootstrap's `.btn`
   (same specificity, loaded later) which was forcing the button
   transparent/white. */
.landingPagePropertySearchCard .reaStatelandingPageSearchButton {
  background-color: #15285d;
  border: none;
  color: #ffffff;
  padding: 0.95rem 3rem;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(21, 40, 93, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.landingPagePropertySearchCard .reaStatelandingPageSearchButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(21, 40, 93, 0.35);
  background-color: #0f1d45;
  color: #ffffff;
}

.landingPageDecorativeElement {
  position: absolute;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--site-secondary-color), transparent);
  border-radius: 50%;
  opacity: 0.5;
}

.landingPageDecorativeElement1 {
  top: 10%;
  right: 10%;
  animation: float 6s ease-in-out infinite;
}

.landingPageDecorativeElement2 {
  bottom: 20%;
  left: 5%;
  width: 60px;
  height: 60px;
  animation: float 6s ease-in-out infinite 2s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* Property Listing */
.propertyListingCard {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #cccccc;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  max-width: 950px;
  margin: 10px auto;
}

/* --- IMAGE SECTION STYLES --- */

.propertyListingImageWrapper {
  padding: 10px;
}

.propertyListingImageContainer {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
}

.propertyListingImageContainer .carousel,
.propertyListingImageContainer .carousel-inner,
.propertyListingImageContainer .carousel-item {
  height: 100%;
}

.propertyListingImageContainer .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.propertyListingHeartIcon {
  position: absolute;
  top: 18px;
  right: 18px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff4d4d;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  z-index: 10;
}

.propertyListingHeartIcon:hover {
  background-color: #ff4d4d;
  color: #fff;
}

.listingWishlistIcon {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.listingWishlistIcon:hover {
  color: #ef4444;
  background: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

/* --- DETAILS SECTION STYLES --- */

.propertyListingDetailsContainer {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.propertyListingHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.propertyListingTitle {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.propertyListingFlagIcon {
  background-color: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: #64748b;
}

.propertyListingFlagIcon i {
  font-size: 13px;
  padding-left: 2px;
}

.propertyListingLocation {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 10px;
}

.propertyListingLocation i {
  margin-right: 8px;
  font-size: 12px;
}

/* Price Section Layout */
.propertyListingPriceDetails {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.propertyListingPriceMain .propertyListingAmount {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
}

.propertyListingPriceMain .propertyListingRentType {
  font-size: 12px;
  color: #64748b;
  margin-left: 5px;
}

.propertyListingPriceSubGroup {
  display: flex;
  gap: 20px;
  color: #475569;
  font-size: 14px;
}

.propertyListingPriceSubGroup strong {
  font-weight: 600;
}

.propertyListingAttributeItem {
  display: flex;
  align-items: center;
  color: #475569;
  padding: 8px 6px;
  border-bottom: 1px solid #ebebeb;
}

.propertyListingAttributeItem i {
  color: #64748b;
  font-size: 14px;
  text-align: center;
  margin-right: 8px;
}

.propertyListingAttributeItem strong {
  font-weight: 600;
  color: #1e293b;
}

/* ============================================================
   Property grid-view card polish
   ============================================================ */

/* Proper circular favourite button (Bootstrap's .btn made it an oval). */
.propertyGridHeartIcon {
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: transform 0.2s ease;
}

.propertyGridHeartIcon:hover {
  transform: scale(1.08);
}

/* Boxed, evenly-spaced attribute rows inside the grid card. */
.propertyGridView .propertyDetails {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.propertyGridView .propertyDetails .propertyListingAttributeItem {
  background-color: #f8f9fb;
  border: 1px solid #eef0f4;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
}

.propertyGridView .propertyDetails .propertyListingAttributeItem i {
  color: var(--site-cta-color, #f05c29);
  margin-right: 10px;
}

/* Tags Section */
.propertyListingTagsContainer {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.propertyListingTagsContainer i {
  color: #475569;
}

.propertyListingTag {
  color: var(--site-primary-color);
  /* padding: 0 5px 2px 5px; */
  font-size: 14px;
  font-weight: 600;
  border-top: 1px solid var(--site-primary-color);
  margin-left: 6px;
}

/* Footer Section */
.propertyListingFooter {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.propertyListingTourInfo {
  font-size: 14px;
  color: #475569;
  visibility: hidden;
}

.propertyListingTourInfo strong {
  color: #1e293b;
}

.propertyListingActionButtons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.propertyListingDetailsLink {
  color: var(--site-primary-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.propertyListingOwnerButton {
  background-color: var(--site-primary-color);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.attributesGridContainer {
  /* border: 1px solid #ebebeb; */
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0px;
}

.col-md-12.propertyListingAttributeItem:last-child {
  border-bottom: 0;
}

.col-md-6.propertyListingAttributeItem:nth-child(1) {
  border-right: 1px solid #ebebeb;
}

.col-md-6.propertyListingAttributeItem:nth-child(3) {
  border-right: 1px solid #ebebeb;
}

.searchByFilter {
  display: flex;
  justify-content: end;
  gap: 10px;
  align-items: center;
}

.searchByFilter .form-check-inline {
  margin-right: 0rem !important;
}

/* Responsive CSS Starts Here */
.featuredGridView .propertyImage img.img-fluid.w-100 {
  width: 100% !important;
  height: 250px;
  border-radius: 10px;
  object-fit: cover;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .featuredListing.featuredGridView .propertyFooter button.btnViewMore {
    width: 100%;
    margin-top: 15px;
  }

  .featuredListing.featuredGridView .propertyFooter {
    display: block;
  }
}

@media (max-width: 991px) {
  .heroBackgroundImage {
    height: 400px;
  }

  .mainHeadlineText {
    font-size: 2.2rem;
  }

  .mobileViewHeader .logoSider .mobileHeaderLogo {
    left: -380px !important;
  }

  .countryDropdown {
    position: absolute !important;
    top: 75px !important;
    left: 50% !important;
    max-width: 650px;
    transform: translateX(-50%) !important;
    height: auto;
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #fff;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
  }

  .headerIcons {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .globalMobileHeader span.mobileCountry {
    border: 1px solid #dfdfdf;
    border-radius: 100px;
    height: 40px;
    width: 40px;
    text-align: center;
    font-size: 15px;
    line-height: 36px;
    display: inline-block;
  }

  .beautySpaHeader .globalMobileHeader .UserLogin {
    border: 1px solid #43229a;
  }

  .heroSection {
    padding-top: 50px !important;
  }

  .beautySpaHeader .globalMobileHeader span.mobileCountry {
    border: 1px solid #43229a;
  }

  header.mobileView.beautySpaHeader .globalMobileHeader {
    background-color: transparent;
  }

  header.mobileView.beautySpaHeader {
    position: absolute;
    width: 100%;
    background-color: transparent;
    border: 0px;
  }

  .globalMobileHeader {
    width: 100%;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #fff;
  }

  .globalMobileHeader .logo img {
    height: 40px;
  }

  .globalMobileHeader .UserLogin {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    line-height: 36px;
    border: 1px solid #d6d6d6;
    text-align: center;
    font-size: 16px;
    color: var(--site-primary-color);
    display: inline-block;
  }

  .globalMobileHeader .logo i {
    font-size: 22px;
    cursor: pointer;
    color: #333;
    margin-right: 25px;
  }

  .mobileView {
    display: block !important;
  }

  /* .productSearchArea {
    display: none !important;
  } */

  .propertyGridView .propertyListingOwnerButton {
    width: 50%;
  }

  .propertyListingImageWrapper {
    padding: 0;
    margin-bottom: 10px;
  }

  .propertyListingDetailsContainer {
    padding-top: 10px;
  }

  .propertyListingHeartIcon {
    top: 20px;
    right: 20px;
  }
}

@media (max-width: 768px) {
  #dealsCarouselIndicator .col-lg-3,
  #dealsCarouselIndicator .col-md-6,
  #dealsCarouselIndicator .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .dealBannerImg {
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
  }

  .carousel-item .row {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .carousel-item .col-lg-3:not(:first-child) {
    display: none;
  }

  /* .promoBannerImage {
    height: 200px !important;
  } */

  .heroBackgroundImage {
    height: 500px;
  }

  .glassInfoPanel {
    padding: 20px;
    margin-bottom: 40px;
    border-left: 3px solid var(--site-primary-color);
  }

  .mainHeadlineText {
    font-size: 1.8rem;
  }

  .primaryActionButton {
    width: 100%;
    margin-top: 10px;
  }

  .pricingWrapper {
    gap: 10px;
  }

  .realEstateHeroTitle {
    font-size: 32px !important;
    line-height: 1.2;
  }

  .realStatelandingPageSearchTabsNav {
    justify-content: center;
  }

  .realEstateHeroSubtitle {
    font-size: 16px;
    line-height: 20px;
  }

  .landingPagePropertySearchCard {
    padding: 20px 10px;
    margin: 1rem;
  }

  .realStatelandingPageSearchTabsNav .nav-link {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 14px;
  }

  .propertyListingImageContainer {
    height: 250px;
  }

  .propertyListingPriceDetails {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .propertyListingPriceSubGroup {
    flex-direction: column;
    gap: 5px;
  }

  .propertyListingFooter {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .propertyListingActionButtons {
    width: 100%;
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .propertyListingOwnerButton,
  .propertyListingDetailsLink {
    width: 100%;
    text-align: center;
    padding: 12px 10px;
  }

  .hdfcCard img {
    height: 100% !important;
    object-fit: cover;
    border-radius: 12px 12px 0px 0px;
  }

  .hdfcCard .card-body.card {
    border-radius: 0px 0px 12px 12px !important;
  }

  .hdfcCard .col-md-5 {
    height: 250px;
  }

  .bankImage {
    height: 250px !important;
    border-radius: 12px 12px 0 0;
  }

  input[formcontrolname="searchtext"]::placeholder {
    font-size: 12px;
    text-overflow: ellipsis;
  }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  .propertyListingTitle {
    font-size: 18px;
  }

  .propertyListingPriceMain .propertyListingAmount {
    font-size: 16px;
  }

  .propertyListingFlagIcon {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .propertyListingTourInfo span {
    font-size: 12px;
  }

  .propertyListingOwnerButton {
    padding: 5px 10px;
    font-size: 12px;
  }

  .propertyListingAttributeItem span {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .listingWishlistIcon {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .dealNotFound img.dealImage {
    height: 100% !important;
  }

  div#carouselExampleAutoplaying .arrowBox {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 18px;
    bottom: 0px !important;
  }

  div#carouselExampleAutoplaying .carousel-control-prev {
    left: 5px;
  }

  div#carouselExampleAutoplaying .carousel-control-next {
    right: 5px;
  }

  .purchaseCard {
    margin-top: 20px;
  }

  .globalMobileHeader .UserLogin .dropdown-item {
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 5px;
    line-height: 26px;
  }

  .reservePropertyCard {
    margin-top: 20px;
  }

  .leadsForm {
    padding: 20px !important;
  }

  .leadsAreaTwo {
    padding: 0px !important;
    border-radius: 30px !important;
  }

  .mobileCountry .countryFlagPicker {
    width: 20px;
    margin-top: -3px;
    margin-right: 0px;
  }

  .dishPlate .dishesImageSide img {
    width: 100%;
    height: 150px;
  }

  .filtersMode.mapView i {
    margin: 0px;
  }

  .countryDropdown {
    max-width: 350px;
    height: auto;
    max-height: 300px;
  }

  #offcanvasNavbar .mobile-selectors .countryDropdown {
    top: 120px !important;
    border-radius: 5px;
    border-top: 1px solid #ececec;
  }

  .bigDotButtonsSide {
    display: block !important;
  }

  .searchButton i {
    right: 6px !important;
    top: 5px !important;
  }

  .locationSearchIcon {
    top: 8px;
    left: 25px;
  }

  .mobile-selectors .form-group .dropdown select.form-select {
    padding: 15px 20px !important;
    border-radius: 100px !important;
    border-color: #6c757d;
    font-size: 16px !important;
  }

  /* .selectLocateHeader img.locationImg {
    width: 15px;
    height: 15px;
    object-fit: contain;
    margin-right: 5px;
    margin-top: 4px;
  } */

  /* .countrySelectorDropdown a#dropdownMenuLink:after {
    display: none;
  } */

  .countrySelectorDropdown a#dropdownMenuLink {
    border: 1px solid #828487;
    border-radius: 100px;
    width: 35px;
    height: 35px;
    line-height: 34px;
    padding: 0px;
  }

  .offerHeading {
    margin-top: 25px;
  }

  .dsplayNotshowinMobile .allSearchAreas {
    gap: 20px;
  }

  .detailsBannerSlider .carousel-item img.d-block.w-100 {
    height: 300px !important;
    object-fit: cover;
  }

  .offcanvas.offcanvas-start {
    width: 380px;
  }

  .productPromo img {
    width: 100%;
    height: 350px;
  }

  .wizardCard .wizardlustration .title {
    font-size: 22px;
    font-weight: 500;
  }

  .modal-content.SchoolWizardModal {
    padding: 20px;
    min-height: 95vh;
  }

  .wizardlustration .mb-0.desc {
    max-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  /* .BigDotProfessional {
        right: 0px !important;
        bottom: 30px !important;
        transform: initial !important;
        top: initial !important;
    } */

  .detailsBannerSlider .carousel-item {
    height: 300px !important;
    object-fit: cover !important;
  }

  .listGrids button.active,
  .listGrids button:hover {
    margin-left: 10px;
  }

  .mobileViewHeader .mobileHeaderLogo {
    display: block !important;
    width: 80px;
  }

  .screeenShowHide.mobileSearchLocation .locationSearchArea {
    display: none;
  }

  /* .portalHeaderLogo {
    display: none;
  } */

  .extraDetailsScanner .listViewButtonGroup {
    display: none;
  }

  .webScanner.loader-table {
    display: none;
  }

  .productMainArea .dishPlate {
    display: block;
  }

  .dishPlate .dishesImageSide {
    height: 150px;
  }

  .col-xl-3.col-lg-4.dsplayNotshowinMobile {
    display: none !important;
  }

  .pageContentArea .dsplayNotshowinMobile.show {
    display: block !important;
  }

  .selectLocateHeader.position-relative {
    display: block;
  }

  .filtersMode.mapView a button {
    padding: 10px 15px !important;
    font-size: 18px;
  }

  .mapView button {
    padding: 10px 20px;
  }

  .selectLocateHeader .form-select {
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 40px;
    max-width: 150px;
  }

  .logoSider .selectLocateHeader img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
    margin-right: 10px;
  }

  .mobileHeader .navbarMobile {
    padding-bottom: 20px;
  }

  .tabPartwithHeading .groupTags {
    gap: 5px;
  }

  .tabPartwithHeading h6 {
    margin-bottom: 5px !important;
  }

  .searchByFilter {
    justify-content: center;
    margin-top: 10px;
  }
}

@media (max-width: 576px) {
  .listdetaliImageSider .dishesImageSide img {
    width: 110px;
    height: 110px;
  }

  .dealIconArea {
    margin-bottom: 15px;
  }

  .tabPartwithHeading {
    margin-top: 25px;
    padding: 0 !important;
  }

  .dealIconArea .col-6 {
    padding: 0px 8px;
  }

  .dealsAreaIcon {
    margin: 8px 0px !important;
  }

  .languageSelectorDropdown {
    display: none;
  }
}

@media only screen and (max-width: 1350px) {
  .detailsAreaAeading h1 {
    font-size: 32px;
    line-height: 42px;
  }

  .detailsAreaAeading h1 span {
    font-size: 48px;
    line-height: 62px;
  }

  .forntPageDetailsArea {
    padding: 40px 40px;
  }

  .locationSearchArea input::placeholder {
    font-size: 14px;
  }

  .otherSearchArea input::placeholder {
    font-size: 14px;
  }

  /* .locationSearchArea,
    .otherSearchArea {
        height: 50px;
    } */

  .locationSearchIcon img {
    width: 14px;
  }

  .locationSearchArea input {
    padding-left: 45px;
  }

  /* .otherSearchtext {
        font-size: 14px;
        top: 25px;
        left: 14px;
    } */

  .otherSearchArea input {
    padding-left: 55px;
  }

  .otherSearchArea .searchButton button {
    padding: 9px 18px;
    font-size: 15px;
  }

  .spotlightArea h6 {
    margin-bottom: 65px;
  }

  .spotLightIcon img {
    height: 70px;
  }

  .spotTagLines {
    padding-left: 25px;
    gap: 10px;
  }

  .spotTagLines a {
    font-size: 14px;
  }

  .classifiexIconFeatured {
    margin-bottom: 35px;
  }

  .frontMainAreaWithTags {
    margin-bottom: 30px;
  }

  header .nav .bigDotlogo {
    margin-right: 15px;
  }

  .searchNavigation .locationSearchAreaHeader,
  .searchNavigation .locationSearchAreaHeader input {
    width: 180px;
  }

  .searchNavigation .locationSearchAreaHeader .locationSearchIcon img {
    width: 14px;
  }

  .searchNavigation .locationSearchAreaHeader input {
    padding-left: 40px;
  }

  .searchNavigation .otherSearchAreaHeader input {
    width: 465px;
  }

  .searchNavigation .locationSearchAreaHeader .locationSearchIcon {
    left: 15px;
  }

  .plateTwo img,
  .plateOne img {
    width: 600px;
  }

  .searchHeadingArea .searchHeading {
    font-size: 16px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .clearSearch {
    font-size: 14px;
    line-height: 18px;
  }

  .checkList {
    flex-wrap: wrap;
  }

  .checkList .form-check {
    width: 100%;
  }

  .searchMainBtn button {
    font-size: 18px;
    line-height: 22px;
  }

  .dishesDetailsSide .dishName {
    font-size: 15px;
    line-height: 20px;
  }

  .dishesImageSide img {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    object-fit: cover;
  }

  .dishPlate .dishesDetailsSide {
    position: relative;
    width: 100%;
  }

  .tagSpan {
    top: 0px;
  }

  .dishesDetailsSide .dishHighlight {
    font-size: 13px;
  }

  .productAvilableDtls ul li {
    margin-bottom: 3px;
  }

  .productAvilableDtls ul li .icons,
  .productAvilableDtls ul li .text {
    font-size: 13px;
  }

  .productSaveDetails .detailsView button {
    font-size: 14px;
    /* line-height: 18px; */
  }

  .dishReview {
    font-size: 12px;
    line-height: 16px;
  }

  .listViewButtonGroup a button {
    padding: 10px 22px;
    font-size: 15px;
    line-height: 20px;
  }
}

@media only screen and (max-width: 1200px) {
  .detailsAreaAeading h1 span {
    font-size: 35px;
    line-height: 46px;
  }

  .reaStatelandingPageSearchButton {
    font-size: 14px;
    padding: 10px;
  }

  .realEstateHeroSection {
    padding-top: 80px;
  }

  .realEstateHeroSubtitle {
    margin-bottom: 10px;
  }

  .realEstateHeroTitle {
    margin-bottom: 10px;
  }

  .detailsAreaAeading h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .forntPageDetailsArea {
    padding: 20px 20px;
  }

  .tabPartwithHeading {
    padding: 20px 20px 0px;
  }

  .tabPartwithHeading .tagButton {
    padding: 6px 18px;
    font-size: 14px;
    line-height: 18px;
  }

  .bigDotallMenu.searchNavigation {
    display: none;
  }

  .bigDotMenuside {
    justify-content: end;
  }

  .plateTwo img,
  .plateOne img {
    width: 550px;
  }

  .pageHeading h2 {
    font-size: 26px;
    line-height: 36px;
  }

  .pageBannerText {
    position: relative;
    z-index: 1;
  }

  .bannerImageArea {
    opacity: 0.4;
  }

  .allSearchAreas {
    justify-content: end;
    flex-wrap: wrap;
  }

  .mapView button {
    font-size: 16px;
  }

  .field .ng-select-container {
    height: 36px;
    padding: 4px 20px;
  }

  .selectDishCategory .form-select {
    font-size: 14px;
    min-width: 200px;
  }

  .listdetaliImageSider .dishesImageSide img {
    width: 110px;
    height: 110px;
  }

  .dishPlateListView .listdetaliImageSider .dishesDetailsSide .dishName {
    font-size: 15px;
    line-height: 20px;
  }

  .dishPlateListView .listdetaliImageSider .dishesDetailsSide .dishHighlight {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 6px;
  }

  .dishPlateListView
    .listdetaliImageSider
    .dishesDetailsSide
    .productAvilableDtls
    ul
    li
    .text {
    font-size: 13px;
    line-height: 18px;
  }

  .dishPlateListView
    .listdetaliImageSider
    .dishesDetailsSide
    .productAvilableDtls
    ul
    li {
    margin-bottom: 3px;
  }

  .checkAndPromote {
    margin-bottom: 12px;
  }

  .verifyData span img {
    height: 20px;
  }

  .promoteArea button {
    font-size: 12px;
    line-height: 16px;
  }

  .scannerImage img {
    width: 65px;
    height: 65px;
  }

  .listViewButtonGroup a button {
    gap: 10px;
  }

  .listViewButtonGroup a button {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 18px;
  }

  .dishPlateListView
    .listdetaliImageSider
    .dishesDetailsSide
    .productSaveDetails {
    margin-top: 5px;
  }

  .dishPlateListView
    .listdetaliImageSider
    .productSaveDetails
    .bookmark
    button {
    font-size: 14px;
  }

  .classifiexIconFeatured .textSider h6 {
    font-size: 15px;
    margin-bottom: -5px;
  }

  .classifiexIconFeatured .textSider p {
    font-size: 13px;
  }

  .tabPartwithHeading .tagButton {
    padding: 6px 12px;
    font-size: 13px;
  }

  .smallTag {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    padding: 8px 14px;
    border: none;
    outline: none;
    background-color: #e4e4e4;
    color: #000;
    border-radius: 10px;
    transition: 0.3s;
  }

  .dealsAreaIcon h6 {
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
  }

  .dealIconArea .dealsAreaIcon {
    padding: 5px;
  }

  .dealIconArea .dealsAreaIcon img {
    height: 40px;
  }

  .tabPartwithHeading h6 {
    font-size: 14px;
    font-weight: 600;
    line-height: 22.5px;
    color: #000;
    margin-bottom: 0px;
  }

  .bigDotallMenu ul li a {
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    color: #000;
  }

  .bigDotSignup a {
    font-size: 13px;
    line-height: 20px;
    color: #000;
    font-weight: 400;
  }

  .bigDotListing .listingBtn span i {
    font-size: 18px;
    margin-right: 6px;
  }

  .bigDotListing .listingBtn span {
    font-size: 14px;
    font-weight: 500;
    line-height: 22.5px;
    color: #fff;
  }

  .mainHeader.bigDotButtonsSide .bigDotListing a.nav-link.cursorPointer {
    width: 100px;
    font-size: 14px;
  }

  .portalHeaderLogo {
    height: 40px;
  }

  .bigDotListing .listingBtn {
    padding: 4px 10px;
  }

  .footerLinks p {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: #646464;
    margin-bottom: 0;
  }

  header .nav .bigDotlogo a img {
    height: 30px;
  }

  header {
    background-color: #fff;
    padding: 6px 0px;
  }

  .classifiedHeading h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: 22.5px;
    color: #000;
    margin-bottom: 10px;
  }

  .classifiexIconFeatured {
    margin-bottom: 18px;
  }

  .field .form-control,
  .field .form-select {
    height: 38px;
    border: 1px solid #cccccc;
    font-size: 13px;
  }

  .siteBanner {
    padding: 16px 0px;
  }

  .pageBannerText .breadcrumb .breadcrumb-item a {
    font-size: 15px;
  }

  .pageBannerText .breadcrumb .breadcrumb-item.active {
    font-size: 15px;
  }

  .searchMainBtn button {
    font-size: 15px;
    line-height: 22px;
  }

  .searchMainBtn button {
    padding: 8px 25px;
  }
}

@media only screen and (max-width: 992px) {
  .spotLightIcon {
    display: none;
  }

  .spotTagLines {
    padding: 0;
  }

  .spotlightArea h6 {
    margin-bottom: 20px;
  }

  .smallTag {
    font-size: 14px;
    line-height: 18px;
    padding: 8px 12px;
  }

  .mainAreaTags {
    gap: 10px;
  }

  .shopName h4 {
    font-size: 22px;
    line-height: 26px;
  }

  .shopName .shopStatus {
    font-size: 13px;
    line-height: 16px;
  }

  .shopName .shopStatus::before {
    top: 3px;
    left: -15px;
    width: 9px;
    height: 9px;
  }

  .productShareArea {
  }
}

@media only screen and (max-width: 765px) {
  .small_screen_off {
    display: none;
  }

  .searchHeadingArea.mb30 {
    margin-bottom: 20px;
    position: absolute;
    top: 65px;
  }

  .smallScrinOrder {
    order: 2;
  }

  header .nav .bigDotlogo a img {
    height: 40px;
  }

  header {
    padding: 7px 0px;
  }

  .detailsAreaAeading h1 {
    font-size: 30px;
    line-height: 38px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .detailsAreaAeading h1 span {
    font-size: 38px;
    line-height: 38px;
    font-weight: 500;
  }

  .frontMainAreaWithTags h6 {
    margin-top: 15px;
  }

  .bigDotFrontPage {
    padding: 10px;
    background-color: #fff;
  }

  .forntPageDetailsArea {
    padding: 25px 15px;
  }

  /* .smallScreenPxoff {
        padding: 0px;
    } */

  .locationSearchArea {
    margin-bottom: 10px;
  }

  .otherSearchArea .searchButton button {
    padding: 10px;
    background-color: var(--site-primary-color);
  }

  .dealsAreaIcon {
    margin: 20px 0px;
  }

  .spotLightIcon {
    display: block;
  }

  .spotLightIcon img {
    height: 55px;
  }

  .spotlightArea h6 {
    margin-bottom: 50px;
  }

  .spotTagLines {
    padding-left: 18px;
  }

  .spotTagLines a {
    font-size: 14px;
    line-height: 16px;
    border-bottom: 1px solid #f04657;
  }

  .classifiedMobile {
    display: none;
  }

  .fontPageLeftPanel {
    border: none;
  }

  .tabPartwithHeading {
    padding: 10px 13px 0px;
    border-bottom: none;
  }

  .mobileViewSect {
    padding: 13px 16px;
    background-color: #fff6f2;
    border-radius: 10px;
  }

  .classifiedPart {
    display: block;
  }

  .tabPartwithHeading .tagButton {
    background-color: var(--site-secondary-color);
    font-size: 14px;
  }

  .dishesDetailsSide .dishHighlight {
    font-size: 12px;
    line-height: 14px;
  }

  .pageBannerText .breadcrumb .breadcrumb-item a {
    font-size: 14px;
    line-height: 18px;
  }

  .pageBannerText .breadcrumb .breadcrumb-item.active {
    font-size: 14px;
    line-height: 18px;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
  }

  .pageHeading h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .mobileOrderTwo {
    order: 2;
  }

  .searchHeadingArea .searchHeading {
    font-size: 16px;
    line-height: 24px;
  }

  .clearSearch {
    font-size: 15px;
    line-height: 18px;
  }

  .productAvilableDtls ul li {
    margin-bottom: 0;
  }

  .productAvilableDtls ul li .icons,
  .productAvilableDtls ul li .text {
    font-weight: 500;
    font-size: 14px;
  }

  .productSaveDetails .bookmark button {
    font-size: 14px;
  }

  .mobileOrderThree {
    order: 3;
  }

  .pageContentArea {
    background-color: #fff;
  }

  .checkList .form-check {
    width: 48%;
  }

  .showInMobile {
    display: block;
    order: 1;
  }

  .showInMobile .productMainArea {
    height: inherit;
  }

  .dsplayNotshowinMobile {
    display: block !important;
    padding-top: 10px;
  }

  .productMainArea {
    height: inherit;
  }

  .searchHeadingArea.mb30 {
    margin-bottom: 20px;
  }

  .productMainAreaMobileView {
    padding: 0;
    border: none;
    position: relative;
  }

  .dsDesktopNotShowThis {
    display: block;
  }

  .mapMainArea {
    height: inherit;
  }

  .footerLinks {
    text-align: center !important;
  }

  .footerLinks .text-end {
    text-align: center !important;
    margin-top: 15px !important;
  }

  .sliderWrapper .imageList .imageItem {
    width: 185px;
    height: 150px;
  }

  .shopImage img {
    width: 80px;
    height: 80px;
  }

  .productShopArea {
    display: flex;
    align-items: flex-start;
    gap: 15px;
  }

  .productShareArea {
    margin-top: 25px;
    justify-content: center;
  }

  .disheHighlight h6 {
    margin-bottom: 5px;
  }

  .menuItemDelsCart {
    /* align-items: flex-start; */
    gap: 10px;
    flex-direction: column;
  }

  .menuImage img {
    width: 80px;
    height: 80px;
  }

  .searchInAdvanced .selectDishCategory .form-select {
    min-width: 190px;
  }

  .countryCity li.custom-suggestion-item.lightDarkPurple {
    color: #161616;
    font-size: 15px;
  }

  .locationSearchArea .suggestion-content strong {
    font-size: 14px;
    font-weight: 400;
    color: #3d3d3d;
  }

  .languageSelectorDropdown .form-select {
    padding: 2px 8px !important;
    width: 100px !important;
    border-color: transparent !important;
  }
}

@media only screen and (max-width: 1023px) {
  #offcanvasNavbar {
    display: block;
  }

  .sliderWrapper .slideButton {
    display: none !important;
  }

  .sliderWrapper .imageList {
    gap: 0px;
    margin-bottom: 15px;
    scroll-snap-type: x mandatory;
  }

  .sliderWrapper .imageList .imageItem {
    width: 280px;
    height: 380px;
  }

  .sliderScrollbar .scrollbarThumb {
    width: 20%;
  }
}

@media (max-width: 420px) {
  .smallTag {
    font-size: 14px;
    padding: 6px 8px;
  }

  body .reservePropertyCard .heading h1 {
    font-size: 20px !important;
  }

  body .reservePropertyCard .heading h2 {
    font-size: 20px !important;
  }

  .dishesDetailsSide .dishName {
    max-width: 140px !important;
  }

  .countryDropdown {
    max-width: 300px;
  }

  .dsplayNotshowinMobile .allSearchAreas {
    gap: 10px;
  }

  .offcanvas.offcanvas-start {
    width: 320px;
  }

  .locationSearchArea .custom-dropdown.countryCity {
    width: 330px !important;
  }

  .otherSearchArea .custom-dropdown.countryCity {
    width: 330px !important;
  }

  .field .ng-select-container {
    height: 40px !important;
    padding: 10px 6px;
  }

  .allSearchAreas .mapView button {
    padding: 10px 8px;
    font-size: 14px;
  }

  .filtersMode.mapView a button {
    padding: 10px 10px !important;
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .custom-dropdown.countryCity {
    width: 398px !important;
  }

  .dsplayNotshowinMobile {
    display: block !important;
    padding-bottom: 10px;
  }
}

::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 10px;
}

.advancedSearchingPart {
  margin-bottom: 20px;
}

.field .ng-select .ng-select-container {
  overflow-y: auto;
  max-height: 60px;
}

.dsplayNotshowinMobile {
  margin-bottom: 20px;
}

app-map-view {
  height: 500px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  .col-md-5.dsplayNotshowinMobile {
    position: absolute;
    padding: 0px;
    right: 10px;
    top: 8px;
  }

  .reservePropertyCard .heading h1 {
    font-size: 24px !important;
  }

  .reservePropertyCard .heading h2 {
    font-size: 24px !important;
  }

  .productSaveDetails .detailsView button span i {
    font-size: 15px;
  }

  .bigDotListing .listingBtn {
    padding: 10px 10px;
    width: 100%;
    margin-left: 0px;
  }

  .globalMobileHeader .selectLocateHeader .locationIcon {
    margin-top: 5px;
    vertical-align: middle;
    margin-right: 10px;
    color: var(--site-primary-color) !important;
    -webkit-text-stroke: initial;
  }

  #offcanvasNavbar .offcanvas-body ul.navbar-nav {
    padding: 0px !important;
  }

  div#offcanvasBottom .offcanvas-body.small {
    padding-top: 20px;
    border-top: 1px solid #e7e7e7;
  }

  .mobile-selectors .btn-outline-secondary i {
    margin-right: 5px;
    vertical-align: middle;
  }

  .dishPlateListView
    .listdetaliImageSider
    .dishesDetailsSide
    .productAvilableDtls
    ul
    li
    .icons
    i {
    vertical-align: middle;
  }

  .productAvilableDtls ul li {
    margin: 4px 0px;
  }

  .top-services-text-container {
    padding-bottom: 0px;
  }

  li.bigDotListing.smallScreenOff {
    position: initial;
    right: 200px;
  }

  .otherSearchArea .searchButton {
    right: 8px;
    width: 27px;
    height: 25px;
    line-height: 15px;
    top: 18px;
  }

  .filtersMode.mapView {
    display: block;
  }

  .otherSearchArea input {
    height: 70%;
  }

  /* ============================================================
     Restaurant mobile header — city selector + "What" search bar.
     Scoped to .restaurantMobileHeader so other mobile headers are
     untouched. Fixes: app-address's Bootstrap .row negative margins
     (which overflowed the header and caused horizontal scroll), the
     fragile height:70% input, and the hard-coded label/button offsets.
     ============================================================ */
  .restaurantMobileHeader .globalMobileHeader {
    gap: 12px;
  }

  /* City box: keep compact, never overflow the row, truncate long names. */
  .restaurantMobileHeader .selectLocateHeader {
    flex-shrink: 0;
    max-width: 55%;
    overflow: hidden;
  }

  .restaurantMobileHeader .selectLocateHeader .form-select {
    width: auto !important;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Search bar wrapper: own padding instead of relying on Bootstrap gutters. */
  .restaurantMobileHeader .globalHeaderSearch {
    padding: 0 12px 12px;
  }

  /* Neutralise app-address's .row mb25 negative margins + bottom gap, and
     the empty (hidden) city column's gutter padding. */
  .restaurantMobileHeader app-address form.row {
    margin: 0;
  }

  .restaurantMobileHeader app-address form.row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Properly sized input with vertically-centred "What" label + button. */
  .restaurantMobileHeader .otherSearchArea input {
    height: 46px;
  }

  .restaurantMobileHeader .otherSearchArea .otherSearchtext {
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
  }

  .restaurantMobileHeader .otherSearchArea .searchButton {
    top: 50%;
    transform: translateY(-50%);
    height: 32px;
    width: 32px;
    line-height: 32px;
  }

  /* siteBanner: on mobile the fixed 185px height left a block of dead space
     below the (shorter) heading. Hug the content instead; clip the faded
     decorative banner image so it doesn't spill past the shrunken banner. */
  .siteBanner {
    height: auto;
    overflow: hidden;
  }

  /* ============================================================
     Restaurant list section — mobile layout.
     The heading/controls row's columns only carry col-md and col-xl
     classes (no base col-12), so below 768px they collapsed to
     auto-width flex items that wrapped awkwardly and left a big white
     gap below the banner. Force a clean full-width stack and tighten
     the spacing under the banner.
     ============================================================ */
  .restaurantListSection {
    margin-top: 12px !important;
  }

  .restaurantListSection .advancedSearchingPart {
    margin-bottom: 0;
  }

  .restaurantListSection .productMainAreaMobileView > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .restaurantListSection
    .productMainAreaMobileView
    > .row
    > [class*="col-"].dsplayNotshowinMobile {
    padding-top: 0;
  }

  .restaurantListSection .searchHeadingArea.mb30 {
    margin-bottom: 14px;
  }

  .bigDotSignup {
    position: initial;
  }

  .mobileViewHeader {
    position: initial;
    right: 0px;
  }

  /* .countryCode.searchLocation.screeenShowHide {
        display: none;
    } */

  .bannerImageArea {
    height: initial;
  }

  .logoSider li.nav-item {
    padding: 0px 0px 0px 0px;
  }

  .logoSider.deskTopScreen img.heignt25px {
    display: none;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .topnav a {
    display: none;
  }

  .topnav a.icon {
    width: 100%;
    padding: 6px;
    margin: 10px 0px;
    background: #bd2c73;
  }

  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav.responsive .dropdown {
    float: none;
  }

  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

@media only screen and (min-width: 240px) and (max-width: 479px) {
  .topnav a {
    display: none;
  }

  .topnav a.icon {
    width: 100%;
    padding: 6px;
    margin: 10px 0px;
    background: #bd2c73;
  }

  .topnav a.icon {
    width: 100%;
    padding: 6px;
    margin: 10px 0px;
    background: #bd2c73;
  }

  .topnav a {
    display: none;
  }

  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav.responsive .dropdown {
    float: none;
  }

  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

  .instaCitiMenu {
    display: inline;
  }

  .example-1 {
    width: auto !important;
  }

  .form-group {
    margin-bottom: 0px;
  }
}

@media only screen and (min-width: 240px) and (max-width: 479px) {
  .logoSet {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .weddingHeaderSection .searchBar {
    padding: 0 12px;
    /* Adjust padding for smaller screen */
    max-width: 100%;
    /* Full width on mobile */
  }

  .weddingHeaderSection .searchBar .locationBox {
    display: none;
  }

  .weddingHeaderSection .searchBar input {
    width: 100%;
    /* Input field takes full width */
  }

  .weddingHeaderSection .searchBar button {
    width: 50px;
    /* Slightly larger button for better touch interaction */
    height: 50px;
  }

  .weddingHeaderSection .weddingHeaderHeading {
    font-size: 30px;
  }

  .weddingHeaderSection .weddingHeaderText {
    font-size: 14px;
  }

  .weddingCategoryCards .categoryCardOne img {
    width: 100% !important;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 768px) {
  /* .otherSearchArea input,
    .locationSearchArea input {
        height: 100%;
    } */

  /* .locationSearchIcon {
        position: absolute;
        top: 13px;
        left: 16px;
    } */

  .dishesDetailsSide .dishName {
    font-size: 16px !important;
    max-width: 150px !important;
    -webkit-line-clamp: 1 !important;
  }
}

@media (max-width: 767px) {
  .navbar-toggler {
    border: none;
  }

  .navbar-toggler:focus {
    box-shadow: none;
  }

  /* .mobileViewHeader .nav-item.countryCode.searchLocation.screeenShowHide {
    position: absolute;
    left: 70%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    gap: 0px;
    margin-bottom: 0px;
    align-items: center;
  } */

  .mobileViewHeader .dropdown-menu {
    top: 100%;
    left: -100px;
  }

  .mobileViewHeader .iconSeder .logoSider {
    position: relative;
  }

  .countrySelectorDropdown {
    position: absolute;
    right: 20px;
    overflow: initial;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* .locationSearchIcon {
        top: 8px !important;
    } */

  /* .otherSearchtext {
        top: 18px !important;
    } */

  /* .otherSearchArea .searchButton {
        top: 18px !important;
    } */

  .filtersMode.mapView {
    display: block !important;
  }

  .mobileViewHeader .mobileHeaderLogo {
    display: block !important;
    width: 100px !important;
    position: absolute !important;
    left: -685px !important;
    top: -5px !important;
  }

  .dsplayNotshowinMobile .row {
    padding: 16px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  /* .locationSearchIcon {
        top: 8px !important;
    } */

  /* .otherSearchtext {
        top: 19px !important;
    } */

  /* .otherSearchArea .searchButton {
        top: 18px !important;
    } */
}

@media (min-width: 767px) and (max-width: 1024px) {
  .filtersMode.mapView {
    display: block !important;
  }

  .countryCode.searchLocation form.row.mb25 {
    display: none !important;
  }

  /* .portalHeaderLogo {
    display: none !important;
  } */

  .selectLocateHeader.position-relative {
    display: block !important;
  }

  .logoSider .selectLocateHeader img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    margin-right: 10px !important;
  }

  .selectLocateHeader .form-select {
    width: 300px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 40px !important;
  }

  .selectLocateHeader label {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    margin-top: -3px !important;
    color: #535353 !important;
  }

  div#offcanvasBottom {
    width: auto !important;
  }

  .custom-dropdown.countryCity {
    width: 360px !important;
  }
}

@media (max-width: 767px) {
  .trendingCategories ul li {
    margin-right: 15px;
    margin-bottom: 10px;
    margin-left: 0px;
  }

  .countryNameDisable {
    display: none;
  }

  .productOccasion img.img-fluid {
    height: 150px !important;
  }

  .productOccasion button.browseProducts.btn {
    font-size: 15px;
    padding: 4px 15px !important;
  }

  .productOccasion button.browseProducts.btn {
    margin-bottom: 20px;
  }

  .customGapping .carousel-inner img {
    max-height: 400px !important;
    min-height: 400px !important;
  }

  .productItemBox .productList {
    margin-bottom: 20px;
  }

  .itemSummary .quantitySelector {
    width: 75px !important;
  }

  body .categoryGroupImg img.img-fluid {
    height: 100px !important;
  }

  .sectionGroupImg img.sectionImg {
    height: 150px !important;
  }

  .customGapping .contain .item img {
    height: auto !important;
  }

  .desktopView {
    display: none !important;
  }
}

@media only screen and (max-width: 1440px) {
  .cMenu li a {
    padding: 8px 15px !important;
    font-size: 12px !important;
  }

  .dealsMegaMenu .cMenu li a {
    padding: 8px 0 !important;
  }

  .dealsAreaIcon {
    padding: 8px;
  }

  .dealsAreaIcon img {
    height: 50px;
  }

  .customGapping .carousel-inner img {
    max-height: 500px !important;
    min-height: 500px;
  }

  .height490 img.img-fluid.bannerImg1 {
    height: 310px;
    margin-bottom: 10px;
  }

  .searchProducts p {
    font-size: 12px;
  }

  .searchProductsImg img {
    min-height: 200px;
  }

  .searchProducts .input-group input.form-control {
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 14px;
  }

  .searchProducts button.btn {
    padding: 5px;
    font-size: 14px;
  }

  .searchProducts .input-group {
    height: 30px;
  }

  .sectionGroupImg h4 {
    font-size: 15px;
  }

  .sectionGroupImg img.sectionImg {
    height: 150px;
  }

  .card.shopByOccasions h3 {
    font-size: 15px;
  }

  .addonSection .addonItem img {
    height: 150px;
  }

  .addonSection .owl-nav span {
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 15px;
  }

  .addonSection .addonName {
    font-size: 14px;
  }

  .addonSection .addonBtn {
    padding: 4px 15px;
    font-size: 14px;
  }

  .cartSummary .placeOrderBtn {
    padding: 5px;

    font-size: 14px;
  }

  .itemSummary h3 {
    font-size: 16px;
    font-weight: 600;
  }

  .cartSummary .cartHeader {
    padding: 10px 15px;
    font-size: 16px;
  }

  .trendingCategories h3 {
    font-size: 18px;
  }

  .trendingCategories ul li a {
    font-size: 14px;
  }

  .itemSummary .messageInput {
    padding: 5px;
    font-size: 12px;
  }

  .addonSection .addonTitle {
    font-size: 18px;
  }

  .customGapping .contain .item img {
    height: 300px;
  }

  .productItemBox .productList .productImg img.img-fluid {
    height: 210px;
  }

  .productItemBox .productList .nullProdName {
    font-size: 16px;
    margin-bottom: 5px;
  }

  .productItemBox .productList .prodPrice {
    font-size: 14px;
  }

  .productItemBox .productList .listPrice {
    font-size: 12px;
  }

  .productList .discountPrice {
    font-size: 14px;
  }

  .productOccasion img.img-fluid {
    height: 160px;
  }

  .productOccasion button.browseProducts.btn {
    font-size: 14px;
    padding: 5px 20px;
  }

  .productOccasion h2 {
    font-size: 18px;
    margin-top: 10px;
  }

  .servings button,
  .delivery button {
    padding: 5px 12px;
    font-size: 12px;
  }

  .productCard .messageInput {
    padding: 5px 10px;
  }

  .productCard .addToCart {
    padding: 5px 10px;
  }

  .OtherSellersSection .productImage {
    height: 150px;
  }

  .OtherSellersSection .offers p {
    margin-bottom: 8px;
  }

  .categoryGroupImg img.img-fluid {
    height: 150px !important;
  }

  .searchBarContainer.customGapping .input-group input.form-control {
    padding: 5px 10px;
    font-size: 14px;
  }
}

@media screen and (max-width: 1200px) {
  .servicesGrid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
}

@media screen and (max-width: 768px) {
  /* .dropdown {
        float: none !important;
    } */

  .mobile-selectors {
    border-bottom: none !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
  }

  .mobile-selectors ul li {
    padding-bottom: 0px !important;
  }

  .textAlignment {
    padding: 20px 15px;
  }

  .heroSection {
    min-height: auto;
    padding: 20px 0;
  }

  .servicesGrid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }

  .serviceImageContainer {
    height: 200px;
  }

  .salonGrid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
  }

  .sectionHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .sectionTitle {
    font-size: 24px;
  }
}

@media screen and (max-width: 480px) {
  .servicesGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .salonGrid {
    grid-template-columns: 1fr;
  }

  .serviceImageContainer {
    height: 200px;
  }

  .serviceLabel {
    font-size: 12px;
    padding: 6px 8px;
    width: 90%;
  }
}

/* Responsive CSS Ends Here */

/* .shopBtn {
    background-color: #13d837;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important;
  } */

.top-services-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-icon {
  width: 20px;
  height: auto;
}

.top-services-text-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 3px;
}

.service-item {
  color: var(--site-primary-color);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--site-primary-color);
}

.separator {
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: #e0e0e0;
}

.dsplayNotshowinMobile {
  position: relative;
}

.extraDetailsScanner .listViewButtonGroup {
  position: absolute;
  bottom: 0px;
  right: 10px;
}

.smartBar nav ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.smartBar nav {
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background-color: #d00250;
  position: fixed;
  width: 60px;
  box-shadow: 2px 2px 8px 0px rgb(253 162 196);
  z-index: 123;
  border-radius: 100px 0px 0px 100px;
}

.smartBar nav li {
  height: 50px;
}

.smartBar nav li a {
  color: #fff !important;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 15px;
  position: relative;
  cursor: pointer;
}

.smartBar nav li a i {
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 22px;
}

.smartBar ul li a span {
  opacity: 0;
  visibility: hidden;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: absolute;
  right: 60px;
  top: 0px;
  bottom: 0;
  background: #d00250;
  min-width: 175px;
  font-size: 12px;
  padding: 10px 10px 10px 25px;
  transition: all 0.3s linear;
}

.smartBar ul li a:hover span {
  opacity: 1;
  visibility: visible;
  min-width: 170px;
  border-radius: 100px 0px 0px 100px;
}

.smartBar nav:hover {
  border-radius: 0px;
}

.smartBar.Business nav {
  background-color: #7c0ab1;
  box-shadow: 2px 2px 8px 0px rgb(198 144 223);
}

.smartBar.Business ul li a span {
  background-color: #7c0ab1;
}

.field.w-40 {
  width: 180px;
}

#buy-tab,
#commercial-tab {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Optional: If you want to remove the tabindex behavior as well */
#buy-tab[tabindex="-1"],
#commercial-tab[tabindex="-1"] {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Realestate Listing Detail CSS Starts*/

.groupTags {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.groupTags .facilityTag {
  padding: 12px 15px;
  background-color: #f8fafc;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #e2e8f0;
}

.listDownloader .fill-btn {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  padding: 10px;
  background-color: var(--site-primary-color);
  border-radius: 12px;
  transition: 0.4s ease;
}

.listingBannerImg img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.leftFilterImg img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 10px;
}

.listDownloader .reservePropertyBtn {
  background-color: #3e31cf;
}

.listDownloader .outline-button {
  font-size: 18px;
  font-weight: 500;
  padding: 10px;
  color: #1a365d;
  border: 2px solid #1a365d;
  border-radius: 12px;
  transition: 0.4s;
}

.pricArea h4 {
  font-size: 24px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 12px;
}

.productImageArea #mainProductImage {
  height: 460px;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.facilityBox {
  padding: 24px 30px;
  text-align: center;
  border-radius: 16px;
  box-shadow:
    0px 0px 0px 0px #00000000,
    0px 0px 0px 0px #00000000,
    0px 0px 0px 0px #00000000,
    0px 0px 0px 0px #00000000,
    0px 8px 32px 0px #0000000f;
  height: 100%;
}

.facilityBox img {
  width: 50px;
  height: 50px;
  display: block;
  margin: auto;
}

.facilityBox h6 {
  font-size: 18px;
  font-weight: 500;
  color: #1a365d;
  margin-bottom: 0;
  margin-top: 15px;
}

.mainTabs li button.active {
  border: none;
  border-bottom: 3px solid var(--site-primary-color) !important;
}

.mainTabs li button {
  padding: 12px 22px;
  font-size: 18px;
  font-weight: 600;
  color: #999999;
  border: none;
}

.floorImage img {
  max-height: 700px;
  object-fit: cover;
  border-radius: 16px;
}

.servicePoints .servArea {
  padding: 16px;
  border-radius: 12px;
  box-shadow:
    0px 0px 0px 0px #00000000,
    0px 0px 0px 0px #00000000,
    0px 0px 0px 0px #00000000,
    0px 0px 0px 0px #00000000,
    0px 8px 32px 0px #0000000f;
  height: 100%;
  margin-bottom: 24px;
}

.servicePoints .servArea .txts h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
  color: #1a2332;
}

.servicePoints .servArea .txts p {
  color: #64748b;
  margin-bottom: 0;
}

.mapView iframe {
  min-height: 380px;
  height: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow:
    0px 0px 0px 0px #00000000,
    0px 0px 0px 0px #00000000,
    0px 0px 0px 0px #00000000,
    0px 0px 0px 0px #00000000,
    0px 8px 32px 0px #0000000f;
  width: 100%;
}

.leadsAreaTwo {
  background: url(https://dkzxkcjlbnjui.cloudfront.net/uploads/media/images/lead-2.jpg)
    no-repeat;
  /* background-size: 100%; */
  background-size: cover;
  padding: 50px 180px;
  border-radius: 10px;
}

.leadsForm {
  background-color: #ffffff;
  padding: 48px;
  border-radius: 24px;
}

.leadsForm h4 {
  font-size: 24px;
  font-weight: 700;
  color: #1a2332;
  margin: 10px 0px 20px;
}

.leadsForm form input {
  height: 50px;
  width: 100%;
  border-radius: 8px;
  outline: none;
  border: 1px solid #e2e8f0;
  margin-bottom: 20px;
}

.custom-btn2 {
  background-color: var(--site-primary-color) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 10px 28px;
  border: 1px solid var(--site-primary-color);
  transition: background-color 0.3s ease;
}

.exploreProperty {
  display: none;
}

/* Realestate Listing Detail CSS Ends*/

.city-input {
  border: 2px solid var(--site-primary-color);
  padding-left: 10px;
}

.city-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 5px;
  z-index: 1000;
  max-height: 250px;
  overflow-y: auto;
}

.detect-location {
  background: #fff4f0;
  padding: 10px;
  cursor: pointer;
  font-weight: 500;
  border-bottom: 1px solid #eee;
  color: #070707;
}

.detect-location:hover {
  background: #ffe9e2;
}

.dropdown-section {
  padding: 10px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
}

.dropdown-item {
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

/* loand band css start here */
.loanBand {
  max-width: 800px;
  background: #384d6c;
  border-radius: 100px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin: 30px auto;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #fff;
}

.loanBand img {
  width: 30px;
  height: 30px;
  filter: invert(1);
  object-fit: cover;
}

.loanBand p {
  margin: 0px 10px !important;
}

.loanBand button.btn.CheckEligibility {
  background-color: #fff;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 100px;
}

.loanBand button.btn.CheckEligibility:hover {
  color: #000;
}

.modal-content.modal-dynamic {
  border-radius: 20px;
}

@media (max-width: 767px) {
  .loanBand {
    border-radius: 20px;
    padding: 20px 10px;
    display: block;
  }

  .loanBand p {
    margin: 10px 10px !important;
  }
}

.HomeLoan {
  display: flex;
  border: 1px solid #cccccc;
  padding: 8px;
  border-radius: 15px;
  /* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); */
  cursor: pointer;
  background: #ffffff;
}

.HomeLoan svg {
  width: 50px;
}

.HomeLoan .loanContent {
  margin-left: 15px;
}

.HomeLoan .loanContent h3 {
  font-size: 20px;
  margin-bottom: 0px;
}

.HomeLoan .loanContent p {
  font-size: 15px;
  color: #959595;
  margin-bottom: 0px;
}

@media (max-width: 767px) {
  .HomeLoan .loanContent {
    margin-left: 10px;
  }

  .propertyGridView .propertyListingOwnerButton {
    width: 50%;
  }

  .HomeLoan img {
    width: 40px;
    height: 40px;
  }

  .HomeLoan {
    margin-bottom: 20px;
    padding: 10px;
  }

  .wizardlustration img {
    display: none;
  }

  /* .HomeLoanBox .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  } */

  .HomeLoanBox .row::-webkit-scrollbar {
    display: none;
  }

  /* .HomeLoanBox .row>div {
    flex: 0 0 auto;
    width: 90%;
    margin-right: 0px;
  } */
}

/* loand band css end here */

/* Pay School Fees Css Start Here */
.EmailInstitute p {
  margin: 0px;
  font-size: 16px;
  text-align: center;
}

.schoolFeePayment img {
  width: 100%;
}

.EmailInstitute {
  padding: 15px;
  background-color: #e8f0ff;
  border-radius: 10px;
}

h3.headingSection {
  border-bottom: 4px solid #ba3458;
  display: inline-block;
  font-size: 22px;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

button.mainCtaBtn.GoBackBtn {
  background-color: transparent;
  color: #3a1593;
  border: 1px solid #3a1593;
}

/* Pay School Fees css End Here */

/* SmartMedia Control Starts */

.mediaContainer {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.smartMediaPreview {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}

.smartMediaPreview img,
.smartMediaPreview video {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 10px;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  color: #fff;
  text-align: center;
}

.overflow-thumbnails {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: #007bff #f1f1f1;
  padding: 5px 0;
}

.overflow-thumbnails::-webkit-scrollbar {
  height: 6px;
}

.overflow-thumbnails::-webkit-scrollbar-thumb {
  background: #007bff;
  border-radius: 4px;
}

.smartMediaThumb {
  flex: 0 0 auto;
  width: 100px;
  margin: 0 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.smartMediaThumb img,
.smartMediaThumb video {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
}

.smartMediaThumb:hover {
  transform: scale(1.05);
}

.smartMediaThumb.active img,
.smartMediaThumb.active video {
  border-color: #007bff;
}

/* Buttons */

/* .btn {
    border-radius: 50%;
    padding: 10px 15px;
    font-size: 16px;
    position: relative;
    overflow: hidden;
} */

.uploadBtn {
  background: #28a745;
  color: #fff;
}

.uploadBtn input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.thunderBtn {
  background: #007bff;
  color: #fff;
}

.mediaTypeSelection {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.mediaTypeSelection input[type="radio"] {
  margin-right: 6px;
  accent-color: #007bff;
}

.custom-save-btn {
  background-color: #28a745;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  padding: 12px 24px;
  transition: all 0.3s ease;
}

.custom-save-btn:hover:not(:disabled) {
  background-color: #218838;
}

.custom-save-btn:active:not(:disabled) {
  background-color: #1e7e34;
}

.custom-save-btn:disabled {
  background-color: #c6c8ca;
  color: #6c757d;
  cursor: not-allowed;
}

.smartMediaPreview img {
  min-height: 250px;
  max-height: 250px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  position: relative;
  max-width: 100%;
}

.col.sliderSmartMedia.smartMediaPreview div#color-overlay {
  display: none;
}

#color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(110, 25, 247);
  opacity: 0.6;
}

.overlay {
  bottom: 0;
  transition: 0.5s ease;
  color: white !important;
  padding: 100px;
  text-align: center;
}

.mediaImage.blue.box .col.text-start {
  display: flex;
}

.mediaContainer .mediaImage .thunderBtn {
  background-color: #ffd1c1;
  color: var(--site-primary-color) !important;
  padding: 5px 10px;
  border-radius: 7px;
}

.mediaImage.blue.box .col.text-end {
  display: flex;
}

.mediaContainer .mediaImage .uploadBtn {
  background-color: #e3d8ff;
  color: #3a1593 !important;
  padding: 5px 10px;
  border-radius: 7px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  margin-right: 10px;
}

button.btn.saveBtn {
  background-color: var(--site-primary-color);
  color: #fff;
  font-size: 15px;
}

.mediaContainer .mediaImage .settingBtn {
  color: #4f8000;
  background-color: #eafdc8;
  padding: 5px 10px;
  border-radius: 7px;
}

.mediaContainer .mediaImage .deleteBtn {
  background-color: #ffd3e9;
  color: #e70777 !important;
  margin-right: 10px;
  padding: 5px 10px;
  border-radius: 7px;
}

.sliderSmartMedia.smartMediaPreview video {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

.smartMediaThumb img {
  border-radius: 0.5rem !important;
  min-height: 100px !important;
  max-height: 100px;
  object-fit: cover;
  cursor: pointer;
}

.mediaContainer .mediaImage .uploadBtn input {
  position: absolute;
  left: 0;
  opacity: 0;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
}

/* SmartMedia Control Ends */

/* Lab Test Starts */

.testsSection {
  padding: 2rem;
  background-color: #fff;
}

.testsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.sectionHeading {
  font-size: 1.4rem;
  font-weight: 600;
}

.viewAllLink {
  font-size: 0.95rem;
  color: #00b4d8;
  font-weight: 500;
  text-decoration: none;
}

.mutedTextDark {
  color: #777;
}

.viewAllLink:hover {
  text-decoration: underline;
}

.testCard {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
  height: 100%;
}

.testCard:hover {
  transform: translateY(-4px);
}

.testImage {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.testContent {
  padding: 15px;
}

.testTitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.testDescription {
  font-size: 0.9rem;
  color: #555;
  min-height: 50px;
  margin-bottom: 0.5rem;
}

.testPrice {
  font-weight: 600;
  color: #000;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.detailsButton {
  background-color: #00b4d8;
  color: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  font-weight: 500;
  font-size: 14px;
  border: none;
}

.detailsButton:hover {
  background-color: #0096c7;
}

.testDescription {
  margin: 10px 0px;
}

.testDetailsCard {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.testDetailsBookNowCard {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.testImage {
  border-radius: 12px;
  width: 100%;
  height: auto;
}

.badgeTag {
  background-color: #e8f5fe;
  color: #0275d8;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 500;
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-block;
}

.availabilityText {
  color: #10b981;
  font-size: 15px;
  font-weight: 500;
}

.timeText {
  font-size: 0.9rem;
  color: #6c757d;
}

.priceText {
  font-size: 1.2rem;
  font-weight: 600;
}

.bookButton {
  background-color: #e11753;
  color: white;
  border-radius: 8px;
  font-weight: 500;
}

.bookButton:hover {
  background-color: #1dbcce;
  color: white;
}

.infoBadge {
  background-color: #f0f0f0;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-right: 5px;
}

.sectionTitle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sectionIconTestPreparations {
  background-color: #e11753;
  color: #fff;
  border-radius: 10px;
  padding: 6px;
  font-size: 1rem;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sectionIcon {
  background: linear-gradient(to right, #059669, #10b981);
  color: #28a745;
  border-radius: 10px;
  padding: 6px;
  font-size: 1rem;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.infoBox {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.9rem;
}

.successBox {
  background-color: #e6f7f1;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #28a745;
}

.textDetailsCard {
  padding: 15px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  background-color: #fff;
}

.testDetailsCard {
  padding: 25px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.bookButton {
  background-color: #e11753;
  color: #fff;
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 6px;
  white-space: nowrap;
}

.testDetailsImage {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.sectionIcon i {
  color: #fff;
  font-size: 20px;
}

.successBoxPreparation {
  color: #065f46;
}

.successBox i {
  background: #065f46;
  color: #ffff;
  padding: 4px;
  border-radius: 30px;
  font-size: 10px;
}

.textColorTestDetails {
  color: #475569;
}

.bookNowSchedule {
  position: relative;
  top: 0px;
}

.timeText i {
  color: #000;
}

.headingUnderline {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

.headingUnderline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 60px;
  /* blue part length */
  height: 3px;
  background-color: #06b6d4;
  /* blue color */
}

.headingUnderline::before {
  content: "";
  position: absolute;
  left: 60px;
  /* starting after blue line */
  bottom: -6px;
  width: 100px;
  /* gray part length */
  height: 3px;
  background-color: #d1d5db;
  /* gray color */
}

/* Lab Test Ends*/

/* wedding collection Css Start Here */
.instaSelectArea {
  width: 100%;
  float: left;
  text-align: center;
  justify-content: center;
  display: flex;
  z-index: 12;
}

.weddingTexts {
  z-index: 1;
}

.instaCitiSelectOne {
  display: inline;
  float: left;
  width: 30%;
  margin-right: 10px;
}

.instaSelectArea .form-control {
  border-radius: 10px;
  height: 48px;
  border: 0px;
}

.instaCitiSelectTwo button {
  height: 48px;
  border: 1px var(--site-primary-color) solid;
  background: var(--site-primary-color);
  color: #fff;
  padding: 0px 40px;
  border-radius: 10px;
}

.instaCitiUnderLeft button.btn.btn-default.modal-footer {
  border-radius: 10px;
  background-color: var(--site-primary-color);
}

@media (max-width: 767px) {
  .instaCitiTopweddingHeaderSection .row.align-items-center span {
    text-align: center;
    display: block;
    margin-bottom: 10px;
  }

  .instaCitiUnderLeft {
    text-align: center;
  }

  .weddingCategoryCards .categoryHeading {
    font-size: 18px;
    margin-bottom: 0px;
  }

  .weddingCategoryCards {
    padding: 20px 0px;
  }

  .instaSelectArea .instaCitiSelectOne {
    display: inline-block;
    float: initial;
    width: 100%;
  }

  .weddingCategoryCards .categoryCardOne {
    display: block;
    margin: 10px 0;
    padding: 10px;
  }

  .weddingCategoryCards .categoryCardOne {
    margin: 10px 0;
  }

  .instaSelectArea {
    display: block;
    float: initial;
  }

  .weddingCategoryCards .categoryCardOne .categoryCardPara {
    margin-bottom: 0px;
  }

  .weddingCategoryCards .categoryHeading {
    font-size: 18px;
    margin-bottom: 0px;
  }
}

/* wedding collection Css End Here */

/* all Billers css start here */
.allBillers .dealsAreaIcon {
  padding: 15px 25px;
  border-radius: 10px;
}

.allBillers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.paymentsBill img {
  width: 100%;
}

@media (max-width: 767px) {
  .allBillers .dealsAreaIcon {
    margin-right: 0px;
    flex: 1 1 calc(50% - 10px);
  }
}

.breadCrumbNav .breadCrumbLink {
  color: #000;
}

.breadCrumbLink.active {
  color: #4b2aad;
}

.breadCrumbDot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 8px;
  border-radius: 50%;
  background-color: var(--site-primary-color);
}

/* all Billers css end here */

.listingSubmitBand {
  max-width: 100%;
  background: #4caf50;
  border-radius: 100px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 12px;
  margin: 30px auto;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #fff;
}

.congratulationsIcon svg {
  width: 200px;
  height: 235px;
}

.featuredListing {
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

.featuredListing .ListingLeftContent {
  background: #978efd;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  width: 100%;
  height: 70px;
  border-radius: 10px 0px 0px 0px;
}

.featuredListing .ListingRightContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #7065f0;
  padding: 10px;
  height: 70px;
  border-radius: 0px 10px 10px 0px;
}

.featuredListing .ListingRightContent img.ListingLogo {
  width: 100px;
  padding: 5px;
  background-color: #fff;
  border-radius: 10px;
}

.featuredListing .ListingLeftContent i {
  font-size: 24px;
  color: #ffd400;
}

.featuredListing .ListingLeftContent .featuredText {
  font-size: 18px;
  font-weight: 500;
}

.ListingRightContent .priceText {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.featuredListing .propertyImage {
  position: relative;
  overflow: hidden;
}

.propertyImage .newBadge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 50px;
}

.propertyImage .favoriteIcon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fff;
  border-radius: 50%;
  color: #d33;
  cursor: pointer;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.featuredListing .propertyBody h5 {
  font-weight: 700;
  margin-bottom: 8px;
}

.featuredListing .propertyBody {
  padding: 10px 15px;
}

.propertyFooter {
  border-top: 1px solid #ddd;
  padding: 10px 0px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.propertyFooter .btnViewMore {
  background: #8563f3;
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 16px;
}

.propertyImage img.img-fluid.w-100 {
  width: 100% !important;
  height: 250px;
  border-radius: 0px 0px 10px 10px;
  object-fit: cover;
}

.featuredListing .propertyBody a.small {
  font-size: 16px;
  color: #7065f0;
  margin-bottom: 8px !important;
  display: block;
}

.featuredListing .propertyFooter .iconGroup {
  color: #64748b;
}

.propertyFooter .iconGroup i {
  font-size: 24px;
  margin-right: 5px;
}

.featuredListing.NormalListing .propertyImage img.img-fluid {
  border-radius: 10px;
}

.featuredListing.NormalListing .propertyBody {
  padding-top: 0px;
}

.featuredListing.NormalListing .propertyBody span.priceText {
  color: #8563f3;
  margin-bottom: 10px;
  display: inline-block;
  font-size: 24px;
  line-height: 20px;
}

@media (max-width: 767px) {
  .featuredListing .ListingRightContent {
    border-radius: 0px;
  }

  .propertyBody {
    padding: 10px 5px !important;
  }

  .propertyFooter {
    padding: 10px 0px;
  }

  .featuredListing .ListingLeftContent {
    border-radius: 10px 10px 0px 0px;
  }
}

.autocomplete-item {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s ease;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
  background-color: #e3f2fd;
  border-left: 3px solid #2196f3;
}

.autocomplete-item i {
  font-size: 12px;
  color: #6c757d;
}

.autocomplete-item span {
  color: #333;
  font-size: 14px;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px #00000026;
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
  animation: _ngcontent-ng-c3475403375_slideDown 0.2s ease-out;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  box-sizing: content-box;
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.property-features .feature .value {
  font-size: 0.9rem;
  background: #cdcdcd;
  border-radius: 5px;
  color: #fff;
}

.property-features .feature {
  margin-bottom: 0.2rem;
}

.property-features .feature .value {
  font-size: 0.9rem;
  background: #cdcdcd;
  border-radius: 5px;
  color: #fff;
}

.property-features .feature .check,
.property-features .feature .value {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  display: inline-block;
}

.property-features .feature .check {
  color: #93c47d;
}

.sectionHeading .h6 {
  color: #1c5fe9;
}

.localityDetailBtn {
  color: var(--site-primary-color);
  margin-bottom: 10px;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
}

.scrollable-content-container .dishPlate {
  height: 100%;
}

.gm-style .gm-style-iw {
  overflow: initial;
}

.gm-style .gm-style-iw-c {
  overflow: initial;
}

button.gm-ui-hover-effect {
  position: absolute !important;
  z-index: 12;
  top: -22px;
  right: -22px;
}

app-root section.pageContentArea {
  padding-top: 0px;
}

.overviewSection strong {
  font-size: 18px;
}

.overviewSection p {
  color: #8f8f8f;
  font-size: 15px;
}

.container.overviewSection a.link {
  color: var(--site-primary-color);
  text-decoration: underline !important;
}

.mapArea .mapView div#map {
  height: 370px !important;
}

.HomeLoan img {
  width: 48px;
}

button.btnClose {
  position: absolute;
  right: 15px;
  background-color: transparent;
  border: 0px;
  top: 15px;
  color: var(--site-primary-color);
  z-index: 12;
}

.modal-content {
  border-radius: 15px;
}

.BigDotData th,
.BigDotData td {
  border: 1px solid #ddd;
  padding: 8px;
}

.disabledDropdown {
  pointer-events: none;
  opacity: 0.8;
  border: 1px solid #dcdcdc;
  border-radius: 50px;
}

.country-dropdown::after {
  display: none;
}

/* Global page scaffold */
/* body {
  background: #f5f7fb;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh;
} */

.page-header {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Card + two-panel layout */
.wizard-card {
  background: #fff;
  /* border-radius: 20px; */
  box-shadow: 0 20px 40px rgba(18, 38, 63, 0.08);
  overflow: hidden;
}

.wizard-illustration {
  background: var(--site-primary-color);
  height: 100%;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Progress header (matches your previous wizards) */
.progress-header {
  background: linear-gradient(
    45deg,
    var(--site-secondary-color),
    var(--site-primary-color)
  );
  padding: 1.25rem;
  color: #fff;
  text-align: center;
}

.progress-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
  font-weight: 700;
  font-size: 1rem;
  border: 3px solid rgba(255, 255, 255, 0.35);
}

.step-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.step-subtitle {
  font-size: 0.9rem;
  opacity: 0.95;
  margin: 0.35rem 0 0;
}

/* Form styles */
.wizard-body {
  padding: 20px 28px;
  height: auto;
  overflow-y: auto;
  max-height: 420px;
}

.step {
  display: none;
}

.step.active {
  display: block;
}

/* .form-label {
  font-weight: 600;
  color: #374151;
}

.form-control,
.form-select {
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  padding: 0.7rem 1rem;
} */

.form-control:focus,
.form-select:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.navigation-bar {
  padding: 14px 28px;
  border-top: 1px solid #eef0f3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafbfc;
  bottom: 0px;
  position: absolute;
  width: 100%;
}

.btn-primary {
  background: var(--site-primary-color);
  border: none;
  border-radius: 25px;
  padding: 0.7rem 1.4rem;
}

.btn-outline-secondary {
  border-radius: 25px;
  padding: 0.7rem 1.4rem;
}

.modal-dialog.modal-xl {
  max-width: 1100px;
}

/* .modal-body,
.offcanvas-body {
  padding: 0;
} */

.offcanvas-bottom {
  height: 90vh !important;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .wizard-body,
  .navigation-bar {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.form-control:focus,
.form-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.input-group-text {
  border-radius: 10px 0 0 10px;
  border: 1px solid #dee2e6;
  border-right: none;
  background: #f8f9fa;
  font-weight: 600;
}

.input-group .form-control {
  border-radius: 0 10px 10px 0 !important;
  font-size: clamp(13px, 1vw, 14px);
}

.input-group:focus-within .input-group-text {
  border-color: var(--site-primary-color) !important;
}

.customGradient .cardHeaderTitle {
  display: none;
}

.is-invalid {
  border-color: #dc3545 !important;
}

.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem !important;
}

@media (max-width: 768px) {
  .dealCard .dealImage {
    height: 250px;
  }

  .dealBody {
    min-height: auto;
  }

  .realEstateHeroSection {
    padding-top: 0px !important;
  }
}

.partnerLogo {
  height: 65px;
}

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

button.nearbyThings {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  padding: 6px 14px;
  border: none;
  outline: none;
  background-color: var(--site-primary-color);
  color: #fff;
  border-radius: 10px;
  transition: 0.3s;
}

.globalGoToTop {
  overflow: hidden;
  position: fixed;
  height: 50px;
  width: 50px;
  line-height: 50px;
  border-radius: 100%;
  bottom: 50px;
  right: 30px;
  text-align: center;
  z-index: 9999;
  color: #fff;
  background-color: var(--site-primary-color);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

.globalGoToTop:hover {
  color: #fff;
  background-color: var(--site-tertiary-color);
}

.selectLocateHeader {
  border: 1px solid #efefef;
  padding: 5px 10px;
  border-radius: 8px;
}

.realStateLandingPageSearchInput.ng-select {
  border: none;
}

.realStateLandingPageSearchInput.ng-select .ng-select-container {
  min-height: 45px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: white;
}

.realStateLandingPageSearchInput.ng-select
  .ng-select-container
  .ng-value-container {
  padding: 5px 15px;
}

.realStateLandingPageSearchInput.ng-select
  .ng-select-container
  .ng-value-container
  .ng-placeholder {
  color: #999;
  top: initial !important;
  padding-bottom: 0px !important;
}

.realStateLandingPageSearchInput.ng-select.ng-select-focused
  .ng-select-container {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.realStateLandingPageSearchInput.ng-select .ng-dropdown-panel {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.realStateLandingPageSearchInput.ng-select
  .ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option {
  padding: 6px 15px;
  text-align: left;
}

.realStateLandingPageSearchInput.ng-select
  .ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-marked {
  background-color: #f0f0f0;
}

.realStateLandingPageSearchInput.ng-select
  .ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected {
  background-color: #007bff;
  color: white;
}

.countryFlagPicker {
  width: 22px;
  margin-right: 5px;
  border-radius: 3px;
}

.otherSearchArea ul.dropdown-list {
  border-radius: 10px;
  margin-top: 4px !important;
}

.dropdown.locationSearchArea .dropdown-menu.show {
  padding: 0px;
  margin-top: 4px;
}

.form-label {
  color: #222;
  font-size: clamp(13px, 0.9vw, 14px) !important;
  margin-bottom: 2px !important;
}

.customButton {
  border-radius: 8px !important;
  padding: 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #fff !important;
  border: 0 !important;
}

.wizard-card .flex-grow-1 {
  position: relative;
}

.dropdown button.btn.bg-white.dropdown-toggle {
  background-color: transparent !important;
  padding: 0px 10px;
  border: 1px solid #dcdcdc;
  border-radius: 100px;
}

/* .dropdown button.btn.bg-white.dropdown-toggle:after {
  display: none;
} */

.dropdown button.btn.bg-white.dropdown-toggle {
  background-color: #fff !important;
  padding: 4px 8px;
  border: 1px solid #dcdcdc;
  border-radius: 100px;
  display: flex;
  align-items: center;
}

.profileAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 5px;
  line-height: 32px !important;
  border: 1px solid #dcdcdc;
  vertical-align: middle;
}

.profileHeader .profileName {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.dropdown.LoginDropDown ul.dropdown-menu {
  overflow-y: auto;
  margin-top: 10px !important;
  width: auto;
  padding: 10px !important;
  overflow-x: hidden;
  border-radius: 15px;
}

/* submit your property css start here */

.freeNotice {
  font-size: 22px;
  margin: 15px 0;
  font-style: italic;
  font-weight: 500;
}

.submitPropertyLeft {
  width: 50%;
  background-color: #f4ecff;
}

.submitPropertyContainer {
  border-radius: 15px;
}

.submitPropertyLeft h2.mb-4 {
  font-size: 28px;
}

.submitPropertyRight {
  width: 50%;
}

.propertyFeatures li .featureIcon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3a1497;
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
}

.propertyFeatures li {
  font-size: 16px;
}

.submitPropertyRight .payNowBtn {
  background: #fa5f1c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  transition: background 0.2s;
  padding: 10px !important;
  width: 100%;
}

.payNowBtn:hover {
  background: #d94e14;
}

.submitPropertyRight .priceText {
  font-size: 45px;
  color: #3a1497;
}

.submitPropertyRight a.selected {
  color: #7954d5;
  border-bottom: 1px dashed #7954d5 !important;
}

.submitPropertyRight .listingFee {
  font-size: 18px;
}

.homePropertyImg {
  width: 120px;
  float: inline-end;
  margin-top: 40px;
}

@media (max-width: 767px) {
  .submitPropertyLeft {
    width: 100%;
    border-radius: 10px;
  }

  .submitPropertyRight {
    width: 100%;
    padding: 10px 10px !important;
  }

  .submitPropertyContainer {
    display: block !important;
  }
}

/* submit your property css end here */

.reservePropertyCard .heading p {
  color: #7f7f7f;
  font-size: 16px;
  border-bottom: 1px solid #dadada;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.reservePropertyCard .heading h1 {
  font-size: 28px;
  font-weight: 600;
}

.reservePropertyCard .heading h2 {
  font-size: 22px;
  font-weight: 600;
}

.reservePropertyCard .heading h5 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 15px;
}

.reservePropertyCard {
  background-color: #fff;
  padding: 20px 30px;
  border-radius: 15px;
}

.reservationAmout {
  color: #e96b6b;
  font-size: 16px;
}

.reservationBox {
  font-family: Arial, sans-serif;
  width: 100%;
  margin-top: 20px;
}

.reservationRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.reservationRow h4 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}

.reservationRow .smallLink {
  display: block;
  font-size: 16px;
  margin-top: 0px;
}

.reservationRow .learnMore {
  font-size: 14px;
  color: #6641be;
  margin-left: 5px;
  border-bottom: 1px dashed;
  font-weight: 500;
}

.reserveInfoBar {
  width: 100%;
  background: #3e31cf;
  color: #ffffff;
  padding: 10px 15px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.UserLogin img.profileAvatar {
  margin-right: 0px;
}

.gallerySection {
  text-align: center;
  border: 1px dashed #635ef7;
  border-radius: 10px;
  background: #f5f6fe;
  padding: 24px 0 18px 0;
  margin-bottom: 35px;
}

.gallerySection .uploadIcon {
  font-size: 30px;
  margin-bottom: 5px;
}

.gallerySection .uploadInfo {
  color: #7878a0;
  font-size: 14px;
  margin-bottom: 12px;
}

.chooseFilesButton {
  background: #404852;
  color: #fff;
}

.chooseFilesButton:hover {
  color: #fff;
}

.buttonRow {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.backButton {
  border: 1px solid #cccccc;
  color: var(--PrimaryColor);
}

.borderRadius100 {
  border-radius: 100px;
}

.borderRadius10 {
  border-radius: 10px;
}

.progressHeader .progress-circle {
  background-color: var(--site-primary-color);
  display: block;
  margin: initial;
  line-height: 55px;
  text-align: center;
  margin-right: 30px;
  color: #fff;
}

.progressHeader {
  display: flex;
  padding: 0px 0px 10px;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 15px;
}

.wizardlustration .title {
  font-size: 28px;
  font-weight: 500;
  margin: 10px 0px 10px !important;
}

.wizardlustration img {
  width: 100px;
}

.wizardlustration {
  background-color: var(--site-primary-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #fff;
  text-align: center;
}

.modal-content.modalDynamic {
  padding: 20px;
}

.navigationBar {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
}

.modal-content.SchoolWizardModal {
  padding: 20px;
  border-radius: 30px;
  position: relative;
}

button.wizardCloseBtn.btn {
  position: absolute;
  right: -5px;
  top: -12px;
  padding: 0px;
  font-size: 25px;
  z-index: 12;
}

button.wizardCloseBtn.btn i {
  background-color: #fff;
  border-radius: 100px;
  color: var(--site-primary-color);
}

.dropImg i {
  color: var(--site-primary-color) !important;
}

.dropImg:hover {
  border-color: var(--site-primary-color) !important;
  background: #f0f4ff;
}

.dropImg {
  cursor: pointer;
  border: 2px dashed var(--site-primary-color);
}

/* deals home page css start here */

.logoContainer {
  height: 100%;
  cursor: pointer;
  width: 100%;
  position: relative;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logoImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Keep every logo inside the card regardless of its native aspect
   ratio. Overrides Bootstrap's `.img-fluid { height: auto }`, which
   was letting tall/wide logos break out and overlap neighbours. */
.logoContainer .logoImage {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dealPricePrimary {
  font-size: 18px;
  margin-right: 10px;
  color: var(--site-primary-color);
}

.dealPriceStrikethrough {
  font-size: 16px;
}

.storeItem {
  position: relative;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-image-slice: 1;
  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.175);
  width: 100%;
  height: 140px;
  background-color: #fff;
  padding: 16px;
  overflow: hidden;
}

.saveBadge {
  border-radius: 10px;
  font-size: 20px;
  color: white;
  text-align: center;
  background-color: var(--site-primary-color);
  position: absolute;
  text-align: center;
  left: 0;
  display: flex;
  opacity: 0;
  -webkit-transition: all 0.45s ease-in-out;
  -moz-transition: all 0.45s ease-in-out;
  -o-transition: all 0.45s ease-in-out;
  -ms-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
  background-color: var(--site-primary-color);
  text-transform: capitalize;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.storeItem:hover .saveBadge.saveBadgeA {
  opacity: 1;
}

/* Hover badge: keep the store name tidy and contained. */
.saveBadge.saveBadgeA {
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.3;
  word-break: break-word;
}

@media (max-width: 767px) {
  .storeItem {
    height: 120px;
    padding: 12px;
  }

  .saveBadge.saveBadgeA {
    font-size: 14px;
  }
}

.storeRow {
  margin-bottom: 20px;
}

.dealCard .dealImage {
  width: 100%;
  object-position: top;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0px 0px;
  display: block;
}
h2.mutedTextDark.businessName.font16 {
  margin-top: 10px;
  margin-bottom: 0px;
}
.dealBody {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dealTitle {
  max-width: 100%;
  margin: 12px 0 0;
  font-weight: 700;
  line-height: 1.3;
  /* Clamp to two lines so long deal names stay tidy without truncating
     to a single uninformative line. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card.dealCard.shadow-sm {
  border-radius: 10px;
  overflow: hidden;
}

/* ============================================================
   Main deal card — hero deal (right column of the deals header)
   ============================================================ */

/* Make the hero deal card fill its column so it matches the height of the
   left category-banner column (the Bootstrap row already stretches both
   columns equal; h-100 + flex makes the card's own content fill that height).
   The Swiper fills the leftover space and each slide's body grows to absorb
   it — the image stays a fixed 250px so the Swiper nav/pagination offsets
   below remain accurate. */
.dealCard .dealSwiper {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.dealCard .dealSwiper swiper-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dealCard .dealBody {
  flex: 0 1 auto;
}

/* Image wrapper: positioning context for the discount badge. */
.dealImageWrap {
  position: relative;
  flex: 0 0 auto;
}

/* Discount badge sitting over the deal image. */
.dealDiscountBadge {
  position: absolute;
  top: 14px;
  left: 14px;
  background-color: var(--site-primary-color);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.3px;
}

.dealExpiry {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

/* Price + CTA on one baseline-aligned row, price left / button right. */
.dealPriceCtaBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.dealPriceCtaBar .priceBlock {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dealPriceCtaBar .dealPricePrimary {
  font-size: 22px;
  font-weight: 700;
  margin-right: 0;
}

.viewDealBtn {
  border-radius: 8px;
  padding: 10px 22px;
  font-weight: 600;
  white-space: nowrap;
}

.dealDivider {
  opacity: 0.12;
}

/* Carousel position dots for the hero deal. */
.dealCarouselDots {
  margin-bottom: 8px;
}

.dealCarouselDots [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background-color: rgba(255, 255, 255, 0.6);
  opacity: 1;
  transition: all 0.3s ease;
}

.dealCarouselDots [data-bs-target].active {
  width: 22px;
  border-radius: 4px;
  background-color: #fff;
}

/* Left category grid: make tiles feel clickable. */
.dealCategoryGrid .card {
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.dealCategoryGrid .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

.wizardBody .formGroup input#mobile {
  border-left: 0px;
  border-radius: 0px 10px 10px 0px !important;
}

.filterBar .filterButton {
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 10px;
  font-weight: 500;
}

.filterBar .filterDropdown {
  background-color: white;
  border: 1px solid #dee2e6;
  color: #495057;
  padding-left: 20px;
  padding-right: 20px;
}

.sortButton i {
  font-size: 1rem;
}

.storeCard {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  cursor: pointer;
}

.cardImageWrapper {
  position: relative;
  overflow: hidden;
}

.cardBannerImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0px 0px;
}

.saveBadgeBtn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  font-size: 0.85rem;
  font-weight: bold;
  color: white;
  border-bottom-left-radius: 8px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.saveBadgeGreen {
  background-color: var(--site-primary-color);
}

h2.sectionTitle.dealsName {
  font-size: 24px;
  margin-bottom: 8px;
}

.cardTitle {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.cardDetail {
  font-size: 14px;
  line-height: 1.2;
}

.ratingPill {
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: bold;
  color: white;
  min-width: 35px;
  text-align: center;
}

.ratingPillGreen {
  background-color: #5cb85c;
}

/* Modern section title: dark navy heading with a gradient accent bar instead
   of the old filled badge. Used across the deal/event module headers. */
.bankOffersTitle {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #11144b;
  background: transparent;
  border: none;
  border-radius: 0;
}

.bankOffersTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    var(--site-primary-color),
    var(--Secondary_Color)
  );
}

.sectionBox .symbol i {
  position: relative;
  cursor: pointer;
  margin-left: 10px;
  color: var(--site-primary-color);
}

.couponBadge {
  background-color: var(--site-primary-color);
  border-radius: 5px;
  border: 1px dashed #fff;
}

.cardImageOverlay.cbqOverlay {
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
}

img.cbqCards {
  height: 100%;
  width: 100%;
  object-position: top;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .filterBar .filterButton {
    padding: 5px 12px;
    font-size: 0.85rem;
  }

  .cardImageOverlay.cbqOverlay {
    height: 100%;
  }

  .dealCard .dealImage {
    height: 100%;
  }

  .mainGalleryImage {
    height: auto !important;
  }

  .cardImageWrapper {
    height: auto;
  }
}

.categoryTabs {
  background-color: #fff;
  padding: 10px 0px;
}

.categoryTabs h3 {
  font-size: 22px;
  color: var(--site-primary-color);
  font-weight: 600;
}

@media (max-width: 767px) {
  .voucherCard {
    display: block !important;
  }

  .storeItemColorA.storeItem {
    height: 120px;
  }

  .checkOutletsButton {
    margin-top: 15px;
  }

  .componentContainer .headerSection {
    display: block !important;
  }

  .voucherCardsRow .giftVoucherCard .getButton {
    padding: 6px 10px;
    border-bottom: 5px solid #0a55d4;
    font-size: 12px;
  }

  .componentContainer .ratingBadge {
    min-width: 70px;
  }

  .voucherCard .saveButton {
    width: 100%;
    margin-top: 10px;
  }

  .componentContainer .logoWrapper {
    width: 90px !important;
    height: 90px !important;
  }

  .componentContainer .logoStrip {
    justify-content: center;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
}

.componentContainer {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.componentContainer .brandLogo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 5px;
}

.ratingBadge {
  text-align: right;
  background-color: #38a169;
  color: white;
  padding: 5px 10px;
  border-radius: 8px;
  font-weight: bold;
  line-height: 1.1;
  margin-left: 15px;
  min-width: 80px;
}

.ratingBadge .ratingValue {
  font-size: 1.25rem;
}

.ratingBadge .visitsCount {
  font-size: 0.7rem;
  font-weight: normal;
  opacity: 0.8;
}

.openStatus {
  color: #38a169;
  font-weight: 500;
}

.readMoreLink {
  color: #e91e63;
  text-decoration: none;
  font-weight: 500;
}

.voucherCard {
  background-color: #ebf5ff;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.voucherCard .voucherIcon {
  font-size: 22px;
  color: #4c8bf5;
}

.voucherCard .saveButton {
  background-color: #4c8bf5;
  color: white;
  font-weight: 500;
  padding: 6px 15px;
  border-radius: 6px;
  border: none;
}

.otherOutletsCard {
  background-color: #fce4ec !important;
  border-radius: 8px;
}

.otherOutletsCard .tagsIcon {
  font-size: 22px;
  color: #e91e63;
}

.outletButton {
  background-color: white !important;
  color: #e91e63 !important;
  border: 1px solid #e91e63 !important;
}

.componentContainerV2 {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.headerSection {
  padding-top: 10px;
}

.voucherTitle {
  font-weight: 600;
}

.voucherValidity {
  font-size: 0.85rem;
  color: #555 !important;
}

.outletsAndBought {
  font-size: 0.8rem;
  color: #333;
}

.fireIcon {
  color: #e91e63;
}

.headerDivider {
  border-top: 1px solid #eee;
  opacity: 1;
}

.checkOutletsButton {
  color: #e91e63;
  border: 1px solid #e91e63;
  background-color: transparent;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 8px;
  white-space: nowrap;
}

.checkOutletsButton:hover {
  background-color: #fce4ec;
}

.giftVoucherCard {
  background-color: #f7f9fc;
  border-radius: 8px;
  border: 1px solid #eee;
  height: 100%;
  display: flex;
  padding: 15px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.giftVoucherCard .voucherName {
  font-size: 18px;
  font-weight: 600;
}

.giftVoucherCard .refundStatus {
  font-size: 14px;
  color: #888;
}

.voucherInfo span.badge {
  background-color: var(--site-primary-color) !important;
}

.giftVoucherCard .getButton {
  background-color: #fff;
  color: #0a55d4;
  font-weight: 600;
  padding: 6px 15px;
  border-radius: 10px;
  border: 1px solid #0a55d4;
  white-space: nowrap;
  border-bottom: 5px solid #0a55d4;
}

.saveInfo {
  font-size: 14px;
  font-weight: 600;
  color: #0a55d4;
  border-radius: 4px;
  margin-top: 8px;
  text-align: center;
}

.saveIcon {
  font-size: 1rem;
}

.componentContainer .logoWrapper {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.componentContainer .dealLogo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.componentContainer .logoStrip {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* deals home page css end here */

.footerLinks a {
  color: #412096 !important;
  border-bottom: 1px dashed #412096;
  font-weight: 400;
}

.dealImage img {
  width: 100px;
  object-fit: cover;
  height: 100px;
  border-radius: 8px;
}

.dealImage {
  margin-right: 10px;
}

.voucherInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .saveInformation {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .giftVoucherCard .voucherInfo {
    display: block;
    align-items: center;
  }

  .voucherInfo .dealImage {
    margin-right: 0px;
  }

  .dealImage img {
    width: 100%;
    height: 140px;
  }

  .giftVoucherCard .voucherName {
    margin-top: 10px;
  }

  .voucherCardsRow .giftVoucherCard {
    display: block;
    padding: 10px;
  }

  .saveInformation .saveInfo {
    margin-top: 0px !important;
    margin-left: 15px;
  }
}

.mainGalleryImage {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dealInfoBox {
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-top: 30px;
  border: 1px solid #e0e0e0;
}

.dealInfoBox .sectionTitle {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
}

.dealInfoBox p {
  font-size: 14px;
  margin-bottom: 5px;
}

.purchaseCard {
  background: #fff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  border: 1px solid #eef0f4;
}

.pricingDisplay {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.alert.alertSuccess {
  background-color: var(--site-secondary-color);
  padding: 12px 14px;
  color: #000;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  margin-bottom: 18px;
}

.purchaseCard .buyButton,
button.btn.buyButton {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: none;
  border-radius: 12px;
  background-color: #1a9d60 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(26, 157, 96, 0.28);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.purchaseCard .buyButton:hover,
button.btn.buyButton:hover {
  background-color: #178a55 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(26, 157, 96, 0.35);
}

.purchaseCard .buyButton:active,
button.btn.buyButton:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(26, 157, 96, 0.25);
}

.modal-footer .btn-primary {
  background: var(--site-primary-color) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 7px 15px !important;
}

.dealCardFooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed #e3e6ec;
  text-align: center;
}

.dealCardFooter .dealExpiry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--site-primary-color);
}

button.btn.shareDealBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--site-primary-color);
  border-radius: 100px;
  color: var(--site-primary-color);
  background-color: transparent;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

button.btn.shareDealBtn:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.largeFinalPrice {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--site-primary-color);
}

.largeRegularPrice {
  font-size: 1.2rem;
  text-decoration: line-through;
  color: #9aa0ab;
}

.purchaseCard .d-grid {
  margin-top: 6px;
}

.purchaseCard .d-grid > .d-flex {
  font-size: 15px;
  color: #4b5563;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.purchaseCard .d-grid > .d-flex.border-bottom {
  border-color: #eef0f4 !important;
}

.purchaseCard .d-grid > .d-flex.fw-bold {
  font-size: 17px;
  color: #111827;
}

div#carouselExampleAutoplaying .arrowBox {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
  bottom: 90px;
}

div#carouselExampleAutoplaying button.carousel-control-prev,
button.carousel-control-next {
  opacity: 1;
}

div#carouselExampleAutoplaying button.carousel-control-prev:hover .arrowBox {
  background-color: #fff;
  opacity: 1;
  color: #000;
  transform: scale(1.1);
}

div#carouselExampleAutoplaying button.carousel-control-next:hover .arrowBox {
  background-color: #fff;
  opacity: 1;
  color: #000;
  transform: scale(1.1);
}

/* .sectionBox .boxbg h3 {
  width: 60%;
  background-color: var(--site-primary-color);
  padding: 10px 0;
  margin: 0px;
  color: #fff;
  border: 1px dashed #fff;
  border-radius: 5px;
  font-size: 24px;
  font-weight: 400;
} */

/* Modern section header row: clean underline separator instead of the old
   boxed shadow card. */
.sectionBox {
  display: flex;
  width: 100%;
  padding: 0 0 16px;
  margin-bottom: 8px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #eef0f4;
  align-items: center;
  justify-content: space-between;
}

/* Neutralise the bootstrap col wrappers around the title / view-all so the
   header lays out as a clean flex row. */
.sectionBox > div {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
}

/* View All: modern pill button. */
.sectionBox h5 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--site-primary-color);
  background: rgba(17, 20, 75, 0.04);
  border: 1px solid #e4e7ef;
  border-radius: 999px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.sectionBox h5:hover {
  background: var(--site-primary-color);
  color: #fff;
  border-color: var(--site-primary-color);
  transform: translateY(-1px);
}

.sectionBox .symbol i {
  position: relative;
  cursor: pointer;
  margin-left: 0;
  font-size: 14px;
  color: inherit;
}

.sectionBox .symbol {
  float: none;
}

/* Color Overrides to match the image */
.headerContainer .logoWrapperDeals img {
  width: 100px;
  height: auto;
}

/* Modern deals search bar */
.dealsSearchBar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 4px 4px 4px 16px;
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.dealsSearchBar:focus-within {
  border-color: var(--site-primary-color);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.1);
}

.dealsSearchIcon {
  color: #9aa0ab;
  font-size: 18px;
  line-height: 1;
}

.dealsSearchInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: #111827;
}

.dealsSearchInput::placeholder {
  color: #9aa0ab;
}

.dealsSearchSubmit {
  flex: 0 0 auto;
  height: 40px;
  min-width: 96px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background-color: var(--site-primary-color);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}

.dealsSearchSubmit:hover:not(:disabled) {
  filter: brightness(0.93);
}

.dealsSearchSubmit:active:not(:disabled) {
  transform: scale(0.98);
}

.dealsSearchSubmit:disabled {
  opacity: 0.7;
  cursor: progress;
}

@media (max-width: 768px) {
  .dealsSearchSubmit {
    min-width: 44px;
    padding: 0 14px;
  }
}

.headerIcons .cartBadge {
  font-size: 12px;
  width: 18px;
  line-height: 18px;
  height: 18px;
  text-align: center;
  padding: 0px;
}

@media (max-width: 768px) {
  .headerIcons {
    gap: 10px !important;
  }
}

button.btn.dealSearchBtn {
  height: 40px;
  background-color: var(--site-primary-color);
  color: #fff;
}

.dealsHeaderContent {
  display: flex;
  align-items: center;
  justify-content: end;
}

.couponSection {
  background: var(--site-primary-color);
  background: linear-gradient(
    to right,
    var(--site-secondary-color),
    var(--site-primary-color)
  );
  min-height: 500px;
  padding: 40px 0px;
}

.headerWrapper {
  border-bottom: 1px solid #eee;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #d9d9d9;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 40px !important;
}

.couponCard {
  background: #fff;
  padding: 20px 0px;
  margin: 0px 15px;
  border-radius: 10px;
}

.logoWrapper {
  height: 160px;
  padding: 20px;
}

.logoWrapper img.brandLogo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.border-dotted {
  border-top: 2px dotted #e0e0e0 !important;
}

.offerHeading {
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
}

.storeInfo,
.expiryText {
  font-size: 14px;
}

.getCodeButton {
  background-color: var(--site-primary-color);
  color: #fff;
  font-size: 15px;
  border-radius: 0;
  border-radius: 5px;
  padding: 8px;
}

.getCodeButton:hover {
  background-color: var(--site-primary-color);
  color: #fff;
}

.customPrevBtn,
.customNextBtn {
  border-radius: 5px;
  color: #fff;
  background-color: var(--site-primary-color);
  font-size: 18px;
  border: 0px;
}

.couponBadge h3 {
  margin-bottom: 0px;
  font-size: 22px;
  /* color: var(--site-primary-color); */
  border: 0px;
  padding: 0px;
}

.couponBadge i {
  color: #fff;
  font-size: 24px;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .headerWrapper {
    width: 94%;
    display: block !important;
  }

  .sectionBox .symbol {
    float: none;
    margin-top: 0;
  }

  .sectionBox .bankOffersTitle {
    font-size: 18px;
    padding: 0 0 0 14px;
  }

  .sectionBox h5 {
    padding: 7px 14px;
    font-size: 13px;
  }

  .couponBadge {
    justify-content: center;
    padding: 10px !important;
  }

  .couponBadge h3 {
    font-size: 20px;
  }

  .couponBadge i {
    font-size: 20px;
  }

  .couponSection {
    position: relative;
  }

  .sectionBox {
    display: block;
  }

  .couponCard {
    margin-bottom: 40px;
  }

  .navigationControls {
    margin-bottom: 20px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.hdfcCard {
  border-radius: 10px;
}

.hdfcCard .card-body.card {
  border-radius: 0px 10px 10px 0px;
}

.bankTitle {
  letter-spacing: 0.5px;
  font-size: 1.5rem;
}

.cashbackHighlight {
  font-size: 18px;
}

.termsLink {
  color: #3a1693;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

/* Compact, modern Terms & Conditions modal */
.termsModalDialog .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.22);
}

.termsModalDialog .modal-title {
  font-size: 1rem;
  color: #11144b;
}

.termsModalDialog .modal-body {
  padding-bottom: 18px;
}

.termsModalList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.termsModalList li {
  position: relative;
  padding: 6px 0 6px 20px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #4b5563;
}

.termsModalList li:not(:last-child) {
  border-bottom: 1px solid #f1f2f5;
}

.termsModalList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--site-primary-color);
}

/* Compact, modern "How to Apply" modal */
.howToApplyModal .modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.22);
}

.howToApplyModal .modal-title {
  font-size: 1rem;
  color: #11144b;
}

.howToApplyIntro {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 12px;
}

.howToApplySteps {
  margin: 0 0 18px;
  padding-left: 18px;
}

.howToApplySteps li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #374151;
  padding: 3px 0;
}

.howToApplySteps li::marker {
  color: var(--site-primary-color);
  font-weight: 700;
}

/* Coupon code block with a dashed "ticket" look. */
.couponCodeBox {
  border: 1.5px dashed var(--site-primary-color);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(17, 20, 75, 0.04);
}

.couponCodeLabel {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa0ab;
  margin-bottom: 6px;
}

.couponCodeRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.couponCodeValue {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #11144b;
}

.couponCopyBtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: var(--site-primary-color);
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.couponCopyBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.imageNavButtons button {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

/* Ensure the image covers the area on desktop */
.hdfcCard img {
  height: 100%;
  object-fit: cover;
}

button.applyNowBtn.btn {
  background-color: var(--site-primary-color);
  padding: 8px;
  color: #fff;
  font-size: 15px;
}

a.btnCardDetail {
  width: 100%;
  display: block;
  background-color: var(--site-primary-color);
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
  color: #fff !important;
}

.card-body.dealBody {
  z-index: 999 !important;
  position: relative;
}

.customImageLg {
  object-fit: cover;
}

.customImageMd {
  object-fit: cover;
  height: 100%;
}

/* .customGradient {
  background: linear-gradient(0deg, rgb(241 90 37) 0%, rgba(0, 0, 0, 0) 40%);
  padding: 10px;
  background: linear-gradient(0deg,
      var(--site-primary-color) 0%,
      color-mix(in srgb, var(--site-secondary-color), transparent 70%) 30%);
} */

.cardHeaderTitle {
  font-weight: 500;
  font-size: 16px;
}

.storeCardsRow .col-12 {
  display: flex;
}

.storeCard {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.storeCard .cardBannerImage {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

.storeCard .card-body.cardContent {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.storeCard .cardTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
  width: 100%;
}

.storeCard .cardDetail {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  margin-bottom: 10px;
}

.storeCard .btnCardDetail {
  margin-top: auto;
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--site-primary-color);
  color: #fff;
  padding: 10px 0;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}

.storeCard .btnCardDetail:hover {
  background-color: #d1491e;
  color: #fff;
}

/* Ensure the search group doesn't clip the menu */
.searchGroup {
  position: initial;
}

/* Force the dropdown to span the entire screen width */
.dealsMegaMenu {
  border-radius: 5px;
  border: none;
  border-top: 2px solid var(--site-primary-color);
  width: 90%;
  top: 20px !important;
  inset: initial !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: 20px !important;
}

/* Styling the links inside the mega menu */
.dealsMegaMenu a {
  color: #333;
  text-decoration: none;
  display: block;
  padding: 10px 0 !important;
  text-transform: uppercase;
  font-size: 15px;
}

.dealsMegaMenu a:hover {
  color: var(--site-primary-color);
  padding-left: 5px;
  transition: all 0.2s;
}

.liveBigDotSupport2 .input-group-text.dealsCountryCode {
  border-radius: 10px 0px 0px 10px !important;
  cursor: pointer;
}

.liveBigDotSupport2 input.form-control.dealsFormControl {
  border-radius: 0px 10px 10px 0px !important;
  margin-left: 0px !important;
}

.imageNavButtons {
  z-index: 1;
  margin: 0px !important;
  bottom: 10px !important;
  right: 10px !important;
  width: 100%;
  display: flex;
  justify-content: end;
}

.accommodationBtn {
  border: 1px solid #15285d !important;
  color: #15285d !important;
  opacity: 1 !important;
}

.accommodationBtn:hover {
  background-color: #15285d !important;
  color: #ffffff !important;
}

.dealNotFound img.dealImage {
  height: 396px;
  object-fit: cover;
}

/* event site page css start here */

.eventCustomCarousel {
  /* background: linear-gradient(90deg, #ffffff 0%, #e0e0e0 100%); */
  background-color: var(--site-primary-color);
  background: linear-gradient(
    to right,
    var(--Secondary_Color),
    var(--site-primary-color)
  );
  border-radius: 15px;
  overflow: hidden;
  margin: auto;
  position: relative;
}

.CarouselItemContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
}

.eventDetails {
  flex: 1;
  padding-right: 20px;
  width: 70%;
}

.eventDateTime {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.eventDetails .eventTitle {
  font-weight: 800;
  font-size: 32px;
  margin-bottom: 10px;
  color: #000;
  line-height: 35px;
}

.eventlocation {
  font-size: 18px;
  color: #444;
  margin-bottom: 10px;
}

.eventPrice {
  font-weight: 600;
  font-size: 16px;
  color: #000;
  margin-bottom: 15px;
}

.eventBtnBook {
  background-color: var(--site-primary-color);
  color: white;
  padding: 10px 30px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
}

/* Poster Image Styling */
.eventPosterContainer {
  /* flex: 0 0 350px; */
  width: 30%;
  height: 500px;
}

.eventPosterImg {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Carousel Indicators - Dots */
.carousel-indicators [data-bs-target] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #999;
}

.carousel-indicators .active {
  background-color: var(--site-primary-color);
}

/* Custom Navigation Arrows */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
  /* Makes white arrows black */
  width: 1.5rem;
}

@media (max-width: 767px) {
  .CarouselItemContent {
    padding: 20px 0px;
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
  }

  .eventPosterContainer {
    /* flex: 0 0 350px; */
    width: 100%;
    height: initial;
  }

  .eventDetails {
    padding: 15px;
    width: 100%;
  }

  .UserLogin .profileAvatar {
    border: none;
    margin: 0px;
  }

  .eventCustomCarousel {
    border-radius: 0px;
  }
}

/* Events hero now uses a Swiper web component. Pull the nav arrows in from
   the edges and give them a frosted-glass look (styled via Swiper's shadow
   parts), with the dark dots/chevrons matching the old Bootstrap controls. */
.eventSwiper {
  --swiper-navigation-color: #11144b;
  /* Keeps Swiper's vertical-centring math aligned with the 42px tile below. */
  --swiper-navigation-size: 42px;
  --swiper-navigation-sides-offset: 26px;
  --swiper-pagination-color: #11144b;
}

/* Hero nav arrows: modern rounded-square buttons — frosted white tile with a
   navy chevron that inverts to a solid navy fill on hover.
   The chevron SVG fills 100% of the button's content box (Swiper's shadow
   CSS), so the 8px padding shrinks the rendered icon to ~24px inside the
   42px tile (42 − 8·2 − 1·2 border = 24). */
.eventSwiper::part(button-prev),
.eventSwiper::part(button-next) {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 8px;
  border-radius: 12px;
  color: #11144b;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(17, 20, 75, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.eventSwiper::part(button-prev):hover,
.eventSwiper::part(button-next):hover {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(17, 20, 75, 0.32);
}

.eventSwiper::part(button-prev):active,
.eventSwiper::part(button-next):active {
  transform: translateY(0) scale(0.96);
}

/* Square-themed pagination: small rounded squares that stretch into a bar
   when active. */
.eventSwiper::part(bullet),
.eventSwiper::part(bullet-active) {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  opacity: 1;
  background: rgba(17, 20, 75, 0.3);
  transition:
    width 0.3s ease,
    background 0.3s ease;
}

.eventSwiper::part(bullet-active) {
  width: 28px;
  background: #11144b;
}

.eventCard {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  background: #fff;
  transition: transform 0.2s;
  cursor: pointer;
}

.eventCard:hover {
  transform: translateY(-5px);
}

.imageContainer {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.eventImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cardContent {
  padding: 16px;
}

.cardContent .eventDate {
  color: var(--site-primary-color);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.cardContent .eventTitle {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  line-height: 1.3;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardContent .eventLocation {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 2px;
}

.cardContent .eventPrice {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
}

.exploreContainer {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
}

.categoryScrollWrapper {
  display: flex;
  overflow-x: auto;
  /* gap: 15px; */
  padding-bottom: 10px;
  scrollbar-width: none;
  margin-top: 20px;
  /* flex: 0 0 auto; */
  /* width: 130px; */
  /* text-align: center; */
}

.categoryScrollWrapper::-webkit-scrollbar {
  display: none;
}

.categoryCard {
  /* flex: 0 0 auto; */
  width: 110px;
  height: 150px;
  flex: 0 0 auto;
  width: 130px;
  text-align: center;
  /* border: 1px solid #e8e8e8; */
  /* border-radius: 10px; */
  /* background: linear-gradient(180deg, #ffffff 0%, #fff9e6 100%); */
  /* display: flex; */
  flex-direction: column;
  /* align-items: center; */
  justify-content: space-between;
  /* padding: 10px 5px; */
  /* cursor: pointer; */
  /* transition: transform 0.2s ease; */
}

.categoryCard:hover {
  transform: translateY(-3px);
  border-color: var(--site-primary-color);
}

/* .categoryLabel {
        font-size: 0.65rem;
        font-weight: 800;
        color: #7a632a;
        text-transform: uppercase;
        text-align: center;
    } */

.categoryIcon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.horizontalScroll {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  /* padding-bottom: 10px; */
  scrollbar-width: none;
  margin-top: 25px;
}

.horizontalScroll::-webkit-scrollbar {
  display: none;
}

/* Safari/Chrome */
.horizontalScroll .artistCard {
  flex: 0 0 auto;
  width: 130px;
  text-align: center;
}

.horizontalScroll .artistImageWrapper {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 10px;
}

.horizontalScroll .artistImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100px;
  border: 2px solid #9e9e9e;
}

.horizontalScroll .artistName {
  font-size: 18px;
  font-weight: 600;
}

.sectionWrapper {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
}

.hdfcCard .row.g-0 {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.hdfcCard .col-md-5 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 0;
}

.bankImage {
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px 0 0 12px;
}

.hdfcCard owl-carousel-o,
.hdfcCard .owl-carousel,
.hdfcCard .owl-stage-outer,
.hdfcCard .owl-stage,
.hdfcCard .owl-item {
  height: 100% !important;
}

.hdfcCard .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hdfcCard .d-grid {
  margin-top: auto;
  margin-bottom: 10px;
}

.termsLink {
  display: inline-block;
  width: 100%;
  padding-bottom: 5px;
}

.hdfcCard .row.g-0 {
  height: 100%;
}

.eventHeroSection img.img-fluid {
  width: 100%;
  border-radius: 10px;
}

.eventDetailPage .ticketCard {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ticketCard button.btn.buyButton {
  position: absolute;
  bottom: 20px;
  left: 50%;
  max-width: 90%;
  transform: translateX(-50%);
}

.eventDetailPage {
  background: linear-gradient(
    to right,
    var(--Secondary_Color),
    var(--site-primary-color)
  );
  padding: 20px 0px;
}

.galleryImg {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
}

.artistThumb {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
}

/* event site page css end here */

.addtionalInfoBtn.btn {
  background-color: var(--site-primary-color);
  color: #fff;
  margin-top: 20px;
}

/* new deals Ui top banner */

.grandHeroSection {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 10px auto;
  border-radius: 5px;
}

.heroBackgroundImage {
  height: 450px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: transform 6s ease;
}

.overlayGradientLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  z-index: 1;
}

.glassInfoPanel {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left: 5px solid var(--site-primary-color);
  padding: 25px 35px;
  border-radius: 0 15px 15px 0;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  max-width: 600px;
  animation: fadeUpAnimation 1s ease-out;
}

.mainHeadlineText {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.subDescriptionText {
  color: #e0e0e0;
  font-size: 1rem;
  font-weight: 300;
  margin-bottom: 10px;
  max-width: 95%;
}

.accentColorText {
  color: var(--site-primary-color);
}

.pricingWrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.priceTagContainer {
  color: #fff;
}

.oldPriceText {
  text-decoration: line-through;
  color: #bbb;
  font-size: 0.9rem;
  display: block;
}

.currentPriceText {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--site-primary-color);
}

.perNightLabel {
  font-size: 0.8rem;
  color: #fff;
}

.primaryActionButton {
  background-color: var(--site-primary-color);
  border: none;
  padding: 10px 30px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #212529;
}

.primaryActionButton:hover {
  background-color: #fff;
  color: var(--site-primary-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px var(--site-primary-color);
}

/* 6. Custom Arrows */
.navCircleButton {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s;
}

.navCircleButton:hover {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
}

/* Bootstrap Overrides */
.carousel-indicators {
  margin-bottom: 1rem;
}

.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  background-color: #fff;
}

.carousel-indicators .active {
  background-color: var(--site-primary-color);
  transform: scale(1.2);
}

@keyframes fadeUpAnimation {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

/* middle banner */

/* .seasonalImageSliderSection {
  width: 100%;
  margin-top: 20px;
  position: relative;
  padding: 0px 10px !important;
} */

.promoBannerImage {
  width: 100%;
  /* height: 400px; */
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
}

.customDotIndicators {
  bottom: 15px;
}

.customDotIndicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.1);
  margin: 0 6px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.customDotIndicators .active {
  background-color: #fff;
  transform: scale(1.3);
  opacity: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* adds banner */

.dealsHeaderBadge {
  background-color: var(--site-primary-color);
  color: #fff;
  padding: 8px 20px;
  border-radius: 6px;
  display: inline-block;
  font-weight: 600;
  font-size: 1.2rem;
}

/* 2. View All Link */
.viewAllLink {
  text-decoration: none;
  color: #333;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.viewAllLink i {
  color: var(--site-primary-color);
  margin-left: 8px;
}

.dealBannerCard {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.dealBannerCard:hover {
  transform: scale(1.03);
}

.dealBannerImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.customCarouselBtn {
  width: 40px;
  height: 40px;
  background-color: #e9ecef;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-primary-color);
  transition: all 0.3s ease;
  position: absolute;
}

.customCarouselBtn:hover {
  background-color: var(--site-primary-color);
  color: white;
}

/* ============================================================
   Deals page sliders (Swiper) — replaces the old Bootstrap carousels.
   Arrows/bullets live in the swiper element's shadow DOM, so they are
   themed through Swiper's CSS custom properties (these are inherited,
   so setting them on the host element reaches the shadow tree).
   ============================================================ */

/* Hero banner */
.heroSwiper {
  width: 100%;
  border-radius: 5px;
  --swiper-theme-color: #fff;
  --swiper-navigation-size: 28px;
  --swiper-pagination-color: var(--site-primary-color);
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.7;
}

.heroSwiper .topBannerImage {
  display: block;
  width: 100%;
}

/* Main hero deal card: arrows + dots sit over the 250px image, not the body. */
.dealSwiper {
  --swiper-theme-color: var(--site-primary-color);
  --swiper-navigation-size: 22px;
  --swiper-navigation-color: #fff;
  --swiper-navigation-top-offset: 125px;
  --swiper-navigation-sides-offset: 16px;
  --swiper-pagination-color: #fff;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.6;
  --swiper-pagination-bottom: auto;
  --swiper-pagination-top: 222px;
}

/* Seasonal banner (dots only, sitting on the dark image). */
.seasonalSwiper {
  border-radius: 8px;
  --swiper-theme-color: #fff;
  --swiper-pagination-color: #fff;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.5;
}

/* Deal banner grid: responsive slides-per-view via the breakpoints attr. */
.dealsGridSwiper {
  padding: 0 4px;
  --swiper-theme-color: var(--site-primary-color);
  --swiper-navigation-size: 22px;
  --swiper-navigation-sides-offset: 4px;
}

/* .dealsGridSwiper .dealBannerImg {
  height: 200px;
} */

/* .carousel-control-prev {
  width: 50%;
  justify-content: flex-start;
  left: 10px;
}

.carousel-control-next {
  width: 50%;
  justify-content: flex-end;
  right: 10px;
} */

.selectCountryNotFound {
  padding: 12px 12px;
  border-radius: 8px;
  background-color: var(--site-primary-color);
  border: none;
  color: #ffffff;
  font-size: 16px;
}

.adImage {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  object-fit: cover;
  margin-top: 20px;
}

/* education school listing view css start here */

.educationSchoolCard {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.educationSchoolCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border-color: var(--site-primary-color);
}

/* Image Section */
.educationSchoolCard .imageWrapper {
  position: relative;
  height: 100%;
  min-height: 180px;
  background: #eee;
}

.educationSchoolCard .schoolImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Default (restaurant/other) list card: attributes are sparse, so the card
   height varies a lot. Pin the image to a fixed height so it doesn't stretch
   tall and look odd — unlike education, which always has a full info grid. */
.educationSchoolCard.defaultListCard .imageWrapper {
  height: auto;
  min-height: 0;
}

.educationSchoolCard.defaultListCard .schoolImage {
  height: 200px;
  display: block;
}

/* Grid view: image is stacked on top of the content, so height:100% can't
   resolve and the image falls back to its natural aspect ratio — giving
   wildly uneven card heights. Pin it to a fixed height for both education
   and restaurant/default grid cards. */
.gridViewEducation .imageWrapper {
  height: 200px;
  min-height: 200px;
}

.gridViewEducation .schoolImage {
  height: 100%;
  display: block;
}

/* .wishlistBtn {
            position: absolute;
            top: 8px;
            left: 8px;
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            cursor: pointer;
            z-index: 2;
            transition: color 0.2s;
            display: none;
        }

        .wishlistBtn:hover {
            color: #dc3545;
        } */

/* Content Section */
.contentWrapper {
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header */
.contentWrapper .headerSection {
  margin-bottom: 4px;
  display: block;
  padding-top: 0px;
}

.contentWrapper .schoolName {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

/* .verifiedBadge {
  font-size: 0.7rem;
  color: var(--site-primary-color);
  background: var(--site-secondary-color);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 5px;
  vertical-align: middle;
  font-weight: 600;
} */

.verifiedBadge {
  float: right;
  width: 80px;
}

.ratingBadgeListing {
  background: var(--site-tertiary-color);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.contentWrapper .locationText {
  font-size: 14px;
  margin: 6px 0px;
}

.contentWrapper .locationText i {
  color: var(--site-primary-color);
}

/* --- CSS ONLY SHOW MORE/LESS --- */
.descCheckbox {
  display: none;
  /* Hide the checkbox input */
}

.descText {
  font-size: 0.8rem;
  margin-bottom: 2px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Logic: When checkbox is checked, remove line clamp */
.descCheckbox:checked ~ .descText {
  -webkit-line-clamp: unset;
}

.toggleLabel {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--site-primary-color);
  cursor: pointer;
  text-decoration: underline;
  display: inline-block;
  margin-bottom: 10px;
}

/* Label Text Switching */
.descCheckbox:checked ~ .toggleLabel::before {
  content: "Show Less";
}

.descCheckbox:not(:checked) ~ .toggleLabel::before {
  content: "Show More";
}

/* Info Grid with Labels */
.infoGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 15px;
  background: #fbfbfb;
  border: 1px dashed #e0e0e0;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.infoItem {
  color: #333;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px;
}

.infoItem i {
  color: var(--site-primary-color);
}

.infoLabel {
  margin-right: 4px;
}

/* .infoValue {
            font-weight: 600;
            color: #333;
        } */

/* Footer */
.cardFooter {
  margin-top: auto;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feeLabel {
  font-size: 15px;
  display: block;
  margin-bottom: 5px;
  line-height: 1;
}

.feeValue {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--site-primary-color);
}

.actionWrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qrCode {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.viewDetailsBtn {
  background: var(--site-primary-color);
  color: #fff;
  border: none;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s;
}

.viewDetailsBtn:hover {
  background: #d1400e;
  color: #fff;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .infoGrid {
    grid-template-columns: 1fr;
    /* Stack info on mobile */
  }

  .imageWrapper {
    min-height: 160px;
  }
}

/* education school listing view css start here */

.portalGlobalLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  /* IMPORTANT */
}

/* auto mobile listing css start here */

.carLisingCard {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px;
  background: white;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.carLisingCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.cardRow {
  min-height: 280px;
}

.calculateBtn {
  background-color: var(--DefaultButtonBgColor);
  color: #fff;
  font-weight: 500 !important;
  border-radius: 10px;
}

.specItem {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  flex-direction: column;
}

.carouselContainer {
  height: 100%;
  position: relative;
}

.verifiedBadge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #10b981;
  color: white;
  font-size: 0.65rem;
  padding: 0px 8px;
  border-radius: 4px;
  z-index: 10;
  /* Image ke upar */
  font-weight: 600;
}

.carouselInner,
.carouselItem {
  height: 100%;
  display: block !important;
}

.carImg {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.badgeOverlay {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
}

.cardBodyCustom {
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.headerSection {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.carTitle {
  font-weight: 700;
  font-size: 20px;
  color: #212529;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.locationText {
  color: var(--text-gray);
  font-size: 0.9rem;
}

.viewBtn {
  background-color: var(--site-primary-color);
  color: white;
  font-weight: 600;
  padding: 8px 25px;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 0.85rem;
  border: none;
  transition: 0.3s;
  white-space: nowrap;
}

.viewBtn:hover {
  background-color: var(--site-tertiary-color);
  color: white;
}

.descriptionText {
  color: var(--text-gray);
  font-size: 0.95rem;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.priceStrip {
  border: 1px solid var(--site-primary-color);
  color: var(--site-primary-color);
  padding: 8px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 13px 0;
}

.priceLabel {
  font-size: 0.9rem;
  opacity: 0.95;
  font-weight: 500;
}

.currentPrice {
  font-size: 20px;
  font-weight: 700;
}

.oldPrice {
  text-decoration: line-through;
  font-size: 12px;
  opacity: 0.6;
  margin-right: 10px;
  color: rgb(81, 79, 79);
  font-weight: 400;
}

.specsRow {
  display: flex;
  border-top: 1px solid #eee;
}

.specItem {
  flex: 1;
  text-align: center;
  border-right: 1px solid #eee;
}

.descriptionText span {
  color: var(--DefaultButtonBgColor) !important;
  cursor: pointer !important;
}

.specItem:last-child {
  border-right: none;
}

.specIcon {
  color: var(--site-primary-color);
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.specTitle {
  font-size: 0.7rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.specValue {
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
}

.extraDetailsScanner img.verifiedBadge {
  background-color: transparent;
  float: inline-end;
  text-align: right;
  right: 0px !important;
  left: auto;
}

.listingCard {
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  border: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.listingCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* automobile listing css end here */

/* automobile grid css start here */

.carImage {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.listingCard {
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  border: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.carouselWrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.cardPrice {
  color: var(--site-primary-color);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

.oldPrice {
  text-decoration: line-through;
  font-size: 12px;
  opacity: 0.6;
  margin-right: 10px;
  color: rgb(81, 79, 79);
  font-weight: 400;
}

.specsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.specTag {
  background-color: #f1f3f4;
  color: #000;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.locationText {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 10px;
}

.viewDetailBtn {
  width: 100%;
  background-color: var(--site-primary-color);
  color: white;
  border: none;
  padding: 8px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  margin-top: auto;
  transition: 0.3s;
}

/* automobile grid css end here */

/* event detail page css start here */

:root {
  --eventsiteBg: #f4f4f5;
  --eventsiteSurface: #ffffff;
  --eventsiteSurfaceHover: #fafafa;
  --eventsiteText: #09090b;
  --eventsiteTextMuted: #52525b;
  --eventsiteAccent: #4f46e5;
  --eventsiteAccentHover: #4338ca;
  --eventsiteRadius: 24px;
  --eventsiteBorder: 1px solid rgba(0, 0, 0, 0.06);
  --eventsiteShadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.eventsiteBtnPrimary {
  background-color: var(--eventsiteAccent);
  color: #ffffff;
  font-weight: 600;
  border: none;
  padding: 14px 28px;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eventsiteBtnPrimary:hover {
  background-color: var(--eventsiteAccentHover);
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
  color: #ffffff;
}

/* --- Detail Page Specifics --- */
.eventsiteHero {
  position: relative;
  height: 70vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
}

.eventsiteHeroBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.eventsiteHeroGradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--eventsiteBg) 0%,
    rgba(244, 244, 245, 0.8) 40%,
    rgba(244, 244, 245, 0.1) 100%
  );
  z-index: -1;
}

.eventsiteDetailTitle {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--eventsiteText);
}

.eventsiteDetailSlogan {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--eventsiteAccent);
  margin-bottom: 20px;
}

.eventsiteTags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.eventsiteHeroMeta {
  color: var(--eventsiteTextMuted);
  font-weight: 500;
}

.eventsiteDetailContainer {
  margin-top: -30px;
  position: relative;
  z-index: 10;
}

/* Bento Info Boxes */
.eventsiteBentoBox {
  background: var(--eventsiteSurface);
  border: var(--eventsiteBorder);
  border-radius: var(--eventsiteRadius);
  box-shadow: var(--eventsiteShadow);
  padding: 30px;
  margin-bottom: 24px;
}

.eventsiteBentoTitle {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--eventsiteAccent);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.eventsiteBentoText {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--eventsiteTextMuted);
}

/* Detail Page Links & Forms */
.eventsiteEmailLink {
  color: var(--eventsiteAccent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s;
}

.eventsiteEmailLink:hover {
  color: var(--eventsiteAccentHover);
  border-bottom-color: var(--eventsiteAccentHover);
}

.eventsiteShareLink {
  color: var(--eventsiteTextMuted);
  text-decoration: none;
  transition: color 0.2s;
}

.eventsiteShareLink:hover {
  color: var(--eventsiteText);
}

/* Floating Ticket Card */
.eventsiteTicketCard {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border: var(--eventsiteBorder);
  border-radius: var(--eventsiteRadius);
  padding: 30px;
  position: sticky;
  top: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.eventsiteTicketType {
  color: var(--eventsiteAccent);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.eventsitePriceBig {
  font-size: 3rem;
  font-weight: 900;
  color: var(--eventsiteText);
  line-height: 1;
  margin-bottom: 5px;
}

.eventsiteQuantityBox {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.eventsiteQuantityLabel {
  color: #000;
  font-weight: 600;
}

.eventsiteDecription {
  font-size: 12px;
}

.eventsiteQuantityBox .eventsitePriceBig {
  font-size: 28px;
  margin-bottom: 0px;
}

button.eventSiteBuyBtn {
  background-color: #2ea546;
  border: 0px;
  padding: 5px 15px;
  border-radius: 8px;
  color: #fff;
  line-height: 20px;
  font-size: 14px;
}

.eventsiteQuantitySelect {
  color: var(--eventsiteText);
  font-weight: 600;
}

@media (max-width: 768px) {
  .eventsiteListCard {
    flex-direction: column;
  }

  .eventsiteListCardImgWrapper {
    width: 100%;
    height: 250px;
  }

  .eventsiteDetailTitle {
    font-size: 2.5rem;
  }

  .eventsiteHeroBg {
    object-position: top;
  }
}

.orderingFooterSection {
  border-top: 1px dashed #8b8b8b;
  margin-top: 15px;
  padding: 15px 0;
}

.bigdotUpiFooter p,
.narrowFooter p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
  line-height: 14px;
  text-align: right;
}

.orderingFooterSection {
  border-top: 1px dashed #8b8b8b;
  margin-top: 15px;
  padding: 15px 0;
}

.bigdotUpiFooter p,
.narrowFooter p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
  line-height: 14px;
  text-align: right;
}

/* .cWebcardmap {
    height: 400px !important;
    width: 100%;
    padding: 2% 0;
} */

/* Pricing Layout */
.eventsiteTicketPriceRow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.eventsitePriceOriginal {
  text-decoration: line-through;
  color: var(--eventsiteTextMuted);
  font-size: 1.25rem;
  font-weight: 600;
}

/* Urgency Badges based on [Available] column */
.eventsiteUrgencyBadge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eventsiteBadgeWarning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.eventsiteBadge {
  background: #fff;
  border: 1px solid var(--eventsiteAccent);
  color: var(--eventsiteAccent);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.eventsiteBadgeDanger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.eventsiteTicketBusiness {
  border-top: 4px solid var(--eventsiteAccent);
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(79, 70, 229, 0.1);
}

.eventsiteTicketPremium {
  background: var(--eventsiteText);
  /* Dark background */
  color: var(--eventsiteSurface);
}

.eventsiteTicketPremium .eventsiteTicketType {
  color: #fbbf24;
}

/* Gold accent */
.eventsiteTicketPremium .eventsitePriceBig,
.eventsiteTicketPremium .eventsiteQuantityLabel,
.eventsiteTicketPremium .eventsiteQuantitySelect {
  color: var(--eventsiteSurface);
}

.eventsiteTicketPremium .eventsitePriceOriginal,
.eventsiteTicketPremium .eventsiteTextMuted {
  color: #a1a1aa;
}

.eventsiteTicketPremium .eventsiteQuantityBox {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.eventsiteTicketPremium .eventsiteQuantitySelect option {
  color: #000;
}

/* Fix dropdown text color on dark mode */
.eventsiteTicketPremium .eventsiteBtnPrimary {
  background-color: #fbbf24;
  color: #000;
}

.eventsiteTicketPremium .eventsiteBtnPrimary:hover {
  background-color: #f59e0b;
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.3);
}

.eventsiteTicketPremium .eventsiteShareLink {
  color: #a1a1aa;
}

.eventsiteTicketPremium .eventsiteShareLink:hover {
  color: #fff;
}

.eventsiteTicketCard {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.eventsiteTicketActionArea {
  margin-top: auto;
  /* Pushes the button to the bottom so cards align */
}

/* event detail page css end here */

.mainCtaBtn {
  background: #ff4a5f;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 25px !important;
  width: 100%;
  transition: background 0.16s;
}

.mainCtaBtn:hover {
  background: #de2042;
  color: #fff;
}

.toggleSwitch {
  width: 38px;
  height: 22px;
  background: #00897b;
  border-radius: 15px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 7px;
  top: 3px;
}

.toggleSwitch:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2.4px;
  width: 18px;
  height: 17px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}

/* ══════════════════════════════════════════════════════════
   MIGRATED COMPONENT STYLES
   Auto-consolidated from component .css / .scss files.
   Source paths preserved in section banners. wedding-collections
   was skipped (still lives in its component file).
   ══════════════════════════════════════════════════════════ */

/* ── src/app/pages/Classified/property/homeLoanBox/home-loan-box/home-loan-box.component.css ── */
.dropImg {
  cursor: pointer;
  border: 2px dashed #67a9ff;
  padding: 40px 20px;
  text-align: center;
  border-radius: 12px;
  min-height: 150px;
  background: #f8f9ff;
  transition: all 0.3s ease;
}

.dropImg:hover {
  border-color: #0056b3;
  background: #f0f4ff;
}

.preview-img {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  border-radius: 8px;
}

/* ── src/app/pages/Classified/property/property-detail/property-detail.component.css ── */
.text-danger.small {
  color: #e74c3c;
  font-size: 0.85rem;
  margin-top: 4px;
  min-height: 18px;
  text-align: left;
  padding-left: 2px;
}
input.ng-invalid.ng-touched {
  border-color: #e74c3c !important;
  box-shadow: 0 0 3px #e74c3c22;
}

.thumbImg {
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s ease;
  border-radius: 4px;
}

.thumbImg.active {
  border: 2px solid #007bff;
}

#mainProductImage {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  background-color: #ffffff;
  border-radius: 8px;
}

.attributesGridContainer .row {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
}

.propertyListingAttributeItem {
  display: flex !important;
  align-items: center !important;
  gap: 15px;
  padding: 14px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease;
  width: 100% !important;
  margin: 0 !important;
}

.propertyListingAttributeItem:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.propertyListingAttributeItem i {
  color: #fb641b !important;
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.propertyListingAttributeItem span {
  font-size: 14px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  word-break: break-word;
  line-height: 1.5;
}

.propertyListingAttributeItem strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.productCardsArea.card {
  border-radius: 20px;
  border: 1px solid #edf2f7;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* ── src/app/pages/Classified/property/property-grid-view/property-grid-view/property-grid-view.component.css ── */

.propertyCard .propertyImage img {
  object-fit: contain !important;
  background-color: #f8f9fa;
  height: 200px !important;
}

.propertyCard .propertyImage {
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  overflow: hidden;
}

/* ── src/app/pages/Classified/property/property-header/desktop-header/desktop-header.component.css ── */
.dropdown-toggle::after {
  display: inline-block;
}

.disabledDropdown::after {
  display: none !important;
}

.disabledDropdown {
  pointer-events: none;
  opacity: 0.6;
}

/* ── src/app/pages/Classified/property/property-list-item/property-list-item.component.css ── */

.propertyListingImageContainer {
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 200px; /* Consistent height for list items */
}

.propertyListingImageContainer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f8f9fa;
}

.carousel-item.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── src/app/pages/FormWizard/form-wizard/form-wizard.component.css ── */
/* Navigation Container */
.d-flex.justify-content-between.align-items-center.mt-4 {
  padding-top: 20px;
  border-top: 1px solid #eee;
}

/* Common Button Styles */
.btn {
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

/* Back Button (Outline Style) */
.backBtn {
  border: 2px solid #e0e0e0 !important;
  color: #666 !important;
  background-color: transparent !important;
}

.backBtn:hover {
  background-color: #f8f9fa !important;
  border-color: #ccc !important;
  transform: translateX(-3px);
}

/* Success/Next Button (Booking & Website Publish) */
.btnSuccess {
  background-color: #28a745 !important;
  border: none !important;
  box-shadow: 0 4px 6px rgba(40, 167, 69, 0.2);
}

.btnSuccess:hover {
  background-color: #218838 !important;
  box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
  transform: translateY(-2px);
}

/* Preview/Extra Button (Primary Style) */
.previewBtn {
  background-color: #434d5a !important; /* Aapka primary grey-blue color */
  border: none !important;
}

.previewBtn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Action Buttons Grouping */
.actionButtons {
  display: flex;
  gap: 12px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .btn {
    padding: 8px 16px;
    font-size: 13px;
    min-width: auto;
  }
  .actionButtons {
    gap: 8px;
  }
}

/* ── src/app/pages/domain-management/deal_Details/deal-details/deal-details.component.css ── */
.countryFlagPicker {
  display: inline-block !important;
  width: 26px !important;
  height: 18px !important;

  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;

  vertical-align: middle;
}

/* ── src/app/pages/domain-management/event/event-details/event-details.component.css ── */
.eventsiteQuantityBox.active {
  border: 2px solid #2568ef !important;
  background-color: #eef4ff !important;
}

/* ── src/app/pages/home/pay-fee/pay-fee.component.css ── */
.history-box {
  max-width: 710px;
  margin: 0 auto;
  padding: 0;
}

.custom-card {
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(25, 55, 85, 0.07);
  padding: 28px 24px 16px 24px;
  margin-bottom: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  font-size: 15px;
}

.info-label {
  font-weight: 600;
  color: #34495e;
  min-width: 110px;
}

.info-value {
  color: #222;
  word-break: break-all;
}

.qr-img {
  border: 1px solid #dde;
  background: #fcfcfc;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(42, 66, 103, 0.04);
}

.close-btn {
  width: 100%;
  margin-top: 28px;
  font-size: 16px;
  padding: 10px;
  background: #717d88;
  color: #fff;
}

/* ── src/app/pages/restaurants/restaurant/restaurant.component.scss ── */

.w-40 {
  width: 40%;
}

/* ── src/app/pages/service-heroes-landing/all-wizards/wizard-coming-soon/wizard-coming-soon.component.css ── */
/* Coming-soon placeholder. Self-contained theme — does not depend on
   the bdPort* / bigdot-wizard CSS so this works even before that
   stylesheet ships. Colors mirror the landing-page palette.

   Variables are inlined as values (not CSS custom props) because this
   component is loaded under emulated encapsulation and we don't want
   to depend on globals leaking in. */

app-wizard-coming-soon {
  display: block;
  background: #f7f4ef;
  min-height: 100vh;
  font-family:
    "Outfit",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #1c1510;
}

/* ── NAV ──────────────────────────────────────────────── */
.csNav {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 48px;
  background: rgba(247, 244, 239, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #ddd6c8;
  position: sticky;
  top: 0;
  z-index: 10;
}
.csNavLogo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.csNavLogoMark {
  width: 32px;
  height: 32px;
  background: #c4520a;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.csNavLogoMark svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}
.csNavLogoName {
  font-family: var(--site-secondary-font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1c1510;
}
.csNavLogoName span {
  color: #c4520a;
}
.csNavBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b5c4e;
}
.csNavBreadcrumb a {
  color: #6b5c4e;
  text-decoration: none;
}
.csNavBreadcrumb a:hover {
  color: #c4520a;
}
.csNavSep {
  opacity: 0.3;
}
.csNavCurrent {
  color: #1c1510;
  font-weight: 500;
}

/* ── CARD ─────────────────────────────────────────────── */
.csWrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 120px;
}
.csCard {
  background: #ffffff;
  border: 1px solid #ddd6c8;
  border-radius: 22px;
  padding: 72px 56px 56px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}
/* Decorative ember band along the top of the card. */
.csCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c4520a, transparent);
}

.csIcon {
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: rgba(196, 82, 10, 0.08);
  border: 1px solid rgba(196, 82, 10, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  line-height: 1;
}
.csIconClock {
  display: inline-block;
  animation: csSway 3.5s ease-in-out infinite;
  transform-origin: 50% 10%;
}
@keyframes csSway {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

.csEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(196, 82, 10, 0.08);
  border: 1px solid rgba(196, 82, 10, 0.18);
  padding: 5px 14px;
  border-radius: 20px;
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c4520a;
  margin-bottom: 22px;
}
.csEyebrowDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c4520a;
  animation: csBlink 2s ease infinite;
}
@keyframes csBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.csTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #1c1510;
  margin: 0 0 18px;
}
.csSub {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #6b5c4e;
  margin: 0 auto 28px;
  max-width: 480px;
}

.csHandlePill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f2ede6;
  border: 1px solid #ddd6c8;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 11px;
  color: #6b5c4e;
  margin-bottom: 32px;
}
.csHandlePill code {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #1c1510;
}
.csHandlePillLabel {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: #a0907e;
}

.csActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.csBtnPrimary,
.csBtnGhost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 0.2s;
}
.csBtnPrimary {
  background: #c4520a;
  color: #ffffff;
}

.csBtnPrimary:hover {
  background: #e06020;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(196, 82, 10, 0.32);
}

.csBtnGhost {
  background: transparent;
  color: #1c1510;
  border: 1px solid #ccc3b0;
}

.csBtnGhost:hover {
  border-color: #c4520a;
  color: #c4520a;
}

.csTrustStrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid #eae3d8;
}

.csTrustItem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #a0907e;
  font-weight: 500;
}

.csTrustIcon {
  font-size: 14px;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
  .csNav {
    padding: 0 18px;
    gap: 8px;
  }
  .csNavBreadcrumb {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .csWrap {
    padding: 40px 16px 80px;
  }
  .csCard {
    padding: 48px 28px 36px;
    border-radius: 18px;
  }
  .csIcon {
    width: 76px;
    height: 76px;
    font-size: 36px;
  }
  .csTrustStrip {
    gap: 18px;
  }
}

.error-text {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--bd-ember, #c4520a);
}

/* Sized icons for radio options when API returns an IconURL. */
img.bdPortRadioLabelIcon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

app-sh-banner {
  position: relative;
  z-index: 20;
}

app-sh-banner .portalHero {
  overflow: visible;
}

app-sh-banner .portalSearchBox {
  overflow: visible;
  position: relative;
  z-index: 5;
}

app-sh-banner .portalTrustList {
  position: relative;
  z-index: 1;
}

.portalSearchServiceWrap {
  flex: 1;
  min-width: 0;
  display: flex;
}

.portalSearchServiceWrap .portalSearchInput {
  width: 100%;
}

.portalSearchCityWrap {
  width: 130px;
  flex-shrink: 0;
  display: flex;
}

.portalSearchCityWrap .portalSearchCityInput {
  width: 100%;
}

.portalSearchSuggIcon {
  font-size: 16px;
  width: 22px;
  text-align: center;
}

.portalSearchServiceWrap .dropdown-menu.show,
.portalSearchCityWrap .dropdown-menu.show {
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: 280px;
  min-width: 280px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  margin: 0;
  background: #fff;
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(28, 45, 100, 0.14);
  z-index: 1080;
}

.portalSearchServiceWrap .dropdown-list,
.portalSearchCityWrap .dropdown-list {
  position: static;
  width: 100%;
  max-height: none;
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  overflow: visible;
}

.portalSearchServiceWrap .dropdown-list .custom-suggestion-item,
.portalSearchCityWrap .dropdown-list .custom-suggestion-item {
  display: block;
  padding: 8px 10px;
  font-size: 14px;
  color: #1c2d64;
  cursor: pointer;
  border-radius: 6px;
}

.portalSearchServiceWrap .dropdown-list .custom-suggestion-item:hover,
.portalSearchServiceWrap .dropdown-list .custom-suggestion-item:focus,
.portalSearchCityWrap .dropdown-list .custom-suggestion-item:hover,
.portalSearchCityWrap .dropdown-list .custom-suggestion-item:focus {
  background: #f4f5fb;
}

.portalSearchServiceWrap .dropdown-list .suggestion-content strong,
.portalSearchCityWrap .dropdown-list .suggestion-content strong {
  font-weight: 500;
}

/* Sized icons for radio options + service header when API returns an IconURL. */
img.bdPortRadioLabelIcon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.bdPortSvcIconBig img,
img.bdPortAsideIcon {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── src/app/pages/service-heroes-landing/pages/landing.component.css ── */
/* Landing-page (service-heroes / portal*) styles are merged into this file
   — see the "MERGED FROM bigdot-landingpages-v2.css" section below. These
   are landing-specific overrides — applied globally because LandingComponent
   uses ViewEncapsulation.None. */

/* Service cards must fill their grid cell. The grid uses a 1px gap over a
   tan (--portalBorder) background to draw divider lines; when a card is
   shorter than the tallest in its row (e.g. no skill chips), the empty cell
   exposed that tan background as a thick band. Stretch each card (host +
   inner card) to the full row height so the white surface always fills the
   cell. */
.portalSvcGrid {
  align-items: stretch;
}

app-sh-service-card {
  display: block;
  height: 100%;
}

.portalSvcCard {
  height: 100%;
}

/* ── src/app/pages/toaster/toaster/toaster.component.scss ── */
.toaster-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 250px;
  max-width: 350px;
  padding: 12px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(50px);
  animation:
    slideIn 0.3s forwards,
    fadeOut 0.3s forwards;
  animation-delay: 0s, 2.7s;
  animation-fill-mode: forwards;

  button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
}

.toast.success {
  background-color: #4caf50;
}
.toast.error {
  background-color: #f44336;
}
.toast.warning {
  background-color: #ff9800;
}
.toast.info {
  background-color: #2196f3;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ── src/app/shared/Wizard/wizard/wizard.component.css ── */
/* ============================================================
   Self-contained wizard styles. Component-scoped via Angular's
   emulated view encapsulation — these rules only apply inside
   <app-wizard>. CSS variables are defined at :host so the
   wizard works in any project without external design tokens.
   ============================================================ */
app-wizard {
  --site-primary-color: #15285d;
  --site-secondary-color: #f2f4ff;
  --site-tertiary-color: #2255e8;
  --site-quaternary-color: #e0dad0;
  --site-text-color: #1c1a16;
  --site-text-muted-color: #808080;
  --site-cta-color: #f05c29;
  --site-border-color: #e8ecf4;

  display: block;
}

/* ── Built-in delete confirmation modal (no jQuery, no Bootstrap JS) ── */
.wizard-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}
.wizard-modal-dialog {
  width: 100%;
  max-width: 480px;
  margin: 1rem;
}
.wizard-modal-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.wizard-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}
.wizard-modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.wizard-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}
.wizard-modal-body {
  padding: 1.25rem;
}
.wizard-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #e5e7eb;
}

/* ── Generic helpers used inside wizard ── */
.pointer,
.cursorPointer {
  cursor: pointer;
}
.loading-blur {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Wizard component visual styles (extracted from project's
   bigdot-manager-v2.css and instaciti-manager.css)
   ============================================================ */
.font500 {
  font-weight: 500 !important;
}

.dropImg {
  position: relative;
  width: 100%;
  min-height: 100px;
  background: #f9fbff;
  border: 2px dashed var(--site-quaternary-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  overflow: hidden;
  padding: 20px;
}

.dropImg:hover {
  border-color: var(--site-cta-color);
  background: #fff5f0;
}

.dropImg i {
  font-size: 28px;
  color: var(--site-text-muted-color);
}

.dropImg input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.aiSkipWrap {
  display: flex;
  margin-top: 6px;
}

.aiSkipPill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  border: 1.5px solid #ddd6fe;
  background: #f5f3ff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--site-tertiary-color);
  user-select: none;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}

.aiSkipPill:hover {
  background: #ede9fe;
  border-color: var(--site-tertiary-color);
}

.aiSkipActive {
  background: var(--site-tertiary-color);
  border-color: var(--site-tertiary-color);
  color: #fff;
}

.aiSkipIcon {
  font-size: 13px;
  flex-shrink: 0;
}

.uploadContainer {
  border-color: #cbd5e1 !important;
  background: #fafbfd !important;
  border-radius: 12px !important;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.uploadContainer:hover:not(.disabledGallery) {
  border-color: var(--site-tertiary-color) !important;
  background: var(--site-secondary-color) !important;
}

.uploadContainer i {
  color: #94a3b8;
}

.uploadContainer:hover:not(.disabledGallery) i {
  color: var(--site-tertiary-color);
}

.disabledGallery {
  opacity: 0.45;
  pointer-events: none;
}

.templateGridWrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.templateCard {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #e8ecf1;
  cursor: pointer;
  background: #fff;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.templateCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  border-color: var(--site-tertiary-color);
}

.templateCardSelected {
  border-color: var(--site-tertiary-color) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

.templateCardBadge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.45);
}

.templateCardPreview {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f1f4f8;
}

.templateCardPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.3s ease;
}

.templateCard:hover .templateCardPreview img {
  transform: scale(1.04);
}

.templateCardFooter {
  padding: 10px 10px 11px;
}

.templateCardBtn {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  background: var(--site-secondary-color);
  color: var(--site-tertiary-color);
  transition:
    background 0.18s,
    color 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.templateCardBtn:hover {
  background: #ede9fe;
}

.templateCardBtnSelected {
  background: var(--site-tertiary-color);
  color: #fff;
}

.templateCardBtnSelected:hover {
  background: var(--site-tertiary-color);
}

.publishScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 32px;
  min-height: 420px;
}

.publishSvgWrap {
  width: 100%;
  max-width: 340px;
  margin-bottom: 28px;
}

.publishSvg {
  width: 100%;
  height: auto;
  display: block;
}

.wbNav {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.2s;
}

.wbNavLogo {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.35s;
}

.wbNavL1 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.45s;
}

.wbNavL2 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.55s;
}

.wbNavL3 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.65s;
}

.wbHero {
  animation: wbBuild 6s ease infinite;
  animation-delay: 0.85s;
}

.wbHeroH {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1s;
}

.wbHeroS {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1.15s;
}

.wbHeroBtn {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1.3s;
}

.wbL1 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1.6s;
}

.wbL2 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 1.8s;
}

.wbL3 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 2s;
}

.wbC1 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 2.3s;
}

.wbC2 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 2.5s;
}

.wbC3 {
  animation: wbBuild 6s ease infinite;
  animation-delay: 2.7s;
}

.wbCursor {
  animation: wbCursor 0.7s step-end infinite;
  animation-delay: 1.6s;
}

.wbDot1 {
  animation: wbFloat 6s ease infinite;
  animation-delay: 0.5s;
}

.wbDot2 {
  animation: wbFloat 6s ease infinite;
  animation-delay: 1.2s;
}

.wbDot3 {
  animation: wbFloat 6s ease infinite;
  animation-delay: 2s;
}

.publishText {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.publishTitle {
  font-size: 22px;
  font-weight: 700;
  color: #1e1b3a;
  margin-bottom: 8px;
  line-height: 1.3;
}

.publishType {
  color: var(--site-tertiary-color);
  display: inline-block;
}

.publishSub {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}

.publishDots span {
  display: inline-block;
  animation: dotPulse 1.4s ease infinite;
}

.publishDots span:nth-child(1) {
  animation-delay: 0s;
}

.publishDots span:nth-child(2) {
  animation-delay: 0.2s;
}

.publishDots span:nth-child(3) {
  animation-delay: 0.4s;
}

.publishBarWrap {
  width: 100%;
  height: 5px;
  background: #ede9fe;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.publishBarFill {
  height: 100%;
  background: linear-gradient(90deg, var(--site-tertiary-color), #a78bfa);
  border-radius: 10px;
  animation: barSlide 6s ease-in-out infinite;
}

.publishSteps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: fit-content;
  margin: 0 auto;
}

.publishStep {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
}

.publishStepDone {
  color: #34c759;
}

.publishStepActive {
  color: var(--site-tertiary-color);
}

.publishStepPending {
  color: #cbd5e1;
}

.cgWrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cgSearchWrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cgSearchIcon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  font-size: 14px;
  pointer-events: none;
}

.cgSearchInput {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #334155;
  background: #fafbfd;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.cgSearchInput:focus {
  border-color: var(--site-tertiary-color);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.1);
  background: #fff;
}

.cgSearchInput::placeholder {
  color: #b0bac9;
}

.cgMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cgCount {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.cgClear {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: #c81515;
  cursor: pointer;
  padding: 0;
}

.cgClear:hover {
  text-decoration: underline;
}

.cgChips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cgChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 12px;
  background: var(--site-secondary-color);
  border: 1px solid var(--site-tertiary-color);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--site-tertiary-color);
}

.cgChipRemove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--site-tertiary-color);
  font-size: 11px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.cgGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}

.cgGrid::-webkit-scrollbar {
  width: 4px;
}

.cgGrid::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.cgGrid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.cgItem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1.5px solid #e8ecf4;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.16s,
    background 0.16s;
  font-size: 13px;
  color: #334155;
  font-weight: 500;
  line-height: 1.3;
}

.cgItem:hover {
  border-color: #fbc4aa;
  background: #fff8f6;
}

.cgItemSelected {
  background: var(--site-secondary-color) !important;
  border-color: var(--site-tertiary-color) !important;
}

.cgCheckbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.16s,
    border-color 0.16s;
}

.cgItemSelected .cgCheckbox {
  background: var(--site-tertiary-color);
  border-color: var(--site-tertiary-color);
}

.cgCheckIcon {
  font-size: 10px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.12s;
}

.cgItemSelected .cgCheckIcon {
  opacity: 1;
}

.cgItemLabel {
  flex: 1;
  min-width: 0;
}

.cgNoResults {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  padding: 24px 0;
  margin: 0;
}

.cgGrid {
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  max-height: 420px;
}

.cgGrid {
  grid-template-columns: repeat(2, 1fr);
  max-height: 300px;
  overflow-y: auto;
}

.slmWrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.slmList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.slmCard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #e8ecf4;
  border-radius: 12px;
  transition:
    box-shadow 0.18s,
    border-color 0.18s;
}

.slmCard:hover {
  border-color: var(--site-tertiary-color);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08);
}

.slmThumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f4f8;
  border: 1px solid #e8ecf4;
}

.slmThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slmInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slmName {
  font-size: 14px;
  font-weight: 600;
  color: #1e1b3a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slmPrice {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-tertiary-color);
  display: flex;
  align-items: center;
  gap: 5px;
}

.slmMrp {
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  text-decoration: line-through;
}

.slmActions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.slmBtn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.16s,
    color 0.16s;
}

.slmBtnEdit {
  background: #f0f4ff;
  color: #4f6ef7;
}

.slmBtnEdit:hover {
  background: #dbe4ff;
}

.slmBtnDel {
  background: #fff1f0;
  color: #ef4444;
}

.slmBtnDel:hover {
  background: #fee2e2;
}

.slmAddMore {
  width: 100%;
  padding: 11px 0;
  border: 1.5px dashed var(--site-tertiary-color);
  border-radius: 10px;
  background: var(--site-secondary-color);
  color: var(--site-tertiary-color);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    background 0.16s,
    border-color 0.16s;
  margin-top: 4px;
}

.slmAddMore:hover {
  background: var(--site-secondary-color);
  border-color: var(--site-tertiary-color);
}

.slmEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 20px;
  border: 1.5px dashed #e2e8f0;
  border-radius: 14px;
  background: #fafbfd;
  text-align: center;
}

.slmEmptyIcon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--site-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #a78bfa;
  margin-bottom: 14px;
}

.slmEmptyTitle {
  font-size: 15px;
  font-weight: 600;
  color: #1e1b3a;
  margin-bottom: 4px;
}

.slmEmptySub {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 18px;
}

.slmEmptyBtn {
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  background: var(--site-tertiary-color);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s;
}

.slmEmptyBtn:hover {
  background: var(--site-tertiary-color);
}

.congratsNeedHelp {
  display: block;
  width: auto;
  margin: 8px auto 0;
  padding: 7px 20px;
  background: transparent;
  color: #f4a607;
  border: 1.5px solid #f4a608;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.16s,
    border-color 0.16s;
}

.congratsNeedHelp:hover {
  color: #475569;
  border-color: #94a3b8;
}

.primaryColor {
  color: var(--site-primary-color) !important;
}

.primaryColor a {
  color: var(--site-primary-color) !important;
}

.font500 {
  font-weight: 500 !important;
}

.font12 {
  font-size: clamp(10px, 0.85vw, 12px);
  line-height: 1.5;
}

.primaryColor {
  color: var(--site-primary-color) !important;
}

.primaryColor a {
  color: var(--site-primary-color) !important;
}

.mutedText {
  color: #4d4d4e !important;
}

.cursorPointer {
  cursor: pointer !important;
}

.dropImg {
  position: relative;
  width: 80px;
  height: 80px;
  background-color: #ececec;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}

.dropImg i {
  color: #b0b0b0;
  font-size: 20px;
}

.dropImg input {
  position: absolute;
  left: 0;
  top: 25px;
  opacity: 0;
}

.dropImg img {
  height: 100%;
  object-fit: cover !important;
  text-align: center;
  position: relative;
  right: 15px;
}

.bdCustomLabel {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--site-text-muted-color, #555);
  margin-bottom: 6px;
  display: block;
}

.action-button {
  background: var(--site-cta-color) !important;
  color: #fff !important;
  border-radius: 10px !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border: none !important;
  transition:
    background-color 0.2s ease,
    transform 0.1s ease !important;
  letter-spacing: 0.01em;
}

.action-button:hover {
  background-color: var(--site-primary-color) !important;
}

.bookingContent .bookingTitle {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
}

.bookingContent .bookingSubtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 1.25rem;
}

.bookingContent .categoriesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 15px 18px;
  margin-bottom: 10px;
  width: 100%;
}

.bookingContent .continueBtn {
  width: 100%;
  background: #fc6722;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 0;
  border: none;
  border-radius: 30px;
  margin-top: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.bookingContent .continueBtn:hover {
  background: #e76110;
}

.teamSizeOptions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 10px;
}

.teamSizeOption {
  background: #f6f8fb;
  border: 1px solid #e1e8ed;
  border-radius: 9px;
  padding: 19px 20px;
  font-size: 16px;
  color: #18152b;
  text-align: left;
  font-weight: 500;
  transition:
    background 0.2s,
    border 0.2s;
  cursor: pointer;
}

.teamSizeOption.active {
  border: 2px solid var(--site-tertiary-color);
  background: var(--site-secondary-color);
}

.teamSizeOption:hover {
  background: #e3eaff;
  border-color: #a9bddb;
}

.serviceInputWithIcon {
  position: relative;
  display: flex;
  align-items: center;
}

.congratsContainer {
  padding: 24px 12px 36px 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(23, 32, 47, 0.07);
  text-align: center;
}

.congratsContainer .congratsLogo {
  height: 48px;
  margin-bottom: 8px;
}

.congratsHeadline {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 15px;
  margin-top: 40px;
}

.wizardBox .addMoreBtn {
  /* display: inline-flex; */
  align-items: center;
  gap: 6px;
  padding: 5px 15px;
  border-radius: 8px;
  background-color: #404852;
  color: #ffffff;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}

.wizardBox .addMoreBtn:hover {
  background-color: #1f272b;
}

.wizardBox .addMoreBtn:active {
  transform: scale(0.97);
}

.wizardBox .addMoreBtn .icon {
  vertical-align: middle;
}

.congratsUser {
  color: var(--site-primary-color);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 30px;
}

.congratsStoreInfo {
  font-size: 20px;
  margin-bottom: 20px;
}

.congratsStoreName {
  font-weight: 600;
}

.congratsBrand {
  font-weight: 700;
}

.congratsNote {
  color: #949494;
  font-size: clamp(10px, 0.9vw, 14px);
  margin-bottom: 20px;
  font-weight: 300 !important;
}

.congratsPreviewBtn {
  background: #fc6722;
  color: #fff;
  border: none;
  width: 77%;
  margin: 0 auto 16px auto;
  font-size: 16px;
  border-radius: 24px;
  font-weight: 500;
  transition: background 0.18s;
  cursor: pointer;
  display: block;
  padding: 12px 0px;
}

.congratsPreviewBtn:hover {
  background: #d9550c;
}

.templateCard {
  border: 1px solid #eee;
  border-radius: 14px;
  transition: 0.3s;
  text-align: center;
}

.templateCard:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.cursorPointer {
  cursor: pointer !important;
}

.formGroup.col-12 .ms-3.mb-3.form-check {
  margin-left: 0px !important;
}

.wizard-form-container {
  text-align: left !important;
}

.confirmPurchase .cardTitle {
  margin-bottom: 10px;
}

.confirmPurchase .userInfoBox {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}

.userSubText {
  font-size: 13px;
  color: #6c757d;
}

.orderSummaryBox {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 14px;
}

.summaryTitle {
  margin-bottom: 10px;
  font-size: 18px;
}

.summaryRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.totalRow {
  font-weight: 500;
}

.statusDot {
  width: 8px;
  height: 8px;
  background: #28a745;
  border-radius: 50%;
}

.orderSummaryBox .makePaymentBtn {
  background: var(--site-primary-color);
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  font-size: 16px;
}

.orderSummaryBox .makePaymentBtn:hover {
  background: var(--site-primary-color);
  color: #fff;
}

.termsText {
  font-size: 12px;
  margin-top: 14px;
  text-align: center;
}

.confirmPurchase .termsText a {
  color: var(--site-primary-color);
  font-weight: 500;
  text-align: center;
}

.secureText {
  font-size: 12px;
  color: #6c757d;
  margin-top: 8px;
  text-align: center;
}

.userInfoBox h2 {
  font-size: 18px;
  margin-bottom: 5px;
}

.summaryRow.standardPlan {
  background-color: rgb(245 247 251);
  padding: 10px;
  border-radius: 8px;
}

.confirmPurchase .planItem {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid #eef2f7;
  margin-bottom: 20px !important;
  cursor: pointer;
  align-items: flex-start;
}

.confirmPurchase .planItem:hover {
  border-color: #c7d7ff;
}

.planItem .planContent {
  flex: 1;
}

.planContent .planHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.planContent .planName {
  font-weight: 600;
}

.planContent .planPrice {
  font-weight: 600;
}

.planContent .planPrice small {
  font-weight: 400;
  color: #6c757d;
}

.planItem .planRadio {
  margin-top: 6px;
}

.planContent .planDesc {
  font-size: 13px;
  color: #6c757d;
  margin-top: 4px;
}

.planContent .planLink {
  font-size: 14px;
  color: var(--site-primary-color);
  border-bottom: 1px dashed;
  float: right;
  line-height: 18px;
  font-weight: 500;
}

.popularBadge {
  position: absolute;
  top: -10px;
  left: 16px;
  background: #20c997;
  color: #fff;
  font-size: 10px;
  padding: 1px 10px;
  border-radius: 20px;
}

.planContainerBtn button.action-button.continuePeriod {
  background-color: #f59e0b !important;
}

.templateCard {
  transition: all 0.3s ease;
  background: #fff;
}

.templateCard:hover {
  border-color: var(--site-primary-color) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.templateCard .imageWrapper {
  height: 220px;
  background: #f8f9fa;
  overflow: hidden;
  cursor: pointer;
}

.templateCard .smallThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  object-position: top;
}

.templateCard .imageWrapper:hover .smallThumb {
  transform: scale(1.05);
  filter: brightness(70%);
}

.templateCard .imageWrapper:hover .PreviewBtn {
  opacity: 1 !important;
}

.templateCard .sectionLabel {
  font-size: 14px;
  font-weight: 500;
  color: #444;
}

.jffCard {
  margin-top: 0px !important;
  z-index: 0 !important;
  position: relative !important;
  border-radius: 20px !important;
  padding: 20px 30px !important;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  font-weight: normal;
  background: #ffffff;
  box-shadow:
    0 8px 40px rgba(28, 45, 100, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #eaecf5 !important;
}

.priceText {
  font-size: 1.2rem;
}

.congratsPreviewBtn {
  width: 100%;
}

.bookingContent .categoriesGrid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 15px 5px !important;
}

.wizardBox .serviceCard .serviceCardImg {
  width: 80px;
  height: 80px;
}

.bookingContent .categoriesGrid {
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 15px;
}

.jffCard .card-body {
  padding: 5px;
}

.jffCard .card-body .font18.text-capitalize {
  margin-top: 5px !important;
}

/* ─── Spinner ─── */
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: wizard-spinner-border 0.75s linear infinite;
}
@keyframes wizard-spinner-border {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Misc helpers ─── */
[hidden] {
  display: none !important;
}

/* ─── Inline SVG icon styles ─── */
.wiz-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}
.wiz-icon-lg {
  width: 1.5em;
  height: 1.5em;
}
.wiz-icon-xl {
  width: 2em;
  height: 2em;
}
.wiz-icon-spin {
  animation: wizard-spinner-border 1s linear infinite;
}

/* ── src/app/shared/components/address/address.component.scss ── */
.dropdown-menu.show {
  border: #fff !important;
  background-color: #ffffff2e !important;
}

.bcg {
  border: #d34f4f !important;
  background-color: #ffffff2e !important;
}

.languageSearchArea {
  position: relative;
}

.languageSearchArea .dropdown {
  position: relative;
  width: 100%;
}

.languageSearchArea .form-control {
  padding-right: 50px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.languageSearchArea .form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.languageSearchArea .languageSearchIcon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.languageSearchArea .languageSearchIcon img {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.languageSearchArea .dropdown-menu {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.languageSearchArea .dropdown-menu.show {
  display: block;
}

.languageSearchArea .languageList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.languageSearchArea .languageList .custom-suggestion-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.languageSearchArea .languageList .custom-suggestion-item:last-child {
  border-bottom: none;
}

.languageSearchArea .languageList .custom-suggestion-item:hover {
  background-color: #f8f9fa;
}

.languageSearchArea .languageList .custom-suggestion-item .suggestion-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.languageSearchArea
  .languageList
  .custom-suggestion-item
  .suggestion-content
  .language-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.languageSearchArea
  .languageList
  .custom-suggestion-item
  .suggestion-content
  strong {
  font-weight: 500;
  color: #333;
}

/* ── src/app/shared/components/rating/rating.component.scss ── */
.stars .fa-star {
  cursor: pointer;
  font-size: 24px;
  margin-right: 5px;
  color: gray;
}

.stars .fa-star.active {
  color: #f15a25;
}

/* ── Modern Login / Sign up modal (#staticBackdrop) ───────────────── */
#staticBackdrop .modal-dialog {
  max-width: 440px;
}

#staticBackdrop .modal-content {
  border: 0;
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.22);
  overflow: hidden;
}

#staticBackdrop .modal-header {
  border-bottom: 0;
  align-items: flex-start;
  padding: 20px 20px 8px;
}

#staticBackdrop .loginModalHeading h4 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

#staticBackdrop .loginModalSubtitle {
  margin-top: 4px;
  font-size: 13.5px;
  color: #6b7280;
}

#staticBackdrop .modalCloseBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

#staticBackdrop .modalCloseBtn:hover {
  background: #e5e7eb;
  color: #111827;
}

#staticBackdrop .modal-body {
  padding: 12px 20px 24px;
}

#staticBackdrop .modal-body .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

/* Phone input group as one unified rounded control */
#staticBackdrop .modal-body .input-group {
  border: 1.5px solid #e3e6ec;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  height: 52px;
  flex-wrap: nowrap;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#staticBackdrop .modal-body .input-group .input-group-text,
#staticBackdrop .modal-body .input-group .form-control {
  height: 100%;
}

#staticBackdrop .modal-body .input-group:focus-within {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.12);
}

#staticBackdrop .modal-body .input-group .input-group-text {
  border: 0;
  background: transparent;
  padding: 12px 6px 12px 14px;
  font-weight: 600;
  color: #111827;
}

#staticBackdrop .modal-body .input-group .input-group-text .primaryColor {
  color: var(--site-primary-color) !important;
}

#staticBackdrop .modal-body .input-group .form-control {
  border: 0 !important;
  padding: 12px 14px 12px 8px;
  font-size: 15px;
  box-shadow: none !important;
}

#staticBackdrop .modal-body .input-group .form-control::placeholder {
  color: #9aa0ab;
}

/* Continue button */
#staticBackdrop .modal-body .customButton {
  border: 0;
  border-radius: 12px !important;
  height: 52px;
  padding: 0 13px !important;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 8px 18px rgba(26, 35, 126, 0.22);
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}

#staticBackdrop .modal-body .customButton:hover:not(:disabled) {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

#staticBackdrop .modal-body .customButton:active:not(:disabled) {
  transform: translateY(0);
}

#staticBackdrop .modal-body .customButton:disabled {
  opacity: 0.75;
}

/* ── Modern Purchase Deal modal (.purchaseDealModal) ──────────────── */
.purchaseDealModal .modal-dialog {
  max-width: 460px;
}

.purchaseDealModal .modal-content {
  border: 0;
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.22);
  overflow: hidden;
}

.purchaseDealModal .modal-header {
  border-bottom: 0;
  align-items: flex-start;
  padding: 20px 20px 6px;
}

.purchaseDealModal .purchaseModalHeading .modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.purchaseDealModal .purchaseModalSubtitle {
  margin-top: 4px;
  font-size: 13.5px;
  color: #6b7280;
}

.purchaseDealModal .purchaseModalClose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.purchaseDealModal .purchaseModalClose:hover {
  background: #e5e7eb;
  color: #111827;
}

.purchaseDealModal .modal-body {
  padding: 12px 20px 8px;
}

.purchaseDealModal .modal-body .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

/* Text inputs */
.purchaseDealModal .modal-body .form-control {
  height: 52px;
  border: 1.5px solid #e3e6ec;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  color: #111827;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.purchaseDealModal .modal-body .form-control::placeholder {
  color: #9aa0ab;
}

.purchaseDealModal .modal-body .form-control:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.12);
}

/* Mobile number group: code + input as one unified control */
.purchaseDealModal .modal-body .liveBigDotSupport2 .input-group {
  height: 52px;
  flex-wrap: nowrap;
  border: 1.5px solid #e3e6ec;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 0 !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.purchaseDealModal .modal-body .liveBigDotSupport2 .input-group:focus-within {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(26, 35, 126, 0.12);
}

.purchaseDealModal .modal-body .dealsCountryCode {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: #f8f9fb;
  padding: 0 12px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
}

.purchaseDealModal .modal-body .input-group .dealsFormControl {
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 14px;
  font-size: 15px;
}

/* Footer buttons */
.purchaseDealModal .modal-footer {
  border-top: 0;
  padding: 12px 20px 20px;
  gap: 12px;
  flex-wrap: nowrap;
}

.purchaseDealModal .modal-footer .btn {
  flex: 1 1 0;
  width: 50%;
  height: 52px;
  margin: 0;
  border: 0;
  border-radius: 12px !important;
  padding: 0 15px !important;
  font-size: 15px;
  font-weight: 600;
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}

.purchaseDealModal .modal-footer .btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.purchaseDealModal .modal-footer .btn-secondary:hover {
  background: #e5e7eb;
  color: #111827;
}

.purchaseDealModal .modal-footer .btn-primary {
  background: var(--site-primary-color);
  color: #fff;
  box-shadow: 0 8px 18px rgba(26, 35, 126, 0.22);
}

.purchaseDealModal .modal-footer .btn-primary:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* ============================================================================
   DESIGN-TEAM ADDITIONS
   All component-level styling is centralised here. Do NOT add styles to
   component .css/.scss files — add/edit them in this file. See design-rule.md.
   ============================================================================ */

/* ---- Pay Fee page (gym / apartment / school) ------------------------------
   The entity selector is an <input class="form-select form-control"> typeahead.
   The global `.form-control { padding: 10px }` rule overrides Bootstrap's
   form-select padding, leaving an uneven height and no room for the chevron.
   Scoped to .payFeePage so it doesn't affect other form-selects. */
.payFeePage .form-select.form-control {
  height: 48px;
  padding: 10px 38px 10px 14px;
  line-height: 1.4;
  border-radius: 12px;
  background-position: right 14px center;
}

/* Breadcrumb spacing: remove the global 20px top gap; the gap below comes from
   the nav's .mb-4 utility in the template. */
.payFeePage .breadcrumbContainer {
  margin-top: 0;
}

/* ---- Restaurant hamburger offcanvas: city selector + "What" search -------
   The address widget lives inside .offcanvas-body (overflow-y:auto), which
   clipped the absolutely-positioned suggestion dropdowns. The panel only
   holds two inputs, so let the dropdowns escape; also stack the fields full
   width, equalise heights, centre the icon/label/search button, and make the
   dropdowns match the input width. */
#offcanvasNavbar .offcanvas-body:has(.fullWidthHeaderSearch) {
  overflow: visible;
}

.fullWidthHeaderSearch app-address form.row {
  margin: 0;
  row-gap: 16px;
}

.fullWidthHeaderSearch app-address form.row > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding-left: 0;
  padding-right: 0;
}

.fullWidthHeaderSearch .locationSearchArea input,
.fullWidthHeaderSearch .otherSearchArea input {
  height: 48px;
}

.fullWidthHeaderSearch .locationSearchIcon {
  top: 50%;
  transform: translateY(-50%);
}

.fullWidthHeaderSearch .otherSearchArea .otherSearchtext {
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}

.fullWidthHeaderSearch .otherSearchArea .searchButton {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  line-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullWidthHeaderSearch .otherSearchArea .searchButton i {
  position: static;
  top: auto;
  right: auto;
}

.fullWidthHeaderSearch .dropdown-menu {
  width: 100%;
  z-index: 1060;
}

.fullWidthHeaderSearch .custom-dropdown.countryCity {
  width: 100% !important;
  z-index: 1060;
}

/* ---- Restaurant list toolbar (mobile, below the banner) ------------------
   The single-line "Sort by" select never needs to scroll (the global
   overflow rule showed a primary-coloured scrollbar). And on small screens
   the heading + controls were laid out explicitly so each group has a place. */
.restaurantListSection .allSearchAreas .field .ng-select .ng-select-container {
  overflow: visible;
  max-height: none;
}

@media (max-width: 768px) {
  .productMainAreaMobileView .row.mb20 {
    row-gap: 14px;
  }

  .productMainAreaMobileView .row.mb20 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .productMainAreaMobileView .searchHeadingArea.mb30 {
    margin-bottom: 0;
  }

  .productMainAreaMobileView .allSearchAreas {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  .productMainAreaMobileView .allSearchAreas .listGrids {
    margin-left: auto;
  }

  .productMainAreaMobileView .allSearchAreas .field {
    order: 5;
    flex: 0 0 100%;
    width: 100%;
  }
}

/* ---- Collection hero text (party / gift / wedding) -----------------------
   The hero is flex-centred, but the heading's `mt-5` and the hero's blanket
   `* { margin-top: 10px }` rule pushed the visible text below centre. */
.weddingTexts {
  margin-top: 0 !important;
}

.weddingTexts .weddingHeaderHeading {
  margin-top: 0 !important;
}

/* Lab-test booking page reuses the .weddingHeaderSection hero layout with its
   own medical-themed background (defined after .weddingHeaderSection so this
   background wins). */
.medTestHeaderSection {
  background-image: url("https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1600&q=80");
}

/* Lab-test details breadcrumb: clear space above and below it, so it isn't
   cramped against the header or the content card. !important is required to
   beat the global `ol { margin: 0 !important }` reset. */
.medTestBreadcrumb .breadcrumbContainer {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

/* Lab-test "Book Now" <button> (Bootstrap .btn removed so its solid pink
   background shows) — borderless with a pointer cursor. */
.bookButton {
  border: none;
  cursor: pointer;
}

/* ---- Deal details breadcrumb spacing ------------------------------------- */
.dealDetailsPage .breadcrumbContainer {
  margin-bottom: 32px !important;
}

/* ---- Collections page: curated category cards ----------------------------
   Modern gradient cards (icon, title, description, "Explore" CTA) replacing
   the old flat solid-colour blocks. */
.collectionsSection {
  padding: 24px 0 64px;
  background: #fff;
}

.collectionsSection .breadcrumbContainer {
  margin-bottom: 32px !important;
}

.collectionCard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  height: 100%;
  padding: 28px;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.collectionCard::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 190px;
  height: 190px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  z-index: -1;
}

.collectionCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.collectionCard:hover .collectionCard__icon {
  transform: scale(1.08) rotate(-4deg);
}

.collectionCard:hover .collectionCard__cta i {
  transform: translateX(4px);
}

.collectionCard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  font-size: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
  transition: transform 0.3s ease;
}

.collectionCard__body {
  margin-top: auto;
  padding-top: 22px;
}

.collectionCard__title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
}

.collectionCard__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.92;
}

.collectionCard__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
}

.collectionCard__cta i {
  transition: transform 0.3s ease;
}

.collectionCard--wedding {
  background: linear-gradient(135deg, #4f46e5, #2563eb);
}

.collectionCard--party {
  background: linear-gradient(135deg, #ef4444, #db2777);
}

.collectionCard--gift {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.collectionCard--education {
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
}

.collectionCard--soon {
  cursor: default;
}

.collectionCard--soon .collectionCard__cta {
  opacity: 0.85;
  font-weight: 500;
}

@media (max-width: 768px) {
  .collectionsSection {
    padding: 16px 0 48px;
  }

  .collectionCard {
    min-height: 170px;
    padding: 22px;
  }

  .collectionCard__icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }

  .collectionCard__title {
    font-size: 20px;
  }
}

/* ============================================================
   MERGED FROM bigdot-landingpages-v2.css
   Service-heroes (portal*) landing styles + design-system base.
   Appended after the live styles to preserve the original
   cascade order (landingpages used to load right after live).
   ============================================================ */
/* BIGDOT DESIGN SYSTEM */

:root {
  /*  Fonts  */
  --site-primary-font: "Plus Jakarta Sans", sans-serif;
  --site-secondary-font: "Bricolage Grotesque", sans-serif;
  --site-tertiary-font: "Bricolage Grotesque", sans-serif;

  /* Semantic roles */
  --site-heading-font: var(--site-secondary-font);
  --site-body-font: var(--site-primary-font);
  --site-display-font: var(--site-tertiary-font);

  /*  Brand Colors (static — never change per theme)  */
  --site-primary-color: #1c2d64; /* deep navy */
  --site-secondary-color: #f2f4ff; /* soft blue tint */
  --site-tertiary-color: #2255e8; /* electric blue */
  --site-quaternary-color: #f15a25; /* brand orange */
  --site-cta-color: #f15a25;

  /* State (static) */
  --site-success-color: #16a34a;
  --site-error-color: #dc2626;
  --site-warning-color: #d97706;
  --site-info-color: #2255e8;

  /*  Spacing scale  */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /*  Border Radius  */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /*  Transitions  */
  --transition: all 0.2s ease;
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.4s ease;
  --bdTransition: 0.3s ease;

  /* Tailwind shadow resets */
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;

  /* Alias kept for legacy compat */
  --cormorant-font: var(--site-secondary-font);
}

/*  Reset  */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1.6;
  font-family: var(--site-body-font);
  color: var(--site-text-color);
}

/* ============================================
   COLOR UTILITIES
   ============================================ */
.primaryColor {
  color: var(--site-primary-color) !important;
}
.primaryColor a {
  color: var(--site-primary-color) !important;
}
.primaryBgColor {
  background-color: var(--site-primary-color) !important;
}

.secondaryColor {
  color: var(--site-secondary-color) !important;
}
.secondaryColor a {
  color: var(--site-secondary-color) !important;
}
.secondaryBgColor {
  background-color: var(--site-secondary-color) !important;
}

.tertiaryColor {
  color: var(--site-tertiary-color) !important;
}
.tertiaryBgColor {
  background-color: var(--site-tertiary-color) !important;
}

.headingColor {
  color: var(--site-text-color) !important;
}
.headingColor a {
  color: var(--site-text-color) !important;
}

.linkColor {
  color: var(--site-primary-color) !important;
}
.linkColor a {
  color: var(--site-primary-color) !important;
}
.linkColor a:hover {
  color: var(--site-cta-color) !important;
}

.iconColor {
  color: var(--site-primary-color) !important;
}
.borderColor {
  border-color: var(--site-border-color) !important;
}
.paragraphColor {
  color: var(--site-text-muted-color) !important;
}

.ctaColor {
  color: var(--site-cta-color) !important;
}
.ctaBgColor {
  background-color: var(--site-cta-color) !important;
}
.offerBg {
  background-color: var(--site-cta-color) !important;
}
.secondaryBtnBgColor {
  background-color: var(--site-cta-color) !important;
}

/* State colors */
.successColor {
  color: var(--site-success-color) !important;
}
.errorColor {
  color: var(--site-error-color) !important;
}
.warningColor {
  color: var(--site-warning-color) !important;
}

/* ============================================
   TYPOGRAPHY — FONT FAMILIES
   ============================================ */
.fontPrimary {
  font-family: var(--site-primary-font) !important;
}
.fontSecondary {
  font-family: var(--site-secondary-font) !important;
}
.fontTertiary {
  font-family: var(--site-tertiary-font) !important;
}

/*  Font Weights (fixed)  */
.font100 {
  font-weight: 100 !important;
}
.font200 {
  font-weight: 200 !important;
}
.font300 {
  font-weight: 300 !important;
}
.font400 {
  font-weight: 400 !important;
}
.font500 {
  font-weight: 500 !important;
}
.font600 {
  font-weight: 600 !important;
}
.font700 {
  font-weight: 700 !important;
}
.font800 {
  font-weight: 800 !important;
}
.font900 {
  font-weight: 900 !important;
}

/*  Font Sizes  */
.font9 {
  font-size: clamp(8px, 0.6vw, 9px);
  line-height: 1.4;
}
.font10 {
  font-size: clamp(9px, 0.7vw, 10px);
  line-height: 1.5;
}
.font11 {
  font-size: clamp(9px, 0.75vw, 11px);
  line-height: 1.45;
}
.font12 {
  font-size: clamp(10px, 0.85vw, 12px);
  line-height: 1.5;
}
.font13 {
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.54;
}
.font14 {
  font-size: clamp(10px, 0.9vw, 14px);
  line-height: 1.5;
}
.font16 {
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
}
.font18 {
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.5;
}
.font20 {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.4;
}
.font22 {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
}
.font24 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
}
.font26 {
  font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.5;
}
.font28 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.3;
}
.font30 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.33;
}
.font32 {
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.35;
}
.font36 {
  font-size: clamp(30px, 3vw, 36px);
  line-height: 1.35;
}
.font40 {
  font-size: clamp(32px, 3.2vw, 40px);
  line-height: 1.45;
}
.font48 {
  font-size: clamp(38px, 3.8vw, 48px);
  line-height: 1.2;
}
.font60 {
  font-size: clamp(48px, 4vw, 60px);
  line-height: 1.15;
}

/*  Line Height  */
.lh1 {
  line-height: 1 !important;
}
.lh12 {
  line-height: 1.2 !important;
}
.lh14 {
  line-height: 1.4 !important;
}
.lh16 {
  line-height: 1.6 !important;
}
.lhNormal {
  line-height: normal !important;
}

/* ============================================
   BORDER RADIUS (fixed — all unique)
   ============================================ */
.br0 {
  border-radius: var(--radius-none) !important;
}
.br4 {
  border-radius: var(--radius-sm) !important;
}
.br8 {
  border-radius: var(--radius-md) !important;
}
.br12 {
  border-radius: var(--radius-lg) !important;
}
.br16 {
  border-radius: var(--radius-xl) !important;
}
.br24 {
  border-radius: var(--radius-2xl) !important;
}
.brFull {
  border-radius: var(--radius-full) !important;
}

/* Keep old names for backward compatibility */
.br5 {
  border-radius: var(--radius-sm) !important;
}
.br10 {
  border-radius: var(--radius-md) !important;
}
.br50 {
  border-radius: var(--radius-full) !important;
}

/* ============================================
   SHADOWS & CARDS
   ============================================ */
.shadowSm {
  box-shadow: var(--shadow-sm) !important;
}
.shadowMd {
  box-shadow: var(--shadow-md) !important;
}
.shadowLg {
  box-shadow: var(--shadow-lg) !important;
}
.shadowNone {
  box-shadow: none !important;
}

.cardBoxShadow {
  box-shadow: var(--shadow-card);
  border: 1px solid var(--bdBorder) !important;
}

.shadowCard {
  box-shadow: var(--shadow-card) !important;
}
.shadowCardHover {
  box-shadow: var(--shadow-card-hover) !important;
}
.shadowCta {
  box-shadow: var(--shadow-cta) !important;
}
.shadowAccent {
  box-shadow: var(--shadow-accent) !important;
}

/* ============================================
   THEME-AWARE SURFACE UTILITIES
   ============================================ */

/* Backgrounds */
.bdBgBase {
  background-color: var(--bdBg) !important;
}
.bdBgAlt {
  background-color: var(--bdBgAlt) !important;
}
.bdBgCard {
  background-color: var(--bdBgCard) !important;
}
.bdBgSection {
  background-color: var(--bdBgSection) !important;
}
.bdBgNavbar {
  background-color: var(--bdNavBg) !important;
}
.bdBgOverlay {
  background-color: var(--bdOverlayBg) !important;
}

/* Text */
.bdTextBase {
  color: var(--bdText) !important;
}
.bdTextMuted {
  color: var(--bdTextMuted) !important;
}
.bdTextFaint {
  color: var(--bdTextFaint) !important;
}
.bdTextInverse {
  color: var(--bdTextInverse) !important;
}
.bdTextAccent {
  color: var(--bdAccent) !important;
}
.bdTextAlt {
  color: var(--bdAccentAlt) !important;
}
.bdTextCta {
  color: var(--bdCta) !important;
}

/* Borders */
.bdBorderBase {
  border-color: var(--bdBorder) !important;
}
.bdBorderStrong {
  border-color: var(--bdBorderStrong) !important;
}
.bdBorderSubtle {
  border-color: var(--bdBorderSubtle) !important;
}
.bdBorderAccent {
  border-color: var(--bdAccent) !important;
}
.bdBorderCta {
  border-color: var(--bdCta) !important;
}

/* ============================================
   BADGE UTILITIES
   ============================================ */
.bdBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bdBadgeBg);
  border: 1px solid var(--bdBadgeBorder);
  color: var(--bdBadgeText);
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bdBadgeSm {
  padding: 0.2rem 0.6rem;
  font-size: 0.68rem;
}

.bdBadgeLg {
  padding: 0.5rem 1.25rem;
  font-size: 0.82rem;
}

/* ============================================
   SECTION STRIPE UTILITIES
   ============================================ */
.bdSectionAlt {
  background: var(--bdSectionAltBg);
  border-top: 1px solid var(--bdSectionAltBorder);
  border-bottom: 1px solid var(--bdSectionAltBorder);
}

/* ============================================
   STATE SURFACE UTILITIES
   ============================================ */
.bdSuccessSurface {
  background: var(--bdSuccessBg) !important;
  color: var(--site-success-color) !important;
}
.bdErrorSurface {
  background: var(--bdErrorBg) !important;
  color: var(--site-error-color) !important;
}
.bdWarningSurface {
  background: var(--bdWarningBg) !important;
  color: var(--site-warning-color) !important;
}
.bdInfoSurface {
  background: var(--bdInfoBg) !important;
  color: var(--bdAccentAlt) !important;
}

/* ============================================
   INPUT UTILITIES
   ============================================ */
.bdInput {
  background: var(--bdInputBg);
  border: 1px solid var(--bdInputBorder);
  color: var(--bdInputText);
  border-radius: var(--radius-md);
  padding: 0.625rem 1rem;
  font-family: var(--site-body-font);
  font-size: 0.9rem;
  width: 100%;
  outline: none;
  transition:
    border-color var(--bdTransition),
    box-shadow var(--bdTransition);
}

.bdInput::placeholder {
  color: var(--bdInputPlaceholder);
}

.bdInput:focus {
  border-color: var(--bdInputFocusBorder);
  box-shadow: 0 0 0 3px var(--bdInputFocusShadow);
}

/* ============================================
   CARD UTILITIES
   ============================================ */
.bdCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--bdTransition),
    border-color var(--bdTransition),
    box-shadow var(--bdTransition);
}

.bdCard:hover {
  transform: translateY(-4px);
  border-color: var(--bdBorderStrong);
  box-shadow: var(--shadow-card-hover);
}

.bdCardBlue {
  background: var(--bdCardBlue);
  border-color: var(--bdCardBlueBorder);
}
.bdCardGreen {
  background: var(--bdCardGreen);
  border-color: var(--bdCardGreenBorder);
}
.bdCardPink {
  background: var(--bdCardPink);
  border-color: var(--bdCardPinkBorder);
}
.bdCardOrange {
  background: var(--bdCardOrange);
  border-color: var(--bdCardOrangeBorder);
}

/* ============================================
   BUTTON UTILITIES
   ============================================ */
.bdBtnCta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bdCta);
  color: var(--bdCtaText);
  font-family: var(--site-body-font);
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.bdBtnCta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-cta);
  color: var(--bdCtaText);
}

.bdBtnOutline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--bdText);
  font-family: var(--site-body-font);
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--bdBorder);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.bdBtnOutline:hover {
  border-color: var(--bdAccentAlt);
  background: var(--bdSectionAltBg);
  color: var(--bdText);
}

/* ============================================
   GLOBAL BASE — Theme transitions & scrollbar
   ============================================ */

html {
  scroll-behavior: smooth;
  transition:
    background-color var(--bdTransition),
    color var(--bdTransition);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bdScrollTrack);
}
::-webkit-scrollbar-thumb {
  background: var(--bdScrollThumb);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bdBorder);
}

/* Selection */
::selection {
  background: var(--bdSelectionBg);
  color: var(--bdSelectionText);
}
::-moz-selection {
  background: var(--bdSelectionBg);
  color: var(--bdSelectionText);
}

/* ============================================
   HERO BACKGROUND — token-driven
   ============================================ */
.bdPagesHeroBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      var(--bdHeroBg1) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 40% at 20% 80%,
      var(--bdHeroBg2) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 40% at 80% 70%,
      var(--bdHeroBg3) 0%,
      transparent 60%
    );
}

/* ============================================
   MARQUEE — token-driven
   ============================================ */
.bdPagesMarqueeWrap {
  background: var(--bdMarqueeBg);
  border-top: 1px solid var(--bdBorder);
  border-bottom: 1px solid var(--bdBorder);
}

.bdPagesMarqueeDot {
  background: var(--bdMarqueeDot);
}

/* ============================================
   SECTION BACKGROUNDS — token-driven
   ============================================ */
.bdPagesSolutionSection {
  background: var(--bdSectionAltBg);
  border-top-color: var(--bdSectionAltBorder);
  border-bottom-color: var(--bdSectionAltBorder);
}

.bdPagesSocialSection {
  background: var(--bdSocialSectionBg);
}
.bdPagesFeaturesSection {
  background: var(--bdFeatureSectionBg);
}

/* Step connector line */
.bdPagesStepsLine {
  background: var(--bdStepLineGrad);
}

/* Theme toggle — token-driven */
.bdPagesThemeToggle {
  background: var(--bdToggleBg);
  border-color: var(--bdBorder);
}
.bdPagesThemeToggle__knob {
  background: var(--bdToggleKnob);
}
[data-theme="dark"] .bdPagesThemeToggle__knob {
  background: var(--bdToggleKnobActive);
}

/* Nav CTA glow — token-driven */
.bdPagesNavCta:hover {
  box-shadow: 0 0 24px var(--bdNavCtaHoverShadow);
}

/* ============================================
   BigDot Landing Pages v2 - Custom Stylesheet
   Convention: bdPages prefix + camelCase BEM-like
   Bootstrap 5.3 companion file
   ============================================================ */

/* Google Fonts */

/* CSS Variables */
/* ============================================================
   BIGDOT THEME TOKENS
   Apply [data-theme="light"] or [data-theme="dark"] on <html>
   Light mode is default (:root). Dark shifts to neon palette.
   ============================================================ */

/*  LIGHT MODE (default)  */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bdBg: #ffffff;
  --bdBgAlt: #f2f4ff;
  --bdBgCard: #ffffff;
  --bdBgCardHover: #f5f6ff;
  --bdBgSection: #f8f9ff;
  --bdNavBg: rgba(255, 255, 255, 0.94);
  --bdOverlayBg: rgba(28, 26, 22, 0.5);
  --glass-white: rgba(255, 255, 255, 0.95);

  /* Text */
  --bdText: #1c1a16;
  --bdTextMuted: #808080;
  --bdTextFaint: #a8a8b0;
  --bdTextInverse: #ffffff;

  /* Keep legacy names aligned */
  --site-text-color: #1c1a16;
  --site-text-muted-color: #808080;
  --site-border-color: #e0dad0;
  --site-input-bg: #ffffff;
  --site-input-border: #d1cfc9;
  --site-overlay-bg: rgba(28, 26, 22, 0.5);

  /* Brand accents */
  --bdAccent: #1c2d64;
  --bdAccentAlt: #2255e8;
  --bdCta: #f15a25;
  --bdCtaText: #ffffff;
  --bdHighlight: #1c2d64;
  --bdHighlightAlt: #2255e8;

  /* Borders */
  --bdBorder: rgba(28, 45, 100, 0.12);
  --bdBorderStrong: rgba(28, 45, 100, 0.25);
  --bdBorderSubtle: rgba(28, 45, 100, 0.06);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 8px 32px rgba(241, 90, 37, 0.12);
  --shadow-cta: 0 8px 32px rgba(241, 90, 37, 0.35);
  --shadow-accent: 0 0 24px rgba(34, 85, 232, 0.2);

  /* Form inputs */
  --bdInputBg: #ffffff;
  --bdInputBorder: #d1cfc9;
  --bdInputText: #1c1a16;
  --bdInputPlaceholder: #a8a8b0;
  --bdInputFocusBorder: #2255e8;
  --bdInputFocusShadow: rgba(34, 85, 232, 0.15);

  /* Badges / pills */
  --bdBadgeBg: rgba(34, 85, 232, 0.08);
  --bdBadgeBorder: rgba(34, 85, 232, 0.2);
  --bdBadgeText: #2255e8;

  /* Section stripe */
  --bdSectionAltBg: rgba(34, 85, 232, 0.03);
  --bdSectionAltBorder: rgba(34, 85, 232, 0.08);

  /* State surfaces */
  --bdSuccessBg: rgba(22, 163, 74, 0.08);
  --bdErrorBg: rgba(220, 38, 38, 0.08);
  --bdWarningBg: rgba(217, 119, 6, 0.08);
  --bdInfoBg: rgba(34, 85, 232, 0.08);

  /* Scrollbar */
  --bdScrollTrack: #f2f4ff;
  --bdScrollThumb: rgba(28, 45, 100, 0.18);

  /* Selection */
  --bdSelectionBg: rgba(34, 85, 232, 0.2);
  --bdSelectionText: #1c2d64;

  /* Hero radial blobs */
  --bdHeroBg1: rgba(34, 85, 232, 0.08);
  --bdHeroBg2: rgba(28, 45, 100, 0.06);
  --bdHeroBg3: rgba(241, 90, 37, 0.05);

  /* Marquee strip */
  --bdMarqueeBg: rgba(28, 45, 100, 0.03);
  --bdMarqueeDot: #2255e8;

  /* Feature section */
  --bdFeatureSectionBg: rgba(28, 45, 100, 0.02);

  /* Social proof section */
  --bdSocialSectionBg: rgba(28, 45, 100, 0.02);

  /* Step connector */
  --bdStepLineGrad: linear-gradient(90deg, #2255e8, #1c2d64);

  /* Theme toggle pill */
  --bdToggleBg: rgba(28, 45, 100, 0.12);
  --bdToggleKnob: #1c2d64;
  --bdToggleKnobActive: #c8f135;

  /* Nav CTA glow */
  --bdNavCtaHoverShadow: rgba(241, 90, 37, 0.35);

  /* Card accent colors */
  --bdCardBlue: rgba(34, 85, 232, 0.1);
  --bdCardBlueBorder: rgba(34, 85, 232, 0.18);
  --bdCardGreen: rgba(34, 85, 232, 0.07);
  --bdCardGreenBorder: rgba(28, 45, 100, 0.12);
  --bdCardPink: rgba(241, 90, 37, 0.1);
  --bdCardPinkBorder: rgba(241, 90, 37, 0.18);
  --bdCardOrange: rgba(28, 45, 100, 0.1);
  --bdCardOrangeBorder: rgba(28, 45, 100, 0.15);

  /* CTA section */
  --bdCtaSectionBg: var(--bdBgAlt);
  --bdCtaGlow1: rgba(34, 85, 232, 0.15);
  --bdCtaGlow2: rgba(241, 90, 37, 0.08);

  /* Pro theme accent (used in bdPagesPro* components) */
  --pro-gold: #b8902a;
  --pro-gold-light: #d4a83c;
  --pro-gold-dim: rgba(184, 144, 42, 0.18);
  --pro-gold-border: rgba(184, 144, 42, 0.2);
  --pro-bg: #f8f6f2;
  --pro-bg-card: #ffffff;
  --pro-bg-alt: #f0ece4;
  --pro-border: rgba(184, 144, 42, 0.2);
  --pro-text: #1a1814;
  --pro-muted: #6b6560;
  --pro-faint: #a8a4a0;
}

/*  DARK MODE  */
[data-theme="dark"] {
  /* Surfaces */
  --bdBg: #0a0a0f;
  --bdBgAlt: #13131c;
  --bdBgCard: #13131c;
  --bdBgCardHover: #1a1a28;
  --bdBgSection: #0d0d16;
  --bdNavBg: rgba(10, 10, 15, 0.92);
  --bdOverlayBg: rgba(0, 0, 0, 0.7);
  --glass-white: rgba(10, 10, 15, 0.95);

  /* Text */
  --bdText: #fafaf8;
  --bdTextMuted: #6b6b7a;
  --bdTextFaint: #3a3a44;
  --bdTextInverse: #0a0a0f;

  /* Legacy names — dark overrides */
  --site-text-color: #fafaf8;
  --site-text-muted-color: #6b6b7a;
  --site-border-color: rgba(255, 255, 255, 0.08);
  --site-input-bg: rgba(255, 255, 255, 0.04);
  --site-input-border: rgba(255, 255, 255, 0.1);
  --site-overlay-bg: rgba(0, 0, 0, 0.7);

  /* Brand accents — neon shift */
  --bdAccent: #c8f135;
  --bdAccentAlt: #1a1aff;
  --bdCta: #c8f135;
  --bdCtaText: #0a0a0f;
  --bdHighlight: #c8f135;
  --bdHighlightAlt: #ff3d8f;

  /* Borders */
  --bdBorder: rgba(255, 255, 255, 0.08);
  --bdBorderStrong: rgba(255, 255, 255, 0.16);
  --bdBorderSubtle: rgba(255, 255, 255, 0.04);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 8px 32px rgba(200, 241, 53, 0.08);
  --shadow-cta: 0 8px 32px rgba(200, 241, 53, 0.35);
  --shadow-accent: 0 0 24px rgba(200, 241, 53, 0.2);

  /* Form inputs */
  --bdInputBg: rgba(255, 255, 255, 0.04);
  --bdInputBorder: rgba(255, 255, 255, 0.1);
  --bdInputText: #fafaf8;
  --bdInputPlaceholder: #3a3a44;
  --bdInputFocusBorder: #c8f135;
  --bdInputFocusShadow: rgba(200, 241, 53, 0.15);

  /* Badges / pills */
  --bdBadgeBg: rgba(200, 241, 53, 0.1);
  --bdBadgeBorder: rgba(200, 241, 53, 0.25);
  --bdBadgeText: #c8f135;

  /* Section stripe */
  --bdSectionAltBg: rgba(255, 255, 255, 0.01);
  --bdSectionAltBorder: rgba(255, 255, 255, 0.04);

  /* State surfaces */
  --bdSuccessBg: rgba(22, 163, 74, 0.12);
  --bdErrorBg: rgba(220, 38, 38, 0.12);
  --bdWarningBg: rgba(217, 119, 6, 0.12);
  --bdInfoBg: rgba(200, 241, 53, 0.08);

  /* Scrollbar */
  --bdScrollTrack: #13131c;
  --bdScrollThumb: rgba(255, 255, 255, 0.1);

  /* Selection */
  --bdSelectionBg: rgba(200, 241, 53, 0.25);
  --bdSelectionText: #0a0a0f;

  /* Hero radial blobs */
  --bdHeroBg1: rgba(200, 241, 53, 0.08);
  --bdHeroBg2: rgba(26, 26, 255, 0.06);
  --bdHeroBg3: rgba(255, 61, 143, 0.05);

  /* Marquee strip */
  --bdMarqueeBg: rgba(255, 255, 255, 0.02);
  --bdMarqueeDot: #c8f135;

  /* Feature section */
  --bdFeatureSectionBg: rgba(255, 255, 255, 0.01);

  /* Social proof section */
  --bdSocialSectionBg: rgba(255, 255, 255, 0.01);

  /* Step connector */
  --bdStepLineGrad: linear-gradient(90deg, #c8f135, #1a1aff);

  /* Theme toggle pill */
  --bdToggleBg: rgba(255, 255, 255, 0.1);
  --bdToggleKnob: #fafaf8;
  --bdToggleKnobActive: #c8f135;

  /* Nav CTA glow */
  --bdNavCtaHoverShadow: rgba(200, 241, 53, 0.35);

  /* Card accent colors */
  --bdCardBlue: rgba(26, 26, 255, 0.15);
  --bdCardBlueBorder: rgba(26, 26, 255, 0.25);
  --bdCardGreen: rgba(200, 241, 53, 0.1);
  --bdCardGreenBorder: rgba(200, 241, 53, 0.2);
  --bdCardPink: rgba(255, 61, 143, 0.12);
  --bdCardPinkBorder: rgba(255, 61, 143, 0.2);
  --bdCardOrange: rgba(255, 107, 43, 0.12);
  --bdCardOrangeBorder: rgba(255, 107, 43, 0.2);

  /* CTA section */
  --bdCtaSectionBg: var(--bdBgAlt);
  --bdCtaGlow1: rgba(200, 241, 53, 0.12);
  --bdCtaGlow2: rgba(255, 61, 143, 0.06);

  /* Pro theme — dark shift */
  --pro-gold: #d4a83c;
  --pro-gold-light: #f0cc6e;
  --pro-gold-dim: rgba(212, 168, 60, 0.2);
  --pro-gold-border: rgba(212, 168, 60, 0.18);
  --pro-bg: #080c12;
  --pro-bg-card: #0d1520;
  --pro-bg-alt: #121c28;
  --pro-border: rgba(184, 144, 42, 0.14);
  --pro-text: #ddd8cc;
  --pro-muted: #5a6a7a;
  --pro-faint: #8a9aaa;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--site-primary-font);
  background-color: var(--bdBg);
  color: var(--bdText);
  overflow-x: hidden;
  transition:
    background-color var(--bdTransition),
    color var(--bdTransition);
}

/* Logo Image */
.bdPagesLogoImg {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.bdPagesLogoImg__light,
.bdPagesLogoImg__dark {
  height: 32px;
  width: auto;
  display: block;
  transition: opacity 0.2s;
}

/* Light mode: show light logo, hide dark logo */
[data-theme="light"] .bdPagesLogoImg__dark {
  display: none;
}

[data-theme="light"] .bdPagesLogoImg__light {
  display: block;
}

/* Dark mode: show dark logo, hide light logo */
[data-theme="dark"] .bdPagesLogoImg__light {
  display: none;
}

[data-theme="dark"] .bdPagesLogoImg__dark {
  display: block;
}

/* Navigation */
.bdPagesNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bdNavBg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bdBorder);
  padding: 1rem 0;
  transition:
    background var(--bdTransition),
    border-color var(--bdTransition);
}

.bdPagesLogo {
  font-family: var(--site-tertiary-font);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bdText);
  text-decoration: none;
}

.bdPagesLogo__dot {
  color: var(--bdAccent);
}

[data-theme="light"] .bdPagesLogo__dot {
  color: var(--site-quaternary-color);
}

.bdPagesNavCta {
  background: var(--bdCta);
  color: var(--bdCtaText);
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.55rem 1.4rem;
  border-radius: 100px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  white-space: nowrap;
  display: block !important;
}

.bdPagesNavCta:hover {
  transform: scale(1.05);
  box-shadow: 0 0 24px rgba(200, 241, 53, 0.35);
  color: var(--bdCtaText);
}

[data-theme="light"] .bdPagesNavCta:hover {
  box-shadow: 0 0 24px rgba(241, 90, 37, 0.35);
}

.bdPagesNavLink {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bdMuted);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

.bdPagesNavLink:hover {
  color: var(--bdText);
}

/* Theme Toggle */
.bdPagesThemeToggle {
  width: 48px;
  height: 26px;
  background: var(--bdBorder);
  border: 1.5px solid var(--bdBorder);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}

.bdPagesThemeToggle:hover {
  border-color: var(--bdAccent);
}

[data-theme="light"] .bdPagesThemeToggle:hover {
  border-color: var(--site-tertiary-color);
}

.bdPagesThemeToggle__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bdText);
  position: absolute;
  top: 2px;
  left: 2px;
  transition:
    transform 0.3s,
    background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

[data-theme="dark"] .bdPagesThemeToggle__knob {
  transform: translateX(22px);
  background: var(--bdAccent);
}

.bdPagesThemeToggle__icon {
  line-height: 1;
}

/* Hero Section */
.bdPagesHero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1rem 4rem;
  position: relative;
  overflow: hidden;
}

.bdPagesHeroBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(34, 85, 232, 0.08) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 40% at 20% 80%,
      rgba(28, 45, 100, 0.06) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 40% at 80% 70%,
      rgba(241, 90, 37, 0.05) 0%,
      transparent 60%
    );
}

/* bdPagesHeroBg dark handled by token — see :root [data-theme] */

.bdPagesHeroBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(34, 85, 232, 0.08);
  border: 1px solid rgba(34, 85, 232, 0.2);
  padding: 0.4rem 1rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--site-tertiary-color);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  animation: bdFadeUp 0.8s ease both;
}

[data-theme="dark"] .bdPagesHeroBadge {
  background: rgba(200, 241, 53, 0.1);
  border-color: rgba(200, 241, 53, 0.25);
  color: #c8f135;
}

.bdPagesHeroTitle {
  font-family: var(--site-tertiary-font);
  font-size: clamp(2.8rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--bdText);
  margin-bottom: 1.5rem;
  animation: bdFadeUp 0.8s 0.1s ease both;
}

.bdPagesHeroTitle__accent {
  color: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesHeroTitle__accent {
  color: #c8f135;
}

.bdPagesHeroTitle__strike {
  position: relative;
  color: var(--bdTextMuted);
  text-decoration: line-through;
  text-decoration-color: var(--site-quaternary-color);
  text-decoration-thickness: 3px;
}

[data-theme="dark"] .bdPagesHeroTitle__strike {
  text-decoration-color: #ff3d8f;
}

.bdPagesHeroSub {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--bdTextMuted);
  max-width: 540px;
  line-height: 1.65;
  margin: 0 auto 2.5rem;
  animation: bdFadeUp 0.8s 0.2s ease both;
}

.bdPagesHeroActions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  animation: bdFadeUp 0.8s 0.3s ease both;
}

/* Buttons */
.bdPagesBtnPrimary {
  background: var(--bdCta);
  color: var(--bdCtaText);
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 2.2rem;
  border-radius: 100px;
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bdPagesBtnPrimary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.bdPagesBtnPrimary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 32px rgba(241, 90, 37, 0.35);
  color: var(--bdCtaText);
}

[data-theme="dark"] .bdPagesBtnPrimary:hover {
  box-shadow: 0 8px 32px rgba(200, 241, 53, 0.35);
}

.bdPagesBtnPrimary:hover::after {
  opacity: 1;
}

.bdPagesBtnGhost {
  color: var(--bdText);
  font-family: var(--site-primary-font);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 2.2rem;
  border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid var(--bdBorder);
  transition:
    border-color 0.2s,
    background 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bdPagesBtnGhost:hover {
  border-color: var(--bdAccentAlt);
  background: rgba(34, 85, 232, 0.06);
  color: var(--bdText);
}

[data-theme="dark"] .bdPagesBtnGhost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

/* Hero Profile Cards */
.bdPagesHeroCards {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 260px;
  margin: 3rem auto 0;
  animation: bdFadeUp 0.8s 0.4s ease both;
}

.bdPagesProfileCard {
  position: absolute;
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 20px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .bdPagesProfileCard {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.bdPagesProfileCard--main {
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  animation: bdFloat 5s ease-in-out infinite;
}

.bdPagesProfileCard--left {
  left: 5%;
  top: 40px;
  width: 200px;
  animation: bdFloat 5s 1s ease-in-out infinite;
  opacity: 0.8;
}

.bdPagesProfileCard--right {
  right: 5%;
  top: 40px;
  width: 200px;
  animation: bdFloat 5s 2s ease-in-out infinite;
  opacity: 0.8;
}

.bdPagesCardAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #ffffff;
  flex-shrink: 0;
}

.bdPagesCardName {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bdText);
}

.bdPagesCardMeta {
  font-size: 0.78rem;
  color: var(--bdTextMuted);
}

.bdPagesCardTags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.bdPagesTag {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  background: rgba(28, 45, 100, 0.07);
  color: var(--bdTextMuted);
}

[data-theme="dark"] .bdPagesTag {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
}

.bdPagesTag--accent {
  background: rgba(34, 85, 232, 0.1);
  color: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesTag--accent {
  background: rgba(200, 241, 53, 0.15);
  color: #c8f135;
}

.bdPagesCardStat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--bdTextMuted);
}

.bdPagesCardStatDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bdPagesCardAlert {
  background: rgba(34, 85, 232, 0.08);
  border: 1px solid rgba(34, 85, 232, 0.15);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  color: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesCardAlert {
  background: rgba(200, 241, 53, 0.08);
  border-color: rgba(200, 241, 53, 0.2);
  color: #c8f135;
}

/* Marquee */
.bdPagesMarqueeWrap {
  overflow: hidden;
  padding: 1.25rem 0;
  background: rgba(28, 45, 100, 0.03);
  border-top: 1px solid var(--bdBorder);
  border-bottom: 1px solid var(--bdBorder);
}

/* bdPagesMarqueeWrap dark handled by token */

.bdPagesMarqueeTrack {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: bdMarquee 28s linear infinite;
}

.bdPagesMarqueeItem {
  font-family: var(--site-tertiary-font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bdTextMuted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.bdPagesMarqueeDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
  flex-shrink: 0;
}

/* bdPagesMarqueeDot dark handled by token */

/* Section Common */
.bdPagesSection {
  padding: 5rem 0;
}

.bdPagesSectionLabel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-tertiary-color);
  margin-bottom: 0.875rem;
  display: block;
}

[data-theme="dark"] .bdPagesSectionLabel {
  color: #c8f135;
}

.bdPagesSectionTitle {
  font-family: var(--site-tertiary-font);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--bdText);
}

.bdPagesSectionTitle__colored {
  color: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesSectionTitle__colored {
  color: #c8f135;
}

.bdPagesSectionTitle__pink {
  color: var(--site-quaternary-color);
}

[data-theme="dark"] .bdPagesSectionTitle__pink {
  color: #ff3d8f;
}

/* Problem Section */
.bdPagesProblemSection {
  background: var(--bdBg);
}

.bdPagesProblemCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--bdTransition),
    transform var(--bdTransition),
    box-shadow var(--bdTransition);
  height: 100%;
}

.bdPagesProblemCard:hover {
  border-color: var(--site-quaternary-color);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(241, 90, 37, 0.1);
}

[data-theme="dark"] .bdPagesProblemCard:hover {
  border-color: rgba(255, 61, 143, 0.35);
  box-shadow: none;
}

.bdPagesProblemCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--site-quaternary-color);
  opacity: 0;
  transition: opacity var(--bdTransition);
}

[data-theme="dark"] .bdPagesProblemCard::before {
  background: #ff3d8f;
}

.bdPagesProblemCard:hover::before {
  opacity: 1;
}

.bdPagesProblemNum {
  font-family: var(--cormorant-font);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(28, 45, 100, 0.07);
  line-height: 1;
  margin-bottom: 1rem;
}

[data-theme="dark"] .bdPagesProblemNum {
  color: rgba(255, 255, 255, 0.06);
}

.bdPagesProblemCard__title {
  font-family: var(--site-primary-font);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--bdText);
}

.bdPagesProblemCard__text {
  font-size: 0.9rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

/* Solution Section */
.bdPagesSolutionSection {
  background: rgba(34, 85, 232, 0.03);
  border-top: 1px solid rgba(34, 85, 232, 0.08);
  border-bottom: 1px solid rgba(34, 85, 232, 0.08);
}

/* bdPagesSolutionSection dark handled by token */

.bdPagesSolutionVisual {
  background: var(--bdBgCard);
  border: 1px solid rgba(34, 85, 232, 0.15);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 0 60px rgba(34, 85, 232, 0.06);
  position: relative;
}

[data-theme="dark"] .bdPagesSolutionVisual {
  border-color: rgba(200, 241, 53, 0.15);
  box-shadow: 0 0 60px rgba(200, 241, 53, 0.05);
}

.bdPagesProfilePreview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bdPagesPpHeader {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bdBorder);
}

.bdPagesPpAvatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--site-tertiary-color),
    var(--site-primary-color)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  color: #ffffff;
  flex-shrink: 0;
}

[data-theme="dark"] .bdPagesPpAvatar {
  background: linear-gradient(135deg, #c8f135, #1a1aff);
  color: #0a0a0f;
}

.bdPagesPpName {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bdText);
}

.bdPagesPpMeta {
  font-size: 0.8rem;
  color: var(--bdTextMuted);
}

.bdPagesPpSkills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bdPagesPpSkill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  background: rgba(34, 85, 232, 0.08);
  color: var(--site-tertiary-color);
  border: 1px solid rgba(34, 85, 232, 0.18);
}

[data-theme="dark"] .bdPagesPpSkill {
  background: rgba(200, 241, 53, 0.1);
  color: #c8f135;
  border-color: rgba(200, 241, 53, 0.2);
}

.bdPagesPpProjects {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bdPagesPpProject {
  background: rgba(28, 45, 100, 0.04);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

[data-theme="dark"] .bdPagesPpProject {
  background: rgba(255, 255, 255, 0.04);
}

.bdPagesPpProjectDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
  flex-shrink: 0;
  margin-top: 4px;
}

[data-theme="dark"] .bdPagesPpProjectDot {
  background: #c8f135;
}

.bdPagesPpProjectName {
  font-weight: 600;
  color: var(--bdText);
}

.bdPagesPpProjectType {
  color: var(--bdTextMuted);
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.bdPagesPpQr {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(28, 45, 100, 0.03);
  border: 1px solid var(--bdBorder);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: var(--bdTextMuted);
}

[data-theme="dark"] .bdPagesPpQr {
  background: rgba(255, 255, 255, 0.03);
}

.bdPagesQrBox {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--bdText);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 4px;
  flex-shrink: 0;
}

.bdPagesQrCell {
  background: var(--bdBg);
  border-radius: 1px;
}

.bdPagesQrCell--w {
  background: transparent;
}

.bdPagesSolutionPills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.bdPagesPill {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--bdBorder);
  color: var(--bdTextMuted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bdPagesPill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
}

[data-theme="dark"] .bdPagesPill__dot {
  background: #c8f135;
}

/* Benefits Section */
.bdPagesBenefitCard {
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--bdTransition);
  height: 100%;
}

.bdPagesBenefitCard:hover {
  transform: translateY(-6px);
}

.bdPagesBenefitCard--blue {
  background: linear-gradient(
    135deg,
    rgba(34, 85, 232, 0.1),
    rgba(34, 85, 232, 0.03)
  );
  border: 1px solid rgba(34, 85, 232, 0.18);
}

.bdPagesBenefitCard--lime {
  background: linear-gradient(
    135deg,
    rgba(34, 85, 232, 0.07),
    rgba(28, 45, 100, 0.03)
  );
  border: 1px solid rgba(28, 45, 100, 0.12);
}

.bdPagesBenefitCard--pink {
  background: linear-gradient(
    135deg,
    rgba(241, 90, 37, 0.1),
    rgba(241, 90, 37, 0.03)
  );
  border: 1px solid rgba(241, 90, 37, 0.18);
}

.bdPagesBenefitCard--orange {
  background: linear-gradient(
    135deg,
    rgba(28, 45, 100, 0.1),
    rgba(28, 45, 100, 0.03)
  );
  border: 1px solid rgba(28, 45, 100, 0.15);
}

[data-theme="dark"] .bdPagesBenefitCard--blue {
  background: linear-gradient(135deg, #1a1aff22, #1a1aff08);
  border-color: rgba(26, 26, 255, 0.2);
}

[data-theme="dark"] .bdPagesBenefitCard--lime {
  background: linear-gradient(
    135deg,
    rgba(200, 241, 53, 0.12),
    rgba(200, 241, 53, 0.03)
  );
  border-color: rgba(200, 241, 53, 0.2);
}

[data-theme="dark"] .bdPagesBenefitCard--pink {
  background: linear-gradient(
    135deg,
    rgba(255, 61, 143, 0.12),
    rgba(255, 61, 143, 0.03)
  );
  border-color: rgba(255, 61, 143, 0.2);
}

[data-theme="dark"] .bdPagesBenefitCard--orange {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 43, 0.12),
    rgba(255, 107, 43, 0.03)
  );
  border-color: rgba(255, 107, 43, 0.2);
}

.bdPagesBenefitIcon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.bdPagesBenefitCard__title {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  color: var(--bdText);
}

.bdPagesBenefitCard__text {
  font-size: 0.88rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

/* How It Works */
.bdPagesHowSection {
  background: var(--bdBg);
}

.bdPagesStepsWrap {
  position: relative;
  margin-top: 4rem;
}

.bdPagesStepsLine {
  display: none;
}

@media (min-width: 768px) {
  .bdPagesStepsLine {
    display: block;
    position: absolute;
    top: 32px;
    left: calc(16.67% + 1rem);
    right: calc(16.67% + 1rem);
    height: 1px;
    background: linear-gradient(
      90deg,
      var(--site-tertiary-color),
      var(--site-primary-color)
    );
  }

  /* bdPagesStepsLine dark handled by token */
}

.bdPagesStep {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
}

.bdPagesStepNum {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bdBgCard);
  border: 2px solid var(--site-tertiary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-tertiary-font);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--site-tertiary-color);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 24px rgba(34, 85, 232, 0.2);
}

.bdPagesStepNum--blue {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
  box-shadow: 0 0 24px rgba(28, 45, 100, 0.25);
}

[data-theme="dark"] .bdPagesStepNum--blue {
  border-color: #1a1aff;
  color: #1a1aff;
  box-shadow: 0 0 24px rgba(26, 26, 255, 0.3);
}

.bdPagesStepNum--lime {
  border-color: var(--site-tertiary-color);
  color: var(--site-tertiary-color);
  box-shadow: 0 0 24px rgba(34, 85, 232, 0.2);
}

[data-theme="dark"] .bdPagesStepNum--lime {
  border-color: #c8f135;
  color: #c8f135;
  box-shadow: 0 0 24px rgba(200, 241, 53, 0.2);
}

.bdPagesStepNum--pink {
  border-color: var(--site-quaternary-color);
  color: var(--site-quaternary-color);
  box-shadow: 0 0 24px rgba(241, 90, 37, 0.2);
}

[data-theme="dark"] .bdPagesStepNum--pink {
  border-color: #ff3d8f;
  color: #ff3d8f;
  box-shadow: 0 0 24px rgba(255, 61, 143, 0.2);
}

.bdPagesStep__title {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  color: var(--bdText);
}

.bdPagesStep__text {
  font-size: 0.87rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

/* Social Proof */
.bdPagesSocialSection {
  background: rgba(28, 45, 100, 0.02);
}

/* bdPagesSocialSection dark handled by token */

.bdPagesUseCard {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--bdBorder);
  transition:
    transform var(--bdTransition),
    border-color var(--bdTransition);
  height: 100%;
}

.bdPagesUseCard:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 85, 232, 0.25);
}

[data-theme="dark"] .bdPagesUseCard:hover {
  border-color: rgba(200, 241, 53, 0.2);
}

.bdPagesUseCardImg {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}

.bdPagesUseCard--handshake .bdPagesUseCardImg {
  background: linear-gradient(
    135deg,
    rgba(28, 45, 100, 0.12),
    rgba(34, 85, 232, 0.2)
  );
}

.bdPagesUseCard--briefcase .bdPagesUseCardImg {
  background: linear-gradient(
    135deg,
    rgba(34, 85, 232, 0.08),
    rgba(28, 45, 100, 0.15)
  );
}

.bdPagesUseCard--globe .bdPagesUseCardImg {
  background: linear-gradient(
    135deg,
    rgba(241, 90, 37, 0.08),
    rgba(241, 90, 37, 0.18)
  );
}

[data-theme="dark"] .bdPagesUseCard--handshake .bdPagesUseCardImg {
  background: linear-gradient(135deg, #0d0d2b, #1a1aff33);
}

[data-theme="dark"] .bdPagesUseCard--briefcase .bdPagesUseCardImg {
  background: linear-gradient(135deg, #0f1a0d, rgba(200, 241, 53, 0.2));
}

[data-theme="dark"] .bdPagesUseCard--globe .bdPagesUseCardImg {
  background: linear-gradient(135deg, #1a0d1a, rgba(255, 61, 143, 0.2));
}

.bdPagesUseCardBody {
  padding: 1.5rem;
  background: var(--bdBgCard);
}

.bdPagesUseCardBody__title {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--bdText);
}

.bdPagesUseCardBody__text {
  font-size: 0.83rem;
  color: var(--bdTextMuted);
  line-height: 1.6;
  margin: 0;
}

/* Testimonials */
.bdPagesTestiStrip {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bdPagesTestiStrip::-webkit-scrollbar {
  display: none;
}

.bdPagesTesti {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 16px;
  padding: 1.5rem;
  min-width: 280px;
  flex-shrink: 0;
  transition: border-color var(--bdTransition);
}

.bdPagesTesti:hover {
  border-color: rgba(34, 85, 232, 0.25);
}

[data-theme="dark"] .bdPagesTesti:hover {
  border-color: rgba(200, 241, 53, 0.2);
}

.bdPagesTestiText {
  font-size: 0.9rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin-bottom: 1rem;
  font-style: italic;
}

.bdPagesTestiAuthor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bdPagesTestiAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #ffffff;
  flex-shrink: 0;
}

[data-theme="dark"] .bdPagesTestiAvatar {
  color: #0a0a0f;
}

.bdPagesTestiName {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--bdText);
}

.bdPagesTestiRole {
  font-size: 0.75rem;
  color: var(--bdTextMuted);
}

/* Features Section */
.bdPagesFeaturesSection {
  background: var(--bdBgAlt);
}

[data-theme="dark"] .bdPagesFeaturesSection {
  background: var(--bdBg);
}

.bdPagesFeatureCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: 20px;
  padding: 2rem;
  transition:
    border-color var(--bdTransition),
    transform var(--bdTransition);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.bdPagesFeatureCard:hover {
  border-color: rgba(34, 85, 232, 0.25);
  transform: translateY(-4px);
}

[data-theme="dark"] .bdPagesFeatureCard:hover {
  border-color: rgba(200, 241, 53, 0.2);
}

.bdPagesFeatureCard::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--site-tertiary-color), transparent);
  opacity: 0;
  transition: opacity var(--bdTransition);
}

[data-theme="dark"] .bdPagesFeatureCard::after {
  background: linear-gradient(90deg, #c8f135, transparent);
}

.bdPagesFeatureCard:hover::after {
  opacity: 1;
}

.bdPagesFeatureIcon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.bdPagesFeatureCard__title {
  font-family: var(--site-primary-font);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  color: var(--bdText);
}

.bdPagesFeatureCard__text {
  font-size: 0.87rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

.bdPagesFeatureCard--wide {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.bdPagesFeatureCard--wide .bdPagesFeatureIcon {
  font-size: 3rem;
  flex-shrink: 0;
  margin-bottom: 0;
}

@media (max-width: 576px) {
  .bdPagesFeatureCard--wide {
    flex-direction: column;
  }
}

/* CTA Section */
.bdPagesCtaSection {
  padding: 7rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bdPagesCtaGlow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(
    ellipse,
    rgba(34, 85, 232, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

[data-theme="dark"] .bdPagesCtaGlow {
  background: radial-gradient(
    ellipse,
    rgba(200, 241, 53, 0.12) 0%,
    transparent 70%
  );
}

.bdPagesCtaNote {
  font-size: 0.8rem;
  color: var(--bdTextMuted);
  margin-top: 0.5rem;
}

/* Stats row */
.bdPagesStatVal {
  font-family: var(--site-tertiary-font);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--site-tertiary-color);
  line-height: 1;
}

[data-theme="dark"] .bdPagesStatVal {
  color: #c8f135;
}

.bdPagesStatLabel {
  font-size: 0.85rem;
  color: var(--bdTextMuted);
  margin-top: 0.25rem;
}

/* Footer */
.bdPagesFooter {
  padding: 1.75rem 0;
  border-top: 1px solid var(--bdBorder);
  font-size: 0.82rem;
  color: var(--bdTextMuted);
}

.bdPagesFooterLink {
  color: var(--bdTextMuted);
  text-decoration: none;
  transition: color var(--bdTransition);
}

.bdPagesFooterLink:hover {
  color: var(--bdText);
}

/* Scroll Reveal */
.bdPagesReveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.bdPagesReveal.bdPagesReveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animations */
@keyframes bdFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

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

@keyframes bdFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.bdPagesProfileCard--main {
  animation: bdFloat 5s ease-in-out infinite !important;
}

@keyframes bdMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Responsive Overrides */
@media (max-width: 767px) {
  /* .bdPagesProfileCard--left,
  .bdPagesProfileCard--right {
    display: none;
  } */

  .bdPagesProCtaFrame {
    inset: 15px !important;
  }

  .bdPagesProCtaSection {
    padding: 2rem 15px !important;
  }

  .bdPagesHeroCards .bdPagesProfileCard--left {
    left: -3%;
    top: -20px;
  }

  .bdPagesHeroTitle {
    line-height: 50px;
  }

  .bdPagesBtnPrimary {
    padding: 10px 25px !important;
  }

  .bdPagesHeroCards .bdPagesProfileCard--right {
    right: 50%;
    top: 220px;
    width: 200px;
  }

  .bdPagesHeroCards .bdPagesProfileCard--main {
    left: 35%;
    width: 260px;
    top: 50px;
  }

  .bdPagesHeroCards {
    height: 350px;
  }

  .bdPagesSection {
    padding: 3.5rem 0;
  }

  .bdPagesCtaSection {
    padding: 4rem 0;
  }

  .bdPagesStep {
    margin-bottom: 2rem;
  }

  .bdPagesHeroTitle {
    letter-spacing: -0.03em;
  }
}

@media (max-width: 991px) {
  .bdPagesStepsLine {
    display: none;
  }
}

/* ============================================================
   BigDot Professional Page - bdPagesPro components
   ============================================================ */

/* Pro Color Tokens */
:root {
  --pro-gold: #c9a84c;
  --pro-gold-light: #e8c97a;
  --pro-gold-dim: rgba(201, 168, 76, 0.12);
  --pro-gold-border: rgba(201, 168, 76, 0.2);
  --pro-bg: #0a0a0b;
  --pro-bg-card: #141418;
  --pro-bg-alt: #111114;
  --pro-border: rgba(255, 255, 255, 0.08);
  --pro-border-hover: rgba(255, 255, 255, 0.18);
  --pro-text: #f5f4f0;
  --pro-muted: #9ba3af;
  --pro-faint: #5a5a6a;
}

[data-theme="light"] {
  --pro-bg: #faf9f6;
  --pro-bg-card: #ffffff;
  --pro-bg-alt: #f3f1ec;
  --pro-border: rgba(28, 45, 100, 0.1);
  --pro-border-hover: rgba(201, 168, 76, 0.35);
  --pro-text: #1c1a16;
  --pro-muted: #6b6470;
  --pro-faint: #9b97a3;
}

/* Pro Noise Texture */
.bdPagesProNoise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 9999;
}

/* Pro Nav */
.bdPagesProNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    backdrop-filter 0.4s ease;
  background-color: #faf9f6;
}

.bdPagesProNav--scrolled {
  background: rgba(10, 10, 11, 0.92);
  border-bottom-color: var(--pro-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="light"] .bdPagesProNav--scrolled {
  background: rgba(250, 249, 246, 0.92);
}

.bdPagesProNavLink {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pro-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.bdPagesProNavLink:hover {
  color: var(--pro-text);
}

.bdPagesProNavCta {
  background: var(--pro-gold);
  color: #0a0a0b !important;
  font-family: var(--site-primary-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.6rem 1.4rem;
  border-radius: 2px;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.2s;
  white-space: nowrap;
  display: block !important;
}

.bdPagesProNavCta:hover {
  background: var(--pro-gold-light);
  transform: translateY(-1px);
  color: #0a0a0b !important;
}

/* Pro Hero */
.bdPagesProHero {
  min-height: 100vh;
  background: var(--pro-bg);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8rem 0 5rem;
}

.bdPagesProHeroBg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 50% at 70% 50%,
      rgba(201, 168, 76, 0.07) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 60% at 20% 80%,
      rgba(201, 168, 76, 0.04) 0%,
      transparent 60%
    );
}

[data-theme="light"] .bdPagesProHeroBg {
  background:
    radial-gradient(
      ellipse 60% 50% at 70% 50%,
      rgba(201, 168, 76, 0.12) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 60% at 20% 80%,
      rgba(28, 45, 100, 0.05) 0%,
      transparent 60%
    );
}

.bdPagesProHeroGrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    black 0%,
    transparent 100%
  );
}

[data-theme="light"] .bdPagesProHeroGrid {
  background-image:
    linear-gradient(rgba(28, 45, 100, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 45, 100, 0.04) 1px, transparent 1px);
}

.bdPagesProHeroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pro-gold);
  margin-bottom: 2rem;
  animation: bdFadeUp 0.8s ease 0.2s both;
}

.bdPagesProHeroEyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--pro-gold);
}

.bdPagesProHeroTitle {
  font-family: var(--cormorant-font);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--pro-text);
  margin-bottom: 1.75rem;
  animation: bdFadeUp 0.8s ease 0.35s both;
}

.bdPagesProHeroTitle em {
  font-style: italic;
  color: var(--pro-gold);
}

.bdPagesProHeroSub {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--pro-muted);
  max-width: 480px;
  line-height: 1.85;
  margin-bottom: 3rem;
  animation: bdFadeUp 0.8s ease 0.5s both;
}

.bdPagesProHeroActions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  animation: bdFadeUp 0.8s ease 0.65s both;
}

.bdPagesProBtnPrimary {
  background: var(--pro-gold);
  color: #0a0a0b;
  font-family: var(--site-primary-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}

.bdPagesProBtnPrimary:hover {
  background: var(--pro-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(201, 168, 76, 0.28);
  color: #0a0a0b;
}

.bdPagesProBtnGhost {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--pro-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s;
}

.bdPagesProBtnGhost:hover {
  color: var(--pro-text);
}

.bdPagesProBtnGhost svg {
  transition: transform 0.2s;
}

.bdPagesProBtnGhost:hover svg {
  transform: translateX(4px);
}

/* Pro Hero Visual */
.bdPagesProHeroVisual {
  animation: bdFadeUp 1.2s ease 0.8s both;
}

.bdPagesProProCard {
  width: 100%;
  max-width: 360px;
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  border-radius: 12px;
  padding: 2.25rem;
  position: relative;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
}

[data-theme="light"] .bdPagesProProCard {
  box-shadow: 0 20px 60px rgba(28, 45, 100, 0.12);
}

.bdPagesProProCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pro-gold), transparent);
  border-radius: 12px 12px 0 0;
}

.bdPagesProCardHeader {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.bdPagesProCardAvatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pro-gold) 0%, #8b5e1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cormorant-font);
  font-size: 1.3rem;
  font-weight: 600;
  color: #0a0a0b;
  flex-shrink: 0;
}

.bdPagesProCardName {
  font-family: var(--cormorant-font);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--pro-text);
}

.bdPagesProCardMeta {
  font-size: 0.72rem;
  color: var(--pro-muted);
  letter-spacing: 0.04em;
}

.bdPagesProCardStats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bdPagesProCardStat {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}

[data-theme="light"] .bdPagesProCardStat {
  background: rgba(28, 45, 100, 0.04);
}

.bdPagesProCardStatVal {
  font-family: var(--cormorant-font);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--pro-gold);
  line-height: 1;
}

.bdPagesProCardStatLbl {
  font-size: 0.62rem;
  color: var(--pro-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.bdPagesProCardTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.bdPagesProCardTag {
  font-size: 0.68rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--pro-border);
  border-radius: 100px;
  color: var(--pro-muted);
  letter-spacing: 0.04em;
}

.bdPagesProCardQr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: var(--pro-gold-dim);
  border: 1px solid var(--pro-gold-border);
  border-radius: 8px;
}

.bdPagesProQrBox {
  width: 44px;
  height: 44px;
  background: var(--pro-text);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 5px;
  flex-shrink: 0;
}

.bdPagesProQrDot {
  background: var(--pro-bg);
  border-radius: 1px;
}

.bdPagesProQrText {
  font-size: 0.72rem;
  color: var(--pro-gold);
  font-weight: 500;
}

.bdPagesProQrSub {
  font-size: 0.62rem;
  color: var(--pro-faint);
}

/* Float Badges */
.bdPagesProFloatBadge {
  position: absolute;
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.72rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pro-muted);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bdPagesProFloatBadge--top {
  top: -16px;
  right: -24px;
  animation: bdFloat 3s ease-in-out infinite;
}

.bdPagesProFloatBadge--bottom {
  bottom: 24px;
  left: -28px;
  animation: bdFloat 3.5s ease-in-out 0.5s infinite;
}

.bdPagesProBadgeDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Pro Section Common */
.bdPagesProSection {
  padding: 5.5rem 0;
  background: var(--pro-bg);
}

.bdPagesProSection--alt {
  background: var(--pro-bg-alt);
}

.bdPagesProDivider {
  height: 1px;
  background: var(--pro-border);
}

.bdPagesProEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pro-gold);
  margin-bottom: 1.25rem;
}

.bdPagesProEyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--pro-gold);
}

.bdPagesProEyebrow--center::before {
  display: none;
}

.bdPagesProTitle {
  font-family: var(--cormorant-font);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--pro-text);
}

.bdPagesProTitle em {
  font-style: italic;
  color: var(--pro-gold);
}

.bdPagesProBody {
  font-size: 1rem;
  color: var(--pro-muted);
  line-height: 1.85;
}

/* Problem Cards */
.bdPagesProProblemCard {
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  padding: 1.75rem 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color var(--bdTransition);
  height: 100%;
}

.bdPagesProProblemCard:hover {
  border-color: var(--pro-border-hover);
}

.bdPagesProProblemCard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pro-gold);
  opacity: 0.5;
}

.bdPagesProProblemNum {
  font-family: "DM Mono", "Courier New", monospace;
  font-size: 0.68rem;
  color: var(--pro-faint);
  margin-bottom: 0.625rem;
  letter-spacing: 0.1em;
}

.bdPagesProProblemTitle {
  font-family: var(--cormorant-font);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--pro-text);
}

.bdPagesProProblemDesc {
  font-size: 0.875rem;
  color: var(--pro-muted);
  line-height: 1.7;
}

/* Solution Visual */
.bdPagesProSolWrap {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesProSolCircle {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(201, 168, 76, 0.1) 0%,
    transparent 70%
  );
  border: 1px solid var(--pro-gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bdPagesProSolCircleInner {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--pro-bg-card);
  border: 1px solid rgba(201, 168, 76, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.bdPagesProSolIcon {
  font-size: 2.5rem;
}

.bdPagesProSolLabel {
  font-family: var(--cormorant-font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pro-gold);
  text-align: center;
  letter-spacing: 0.05em;
}

.bdPagesProOrbitTag {
  position: absolute;
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  padding: 0.5rem 0.875rem;
  border-radius: 100px;
  font-size: 0.7rem;
  color: var(--pro-muted);
  white-space: nowrap;
}

.bdPagesProOrbitTag--tr {
  top: 30px;
  right: 10px;
}

.bdPagesProOrbitTag--br {
  bottom: 50px;
  right: 0;
}

.bdPagesProOrbitTag--bl {
  bottom: 40px;
  left: 20px;
}

.bdPagesProOrbitTag--tl {
  top: 60px;
  left: 10px;
}

/* Benefits Table Grid */
.bdPagesProBenefitsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--pro-border);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4rem;
}

@media (max-width: 991px) {
  .bdPagesProBenefitsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .bdPagesProBenefitsGrid {
    grid-template-columns: 1fr;
  }
}

.bdPagesProBenefitItem {
  background: var(--pro-bg-card);
  padding: 2.5rem 2rem;
  transition: background var(--bdTransition);
}

.bdPagesProBenefitItem:hover {
  background: var(--pro-bg-alt);
}

.bdPagesProBenefitIcon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--pro-gold-dim);
  border: 1px solid var(--pro-gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.bdPagesProBenefitTitle {
  font-family: var(--cormorant-font);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--pro-text);
}

.bdPagesProBenefitDesc {
  font-size: 0.85rem;
  color: var(--pro-muted);
  line-height: 1.7;
}

/* Steps */
.bdPagesProSteps {
  margin-top: 4rem;
}

.bdPagesProStep {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2.5rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--pro-border);
  align-items: start;
}

.bdPagesProStep:last-child {
  border-bottom: none;
}

.bdPagesProStepNum {
  font-family: var(--cormorant-font);
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(201, 168, 76, 0.2);
  line-height: 1;
  padding-top: 4px;
}

.bdPagesProStepTitle {
  font-family: var(--cormorant-font);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
  color: var(--pro-text);
}

.bdPagesProStepDesc {
  font-size: 0.9rem;
  color: var(--pro-muted);
  line-height: 1.75;
}

/* Use Case Cards */
.bdPagesProUseCaseCard {
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  border-radius: 10px;
  padding: 2.25rem;
  transition:
    border-color var(--bdTransition),
    transform var(--bdTransition);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.bdPagesProUseCaseCard:hover {
  border-color: var(--pro-gold-border);
  transform: translateY(-4px);
}

.bdPagesProUseCaseCard::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--pro-gold), transparent);
  opacity: 0;
  transition: opacity var(--bdTransition);
}

.bdPagesProUseCaseCard:hover::after {
  opacity: 1;
}

.bdPagesProUseCaseEmoji {
  font-size: 2rem;
  margin-bottom: 1.25rem;
  display: block;
}

.bdPagesProUseCaseTitle {
  font-family: var(--cormorant-font);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--pro-text);
}

.bdPagesProUseCaseDesc {
  font-size: 0.875rem;
  color: var(--pro-muted);
  line-height: 1.75;
}

/* Feature Cards */
.bdPagesProFeatureCard {
  border: 1px solid var(--pro-border);
  border-radius: 10px;
  padding: 2.25rem;
  position: relative;
  transition: border-color var(--bdTransition);
  height: 100%;
}

.bdPagesProFeatureCard:hover {
  border-color: rgba(201, 168, 76, 0.25);
}

.bdPagesProFeatureCard--featured {
  background: var(--pro-bg-card);
  border-color: var(--pro-gold-border);
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .bdPagesProFeatureCard--featured {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.bdPagesProFeatureBadge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pro-gold);
  background: var(--pro-gold-dim);
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
}

.bdPagesProFeatureIconLg {
  font-size: 3rem;
  width: 80px;
  height: 80px;
  background: var(--pro-gold-dim);
  border: 1px solid var(--pro-gold-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bdPagesProFeatureIconSm {
  font-size: 1.5rem;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 1.25rem;
}

[data-theme="light"] .bdPagesProFeatureIconSm {
  background: rgba(28, 45, 100, 0.05);
}

.bdPagesProFeatureTitle {
  font-family: var(--cormorant-font);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
  color: var(--pro-text);
}

.bdPagesProFeatureDesc {
  font-size: 0.875rem;
  color: var(--pro-muted);
  line-height: 1.75;
}

/* Trust Stats */
.bdPagesProStatsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--pro-border);
  border: 1px solid var(--pro-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 3.5rem;
}

@media (max-width: 767px) {
  .bdPagesProStatsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bdPagesProStatItem {
  background: var(--pro-bg-card);
  padding: 2.5rem 2rem;
  text-align: center;
}

.bdPagesProStatVal {
  font-family: var(--cormorant-font);
  font-size: 3rem;
  font-weight: 600;
  color: var(--pro-gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.bdPagesProStatLbl {
  font-size: 0.8rem;
  color: var(--pro-muted);
  letter-spacing: 0.04em;
}

/* Testimonials */
.bdPagesProTestimonial {
  background: var(--pro-bg-card);
  border: 1px solid var(--pro-border);
  border-radius: 10px;
  padding: 2rem;
  transition: border-color var(--bdTransition);
  height: 100%;
}

.bdPagesProTestimonial:hover {
  border-color: var(--pro-gold-border);
}

.bdPagesProTestiStars {
  color: var(--pro-gold);
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.bdPagesProTestiText {
  font-size: 0.9rem;
  color: var(--pro-muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.bdPagesProTestiPerson {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bdPagesProTestiAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cormorant-font);
  font-size: 1rem;
  font-weight: 600;
  color: #0a0a0b;
  flex-shrink: 0;
}

.bdPagesProTestiName {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pro-text);
}

.bdPagesProTestiRole {
  font-size: 0.72rem;
  color: var(--pro-faint);
}

/* Pro CTA Section */
.bdPagesProCtaSection {
  padding: 7rem 0;
  text-align: center;
  background: var(--pro-bg);
  position: relative;
  overflow: hidden;
}

.bdPagesProCtaBg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    rgba(201, 168, 76, 0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.bdPagesProCtaFrame {
  position: absolute;
  inset: 2.5rem;
  border: 1px solid var(--pro-border);
  border-radius: 16px;
  pointer-events: none;
}

.bdPagesProCtaNote {
  font-size: 0.78rem;
  color: var(--pro-faint);
  margin-top: 1.25rem;
  letter-spacing: 0.04em;
}

/* Pro Footer */
.bdPagesProFooter {
  padding: 2.5rem 0;
  border-top: 1px solid var(--pro-border);
  background: var(--pro-bg);
}

.bdPagesProFooterLogo {
  font-family: var(--cormorant-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pro-muted);
  text-decoration: none;
}

.bdPagesProFooterLogo span {
  color: var(--pro-gold);
}

.bdPagesProFooterLink {
  font-size: 0.75rem;
  color: var(--pro-faint);
  text-decoration: none;
  transition: color var(--bdTransition);
}

.bdPagesProFooterLink:hover {
  color: var(--pro-muted);
}

.bdPagesProFooterCopy {
  font-size: 0.75rem;
  color: var(--pro-faint);
}

/* Pro Theme Toggle (reuses bdPages but with gold knob) */
.bdPagesProThemeToggle {
  width: 48px;
  height: 26px;
  background: rgba(201, 168, 76, 0.15);
  border: 1.5px solid var(--pro-gold-border);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}

.bdPagesProThemeToggle:hover {
  border-color: var(--pro-gold);
}

.bdPagesProThemeToggle__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pro-gold);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

[data-theme="dark"] .bdPagesProThemeToggle__knob {
  transform: translateX(22px);
}

/* ============================================================
   BigDot Onboarding Pages - Shared Tokens
   Convention: bdPagesProOnboard* (pro) / bdPagesOnboard* (students)
   ============================================================ */

/* Onboarding Variables - Light Mode defaults */
:root {
  --bdOnboard-bg: #f6f5f2;
  --bdOnboard-bgOff: #eeede9;
  --bdOnboard-bgCard: #ffffff;
  --bdOnboard-bgCard2: #f5f3ee;
  --bdOnboard-text: #1a1a1e;
  --bdOnboard-silver: #6b6b7a;
  --bdOnboard-muted: #9a9aaa;
  --bdOnboard-gold: #c9a84c;
  --bdOnboard-goldLight: #e8c97a;
  --bdOnboard-goldDim: rgba(201, 168, 76, 0.08);
  --bdOnboard-goldGlow: rgba(201, 168, 76, 0.1);
  --bdOnboard-goldBorder: rgba(201, 168, 76, 0.18);
  --bdOnboard-border: rgba(0, 0, 0, 0.08);
  --bdOnboard-borderFocus: rgba(201, 168, 76, 0.4);
  --bdOnboard-green: #18a262;
  --bdOnboard-red: #e53e3e;
  --bdOnboard-error: rgba(229, 62, 62, 0.08);
  --bdOnboard-linkedin: #0a66c2;
  --bdOnboard-linkedinDim: rgba(10, 102, 194, 0.08);
  --bdOnboard-white60: rgba(26, 26, 30, 0.55);
  --bdOnboard-white20: rgba(26, 26, 30, 0.12);
  --bdOnboard-white08: rgba(26, 26, 30, 0.05);
  --bdOnboard-ink2: #eae9e5;
  --bdOnboard-ink3: #f0ede8;
  --bdOnboard-ink4: #e8e5de;
  --bdOnboard-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bdOnboard-radius: 14px;
}

/* Onboarding Variables - Dark Mode overrides */
[data-theme="dark"] {
  --bdOnboard-bg: #09090b;
  --bdOnboard-bgOff: #111113;
  --bdOnboard-bgCard: #141417;
  --bdOnboard-bgCard2: #1a1a1f;
  --bdOnboard-text: #f2f0ea;
  --bdOnboard-silver: #8a9099;
  --bdOnboard-muted: #444454;
  --bdOnboard-goldDim: rgba(201, 168, 76, 0.12);
  --bdOnboard-goldGlow: rgba(201, 168, 76, 0.18);
  --bdOnboard-goldBorder: rgba(201, 168, 76, 0.25);
  --bdOnboard-border: rgba(255, 255, 255, 0.08);
  --bdOnboard-borderFocus: rgba(201, 168, 76, 0.5);
  --bdOnboard-green: #4ade80;
  --bdOnboard-red: #f87171;
  --bdOnboard-error: rgba(248, 113, 113, 0.1);
  --bdOnboard-linkedinDim: rgba(10, 102, 194, 0.12);
  --bdOnboard-white60: rgba(242, 240, 234, 0.6);
  --bdOnboard-white20: rgba(242, 240, 234, 0.2);
  --bdOnboard-white08: rgba(242, 240, 234, 0.08);
  --bdOnboard-ink2: #111119;
  --bdOnboard-ink3: #181824;
  --bdOnboard-ink4: #1e1e2c;
}

/* ============================================================
   Professional Onboarding (bdPagesProOnboard*)
   ============================================================ */

.bdPagesProOnboardWrap {
  background: var(--bdOnboard-bg);
  color: var(--bdOnboard-text);
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition:
    background 0.3s,
    color 0.3s;
}

.bdPagesProOnboardNoise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.015;
  pointer-events: none;
  z-index: 9999;
}

.bdPagesProOnboardHeader {
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bdOnboard-border);
  flex-shrink: 0;
  background: var(--bdOnboard-bg);
  transition:
    background 0.3s,
    border-color 0.3s;
}

.bdPagesProOnboardLogo {
  font-family: var(--site-secondary-font);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardLogo span {
  color: var(--bdOnboard-gold);
}

.bdPagesProOnboardHeaderRight {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
  letter-spacing: 0.05em;
}

.bdPagesProOnboardHeaderRight strong {
  color: var(--bdOnboard-gold);
  font-weight: 500;
}

/* Theme toggle (reusable for onboarding pages) */
.bdPagesOnboardThemeToggle {
  width: 42px;
  height: 24px;
  background: var(--bdOnboard-border);
  border: 1.5px solid var(--bdOnboard-goldBorder);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  transition:
    background 0.3s,
    border-color 0.3s;
  flex-shrink: 0;
}

.bdPagesOnboardThemeToggle:hover {
  border-color: var(--bdOnboard-gold);
}

.bdPagesOnboardThemeToggle__knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
}

[data-theme="dark"] .bdPagesOnboardThemeToggle__knob {
  transform: translateX(18px);
}

/* Wizard Layout */
.bdPagesProOnboardWizardWrap {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
}

/* Sidebar */
.bdPagesProOnboardSidebar {
  border-right: 1px solid var(--bdOnboard-border);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bdOnboard-bgOff);
  position: relative;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.bdPagesProOnboardSidebar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(201, 168, 76, 0.04), transparent);
  pointer-events: none;
}

.bdPagesProOnboardSidebarTitle {
  font-family: var(--site-secondary-font);
  font-weight: 600;
  color: var(--bdOnboard-silver);
  letter-spacing: 0.16em;
  margin-bottom: 36px;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.bdPagesProOnboardStepNav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bdPagesProOnboardStepItem {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.bdPagesProOnboardStepItem:hover:not(.active):not(.locked) {
  background: var(--bdOnboard-white08);
}

.bdPagesProOnboardStepItem.active {
  background: var(--bdOnboard-goldDim);
}

.bdPagesProOnboardStepItem.locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.bdPagesProOnboardStepBullet {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--bdOnboard-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--bdOnboard-silver);
  flex-shrink: 0;
  font-family: "DM Mono", monospace;
  transition: all 0.3s;
  margin-top: 1px;
}

.bdPagesProOnboardStepItem.active .bdPagesProOnboardStepBullet {
  border-color: var(--bdOnboard-gold);
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
}

.bdPagesProOnboardStepItem.done .bdPagesProOnboardStepBullet {
  border-color: var(--bdOnboard-green);
  background: rgba(74, 222, 128, 0.12);
  color: var(--bdOnboard-green);
}

.bdPagesProOnboardStepLabel {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bdOnboard-silver);
  transition: color 0.2s;
  line-height: 1.3;
}

.bdPagesProOnboardStepItem.active .bdPagesProOnboardStepLabel {
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardStepItem.done .bdPagesProOnboardStepLabel {
  color: var(--bdOnboard-silver);
}

.bdPagesProOnboardStepSub {
  font-size: 0.72rem;
  color: var(--bdOnboard-muted);
  margin-top: 3px;
  line-height: 1.4;
}

.bdPagesProOnboardStepItem.active .bdPagesProOnboardStepSub {
  color: rgba(201, 168, 76, 0.7);
}

.bdPagesProOnboardStepConnector {
  width: 1px;
  height: 20px;
  background: var(--bdOnboard-border);
  margin-left: 29px;
}

.bdPagesProOnboardStepConnector.done-line {
  background: rgba(74, 222, 128, 0.3);
}

.bdPagesProOnboardSidebarFooter {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--bdOnboard-border);
}

.bdPagesProOnboardProgressLabel {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--bdOnboard-silver);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.bdPagesProOnboardProgressBar {
  height: 3px;
  background: var(--bdOnboard-border);
  border-radius: 100px;
  overflow: hidden;
}

.bdPagesProOnboardProgressFill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--bdOnboard-gold),
    var(--bdOnboard-goldLight)
  );
  border-radius: 100px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bdPagesProOnboardSaveNote {
  font-size: 0.68rem;
  color: var(--bdOnboard-muted);
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bdPagesProOnboardSaveDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bdOnboard-green);
  animation: bdOnboardPulse 2s ease infinite;
}

/* Main content */
.bdPagesProOnboardMainContent {
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.bdPagesProOnboardStepPanel {
  display: none;
  flex: 1;
  flex-direction: column;
  animation: bdOnboardPanelIn 0.4s ease;
}

.bdPagesProOnboardStepPanel.active {
  display: flex;
}

@keyframes bdOnboardPanelIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.bdPagesProOnboardPanelHeader {
  padding: 48px 60px 36px;
  border-bottom: 1px solid var(--bdOnboard-border);
  background: linear-gradient(to bottom, var(--bdOnboard-goldDim), transparent);
}

.bdPagesProOnboardPanelEyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bdOnboard-gold);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdPagesProOnboardPanelEyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--bdOnboard-gold);
}

.bdPagesProOnboardPanelTitle {
  font-family: var(--site-secondary-font);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 10px;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardPanelTitle em {
  font-style: italic;
  color: var(--bdOnboard-gold);
}

.bdPagesProOnboardPanelDesc {
  font-size: 0.9rem;
  color: var(--bdOnboard-silver);
  max-width: 480px;
  line-height: 1.75;
}

.bdPagesProOnboardOptionalBadge {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bdOnboard-silver);
  background: var(--bdOnboard-white08);
  padding: 3px 9px;
  border-radius: 100px;
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 500;
}

.bdPagesProOnboardPanelBody {
  padding: 40px 60px;
  flex: 1;
}

/* Form grid */
.bdPagesProOnboardFormGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 680px;
}

.bdPagesProOnboardFormGrid.single {
  grid-template-columns: 1fr;
}

.bdPagesProOnboardFieldGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bdPagesProOnboardFieldGroup.full {
  grid-column: span 2;
}

.bdPagesProOnboardFieldLabel {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bdOnboard-silver);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bdPagesProOnboardReq {
  color: var(--bdOnboard-gold);
  font-size: 0.85rem;
}

.bdPagesProOnboardOptTag {
  font-size: 0.6rem;
  color: var(--bdOnboard-muted);
  background: var(--bdOnboard-white08);
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.06em;
  font-weight: 400;
  text-transform: none;
}

/* Form inputs scoped to onboarding wrapper */
.bdPagesProOnboardWrap input,
.bdPagesProOnboardWrap textarea,
.bdPagesProOnboardWrap select {
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-border);
  border-radius: 6px;
  color: var(--bdOnboard-text);
  font-family: "DM Sans", sans-serif;
  font-size: 0.92rem;
  font-weight: 300;
  padding: 12px 16px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
  outline: none;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.bdPagesProOnboardWrap input:focus,
.bdPagesProOnboardWrap textarea:focus,
.bdPagesProOnboardWrap select:focus {
  border-color: var(--bdOnboard-borderFocus);
  background: var(--bdOnboard-bgCard2);
  box-shadow: 0 0 0 3px var(--bdOnboard-goldDim);
}

.bdPagesProOnboardWrap input.error {
  border-color: var(--bdOnboard-red);
  background: var(--bdOnboard-error);
}

.bdPagesProOnboardWrap input::placeholder,
.bdPagesProOnboardWrap textarea::placeholder {
  color: var(--bdOnboard-muted);
}

.bdPagesProOnboardWrap select {
  cursor: pointer;
}

.bdPagesProOnboardWrap select option {
  background: var(--bdOnboard-bgCard2);
}

.bdPagesProOnboardWrap textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.bdPagesProOnboardFieldHint {
  font-size: 0.72rem;
  color: var(--bdOnboard-muted);
  line-height: 1.5;
}

.bdPagesProOnboardFieldError {
  font-size: 0.72rem;
  color: var(--bdOnboard-red);
  display: none;
}

.bdPagesProOnboardFieldError.show {
  display: block;
}

.bdPagesProOnboardFieldCounter {
  font-size: 0.68rem;
  color: var(--bdOnboard-muted);
  text-align: right;
  font-family: "DM Mono", monospace;
}

/* Avatar upload */
.bdPagesProOnboardAvatarUpload {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: var(--bdOnboard-bgCard);
  border: 1px dashed var(--bdOnboard-border);
  border-radius: 8px;
  transition: border-color 0.2s;
  cursor: pointer;
  position: relative;
}

.bdPagesProOnboardAvatarUpload:hover {
  border-color: var(--bdOnboard-goldBorder);
}

.bdPagesProOnboardAvatarPreview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdOnboard-gold), #8b5e1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-secondary-font);
  font-size: 1.8rem;
  font-weight: 600;
  color: #09090b;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.bdPagesProOnboardAvatarPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: none;
}

.bdPagesProOnboardAvatarUploadLabel {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--bdOnboard-text);
  margin-bottom: 4px;
}

.bdPagesProOnboardAvatarUploadSub {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
}

.bdPagesProOnboardAvatarUploadOr {
  font-size: 0.78rem;
  color: var(--bdOnboard-muted);
  margin: 12px 0 6px;
}

.bdPagesProOnboardUrlInputWrap {
  position: relative;
}

.bdPagesProOnboardUrlInputWrap input {
  padding-left: 36px;
}

.bdPagesProOnboardUrlIcon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bdOnboard-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

/* Education section */
.bdPagesProOnboardEduList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
}

.bdPagesProOnboardEduCard {
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-border);
  border-radius: 8px;
  overflow: hidden;
}

.bdPagesProOnboardEduCardHeader {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.2s;
}

.bdPagesProOnboardEduCardHeader:hover {
  background: var(--bdOnboard-white08);
}

.bdPagesProOnboardEduCardTitle {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardEduCardSub {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
  margin-top: 2px;
}

.bdPagesProOnboardEduCardActions {
  display: flex;
  gap: 8px;
}

.bdPagesProOnboardBtnIcon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--bdOnboard-border);
  background: transparent;
  color: var(--bdOnboard-silver);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.bdPagesProOnboardBtnIcon:hover {
  border-color: var(--bdOnboard-borderFocus);
  color: var(--bdOnboard-text);
  background: var(--bdOnboard-goldDim);
}

.bdPagesProOnboardBtnIcon.danger:hover {
  border-color: var(--bdOnboard-red);
  color: var(--bdOnboard-red);
  background: var(--bdOnboard-error);
}

.bdPagesProOnboardEduCardBody {
  padding: 0 20px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Add button */
.bdPagesProOnboardAddBtn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: transparent;
  border: 1px dashed var(--bdOnboard-goldBorder);
  border-radius: 8px;
  color: var(--bdOnboard-gold);
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  max-width: 680px;
}

.bdPagesProOnboardAddBtn:hover {
  background: var(--bdOnboard-goldDim);
  border-color: var(--bdOnboard-gold);
}

.bdPagesProOnboardAddBtnIcon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

/* Profession pills */
.bdPagesProOnboardProfessionPills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.bdPagesProOnboardPill {
  padding: 9px 18px;
  border: 1px solid var(--bdOnboard-border);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--bdOnboard-silver);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.bdPagesProOnboardPill:hover {
  border-color: var(--bdOnboard-goldBorder);
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardPill.selected {
  border-color: var(--bdOnboard-gold);
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
  font-weight: 500;
}

/* Panel footer */
.bdPagesProOnboardPanelFooter {
  padding: 28px 60px;
  border-top: 1px solid var(--bdOnboard-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bdOnboard-white08);
  flex-shrink: 0;
}

.bdPagesProOnboardBtnBack {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--bdOnboard-border);
  color: var(--bdOnboard-silver);
  padding: 12px 24px;
  border-radius: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.bdPagesProOnboardBtnBack:hover {
  border-color: var(--bdOnboard-borderFocus);
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardBtnNext {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bdOnboard-gold);
  border: none;
  color: #09090b;
  padding: 13px 32px;
  border-radius: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}

.bdPagesProOnboardBtnNext:hover {
  background: var(--bdOnboard-goldLight);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.22);
}

.bdPagesProOnboardBtnSkip {
  background: transparent;
  border: none;
  color: var(--bdOnboard-muted);
  font-family: "DM Sans", sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 12px 16px;
  transition: color 0.2s;
}

.bdPagesProOnboardBtnSkip:hover {
  color: var(--bdOnboard-silver);
}

.bdPagesProOnboardFooterRight {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* LinkedIn section */
.bdPagesProOnboardLinkedinHero {
  max-width: 680px;
  margin: 0 auto;
}

.bdPagesProOnboardLiCard {
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.bdPagesProOnboardLiCardHeader {
  padding: 28px 32px;
  background: linear-gradient(
    135deg,
    var(--bdOnboard-linkedinDim) 0%,
    transparent 70%
  );
  border-bottom: 1px solid var(--bdOnboard-border);
  display: flex;
  align-items: center;
  gap: 20px;
}

.bdPagesProOnboardLiLogo {
  width: 52px;
  height: 52px;
  background: var(--bdOnboard-linkedin);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: white;
  font-family: serif;
  flex-shrink: 0;
}

.bdPagesProOnboardLiTitle {
  font-family: var(--site-secondary-font);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardLiSub {
  font-size: 0.85rem;
  color: var(--bdOnboard-silver);
  line-height: 1.5;
}

.bdPagesProOnboardLiDataPreview {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bdPagesProOnboardLiDataItem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(10, 102, 194, 0.06);
  border: 1px solid rgba(10, 102, 194, 0.15);
  border-radius: 8px;
}

.bdPagesProOnboardLiDataIcon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(10, 102, 194, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.bdPagesProOnboardLiDataText {
  flex: 1;
}

.bdPagesProOnboardLiDataLabel {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardLiDataDesc {
  font-size: 0.72rem;
  color: var(--bdOnboard-silver);
  margin-top: 2px;
}

.bdPagesProOnboardLiCheck {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--bdOnboard-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--bdOnboard-green);
  transition: all 0.3s;
}

.bdPagesProOnboardLiCheck.checked {
  border-color: var(--bdOnboard-green);
  background: rgba(74, 222, 128, 0.12);
}

.bdPagesProOnboardBtnLinkedin {
  width: 100%;
  background: var(--bdOnboard-linkedin);
  border: none;
  color: white;
  padding: 16px 32px;
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}

.bdPagesProOnboardBtnLinkedin:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(10, 102, 194, 0.35);
}

.bdPagesProOnboardBtnLinkedin:active {
  transform: translateY(0);
}

.bdPagesProOnboardBtnLinkedin .li-icon {
  font-size: 1.3rem;
  font-weight: 900;
  font-family: serif;
}

.bdPagesProOnboardLiConnecting {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 40px 32px;
  gap: 20px;
}

.bdPagesProOnboardLiConnecting.show {
  display: flex;
}

.bdPagesProOnboardLiSpinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(10, 102, 194, 0.2);
  border-top-color: var(--bdOnboard-linkedin);
  border-radius: 50%;
  animation: bdOnboardSpin 0.8s linear infinite;
}

.bdPagesProOnboardLiConnectSteps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.bdPagesProOnboardLiConnectStep {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--bdOnboard-muted);
  transition: color 0.3s;
}

.bdPagesProOnboardLiConnectStep.active {
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardLiConnectStep.done {
  color: var(--bdOnboard-green);
}

.bdPagesProOnboardLiConnectDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bdOnboard-border);
  flex-shrink: 0;
  transition: background 0.3s;
}

.bdPagesProOnboardLiConnectStep.active .bdPagesProOnboardLiConnectDot {
  background: var(--bdOnboard-linkedin);
  animation: bdOnboardPulse 1s infinite;
}

.bdPagesProOnboardLiConnectStep.done .bdPagesProOnboardLiConnectDot {
  background: var(--bdOnboard-green);
}

.bdPagesProOnboardSecurityNote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bdOnboard-white08);
  border-radius: 8px;
  border: 1px solid var(--bdOnboard-border);
}

.bdPagesProOnboardSecurityIcon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.bdPagesProOnboardSecurityText {
  font-size: 0.76rem;
  color: var(--bdOnboard-silver);
  line-height: 1.6;
}

.bdPagesProOnboardSecurityText strong {
  color: var(--bdOnboard-text);
  font-weight: 500;
}

.bdPagesProOnboardLiSkipText {
  text-align: center;
  font-size: 0.78rem;
  color: var(--bdOnboard-muted);
  margin-top: 16px;
}

.bdPagesProOnboardLiSkipText button {
  background: none;
  border: none;
  color: var(--bdOnboard-silver);
  cursor: pointer;
  font-size: 0.78rem;
  font-family: "DM Sans", sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.bdPagesProOnboardLiSkipText button:hover {
  color: var(--bdOnboard-text);
}

/* Completion panel */
#bdProOnboardCompletionPanel {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px;
  flex-direction: column;
  gap: 28px;
  animation: bdOnboardPanelIn 0.5s ease;
}

#bdProOnboardCompletionPanel.show {
  display: flex;
}

.bdPagesProOnboardCompletionIcon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdOnboard-gold), #8b5e1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  animation: bdOnboardPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bdOnboardPopIn {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.bdPagesProOnboardCompletionTitle {
  font-family: var(--site-secondary-font);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardCompletionTitle em {
  font-style: italic;
  color: var(--bdOnboard-gold);
}

.bdPagesProOnboardCompletionSub {
  font-size: 1rem;
  color: var(--bdOnboard-silver);
  max-width: 400px;
  line-height: 1.75;
}

.bdPagesProOnboardCompletionCard {
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-goldBorder);
  border-radius: 10px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  width: 100%;
}

.bdPagesProOnboardCompAvatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdOnboard-gold), #8b5e1a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-secondary-font);
  font-size: 1.4rem;
  font-weight: 700;
  color: #09090b;
  flex-shrink: 0;
}

.bdPagesProOnboardCompName {
  font-family: var(--site-secondary-font);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--bdOnboard-text);
}

.bdPagesProOnboardCompRole {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
  margin-top: 3px;
}

.bdPagesProOnboardBtnViewProfile {
  background: var(--bdOnboard-gold);
  border: none;
  color: #09090b;
  padding: 14px 36px;
  border-radius: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}

.bdPagesProOnboardBtnViewProfile:hover {
  background: var(--bdOnboard-goldLight);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(201, 168, 76, 0.25);
}

/* Keyframes */
@keyframes bdOnboardSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bdOnboardPulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .bdPagesProOnboardWizardWrap {
    grid-template-columns: 1fr;
  }

  .bdPagesProOnboardSidebar {
    display: none;
  }

  .bdPagesProOnboardPanelHeader,
  .bdPagesProOnboardPanelBody,
  .bdPagesProOnboardPanelFooter {
    padding-left: 24px;
    padding-right: 24px;
  }

  .bdPagesProOnboardFormGrid {
    grid-template-columns: 1fr;
  }

  .bdPagesProOnboardFieldGroup.full {
    grid-column: span 1;
  }

  .bdPagesProOnboardEduCardBody {
    grid-template-columns: 1fr;
  }

  .bdPagesProOnboardHeader {
    padding: 16px 24px;
  }
}

/* ============================================================
   Students Onboarding (bdPagesOnboard*)
   ============================================================ */

.bdPagesOnboardApp {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: var(--bdOnboard-bg);
  color: var(--bdOnboard-text);
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  transition:
    background 0.3s,
    color 0.3s;
}

.bdPagesOnboardTopNav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--bdOnboard-border);
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition:
    background 0.3s,
    border-color 0.3s;
}

[data-theme="dark"] .bdPagesOnboardTopNav {
  background: rgba(8, 8, 15, 0.92);
}

.bdPagesOnboardNavBrand {
  font-family: var(--site-secondary-font);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardNavDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  box-shadow: 0 0 10px var(--bdOnboard-gold);
  animation: bdOnboardNavPulse 2.5s ease-in-out infinite;
}

@keyframes bdOnboardNavPulse {
  0%,
  100% {
    box-shadow: 0 0 8px var(--bdOnboard-gold);
  }

  50% {
    box-shadow:
      0 0 20px var(--bdOnboard-gold),
      0 0 40px rgba(200, 168, 75, 0.3);
  }
}

.bdPagesOnboardNavHelp {
  font-size: 0.82rem;
  color: var(--bdOnboard-silver);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.2s;
}

.bdPagesOnboardNavHelp:hover {
  color: var(--bdOnboard-text);
}

.bdPagesOnboardProgressBar {
  height: 3px;
  background: var(--bdOnboard-white08);
}

.bdPagesOnboardProgressFill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--bdOnboard-gold),
    var(--bdOnboard-goldLight)
  );
  transition: width 0.6s var(--bdOnboard-ease);
  border-radius: 0 2px 2px 0;
}

.bdPagesOnboardStepDots {
  display: flex;
  padding: 0 40px;
  background: var(--bdOnboard-ink2);
  border-bottom: 1px solid var(--bdOnboard-white08);
  overflow-x: auto;
  transition: background 0.3s;
}

.bdPagesOnboardStepDot {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
  transition: all 0.3s;
  white-space: nowrap;
  min-width: 100px;
  position: relative;
}

.bdPagesOnboardStepDot::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--bdOnboard-white08);
}

.bdPagesOnboardStepDot:last-child::after {
  display: none;
}

.bdPagesOnboardStepDot.done {
  cursor: pointer;
}

.bdPagesOnboardStepDotNum {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  background: var(--bdOnboard-white08);
  color: var(--bdOnboard-silver);
  transition: all 0.3s;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.bdPagesOnboardStepDot.active .bdPagesOnboardStepDotNum {
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  font-weight: 600;
}

.bdPagesOnboardStepDot.done .bdPagesOnboardStepDotNum {
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
  border-color: var(--bdOnboard-goldBorder);
}

.bdPagesOnboardStepDotLabel {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
}

.bdPagesOnboardStepDot.active .bdPagesOnboardStepDotLabel {
  color: var(--bdOnboard-text);
  font-weight: 500;
}

.bdPagesOnboardMain {
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: calc(100vh - 115px);
}

.bdPagesOnboardContentArea {
  padding: 56px 56px 80px;
  overflow-y: auto;
  max-height: calc(100vh - 115px);
}

.bdPagesOnboardSidebar {
  background: var(--bdOnboard-ink2);
  border-left: 1px solid var(--bdOnboard-white08);
  padding: 40px 32px;
  position: sticky;
  top: 115px;
  max-height: calc(100vh - 115px);
  overflow-y: auto;
  transition: background 0.3s;
}

.bdPagesOnboardStepPanel {
  display: none;
  animation: bdOnboardSlideIn 0.4s var(--bdOnboard-ease) both;
}

.bdPagesOnboardStepPanel.active {
  display: block;
}

@keyframes bdOnboardSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.bdPagesOnboardStepEyebrow {
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bdOnboard-gold);
  margin-bottom: 12px;
}

.bdPagesOnboardStepTitle {
  font-family: var(--site-secondary-font);
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardStepSubtitle {
  font-size: 0.92rem;
  color: var(--bdOnboard-silver);
  margin-bottom: 48px;
  max-width: 460px;
}

/* Purpose cards */
.bdPagesOnboardPurposeGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bdPagesOnboardPurposeCard {
  background: var(--bdOnboard-ink3);
  border: 1.5px solid var(--bdOnboard-white08);
  border-radius: var(--bdOnboard-radius);
  padding: 36px 28px;
  cursor: pointer;
  transition: all 0.3s var(--bdOnboard-ease);
  position: relative;
  overflow: hidden;
}

.bdPagesOnboardPurposeCard:hover {
  border-color: var(--bdOnboard-goldBorder);
  background: var(--bdOnboard-ink4);
  transform: translateY(-2px);
}

.bdPagesOnboardPurposeCard.selected {
  border-color: var(--bdOnboard-gold);
  background: linear-gradient(
    150deg,
    var(--bdOnboard-ink4) 0%,
    var(--bdOnboard-ink3) 100%
  );
  box-shadow:
    0 0 0 1px var(--bdOnboard-gold),
    0 20px 40px rgba(200, 168, 75, 0.1);
}

.bdPagesOnboardPurposeCard.selected::after {
  content: "✓";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesOnboardPurposeIcon {
  font-size: 2.4rem;
  margin-bottom: 20px;
  display: block;
}

.bdPagesOnboardPurposeName {
  font-family: var(--site-secondary-font);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardPurposeDesc {
  font-size: 0.82rem;
  color: var(--bdOnboard-silver);
  line-height: 1.6;
}

.bdPagesOnboardPurposeRecommend {
  display: inline-block;
  margin-top: 16px;
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  font-family: "DM Mono", monospace;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--bdOnboard-goldBorder);
}

/* Plan cards */
.bdPagesOnboardPlanGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.bdPagesOnboardPlanCard {
  background: var(--bdOnboard-ink3);
  border: 1.5px solid var(--bdOnboard-white08);
  border-radius: var(--bdOnboard-radius);
  padding: 28px 22px;
  cursor: pointer;
  transition: all 0.3s var(--bdOnboard-ease);
  position: relative;
}

.bdPagesOnboardPlanCard:hover {
  border-color: var(--bdOnboard-goldBorder);
  background: var(--bdOnboard-ink4);
}

.bdPagesOnboardPlanCard.selected {
  border-color: var(--bdOnboard-gold);
  background: linear-gradient(
    150deg,
    var(--bdOnboard-ink4),
    var(--bdOnboard-ink3)
  );
  box-shadow:
    0 0 0 1px var(--bdOnboard-gold),
    0 16px 32px rgba(200, 168, 75, 0.1);
}

.bdPagesOnboardPlanCard.selected::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesOnboardPlanBadge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: 0 0 6px 6px;
  font-family: "DM Mono", monospace;
  white-space: nowrap;
}

.bdPagesOnboardPlanName {
  font-family: "DM Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--bdOnboard-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.bdPagesOnboardPlanPrice {
  font-family: var(--site-secondary-font);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 2px;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardPlanPrice sup {
  font-size: 1rem;
  vertical-align: super;
  font-weight: 400;
}

.bdPagesOnboardPlanPeriod {
  font-size: 0.72rem;
  color: var(--bdOnboard-silver);
  margin-bottom: 20px;
}

.bdPagesOnboardPlanFreeText {
  font-family: var(--site-secondary-font);
  font-size: 2rem;
  color: var(--bdOnboard-green);
  font-weight: 600;
  margin-bottom: 2px;
}

.bdPagesOnboardPlanFeatures {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bdPagesOnboardPlanFeatures li {
  font-size: 0.78rem;
  color: var(--bdOnboard-white60);
  display: flex;
  gap: 7px;
  align-items: flex-start;
}

.bdPagesOnboardPlanFeatures li::before {
  content: "â—†";
  color: var(--bdOnboard-gold);
  font-size: 0.58rem;
  margin-top: 4px;
  flex-shrink: 0;
}

/* Hardware cards */
.bdPagesOnboardHwGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.bdPagesOnboardHwCard {
  background: var(--bdOnboard-ink3);
  border: 1.5px solid var(--bdOnboard-white08);
  border-radius: var(--bdOnboard-radius);
  padding: 28px 24px;
  cursor: pointer;
  transition: all 0.3s var(--bdOnboard-ease);
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: center;
}

.bdPagesOnboardHwCard:hover {
  border-color: var(--bdOnboard-goldBorder);
  background: var(--bdOnboard-ink4);
}

.bdPagesOnboardHwCard.selected {
  border-color: var(--bdOnboard-gold);
  background: linear-gradient(
    150deg,
    var(--bdOnboard-ink4),
    var(--bdOnboard-ink3)
  );
  box-shadow:
    0 0 0 1px var(--bdOnboard-gold),
    0 16px 32px rgba(200, 168, 75, 0.1);
}

.bdPagesOnboardHwCard.selected::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPagesOnboardHwCard.full-width {
  grid-column: span 2;
  grid-template-columns: 80px 1fr auto;
}

.bdPagesOnboardHwVisual {
  width: 80px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.bdPagesOnboardHwVisual.pvc {
  background: linear-gradient(135deg, #2a2a3d, #1a1a2a);
}

.bdPagesOnboardHwVisual.metal {
  background: linear-gradient(135deg, #3a3a4a, #232330);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bdPagesOnboardHwVisual.wood {
  background: linear-gradient(135deg, #3d2a1a, #2a1a0d);
}

.bdPagesOnboardHwVisual.sticker {
  background: linear-gradient(135deg, #1a2a1e, #101a12);
}

.bdPagesOnboardHwVisual.combo {
  background: linear-gradient(135deg, #2a1a08, #1a1005);
}

.bdPagesOnboardHwName {
  font-family: var(--site-secondary-font);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardHwDesc {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
  line-height: 1.5;
  margin-bottom: 8px;
}

.bdPagesOnboardHwPrice {
  font-family: "DM Mono", monospace;
  font-size: 0.8rem;
  color: var(--bdOnboard-gold);
}

.bdPagesOnboardHwTag {
  display: inline-block;
  margin-top: 4px;
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid var(--bdOnboard-goldBorder);
  font-family: "DM Mono", monospace;
}

.bdPagesOnboardHwSaving {
  text-align: right;
  white-space: nowrap;
}

.bdPagesOnboardSaveAmount {
  font-family: var(--site-secondary-font);
  font-size: 1.5rem;
  color: var(--bdOnboard-green);
  font-weight: 600;
}

.bdPagesOnboardSaveLabel {
  font-size: 0.72rem;
  color: var(--bdOnboard-silver);
}

/* Personalize step */
.bdPagesOnboardPersonalizeLayout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.bdPagesOnboardFormGroup {
  margin-bottom: 28px;
}

.bdPagesOnboardFormLabel {
  display: block;
  font-size: 0.78rem;
  font-family: "DM Mono", monospace;
  letter-spacing: 0.1em;
  color: var(--bdOnboard-silver);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.bdPagesOnboardFormInput {
  width: 100%;
  background: var(--bdOnboard-ink3);
  border: 1.5px solid var(--bdOnboard-white08);
  border-radius: 10px;
  padding: 14px 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  color: var(--bdOnboard-text);
  transition: all 0.2s;
  outline: none;
}

.bdPagesOnboardFormInput:focus {
  border-color: var(--bdOnboard-gold);
  box-shadow: 0 0 0 3px var(--bdOnboard-goldDim);
}

.bdPagesOnboardFormInput::placeholder {
  color: var(--bdOnboard-silver);
}

.bdPagesOnboardColorPicker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bdPagesOnboardColorOpt {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.bdPagesOnboardColorOpt.active {
  border-color: var(--bdOnboard-text);
  box-shadow: 0 0 0 3px var(--bdOnboard-white20);
  transform: scale(1.1);
}

/* Card preview */
.bdPagesOnboardCardPreviewWrap {
  position: sticky;
  top: 0;
}

.bdPagesOnboardCardPreviewLabel {
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--bdOnboard-silver);
  text-align: center;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.bdPagesOnboardCard3d {
  width: 100%;
  aspect-ratio: 1.586/1;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px var(--bdOnboard-white08);
  transition: all 0.5s var(--bdOnboard-ease);
  cursor: pointer;
}

.bdPagesOnboardCard3d:hover {
  transform: perspective(600px) rotateY(-8deg) rotateX(4deg);
}

.bdPagesOnboardCardBg {
  position: absolute;
  inset: 0;
  transition: background 0.4s;
  background: linear-gradient(135deg, #1c1c28 0%, #2a2a3a 50%, #1a1a25 100%);
}

.bdPagesOnboardCardNfcIcon {
  position: absolute;
  top: 16px;
  right: 18px;
  opacity: 0.4;
  font-size: 1.2rem;
}

.bdPagesOnboardCardContent {
  position: absolute;
  inset: 0;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bdPagesOnboardCardLogoCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-secondary-font);
  font-weight: 700;
  font-size: 1.1rem;
  color: #08080f;
  margin-bottom: auto;
  transition: all 0.3s;
}

.bdPagesOnboardCardUserName {
  font-family: var(--site-secondary-font);
  font-size: 1.2rem;
  font-weight: 600;
  color: #f5f3ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s;
}

.bdPagesOnboardCardUserTitle {
  font-size: 0.68rem;
  color: rgba(245, 243, 238, 0.6);
  margin-top: 1px;
  transition: all 0.3s;
}

.bdPagesOnboardCardBottom {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-family: "DM Mono", monospace;
  font-size: 0.58rem;
  color: rgba(200, 168, 75, 0.5);
  letter-spacing: 0.12em;
}

.bdPagesOnboardPhonePreviewMini {
  margin-top: 24px;
  background: var(--bdOnboard-ink3);
  border-radius: var(--bdOnboard-radius);
  padding: 20px;
  border: 1px solid var(--bdOnboard-white08);
}

.bdPagesOnboardPhonePreviewMiniLabel {
  font-size: 0.72rem;
  color: var(--bdOnboard-silver);
  text-align: center;
  margin-bottom: 14px;
}

.bdPagesOnboardMiniProfile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bdPagesOnboardMiniAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bdOnboard-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-secondary-font);
  font-weight: 700;
  font-size: 1.1rem;
  color: #08080f;
  flex-shrink: 0;
  transition: all 0.3s;
}

.bdPagesOnboardMiniName {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardMiniRole {
  font-size: 0.72rem;
  color: var(--bdOnboard-silver);
}

.bdPagesOnboardMiniActions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.bdPagesOnboardMiniAction {
  flex: 1;
  background: var(--bdOnboard-white08);
  border-radius: 8px;
  padding: 7px;
  text-align: center;
  font-size: 0.65rem;
  color: var(--bdOnboard-silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.bdPagesOnboardMiniActionIcon {
  font-size: 0.9rem;
}

/* Bundle step */
.bdPagesOnboardBundleMain {
  background: var(--bdOnboard-ink3);
  border-radius: var(--bdOnboard-radius);
  border: 1.5px solid var(--bdOnboard-goldBorder);
  padding: 32px;
  margin-bottom: 20px;
  display: flex;
  gap: 24px;
  align-items: center;
}

.bdPagesOnboardBundleVisual {
  font-size: 3rem;
}

.bdPagesOnboardBundleText h3 {
  font-family: var(--site-secondary-font);
  font-size: 1.5rem;
  margin-bottom: 6px;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardBundleText p {
  font-size: 0.85rem;
  color: var(--bdOnboard-silver);
  margin-bottom: 14px;
}

.bdPagesOnboardBundleToggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bdPagesOnboardBundlePrice {
  font-family: "DM Mono", monospace;
  color: var(--bdOnboard-gold);
  font-size: 0.9rem;
}

.bdPagesOnboardToggleSwitch {
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: var(--bdOnboard-white08);
  border: 1px solid var(--bdOnboard-white20);
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.bdPagesOnboardToggleSwitch.on {
  background: var(--bdOnboard-gold);
  border-color: var(--bdOnboard-gold);
}

.bdPagesOnboardToggleKnob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all 0.3s var(--bdOnboard-ease);
}

.bdPagesOnboardToggleSwitch.on .bdPagesOnboardToggleKnob {
  left: 22px;
}

.bdPagesOnboardCrossSellGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bdPagesOnboardCrossItem {
  background: var(--bdOnboard-ink3);
  border-radius: var(--bdOnboard-radius);
  border: 1.5px solid var(--bdOnboard-white08);
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.bdPagesOnboardCrossItem:hover {
  border-color: var(--bdOnboard-goldBorder);
}

.bdPagesOnboardCrossItem.added {
  border-color: var(--bdOnboard-green);
  background: rgba(40, 217, 138, 0.04);
}

.bdPagesOnboardCrossItemName {
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardCrossItemDesc {
  font-size: 0.75rem;
  color: var(--bdOnboard-silver);
  margin-bottom: 12px;
}

.bdPagesOnboardCrossItemFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bdPagesOnboardCrossItemPrice {
  font-family: "DM Mono", monospace;
  font-size: 0.78rem;
  color: var(--bdOnboard-gold);
}

.bdPagesOnboardAddBtn {
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.bdPagesOnboardAddBtn.add {
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
  border: 1px solid var(--bdOnboard-goldBorder);
}

.bdPagesOnboardAddBtn.added {
  background: rgba(40, 217, 138, 0.1);
  color: var(--bdOnboard-green);
  border: 1px solid rgba(40, 217, 138, 0.3);
}

/* Checkout */
.bdPagesOnboardCheckoutGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.bdPagesOnboardSectionLabelSm {
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bdOnboard-gold);
  margin-bottom: 18px;
  display: block;
}

.bdPagesOnboardPaymentMethods {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.bdPagesOnboardPayOpt {
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--bdOnboard-ink3);
  border: 1.5px solid var(--bdOnboard-white08);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardPayOpt.active {
  border-color: var(--bdOnboard-gold);
  color: var(--bdOnboard-gold);
}

/* Success screen */
.bdPagesOnboardSuccessScreen {
  text-align: center;
  padding: 60px 0;
}

.bdPagesOnboardSuccessIcon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(40, 217, 138, 0.1);
  border: 2px solid var(--bdOnboard-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 32px;
  animation: bdOnboardSuccessPop 0.5s var(--bdOnboard-ease) both 0.2s;
}

@keyframes bdOnboardSuccessPop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.bdPagesOnboardSuccessSteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 48px 0;
  text-align: left;
}

.bdPagesOnboardSuccessStep {
  background: var(--bdOnboard-ink3);
  border-radius: var(--bdOnboard-radius);
  padding: 24px;
  border: 1px solid var(--bdOnboard-white08);
}

.bdPagesOnboardSuccessStepNum {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bdOnboard-goldDim);
  border: 1px solid var(--bdOnboard-goldBorder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Mono", monospace;
  font-size: 0.68rem;
  color: var(--bdOnboard-gold);
  margin-bottom: 14px;
}

.bdPagesOnboardSuccessStep h4 {
  font-size: 0.92rem;
  margin-bottom: 6px;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardSuccessStep p {
  font-size: 0.78rem;
  color: var(--bdOnboard-silver);
}

/* Sidebar order summary */
.bdPagesOnboardSidebarTitle {
  font-family: "DM Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bdOnboard-silver);
  margin-bottom: 20px;
}

.bdPagesOnboardOrderItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bdOnboard-white08);
}

.bdPagesOnboardOrderItem:last-child {
  border-bottom: none;
}

.bdPagesOnboardOrderItemIcon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bdOnboard-goldDim);
  border: 1px solid var(--bdOnboard-goldBorder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.bdPagesOnboardOrderItemName {
  font-size: 0.84rem;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardOrderItemDetail {
  font-size: 0.72rem;
  color: var(--bdOnboard-silver);
}

.bdPagesOnboardOrderItemPrice {
  margin-left: auto;
  font-family: "DM Mono", monospace;
  font-size: 0.8rem;
  color: var(--bdOnboard-gold);
  white-space: nowrap;
}

.bdPagesOnboardSidebarDivider {
  height: 1px;
  background: var(--bdOnboard-white08);
  margin: 20px 0;
}

.bdPagesOnboardSummaryRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  color: var(--bdOnboard-silver);
  margin-bottom: 8px;
}

.bdPagesOnboardSummaryTotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
}

.bdPagesOnboardSummaryTotalLabel {
  font-family: var(--site-secondary-font);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--bdOnboard-text);
}

.bdPagesOnboardSummaryTotalAmount {
  font-family: var(--site-secondary-font);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bdOnboard-gold);
}

.bdPagesOnboardSidebarEmpty {
  text-align: center;
  padding: 32px 16px;
  color: var(--bdOnboard-silver);
  font-size: 0.82rem;
}

.bdPagesOnboardSidebarEmptyIcon {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* Continue/back buttons */
.bdPagesOnboardContinueWrap {
  margin-top: 48px;
}

.bdPagesOnboardBtnContinue {
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
  padding: 16px 48px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--bdOnboard-ease);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", sans-serif;
}

.bdPagesOnboardBtnContinue:hover {
  background: var(--bdOnboard-goldLight);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(200, 168, 75, 0.25);
}

.bdPagesOnboardBtnContinue:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.bdPagesOnboardBtnBack {
  background: transparent;
  color: var(--bdOnboard-silver);
  padding: 16px 24px;
  border-radius: 100px;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 8px;
  font-family: "DM Sans", sans-serif;
}

.bdPagesOnboardBtnBack:hover {
  color: var(--bdOnboard-text);
}

/* Students onboarding responsive */
@media (max-width: 900px) {
  .bdPagesOnboardMain {
    grid-template-columns: 1fr;
  }

  .bdPagesProHero {
    padding: 0rem 0 5rem;
  }

  /* .bdPagesOnboardSidebar {
    display: none;
  } */

  .bdPagesOnboardContentArea {
    padding: 32px 24px;
  }

  .bdPagesOnboardPurposeGrid,
  .bdPagesOnboardPlanGrid {
    grid-template-columns: 1fr 1fr;
  }

  .bdPagesOnboardHwGrid {
    grid-template-columns: 1fr;
  }

  .bdPagesOnboardHwCard.full-width {
    grid-column: span 1;
    grid-template-columns: 80px 1fr;
  }

  .bdPagesOnboardPersonalizeLayout {
    grid-template-columns: 1fr;
  }

  .bdPagesOnboardCheckoutGrid {
    grid-template-columns: 1fr;
  }

  .bdPagesOnboardSuccessSteps {
    grid-template-columns: 1fr;
  }

  .bdPagesOnboardStepDots {
    padding: 0 20px;
  }

  .bdPagesOnboardTopNav {
    padding: 0 20px;
  }

  .bdPagesOnboardStepTitle {
    font-size: 2.2rem;
  }
}

@media (max-width: 600px) {
  .bdPagesOnboardPurposeGrid,
  .bdPagesOnboardPlanGrid,
  .bdPagesOnboardCrossSellGrid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   ===== Wedding Site Styles =====
   Source: wedding-site.css (BigDot Wedding Websites — Landing Page)
   All classes prefixed with bdWed / bdWedWiz — no conflicts with
   existing bdPages* selectors above.

   Conflict resolution notes:
   - :root variables merged below (bdWed* names don't clash with
     site-* / bd* names already declared above).
   - Universal * reset (margin/padding 0) already absorbed into the
     base * rule above; duplicate rule omitted here.
   - body, h1-h6, a, section: wedding-site declares bare element
     rules used exclusively by the wedding landing page. They are
     kept here and will apply site-wide. The wedding body rules use
     var(--bdWedText) / var(--bdWedWhite) which are defined below,
     so they take effect once those variables are in scope.  The
     font-smoothing and overflow-x:hidden on body are additive and
     harmless.
   =================================================================== */

/* --- Wedding CSS Variables (appended to :root) --- */
:root {
  --bdWedGold: #c9a84c;
  --bdWedGoldLight: #e8d5a0;
  --bdWedGoldDark: #a8872e;
  --bdWedBeige: #faf6f0;
  --bdWedBeigeDark: #f0e8d8;
  --bdWedCream: #fffdf8;
  --bdWedText: #2d2a26;
  --bdWedTextMuted: #6b6560;
  --bdWedWhite: #ffffff;
  --bdWedShadowSm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --bdWedShadowMd: 0 8px 30px rgba(0, 0, 0, 0.08);
  --bdWedShadowLg: 0 16px 50px rgba(0, 0, 0, 0.1);
  --bdWedRadius: 16px;
  --bdWedRadiusSm: 10px;
}

/* --- Wedding Base & Typography ---
   These bare-element rules apply only when the wedding landing page
   is loaded (it has its own font imports for Playfair Display /
   Poppins). They extend rather than break the v2 base rules. */

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--site-secondary-font);
  font-weight: 600;
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
}

/* section {
  padding: 100px 0;
} */

/* --- Reusable Components --- */

.bdWedSectionTitle {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--bdWedText);
  margin-bottom: 16px;
  line-height: 1.25;
}

.bdWedSectionSubtitle {
  font-size: 1.1rem;
  color: var(--bdWedTextMuted);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.7;
}

.bdWedFeatureBadgeLabel {
  display: inline-block;
  background: linear-gradient(
    135deg,
    rgba(201, 168, 76, 0.15),
    rgba(201, 168, 76, 0.08)
  );
  color: var(--bdWedGoldDark);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
}

/* --- Buttons --- */

.bdWedBtnPrimary {
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  border: none;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.35);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bdWedBtnPrimary:hover {
  background: linear-gradient(135deg, var(--bdWedGoldDark), #917424);
  color: var(--bdWedWhite);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201, 168, 76, 0.45);
}

.bdWedBtnSecondary {
  background: var(--bdWedWhite);
  color: var(--bdWedText);
  border: 2px solid var(--bdWedBeigeDark);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bdWedBtnSecondary:hover {
  border-color: var(--bdWedGold);
  color: var(--bdWedGoldDark);
  background: var(--bdWedBeige);
  transform: translateY(-2px);
}

.bdWedBtnLg {
  padding: 16px 40px;
  font-size: 1.05rem;
}

.bdWedBtnXl {
  padding: 20px 52px;
  font-size: 1.15rem;
  letter-spacing: 0.3px;
}

.bdWedBtnBlock {
  width: 100%;
  justify-content: center;
}

/* --- Navbar --- */

.bdWedNavbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
  padding: 12px 0;
  z-index: 1050;
  transition: all 0.3s ease;
}

.bdWedLogo {
  font-family: var(--site-secondary-font);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bdWedText) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdWedLogoDot {
  width: 10px;
  height: 10px;
  background: var(--bdWedGold);
  border-radius: 50%;
  display: inline-block;
}

.bdWedLogoAccent {
  color: var(--bdWedGold);
}

.bdWedNavLinks .nav-link {
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bdWedTextMuted);
  padding: 8px 18px !important;
  transition: color 0.3s ease;
}

.bdWedNavLinks .nav-link:hover {
  color: var(--bdWedGold);
}

.bdWedBtnNav {
  padding: 10px 24px;
  font-size: 0.88rem;
  margin-left: 8px;
}

.bdWedNavCta {
  margin-left: 8px;
}

.bdWedToggler {
  border: none;
  box-shadow: none !important;
}

/* --- Hero Section --- */

.bdWedHeroSection {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(
    160deg,
    var(--bdWedCream) 0%,
    var(--bdWedBeige) 40%,
    rgba(201, 168, 76, 0.08) 100%
  );
  overflow: hidden;
  padding-top: 100px;
}

.bdWedHeroOverlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 20% 50%,
      rgba(201, 168, 76, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 20%,
      rgba(201, 168, 76, 0.06) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.bdWedHeroRow {
  min-height: calc(100vh - 100px);
}

.bdWedHeroContent {
  position: relative;
  z-index: 2;
  padding: 40px 0;
}

.bdWedHeroBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(
    135deg,
    rgba(201, 168, 76, 0.12),
    rgba(201, 168, 76, 0.06)
  );
  color: var(--bdWedGoldDark);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 28px;
}

.bdWedHeroTitle {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--bdWedText);
}

.bdWedHeroSubtitle {
  font-size: 1.2rem;
  color: var(--bdWedTextMuted);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
}

.bdWedHeroCtas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.bdWedBtnHero {
  padding: 16px 36px;
  font-size: 1rem;
}

.bdWedBtnHeroSecondary {
  padding: 14px 28px;
}

.bdWedHeroTrust {
  font-size: 0.85rem;
  color: var(--bdWedTextMuted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bdWedHeroTrust i {
  color: var(--bdWedGold);
}

/* Hero Mockup */

.bdWedHeroVisual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.bdWedHeroMockup {
  width: 100%;
  max-width: 420px;
  background: var(--bdWedWhite);
  border-radius: var(--bdWedRadius);
  box-shadow: var(--bdWedShadowLg);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.15);
  transform: perspective(800px) rotateY(-3deg) rotateX(2deg);
  transition: transform 0.5s ease;
}

.bdWedHeroMockup:hover {
  transform: perspective(800px) rotateY(0deg) rotateX(0deg);
}

.bdWedMockupBrowser {
  background: var(--bdWedBeige);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--bdWedBeigeDark);
}

.bdWedMockupDots {
  display: flex;
  gap: 5px;
}

.bdWedMockupDots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bdWedGoldLight);
}

.bdWedMockupDots span:first-child {
  background: #f87171;
}
.bdWedMockupDots span:nth-child(2) {
  background: #fbbf24;
}
.bdWedMockupDots span:last-child {
  background: #34d399;
}

.bdWedMockupUrl {
  font-size: 0.72rem;
  color: var(--bdWedTextMuted);
  background: var(--bdWedWhite);
  padding: 4px 12px;
  border-radius: 6px;
  flex: 1;
  text-align: center;
}

.bdWedMockupBody {
  padding: 0;
}

.bdWedMockupHeroImg {
  background: linear-gradient(135deg, #f8e8c8 0%, #e8d5a0 50%, #d4c090 100%);
  padding: 40px 20px;
  text-align: center;
  position: relative;
}

.bdWedMockupHeartIcon {
  font-size: 1.6rem;
  color: var(--bdWedGold);
  margin-bottom: 8px;
  display: block;
}

.bdWedMockupNames {
  font-family: var(--site-secondary-font);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bdWedText);
}

.bdWedMockupDate {
  font-size: 0.78rem;
  color: var(--bdWedTextMuted);
  margin-top: 4px;
}

.bdWedMockupNav {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 8px;
  background: var(--bdWedWhite);
  border-bottom: 1px solid var(--bdWedBeigeDark);
}

.bdWedMockupNav span {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--bdWedTextMuted);
  cursor: default;
}

.bdWedMockupEvents {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
}

.bdWedMockupEvent {
  text-align: center;
  font-size: 0.7rem;
  color: var(--bdWedTextMuted);
}

.bdWedMockupEventIcon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--bdWedBeige);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  font-size: 1rem;
  color: var(--bdWedGold);
}

.bdWedMockupEventActive .bdWedMockupEventIcon {
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
}

.bdWedMockupEventActive {
  color: var(--bdWedText);
  font-weight: 600;
}

/* --- Social Proof Section --- */

.bdWedSocialProof {
  background: var(--bdWedWhite);
  padding: 80px 0;
}

.bdWedProofHeader {
  margin-bottom: 48px;
}

.bdWedProofBadge {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}

.bdWedProofBadge i {
  color: var(--bdWedGold);
  font-size: 1.1rem;
}

.bdWedTestimonialCard {
  background: var(--bdWedWhite);
  border: 1px solid var(--bdWedBeigeDark);
  border-radius: var(--bdWedRadius);
  padding: 28px 24px;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
}

.bdWedTestimonialCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--bdWedShadowMd);
  border-color: var(--bdWedGoldLight);
}

.bdWedTestimonialStars {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
}

.bdWedTestimonialStars i {
  color: var(--bdWedGold);
  font-size: 0.85rem;
}

.bdWedTestimonialText {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--bdWedText);
  margin-bottom: 20px;
  font-style: italic;
}

.bdWedTestimonialAuthor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bdWedTestimonialAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.bdWedTestimonialAuthor strong {
  display: block;
  font-size: 0.85rem;
}

.bdWedTestimonialAuthor span {
  font-size: 0.75rem;
  color: var(--bdWedTextMuted);
}

/* --- Features Section --- */

.bdWedFeaturesSection {
  background: var(--bdWedBeige);
}

.bdWedFeatureHeader {
  margin-bottom: 56px;
}

.bdWedFeatureCard {
  background: var(--bdWedWhite);
  border: 1px solid rgba(201, 168, 76, 0.1);
  border-radius: var(--bdWedRadius);
  padding: 36px 28px;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bdWedFeatureCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bdWedGold), var(--bdWedGoldLight));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bdWedFeatureCard:hover {
  transform: translateY(-6px);
  box-shadow: var(--bdWedShadowLg);
}

.bdWedFeatureCard:hover::before {
  opacity: 1;
}

.bdWedFeatureCardPopular {
  border-color: var(--bdWedGold);
  box-shadow: var(--bdWedShadowMd);
}

.bdWedFeatureCardPopular::before {
  opacity: 1;
}

.bdWedPopularBadge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bdWedFeatureIcon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(201, 168, 76, 0.12),
    rgba(201, 168, 76, 0.06)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.bdWedFeatureIcon i {
  font-size: 1.5rem;
  color: var(--bdWedGold);
}

.bdWedFeatureTitle {
  font-family: "Poppins", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.bdWedFeatureDesc {
  font-size: 0.88rem;
  color: var(--bdWedTextMuted);
  line-height: 1.7;
  margin-bottom: 18px;
}

.bdWedFeatureList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bdWedFeatureList li {
  font-size: 0.83rem;
  color: var(--bdWedText);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdWedFeatureList li i {
  color: var(--bdWedGold);
  font-size: 0.8rem;
}

/* --- How It Works --- */

.bdWedHowItWorks {
  background: var(--bdWedWhite);
}

.bdWedHowHeader {
  margin-bottom: 56px;
}

.bdWedStepsRow {
  position: relative;
}

.bdWedStepsRow > .col-md-4 {
  position: relative;
}

.bdWedStepCard {
  text-align: center;
  padding: 40px 28px;
  background: var(--bdWedWhite);
  border: 1px solid var(--bdWedBeigeDark);
  border-radius: var(--bdWedRadius);
  position: relative;
  transition: all 0.3s ease;
}

.bdWedStepCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--bdWedShadowMd);
  border-color: var(--bdWedGoldLight);
}

.bdWedStepNumber {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.bdWedStepIcon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bdWedBeige);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.bdWedStepIcon i {
  font-size: 1.8rem;
  color: var(--bdWedGold);
}

.bdWedStepTitle {
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.bdWedStepDesc {
  font-size: 0.88rem;
  color: var(--bdWedTextMuted);
  line-height: 1.7;
}

.bdWedStepConnector {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  color: var(--bdWedGoldLight);
  font-size: 1.4rem;
  z-index: 2;
}

.bdWedHowCta {
  margin-top: 48px;
}

/* --- Demo Section --- */

.bdWedDemoSection {
  background: var(--bdWedBeige);
}

.bdWedDemoHeader {
  margin-bottom: 48px;
}

.bdWedDemoCard {
  background: var(--bdWedWhite);
  border-radius: var(--bdWedRadius);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.1);
  transition: all 0.3s ease;
  height: 100%;
}

.bdWedDemoCard:hover {
  transform: translateY(-6px);
  box-shadow: var(--bdWedShadowLg);
}

.bdWedDemoCardImg {
  background: linear-gradient(135deg, #f8e8c8, #e8d5a0);
  padding: 48px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bdWedDemoCardImg i {
  font-size: 2.5rem;
  color: var(--bdWedGoldDark);
}

.bdWedDemoCardImg span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bdWedGoldDark);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bdWedDemoCardBody {
  padding: 24px;
}

.bdWedDemoCardBody h4 {
  font-family: "Poppins", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.bdWedDemoCardBody p {
  font-size: 0.88rem;
  color: var(--bdWedTextMuted);
  line-height: 1.6;
  margin: 0;
}

.bdWedDemoCta {
  margin-top: 48px;
}

/* --- Gift Registry Section --- */

.bdWedGiftSection {
  background: var(--bdWedWhite);
}

.bdWedGiftRow {
  gap: 0;
}

.bdWedGiftVisual {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.bdWedGiftMockup {
  width: 100%;
  max-width: 380px;
  background: var(--bdWedWhite);
  border-radius: var(--bdWedRadius);
  box-shadow: var(--bdWedShadowLg);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.15);
}

.bdWedGiftMockupHeader {
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1rem;
}

.bdWedGiftMockupBody {
  padding: 20px 24px;
}

.bdWedGiftItem {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bdWedBeigeDark);
}

.bdWedGiftItem:last-child {
  border-bottom: none;
}

.bdWedGiftItemIcon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bdWedBeige);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bdWedGiftItemIcon i {
  font-size: 1.1rem;
  color: var(--bdWedGold);
}

.bdWedGiftItemInfo {
  flex: 1;
}

.bdWedGiftItemInfo strong {
  font-family: "Poppins", sans-serif;
  font-size: 0.88rem;
  display: block;
  margin-bottom: 8px;
}

.bdWedGiftItemInfo small {
  font-size: 0.75rem;
  color: var(--bdWedTextMuted);
}

.bdWedGiftProgress {
  width: 100%;
  height: 6px;
  background: var(--bdWedBeige);
  border-radius: 3px;
  margin-bottom: 6px;
  overflow: hidden;
}

.bdWedGiftProgressBar {
  height: 100%;
  background: linear-gradient(90deg, var(--bdWedGold), var(--bdWedGoldDark));
  border-radius: 3px;
  transition: width 0.6s ease;
}

.bdWedGiftMockupFooter {
  padding: 16px 24px 20px;
}

.bdWedBtnGiftMock {
  width: 100%;
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  border: none;
  padding: 12px;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

.bdWedGiftContent {
  padding: 40px 20px 40px 48px;
}

.bdWedGiftDesc {
  font-size: 1rem;
  color: var(--bdWedTextMuted);
  line-height: 1.75;
  margin-bottom: 28px;
}

.bdWedGiftBenefits {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.bdWedGiftBenefits li {
  font-size: 0.95rem;
  color: var(--bdWedText);
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bdWedGiftBenefits li i {
  color: var(--bdWedGold);
  font-size: 1.1rem;
}

/* --- Pricing Section --- */

.bdWedPricingSection {
  background: var(--bdWedBeige);
}

.bdWedPricingHeader {
  margin-bottom: 56px;
}

.bdWedPricingCard {
  background: var(--bdWedWhite);
  border: 1px solid var(--bdWedBeigeDark);
  border-radius: var(--bdWedRadius);
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bdWedPricingCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--bdWedShadowMd);
}

.bdWedPricingCardPopular {
  border-color: var(--bdWedGold);
  box-shadow: var(--bdWedShadowMd);
  transform: scale(1.03);
}

.bdWedPricingCardPopular:hover {
  transform: scale(1.03) translateY(-4px);
}

.bdWedPricingPopularBadge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--bdWedGold), var(--bdWedGoldDark));
  color: var(--bdWedWhite);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 50px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bdWedPricingName {
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bdWedTextMuted);
  margin-bottom: 8px;
}

.bdWedPricingPrice {
  font-family: var(--site-secondary-font);
  font-size: 3rem;
  font-weight: 700;
  color: var(--bdWedText);
  line-height: 1;
  margin-bottom: 4px;
}

.bdWedPricingPeriod {
  font-size: 0.82rem;
  color: var(--bdWedTextMuted);
  margin-bottom: 28px;
}

.bdWedPricingFeatures {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  text-align: left;
  flex-grow: 1;
}

.bdWedPricingFeatures li {
  font-size: 0.88rem;
  padding: 7px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bdWedText);
}

.bdWedPricingFeatures li i {
  color: var(--bdWedGold);
  font-size: 0.85rem;
}

/* --- Final CTA --- */

.bdWedFinalCta {
  position: relative;
  background: linear-gradient(160deg, var(--bdWedText) 0%, #1a1815 100%);
  padding: 120px 0;
  overflow: hidden;
}

.bdWedFinalCtaOverlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 30% 50%,
      rgba(201, 168, 76, 0.15) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 50%,
      rgba(201, 168, 76, 0.1) 0%,
      transparent 60%
    );
  pointer-events: none;
}

.bdWedFinalCtaContent {
  position: relative;
  z-index: 2;
}

.bdWedFinalCtaTitle {
  font-size: 3rem;
  font-weight: 700;
  color: var(--bdWedWhite);
  margin-bottom: 16px;
}

.bdWedFinalCtaSubtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 40px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.bdWedFinalCtaTrust {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.bdWedFinalCtaTrust i {
  color: var(--bdWedGold);
}

/* --- Footer --- */

.bdWedFooter {
  background: #1a1815;
  padding: 64px 0 0;
  color: rgba(255, 255, 255, 0.7);
}

.bdWedFooterBrand {
  font-family: var(--site-secondary-font);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bdWedWhite);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdWedFooterDesc {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.bdWedFooterSocials {
  display: flex;
  gap: 12px;
}

.bdWedFooterSocials a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.bdWedFooterSocials a:hover {
  background: var(--bdWedGold);
  color: var(--bdWedWhite);
  transform: translateY(-2px);
}

.bdWedFooterHeading {
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bdWedWhite);
  margin-bottom: 20px;
}

.bdWedFooterLinks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bdWedFooterLinks li {
  margin-bottom: 10px;
}

.bdWedFooterLinks a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
}

.bdWedFooterLinks a:hover {
  color: var(--bdWedGold);
}

.bdWedFooterNewsletter {
  display: flex;
  gap: 8px;
}

.bdWedFooterInput {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--bdWedWhite);
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 0.88rem;
  flex: 1;
}

.bdWedFooterInput::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.bdWedFooterInput:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--bdWedGold);
  box-shadow: none;
  color: var(--bdWedWhite);
}

.bdWedFooterDivider {
  border-color: rgba(255, 255, 255, 0.08);
  margin: 48px 0 0;
}

.bdWedFooterBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.bdWedFooterBottom p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.bdWedFooterLegal {
  display: flex;
  gap: 24px;
}

.bdWedFooterLegal a {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.35);
}

.bdWedFooterLegal a:hover {
  color: var(--bdWedGold);
}

/* ============================================
   Wedding Responsive Styles
   ============================================ */

@media (max-width: 991.98px) {
  .bdWedHeroTitle {
    font-size: 2.6rem;
  }

  .bdWedSectionTitle {
    font-size: 2rem;
  }

  .bdWedFinalCtaTitle {
    font-size: 2.2rem;
  }

  .bdWedGiftContent {
    padding: 40px 20px;
  }

  .bdWedHeroMockup {
    transform: none;
    max-width: 360px;
  }

  .bdWedHeroMockup:hover {
    transform: none;
  }

  .bdWedNavCta {
    margin-left: 0;
    margin-top: 12px;
  }

  .bdWedBtnNav {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  /* section {
    padding: 72px 0;
  } */

  .bdWedHeroSection {
    padding-top: 80px;
    min-height: auto;
  }

  .bdWedHeroRow {
    min-height: auto;
  }

  .bdWedHeroTitle {
    font-size: 2rem;
  }

  .bdWedHeroSubtitle {
    font-size: 1.05rem;
  }

  .bdWedSectionTitle {
    font-size: 1.75rem;
  }

  .bdWedHeroCtas {
    flex-direction: column;
  }

  .bdWedBtnHero {
    text-align: center;
    justify-content: center;
  }

  .bdWedBtnHeroSecondary {
    justify-content: center;
  }

  .bdWedHeroVisual {
    padding: 20px 0 0;
  }

  .bdWedHeroMockup {
    max-width: 320px;
  }

  .bdWedStepConnector {
    display: none !important;
  }

  .bdWedFinalCta {
    padding: 80px 0;
  }

  .bdWedFinalCtaTitle {
    font-size: 1.85rem;
  }

  .bdWedFinalCtaTrust {
    flex-direction: column;
    gap: 8px;
  }

  .bdWedPricingCardPopular {
    transform: none;
  }

  .bdWedPricingCardPopular:hover {
    transform: translateY(-4px);
  }

  .bdWedGiftRow {
    flex-direction: column-reverse;
  }

  .bdWedFooterNewsletter {
    flex-direction: column;
  }

  .bdWedFooterBottom {
    flex-direction: column;
    text-align: center;
  }

  .bdWedMockupEvents {
    gap: 8px;
    padding: 16px 10px;
  }

  .bdWedMockupNav {
    gap: 8px;
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .bdWedHeroTitle {
    font-size: 1.75rem;
  }

  .bdWedSectionTitle {
    font-size: 1.5rem;
  }

  .bdWedBtnXl {
    padding: 16px 32px;
    font-size: 1rem;
  }

  .bdWedHeroSection .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .bdWedHeroBadge {
    margin-bottom: 14px;
  }

  .bdWedBtnHero {
    padding: 14px 20px;
    font-size: 0.88rem;
    width: 100%;
    box-sizing: border-box;
  }

  .bdWedBtnHeroSecondary {
    width: 100%;
    justify-content: center;
  }

  .bdWedHeroCtas {
    flex-direction: column;
    gap: 12px;
  }

  .bdWedPricingPrice {
    font-size: 2.5rem;
  }
}

/* ============================================
   BigDot Wizard v2 — bdWedWiz prefix
   ============================================ */

/* --- Modal Overlay --- */

.bdWedWizModal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.bdWedWizModal.bdWedWizOpen {
  opacity: 1;
  visibility: visible;
}

.bdWedWizBackdrop {
  position: absolute;
  inset: 0;
  background-image: url("https://dkzxkcjlbnjui.cloudfront.net/uploads/media/images/wedding-site-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bdWedWizBackdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(200, 60, 90, 0.18);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* --- Dialog Shell --- */

.bdWedWizDialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bdWedWizOpen .bdWedWizDialog {
  transform: translateY(0) scale(1);
}

/* --- Left Panel (hidden in new design) --- */
.bdWedWizLeft {
  display: none;
}

/* Keep left step elements for JS compatibility */
.bdWedWizLeftStep,
.bdWedWizLeftLine {
  display: none;
}

/* --- Main Card --- */

.bdWedWizRight {
  width: 520px;
  max-width: calc(100vw - 80px);
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  min-height: 480px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
}

/* --- Card Header --- */

.bdWedWizCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 1px solid #f2ede7;
  flex-shrink: 0;
}

.bdWedWizCardHeaderBtns {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bdWedWizHeaderBtn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1.5px solid #ddd8d0;
  background: #fff;
  color: #888280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
  position: static;
}

.bdWedWizHeaderBtn:hover {
  background: #f5f0ea;
  color: #444;
}

/* Keep .bdWedWizClose pointing to the round button */
.bdWedWizClose {
  display: none;
}

/* In-header close button (right side of header) */
.bdWedWizHeaderCloseBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid #ddd8d0;
  background: #fff;
  color: #777;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.bdWedWizHeaderCloseBtn:hover {
  background: #fef2f2;
  border-color: #e8b0b8;
  color: #c0192c;
}

/* --- Progress bar (thin, hidden label) --- */
.bdWedWizProgressTrack {
  height: 3px;
  background: #f0ebe4;
  width: 100%;
  flex-shrink: 0;
}

.bdWedWizProgressFill {
  height: 100%;
  background: linear-gradient(90deg, #c0192c, #9a1020);
  border-radius: 0 2px 2px 0;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bdWedWizStepCounter {
  display: none;
}

/* --- Steps Container --- */

.bdWedWizStepsWrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.bdWedWizStep {
  position: absolute;
  inset: 0;
  padding: 18px 24px 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}

.bdWedWizStep.bdWedWizStepActive {
  display: flex;
  animation: none;
}

/* Slide transitions */
.bdWedWizStep.bdWedWizEnterRight {
  display: flex;
  animation: bdWedWizSlideInRight 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

.bdWedWizStep.bdWedWizEnterLeft {
  display: flex;
  animation: bdWedWizSlideInLeft 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

.bdWedWizStep.bdWedWizExitLeft {
  display: flex;
  animation: bdWedWizSlideOutLeft 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

.bdWedWizStep.bdWedWizExitRight {
  display: flex;
  animation: bdWedWizSlideOutRight 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    forwards;
}

@keyframes bdWedWizSlideInRight {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bdWedWizSlideInLeft {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bdWedWizSlideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-40px);
    opacity: 0;
  }
}

@keyframes bdWedWizSlideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(40px);
    opacity: 0;
  }
}

/* --- Step Illustration --- */

.bdWedWizIllusWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
  margin-bottom: 20px;
}

.bdWedWizIllusSvg {
  width: 82px;
  height: 82px;
  margin-bottom: 6px;
}

.bdWedWizIllusImg {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin-bottom: 4px;
  display: block;
}

.bdWedWizIllusLabel {
  font-family: "Poppins", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: #2d2a26;
  letter-spacing: 0.1px;
}

/* Old step head classes kept for success step */
.bdWedWizStepHead {
  margin-bottom: 0;
}
.bdWedWizStepEmoji {
  display: none;
}
.bdWedWizStepTitle {
  display: none;
}
.bdWedWizStepSub {
  display: none;
}

/* --- Form Fields --- */

.bdWedWizForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bdWedWizField {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bdWedWizLabel {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2d2a26;
}

.bdWedWizReq {
  color: #c0192c;
}
.bdWedWizOpt {
  font-weight: 400;
  color: #8a847e;
  font-size: 0.72rem;
}

.bdWedWizInput {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #e8e2db;
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 0.92rem;
  color: #2d2a26;
  background: #fff;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.bdWedWizInput::placeholder {
  color: #b8b2aa;
}

.bdWedWizInput:focus {
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
}

.bdWedWizInput.bdWedWizInputErr {
  border-color: #c0192c;
  box-shadow: 0 0 0 3px rgba(192, 25, 44, 0.08);
}

.bdWedWizErr {
  font-size: 0.72rem;
  color: #c0192c;
  min-height: 14px;
}

/* Phone row */
.bdWedWizPhoneRow {
  display: flex;
  gap: 8px;
}

.bdWedWizSelect {
  padding: 13px 10px;
  border: 1.5px solid #e8e2db;
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  color: #2d2a26;
  background: #fff;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.bdWedWizSelect:focus {
  border-color: #c9a84c;
}
.bdWedWizPhoneRow .bdWedWizInput {
  flex: 1;
}

/* Custom checkbox */
.bdWedWizCheckRow {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin-top: 4px;
}

.bdWedWizCheckInput {
  display: none;
}

.bdWedWizCheckBox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #e8e2db;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  position: relative;
}

.bdWedWizCheckBox::after {
  content: "\2713";
  font-size: 0.72rem;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bdWedWizCheckInput:checked + .bdWedWizCheckBox {
  background: #c0192c;
  border-color: transparent;
}

.bdWedWizCheckInput:checked + .bdWedWizCheckBox::after {
  opacity: 1;
}
.bdWedWizCheckText {
  font-size: 0.85rem;
  color: #8a847e;
}

/* --- Calendar --- */

.bdWedWizCalendar {
  background: #faf6f0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #ede7de;
}

.bdWedWizCalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #ede7de;
  gap: 6px;
}

.bdWedWizCalArrow {
  width: 28px;
  height: 28px;
  border: none;
  background: #f5f0ea;
  border-radius: 8px;
  color: #2d2a26;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.bdWedWizCalArrow:hover {
  background: #c0192c;
  color: #fff;
}

.bdWedWizCalTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.bdWedWizCalMonthSel,
.bdWedWizCalYearSel {
  border: 1.5px solid #e8e2db;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.82rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #2d2a26;
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.bdWedWizCalMonthSel:focus,
.bdWedWizCalYearSel:focus {
  border-color: #c9a84c;
}

.bdWedWizCalGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 6px;
  gap: 2px;
}

.bdWedWizCalDayName {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  color: #8a847e;
  letter-spacing: 0.5px;
  padding: 4px 0;
  text-transform: uppercase;
}

.bdWedWizCalCell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: "Poppins", sans-serif;
  color: #2d2a26;
}

.bdWedWizCalCell:hover:not(.bdWedWizCalOther) {
  background: rgba(192, 25, 44, 0.1);
  color: #c0192c;
}

.bdWedWizCalOther {
  color: rgba(0, 0, 0, 0.2);
  cursor: default;
}

.bdWedWizCalToday {
  border: 1.5px solid #c9a84c;
  color: #a8872e;
  font-weight: 600;
}

.bdWedWizCalSel {
  background: #c0192c !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(192, 25, 44, 0.3);
}

/* Date display pill */
.bdWedWizDateDisplay {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #faf6f0;
  border: 1.5px solid #ede7de;
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 0.82rem;
  color: #8a847e;
  transition: all 0.3s ease;
}

.bdWedWizDateDisplay.bdWedWizDateSet {
  background: rgba(192, 25, 44, 0.06);
  border-color: rgba(192, 25, 44, 0.25);
  color: #c0192c;
  font-weight: 600;
}

/* --- Nav Bar --- */

.bdWedWizNavBar {
  display: flex;
  flex-direction: column;
  padding: 12px 24px 22px;
  flex-shrink: 0;
}

/* Back button hidden — back is in card header */
.bdWedWizBtnBack {
  display: none;
}

.bdWedWizBtnNext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: #c0192c;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(192, 25, 44, 0.3);
  transition: all 0.2s ease;
}

.bdWedWizBtnNext:hover {
  background: #a0111e;
  box-shadow: 0 6px 22px rgba(192, 25, 44, 0.4);
  transform: translateY(-1px);
}

.bdWedWizBtnNext:active {
  transform: translateY(0);
}

/* --- Success Step --- */

.bdWedWizSuccess {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 20px;
  flex: 1;
}

.bdWedWizSuccessRing {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(192, 25, 44, 0.07);
  border: 2px solid rgba(192, 25, 44, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: bdWedWizSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

@keyframes bdWedWizSuccessPop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.bdWedWizSuccessCheck {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #c0192c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  box-shadow: 0 6px 20px rgba(192, 25, 44, 0.35);
}

.bdWedWizSuccessTitle {
  font-size: 1.25rem !important;
  font-weight: 700;
  color: #2d2a26;
  margin-bottom: 8px;
  display: block !important;
  font-family: var(--site-secondary-font);
}

.bdWedWizSuccessSub {
  font-size: 0.85rem;
  color: #8a847e;
  margin-bottom: 16px;
  max-width: 300px;
  line-height: 1.6;
  display: block !important;
}

.bdWedWizSuccessUrl {
  background: #faf6f0;
  border: 1.5px dashed rgba(192, 25, 44, 0.3);
  border-radius: 12px;
  padding: 10px 24px;
  font-family: "Poppins", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #c0192c;
  margin-bottom: 20px;
}

.bdWedWizSuccessBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #c0192c;
  color: #fff;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

.bdWedWizSuccessBtn:hover {
  background: #a0111e;
  color: #fff;
  transform: translateY(-1px);
}

.bdWedWizSuccessNote {
  font-size: 0.75rem;
  color: #8a847e;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Modern Stepper (below card) --- */

.bdWedWizFloatNav {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 14px;
  width: 520px;
  max-width: calc(100vw - 80px);
  padding: 16px 24px 14px;
  position: relative;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 20px;
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Full-width gray track */
.bdWedWizFloatNav::before {
  content: "";
  position: absolute;
  top: calc(16px + 20px);
  left: calc(24px + 20px);
  right: calc(24px + 20px);
  height: 1.5px;
  background: #ede7df;
  z-index: 0;
  border-radius: 2px;
}

.bdWedWizFloatStep {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* Progress connector to next step */
.bdWedWizFloatStep:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  left: calc(50% + 21px);
  width: calc(100% - 42px);
  height: 1.5px;
  background: #ede7df;
  z-index: 0;
  border-radius: 2px;
  transition: background 0.4s ease;
}

.bdWedWizFloatStep.bdWedWizFloatStepDone:not(:last-child)::after {
  background: linear-gradient(90deg, #c9a84c 40%, #e8d89a 100%);
}

/* Base circle */
.bdWedWizFloatStepCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: #f4f0ec;
  border: 1.5px solid #ddd8d0;
  color: #b8b0a6;
  box-shadow: none;
}

/* Step number — shown for future steps */
.bdWedWizFloatStepNum {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  letter-spacing: -0.2px;
}

/* Icon — hidden for future, shown for active */
.bdWedWizFloatStepIcon {
  display: none;
  align-items: center;
  justify-content: center;
}

/* Checkmark — hidden by default */
.bdWedWizFloatStepCheck {
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  position: absolute;
}

/* Step label */
.bdWedWizFloatStepLabel {
  font-size: 0.65rem;
  font-weight: 500;
  color: #c0b8ae;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
  transition:
    color 0.28s ease,
    font-weight 0.2s ease;
  text-transform: uppercase;
}

/* Active state */
.bdWedWizFloatStep.bdWedWizFloatStepActive .bdWedWizFloatStepCircle {
  background: #c0192c;
  border-color: #c0192c;
  color: #fff;
  transform: scale(1.15);
  box-shadow:
    0 0 0 5px rgba(192, 25, 44, 0.12),
    0 6px 22px rgba(192, 25, 44, 0.38);
}
.bdWedWizFloatStep.bdWedWizFloatStepActive .bdWedWizFloatStepNum {
  display: none;
}
.bdWedWizFloatStep.bdWedWizFloatStepActive .bdWedWizFloatStepIcon {
  display: flex;
}
.bdWedWizFloatStep.bdWedWizFloatStepActive .bdWedWizFloatStepLabel {
  color: #c0192c;
  font-weight: 700;
}

/* Done state */
.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepCircle {
  background: #c9a84c;
  border-color: #c9a84c;
  color: #fff;
  transform: scale(0.86);
  box-shadow: 0 2px 12px rgba(201, 168, 76, 0.35);
}
.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepNum {
  display: none;
}
.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepIcon {
  display: none;
}
.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepCheck {
  display: flex;
}
.bdWedWizFloatStep.bdWedWizFloatStepDone .bdWedWizFloatStepLabel {
  color: #c9a84c;
  font-weight: 600;
}

/* --- Wizard Responsive --- */

@media (max-width: 560px) {
  /* Hide background on mobile — card fills full screen */
  .bdWedWizBackdrop {
    background-image: none !important;
    background: #fff !important;
  }
  .bdWedWizBackdrop::after {
    display: none;
  }

  .bdWedWizModal {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
  }

  .bdWedWizDialog {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 100dvh;
    gap: 0;
  }

  /* Card fills full screen */
  .bdWedWizRight {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    flex: 1;
    min-height: 100dvh;
    max-height: none;
    box-shadow: none;
  }

  /* Stepper on mobile */
  .bdWedWizFloatNav {
    width: 100%;
    max-width: 100%;
    padding: 10px 16px 14px;
    margin-top: 0;
    background: #faf8f5;
    border-top: 1px solid #ede8e0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .bdWedWizFloatNav::before {
    top: calc(10px + 18px);
    left: calc(16px + 18px);
    right: calc(16px + 18px);
  }

  .bdWedWizFloatStepCircle {
    width: 36px;
    height: 36px;
  }

  .bdWedWizFloatStep:not(:last-child)::after {
    top: 17px;
    left: calc(50% + 19px);
    width: calc(100% - 38px);
  }

  .bdWedWizFloatStepLabel {
    font-size: 0.58rem;
    letter-spacing: 0.2px;
  }

  .bdWedWizStep {
    padding: 14px 20px 0;
  }
  .bdWedWizNavBar {
    padding: 10px 20px 16px;
  }
  .bdWedWizCalGrid {
    gap: 1px;
    padding: 5px;
  }
  .bdWedWizCalCell {
    font-size: 0.7rem;
  }
  .bdWedWizIllusSvg {
    width: 68px;
    height: 68px;
  }
  .bdWedWizIllusImg {
    width: 90px;
    height: 90px;
  }
  .bdWedWizIllusWrap {
    padding-top: 0;
    margin-bottom: 12px;
  }
}

/* ============================================
   MyStory Exclusive — ms prefix (camelCase)
   Light / Dark mode — Light is default
   ============================================ */

/* --- Theme CSS Variables --- */

:root,
[data-bs-theme="light"] {
  --msVoid: #f8f6f2;
  --msInk: #f0ece4;
  --msInk2: #ffffff;
  --msInk3: #f5f2ec;
  --msGold: #b8902a;
  --msGold2: #c9a030;
  --msGold3: #d4a83c;
  --msGold4: #b8902a;
  --msText: #1a1814;
  --msMuted: #6b6560;
  --msMuted2: #8a8480;
  --msBorder: rgba(184, 144, 42, 0.28);
  --msBorder2: rgba(0, 0, 0, 0.08);
  --msBorder3: rgba(0, 0, 0, 0.13);
  --msNavBg: rgba(248, 246, 242, 0.96);
  --msDarkSectionBg: #f0ece4;
  --msHeroLineBg: rgba(184, 144, 42, 0.07);
  --msCardBg: #ffffff;
  --msCardHoverBg: #f8f6f2;
  --msApplySectionBg: #f0ece4;
  --msFooterBg: #e8e4dc;
}

[data-bs-theme="dark"] {
  --msVoid: #030507;
  --msInk: #080c12;
  --msInk2: #0d1520;
  --msInk3: #121c28;
  --msGold: #b8902a;
  --msGold2: #d4a83c;
  --msGold3: #f0cc6e;
  --msGold4: #fae8b0;
  --msText: #ddd8cc;
  --msMuted: #5a6a7a;
  --msMuted2: #8a9aaa;
  --msBorder: rgba(184, 144, 42, 0.14);
  --msBorder2: rgba(255, 255, 255, 0.06);
  --msBorder3: rgba(255, 255, 255, 0.1);
  --msNavBg: rgba(3, 5, 7, 0.93);
  --msDarkSectionBg: #080c12;
  --msHeroLineBg: rgba(184, 144, 42, 0.07);
  --msCardBg: #0d1520;
  --msCardHoverBg: #121c28;
  --msApplySectionBg: #080c12;
  --msFooterBg: #080c12;
}

/* --- Body --- */

.msBody {
  font-family: "Outfit", sans-serif;
  color: var(--msText);
  background-color: var(--msVoid);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

/* --- Cursor: native browser cursor used --- */

.msCursor,
.msCursorRing {
  display: none !important;
}

/* --- Grain overlay (dark mode only) --- */

[data-bs-theme="dark"] .msBody::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* --- Spacing helpers --- */

.msPyLg6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media (max-width: 991px) {
  .msPyLg6 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* --- Navbar --- */

.msNavbar {
  background: var(--msNavBg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--msBorder);
  min-height: 68px;
  transition:
    background 0.35s ease,
    border-color 0.35s ease;
}

.msNavWordmark {
  font-family: var(--site-secondary-font);
  font-size: 18px;
  font-weight: 500;
  color: var(--msText) !important;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 0.2s;
}

.msNavWordmark em {
  font-style: italic;
  color: var(--msGold2);
}

.msNavLink {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--msMuted) !important;
  text-decoration: none;
  transition: color 0.2s;
  padding: 6px 2px !important;
}

.msNavLink:hover {
  color: var(--msText) !important;
}

.msNavInvite {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--msGold2) !important;
  text-decoration: none;
  border: 1px solid var(--msBorder);
  padding: 8px 18px;
  border-radius: 3px;
  transition: all 0.25s;
}

.msNavInvite:hover {
  background: var(--msGold);
  color: #fff !important;
  border-color: var(--msGold);
}

.msNavToggler {
  color: var(--msText);
  box-shadow: none !important;
  border-color: var(--msBorder) !important;
}

.msNavToggler .navbar-toggler-icon {
  filter: none;
}

[data-bs-theme="light"] .msNavToggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231a1814' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .msNavToggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ddd8cc' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Mobile navbar collapse styling */
.msNavbar .navbar-collapse {
  background: var(--msNavBg);
  backdrop-filter: blur(24px);
  padding: 16px 0;
}

@media (min-width: 992px) {
  .msNavbar .navbar-collapse {
    background: transparent;
    backdrop-filter: none;
    padding: 0;
  }
}

/* --- Theme Toggle Button --- */

.msThemeToggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--msBorder);
  background: transparent;
  color: var(--msGold2);
  cursor: pointer !important;
  transition: all 0.2s;
  font-size: 15px;
  flex-shrink: 0;
}

.msThemeToggle:hover {
  background: rgba(184, 144, 42, 0.1);
}

[data-bs-theme="light"] .msIconDark {
  display: none;
}
[data-bs-theme="light"] .msIconLight {
  display: inline;
}
[data-bs-theme="dark"] .msIconLight {
  display: none;
}
[data-bs-theme="dark"] .msIconDark {
  display: inline;
}

/* --- Hero --- */

.msHero {
  min-height: 100vh;
  padding-top: 100px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
  background-color: var(--msVoid);
  transition: background-color 0.35s ease;
}

.msHeroLines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--msHeroLineBg) 1px, transparent 1px),
    linear-gradient(90deg, var(--msHeroLineBg) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

.msHeroPortrait {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 55% 55% at 50% 60%,
    rgba(184, 144, 42, 0.09) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.msHeroVignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 40%,
    var(--msVoid) 82%
  );
  pointer-events: none;
  z-index: 1;
  transition: background 0.35s ease;
}

.msHeroInner {
  position: relative;
  z-index: 2;
}

/* Corner ornaments */
.msCorner {
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  opacity: 0.35;
  pointer-events: none;
}

.msCornerTl {
  top: 88px;
  left: 40px;
  border-top: 1px solid var(--msGold);
  border-left: 1px solid var(--msGold);
}
.msCornerTr {
  top: 88px;
  right: 40px;
  border-top: 1px solid var(--msGold);
  border-right: 1px solid var(--msGold);
}
.msCornerBl {
  bottom: 24px;
  left: 40px;
  border-bottom: 1px solid var(--msGold);
  border-left: 1px solid var(--msGold);
}
.msCornerBr {
  bottom: 24px;
  right: 40px;
  border-bottom: 1px solid var(--msGold);
  border-right: 1px solid var(--msGold);
}

@media (max-width: 768px) {
  .msCorner {
    display: none;
  }
}

/* Overline */
.msOverlineRule {
  width: 40px;
  height: 1px;
  background: var(--msGold);
  opacity: 0.5;
  flex-shrink: 0;
}

.msOverlineText {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--msGold2);
}

/* Hero headings */
.msHeroH1 {
  font-family: var(--site-secondary-font);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.06;
  color: var(--msText);
  margin-bottom: 16px;
}

.msHeroH1 em {
  font-style: italic;
  color: var(--msGold3);
}

.msHeroH1Sub {
  font-family: var(--site-secondary-font);
  font-size: clamp(22px, 3.5vw, 48px);
  font-style: italic;
  font-weight: 400;
  color: var(--msMuted);
  margin-bottom: 0;
}

/* Divider ornament */
.msHdivLine {
  flex: 0 0 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--msGold), transparent);
}

.msHdivDiamond {
  width: 7px;
  height: 7px;
  background: var(--msGold2);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Hero description */
.msHeroDesc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--msMuted2);
  max-width: 520px;
}

/* --- Buttons --- */

.msBtnGold {
  background: linear-gradient(135deg, var(--msGold2), var(--msGold));
  color: #0d0a04 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 3px;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 20px rgba(184, 144, 42, 0.3);
  transition: all 0.25s;
  cursor: pointer;
}

.msBtnGold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(184, 144, 42, 0.45);
  color: #0d0a04 !important;
}

.msBtnGhost {
  background: transparent;
  color: var(--msGold2) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 3px;
  text-decoration: none;
  border: 1px solid var(--msBorder);
  transition: all 0.25s;
  cursor: pointer;
}

.msBtnGhost:hover {
  background: rgba(184, 144, 42, 0.07);
  border-color: var(--msGold2);
  color: var(--msGold3) !important;
}

/* --- Hero Data Strip --- */

.msHeroData {
  background: rgba(184, 144, 42, 0.05);
  border: 1px solid var(--msBorder);
  backdrop-filter: blur(8px);
  padding: 20px 32px;
  border-radius: 6px;
}

.msHdataNum {
  font-family: var(--site-secondary-font);
  font-size: 34px;
  font-weight: 400;
  color: var(--msGold2);
  line-height: 1;
}

.msHdataLabel {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--msMuted);
  margin-top: 4px;
}

.msHdataSep {
  width: 1px;
  height: 32px;
  background: var(--msBorder);
  align-self: center;
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .msHeroData {
    padding: 16px 20px;
    gap: 12px !important;
  }
}

/* --- Scroll Reveal --- */

.msReveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.msReveal.msVisible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Section Headings --- */

.msSectionLabel {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--msGold2);
}

.msSectionH2 {
  font-family: var(--site-secondary-font);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  color: var(--msText);
  line-height: 1.15;
  margin-bottom: 16px;
}

.msSectionH2 em {
  font-style: italic;
  color: var(--msGold2);
}

.msSectionSub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--msMuted2);
  margin-bottom: 0;
}

/* Dark section stripe */
.msSectionDark {
  background: var(--msDarkSectionBg);
  transition: background-color 0.35s ease;
}

/* --- Gate Section --- */

.msGateSection {
  background: var(--msInk);
  border-top: 1px solid var(--msBorder);
  border-bottom: 1px solid var(--msBorder);
  transition: background-color 0.35s ease;
}

.msGateSymbol {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--msBorder);
  color: var(--msGold2);
  font-size: 22px;
  box-shadow:
    0 0 0 8px rgba(184, 144, 42, 0.05),
    0 0 0 16px rgba(184, 144, 42, 0.025);
}

.msInviteForm {
  border: 1px solid var(--msBorder);
  border-radius: 3px;
  overflow: hidden;
}

.msInviteInput {
  background: transparent;
  border: none;
  outline: none;
  padding: 13px 16px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  color: var(--msText);
  width: 100%;
  letter-spacing: 0.06em;
}

.msInviteInput::placeholder {
  color: var(--msMuted);
  letter-spacing: 0;
}

.msInviteBtn {
  background: linear-gradient(135deg, var(--msGold2), var(--msGold));
  color: #0d0a04;
  border: none;
  padding: 13px 20px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s;
  white-space: nowrap;
}

.msInviteBtn:hover {
  filter: brightness(1.1);
}

.msInviteMsg {
  font-size: 12px;
  min-height: 18px;
}

.msInviteMsgMuted {
  color: var(--msMuted);
}
.msInviteMsgSuccess {
  color: var(--msGold2);
}
.msInviteMsgError {
  color: #c06040;
}

.msGateAlt {
  font-size: 13px;
  color: var(--msMuted);
}

.msGateAlt a {
  color: var(--msGold2);
  text-decoration: none;
  border-bottom: 1px solid var(--msBorder);
  transition: color 0.2s;
}

.msGateAlt a:hover {
  color: var(--msGold3);
}

/* --- Who Qualifies Grid --- */

.msQualGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .msQualGrid {
    grid-template-columns: 1fr;
  }
}

.msQualCell {
  background: var(--msCardBg);
  border: 1px solid var(--msBorder2);
  padding: 32px;
  transition: background 0.2s;
}

.msQualCell:hover {
  background: var(--msCardHoverBg);
}

.msQualMark {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.msQualYes {
  color: var(--msGold2);
}
.msQualNo {
  color: #b06040;
}

.msQualTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--msText);
  margin-bottom: 8px;
}

.msQualBody {
  font-size: 13px;
  font-weight: 300;
  color: var(--msMuted2);
  line-height: 1.7;
}

/* --- Perk Cards --- */

.msPerkCard {
  background: var(--msCardBg);
  border: 1px solid var(--msBorder2);
  border-radius: 4px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}

[data-bs-theme="light"] .msPerkCard {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.msPerkCard:hover {
  transform: translateY(-3px);
  border-color: var(--msBorder);
}

[data-bs-theme="light"] .msPerkCard:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.msPerkNumber {
  font-family: var(--site-secondary-font);
  font-size: 72px;
  font-weight: 300;
  color: var(--msGold);
  opacity: 0.18;
  line-height: 1;
  position: absolute;
  top: 14px;
  right: 18px;
  pointer-events: none;
  user-select: none;
}

.msPerkIconLine {
  width: 32px;
  height: 1px;
  background: var(--msGold2);
}

.msPerkTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--msText);
}

.msPerkBody {
  font-size: 13px;
  font-weight: 300;
  color: var(--msMuted2);
  line-height: 1.75;
}

.msPerkTag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--msGold2);
  border-bottom: 1px solid var(--msBorder);
  padding-bottom: 2px;
}

/* --- Pricing --- */

.msPricingWrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .msPricingWrap {
    grid-template-columns: 1fr;
  }
}

.msPriceCard {
  background: var(--msCardBg);
  border: 1px solid var(--msBorder2);
  padding: 44px 40px;
  transition: background 0.35s ease;
}

[data-bs-theme="light"] .msPriceCard {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.msPriceCardFeatured {
  background: linear-gradient(
    160deg,
    rgba(184, 144, 42, 0.06),
    var(--msCardBg)
  ) !important;
  border-color: var(--msBorder) !important;
}

.msPriceTier {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--msGold2);
}

.msPriceTierFeatured {
  color: var(--msGold3);
}

.msPriceTitle {
  font-family: var(--site-secondary-font);
  font-size: 30px;
  font-weight: 500;
  color: var(--msText);
  line-height: 1.2;
  margin: 6px 0;
}

.msPriceDesc {
  font-size: 13px;
  font-weight: 300;
  color: var(--msMuted);
  line-height: 1.65;
}

.msPriceNum {
  font-family: var(--site-secondary-font);
  font-size: 52px;
  font-weight: 600;
  color: var(--msGold3);
  line-height: 1;
}

.msPriceNum sup {
  font-size: 22px;
  vertical-align: top;
  margin-top: 10px;
  margin-right: 2px;
  font-weight: 400;
}

.msPriceCycle {
  font-size: 12px;
  color: var(--msMuted);
}

.msPriceItems {
  border-top: 1px solid var(--msBorder2);
  padding-top: 16px;
}

.msPriceItems li {
  font-size: 13px;
  color: var(--msMuted2);
  font-weight: 300;
  padding: 8px 0;
  border-bottom: 1px solid var(--msBorder2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.msPriceItems li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--msGold2);
  flex-shrink: 0;
}

.msPriceCta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.25s;
}

.msPctaGold {
  background: linear-gradient(135deg, var(--msGold2), var(--msGold));
  color: #0d0a04 !important;
  box-shadow: 0 4px 16px rgba(184, 144, 42, 0.3);
}

.msPctaGold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(184, 144, 42, 0.45);
  color: #0d0a04 !important;
}

.msPctaGhost {
  background: transparent;
  color: var(--msGold2) !important;
  border: 1px solid var(--msBorder);
}

.msPctaGhost:hover {
  background: rgba(184, 144, 42, 0.06);
  border-color: var(--msGold2);
  color: var(--msGold2) !important;
}

@media (max-width: 575px) {
  .msPriceCard {
    padding: 32px 24px;
  }
}

/* --- Member Cards --- */

.msMemberCard {
  background: var(--msCardBg);
  border: 1px solid var(--msBorder2);
  border-radius: 4px;
  padding: 30px 26px;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}

[data-bs-theme="light"] .msMemberCard {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.msMemberCard:hover {
  transform: translateY(-3px);
  border-color: var(--msBorder);
}

[data-bs-theme="light"] .msMemberCard:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.msMemberQuoteMark {
  font-family: var(--site-secondary-font);
  font-size: 56px;
  font-weight: 400;
  line-height: 0.7;
  color: var(--msGold2);
  opacity: 0.4;
  margin-bottom: 8px;
}

.msMemberQuote {
  font-family: var(--site-secondary-font);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  color: var(--msText);
  line-height: 1.7;
}

.msMemberRule {
  width: 24px;
  height: 1px;
  background: var(--msGold2);
}

.msMemberName {
  font-size: 13px;
  font-weight: 600;
  color: var(--msText);
}

.msMemberRole {
  font-size: 11px;
  color: var(--msMuted);
  letter-spacing: 0.06em;
}

.msMemberBadge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--msMuted2);
  border: 1px solid var(--msBorder);
  padding: 3px 9px;
  border-radius: 2px;
}

/* --- Manifesto Section --- */

.msManifestoSection {
  border-top: 1px solid var(--msBorder);
}

.msManifestoText {
  font-family: var(--site-secondary-font);
  font-size: clamp(20px, 3.2vw, 38px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--msText);
}

.msManifestoText em {
  font-style: italic;
  color: var(--msGold3);
}

.msManifestoText strong {
  font-weight: 600;
  color: var(--msText);
}

/* --- Apply Section --- */

.msApplySection {
  background: var(--msApplySectionBg);
  border-top: 1px solid var(--msBorder);
  transition: background-color 0.35s ease;
}

.msFormLabel {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--msMuted);
  margin-bottom: 6px;
}

.msFormInput,
.msFormSelect,
.msFormTextarea {
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--msBorder2);
  border-radius: 3px;
  padding: 12px 16px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--msText);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

[data-bs-theme="dark"] .msFormInput,
[data-bs-theme="dark"] .msFormSelect,
[data-bs-theme="dark"] .msFormTextarea {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--msBorder2);
}

.msFormInput::placeholder,
.msFormTextarea::placeholder {
  color: var(--msMuted);
}

.msFormInput:focus,
.msFormSelect:focus,
.msFormTextarea:focus {
  border-color: var(--msGold2);
  box-shadow: 0 0 0 3px rgba(184, 144, 42, 0.12);
}

.msFormSelect {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.03);
}

[data-bs-theme="dark"] .msFormSelect {
  background-color: rgba(255, 255, 255, 0.03);
}

.msFormSelect option {
  background: var(--msInk2);
  color: var(--msText);
}

.msFormTextarea {
  resize: vertical;
  min-height: 96px;
}

.msFormSubmit {
  background: linear-gradient(135deg, var(--msGold2), var(--msGold));
  color: #0d0a04;
  border: none;
  border-radius: 3px;
  padding: 15px;
  width: 100%;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
}

.msFormSubmit:hover {
  box-shadow: 0 6px 20px rgba(184, 144, 42, 0.4);
  transform: translateY(-1px);
}

.msFormSubmitLoading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

.msFormSubmitSuccess {
  background: rgba(184, 144, 42, 0.12) !important;
  color: var(--msGold2) !important;
  border: 1px solid rgba(184, 144, 42, 0.3) !important;
  box-shadow: none !important;
  transform: none !important;
}

.msApplyNote {
  font-size: 12px;
  color: var(--msMuted);
  line-height: 1.7;
}

/* --- Footer --- */

.msFooter {
  background: var(--msFooterBg);
  border-top: 1px solid var(--msBorder);
  transition: background-color 0.35s ease;
}

.msFooterWordmark {
  font-family: var(--site-secondary-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--msText);
  letter-spacing: 0.08em;
}

.msFooterWordmark em {
  font-style: italic;
  color: var(--msGold2);
}

.msFooterLinks a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--msMuted);
  text-decoration: none;
  transition: color 0.2s;
}

.msFooterLinks a:hover {
  color: var(--msText);
}

.msFooterCopy {
  font-size: 11px;
  color: var(--msMuted);
  letter-spacing: 0.06em;
}

/* --- Mobile Responsive --- */

@media (max-width: 575px) {
  .msQualCell {
    padding: 24px 18px;
  }
  .msPerkCard {
    padding: 26px 22px;
  }
  .msMemberCard {
    padding: 24px 20px;
  }
  .msHeroData {
    padding: 14px 18px;
  }
  .msHeroDivider {
    gap: 12px !important;
  }
  .msHdivLine {
    flex: 0 0 40px;
  }

  .msFooter .d-flex {
    flex-direction: column !important;
    text-align: center;
    gap: 12px !important;
  }
  .msFooterLinks {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ============================================================
   BIGDOT DESIGN SYSTEM — GENERIC LANDING PAGE COMPONENTS
   All use design tokens. No new CSS needed for new pages.
   Prefix: bdPages* (component) | bd* (utility)
   ============================================================ */

/* ============================================================
   1. PRICING CARDS
   Usage: wrap in .bdPricingGrid, each tier = .bdPricingCard
   Highlight the best plan with .bdPricingCard--featured
   ============================================================ */

.bdPricingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.bdPricingCard {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-2xl);
  padding: 2.25rem 2rem;
  position: relative;
  transition:
    transform var(--bdTransition),
    box-shadow var(--bdTransition),
    border-color var(--bdTransition);
}

.bdPricingCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.bdPricingCard--featured {
  border-color: var(--bdAccentAlt);
  box-shadow: var(--shadow-accent);
}

.bdPricingCard--featured:hover {
  box-shadow: var(--shadow-cta);
}

.bdPricingBadge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bdCta);
  color: var(--bdCtaText);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.bdPricingTier {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bdAccentAlt);
  margin-bottom: 0.5rem;
}

.bdPricingName {
  font-family: var(--site-display-font);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bdText);
  margin-bottom: 0.5rem;
}

.bdPricingPrice {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 1rem 0 0.25rem;
}

.bdPricingCurrency {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bdTextMuted);
  align-self: flex-start;
  margin-top: 0.4rem;
}

.bdPricingAmount {
  font-family: var(--site-display-font);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--bdText);
}

.bdPricingPeriod {
  font-size: 0.82rem;
  color: var(--bdTextMuted);
  margin-bottom: 0.5rem;
}

.bdPricingDesc {
  font-size: 0.875rem;
  color: var(--bdTextMuted);
  line-height: 1.6;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--bdBorder);
}

.bdPricingFeatures {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bdPricingFeatures li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--bdTextMuted);
}

.bdPricingFeatures li::before {
  content: "✓";
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--site-success-color);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--bdSuccessBg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdPricingFeatures li.bdPricingFeature--disabled {
  opacity: 0.4;
}

.bdPricingFeatures li.bdPricingFeature--disabled::before {
  content: "–";
  color: var(--bdTextFaint);
  background: transparent;
}

.bdPricingCta {
  display: block;
  text-align: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  border: 1.5px solid var(--bdBorder);
  color: var(--bdText);
  background: transparent;
}

.bdPricingCta:hover {
  border-color: var(--bdAccentAlt);
  color: var(--bdText);
}

.bdPricingCta--primary {
  background: var(--bdCta);
  color: var(--bdCtaText);
  border-color: var(--bdCta);
}

.bdPricingCta--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
  color: var(--bdCtaText);
}

/* ============================================================
   2. FAQ ACCORDION
   Usage: .bdFaqList > .bdFaqItem > .bdFaqQuestion + .bdFaqAnswer
   Toggle .bdFaqItem--open via JS to expand
   ============================================================ */

.bdFaqList {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bdFaqItem {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--bdTransition);
}

.bdFaqItem--open {
  border-color: var(--bdBorderStrong);
}

.bdFaqQuestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--bdText);
  user-select: none;
  transition: background var(--bdTransition);
}

.bdFaqQuestion:hover {
  background: var(--bdBgCardHover);
}

.bdFaqIcon {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--bdBorder);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--bdTextMuted);
  transition:
    transform var(--bdTransition),
    border-color var(--bdTransition),
    background var(--bdTransition);
}

.bdFaqItem--open .bdFaqIcon {
  transform: rotate(45deg);
  background: var(--bdCta);
  border-color: var(--bdCta);
  color: var(--bdCtaText);
}

.bdFaqAnswer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    padding var(--bdTransition);
  padding: 0 1.5rem;
  font-size: 0.9rem;
  color: var(--bdTextMuted);
  line-height: 1.7;
}

.bdFaqItem--open .bdFaqAnswer {
  max-height: 600px;
  padding: 0 1.5rem 1.25rem;
}

/* ============================================================
   3. STATS / METRICS STRIP
   Usage: .bdStatsGrid > .bdStatItem
   ============================================================ */

.bdStatsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
}

.bdStatItem {
  text-align: center;
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--bdBorder);
  position: relative;
}

.bdStatItem:last-child {
  border-right: none;
}

@media (max-width: 575px) {
  .bdStatsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bdStatItem {
    border-bottom: 1px solid var(--bdBorder);
  }
  .bdStatItem:nth-child(even) {
    border-right: none;
  }
}

.bdStatNum {
  font-family: var(--site-display-font);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--bdText);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.bdStatNum--accent {
  color: var(--bdAccentAlt);
}
.bdStatNum--cta {
  color: var(--bdCta);
}

.bdStatLabel {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bdTextMuted);
  letter-spacing: 0.04em;
}

/* Variant: cards layout */
.bdStatsGrid--cards {
  gap: 1rem;
}

.bdStatsGrid--cards .bdStatItem {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.5rem;
}

.bdStatsGrid--cards .bdStatItem:last-child {
  border-right: 1px solid var(--bdBorder);
}

/* ============================================================
   4. SECTION DIVIDER / SEPARATOR
   Usage: <div class="bdDivider"> or bdDivider--labeled
   ============================================================ */

.bdDivider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
}

.bdDivider::before,
.bdDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bdBorder);
}

.bdDividerLabel {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bdTextFaint);
  white-space: nowrap;
}

.bdDivider--accent::before,
.bdDivider--accent::after {
  background: linear-gradient(
    90deg,
    transparent,
    var(--bdAccentAlt),
    transparent
  );
}

.bdDivider--cta::before,
.bdDivider--cta::after {
  background: linear-gradient(90deg, transparent, var(--bdCta), transparent);
}

/* ============================================================
   5. AVATAR GROUP (social proof / team)
   Usage: .bdAvatarGroup > .bdAvatar (stacked)
   ============================================================ */

.bdAvatarGroup {
  display: flex;
  align-items: center;
}

.bdAvatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid var(--bdBg);
  margin-left: -10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bdBgAlt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bdTextMuted);
}

.bdAvatar:first-child {
  margin-left: 0;
}

.bdAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bdAvatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.65rem;
}
.bdAvatar--lg {
  width: 48px;
  height: 48px;
  font-size: 0.9rem;
}
.bdAvatar--xl {
  width: 64px;
  height: 64px;
  font-size: 1.1rem;
}

.bdAvatarCount {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid var(--bdBg);
  margin-left: -10px;
  background: var(--bdBadgeBg);
  color: var(--bdBadgeText);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bdAvatarGroupMeta {
  margin-left: 12px;
  font-size: 0.82rem;
  color: var(--bdTextMuted);
}

.bdAvatarGroupMeta strong {
  color: var(--bdText);
  font-weight: 600;
}

/* Star rating (for use with avatar groups) */
.bdStarRating {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.85rem;
  color: #f59e0b;
}

.bdStarRating__score {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--bdText);
  margin-left: 0.25rem;
}

/* ============================================================
   6. FEATURE ROW (icon + heading + text — horizontal)
   Usage: .bdFeatureList > .bdFeatureRow
   ============================================================ */

.bdFeatureList {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bdFeatureRow {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.bdFeatureRow__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--bdBadgeBg);
  border: 1px solid var(--bdBadgeBorder);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.bdFeatureRow__body {
}

.bdFeatureRow__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bdText);
  margin-bottom: 0.25rem;
}

.bdFeatureRow__text {
  font-size: 0.875rem;
  color: var(--bdTextMuted);
  line-height: 1.65;
  margin: 0;
}

/* Numbered variant */
.bdFeatureRow--numbered .bdFeatureRow__icon {
  font-family: var(--site-display-font);
  font-size: 1rem;
  font-weight: 800;
  background: var(--bdBgCard);
  border-color: var(--bdBorder);
  color: var(--bdAccentAlt);
}

/* ============================================================
   7. TRUST BADGES / SOCIAL PROOF STRIP
   Usage: .bdTrustStrip > .bdTrustBadge
   ============================================================ */

.bdTrustStrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.bdTrustBadge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bdTextMuted);
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-full);
  padding: 0.35rem 1rem;
  white-space: nowrap;
  transition: border-color var(--bdTransition);
}

.bdTrustBadge:hover {
  border-color: var(--bdBorderStrong);
  color: var(--bdText);
}

.bdTrustBadge__icon {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Logo wall (partner/press logos) */
.bdLogoWall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
  padding: 2rem 0;
}

.bdLogoWall__item {
  opacity: 0.4;
  filter: grayscale(1);
  transition:
    opacity var(--bdTransition),
    filter var(--bdTransition);
  max-height: 28px;
  width: auto;
}

.bdLogoWall__item:hover {
  opacity: 0.7;
  filter: grayscale(0.3);
}

/* ============================================================
   8. ALERT / NOTICE BANNERS
   Usage: .bdAlert.bdAlert--info / --success / --warning / --error
   ============================================================ */

.bdAlert {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: 0.9rem;
  line-height: 1.6;
}

.bdAlert__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.bdAlert__body {
}

.bdAlert__title {
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: var(--bdText);
  font-size: 0.9rem;
}

.bdAlert__text {
  color: var(--bdTextMuted);
  margin: 0;
}

.bdAlert--info {
  background: var(--bdInfoBg);
  border-color: var(--bdBadgeBorder);
  color: var(--bdBadgeText);
}

.bdAlert--success {
  background: var(--bdSuccessBg);
  border-color: rgba(22, 163, 74, 0.2);
  color: var(--site-success-color);
}

.bdAlert--warning {
  background: var(--bdWarningBg);
  border-color: rgba(217, 119, 6, 0.2);
  color: var(--site-warning-color);
}

.bdAlert--error {
  background: var(--bdErrorBg);
  border-color: rgba(220, 38, 38, 0.2);
  color: var(--site-error-color);
}

/* ============================================================
   9. PILL / TAB NAV
   Usage: .bdTabNav > .bdTabNav__item  (.bdTabNav__item--active)
   ============================================================ */

.bdTabNav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bdBgAlt);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-full);
  padding: 0.25rem;
  width: fit-content;
}

.bdTabNav__item {
  padding: 0.45rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bdTextMuted);
  cursor: pointer;
  transition: all var(--bdTransition);
  border: none;
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
}

.bdTabNav__item:hover {
  color: var(--bdText);
}

.bdTabNav__item--active {
  background: var(--bdBgCard);
  color: var(--bdText);
  box-shadow: var(--shadow-sm);
}

/* Tab panels */
.bdTabPanel {
  display: none;
}
.bdTabPanel--active {
  display: block;
}

/* ============================================================
   10. COMPARISON TABLE
   Usage: .bdCompareTable > thead/tbody with .bdCompareRow
   ============================================================ */

.bdCompareWrap {
  overflow-x: auto;
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-xl);
}

.bdCompareTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}

.bdCompareTable th,
.bdCompareTable td {
  padding: 1rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--bdBorder);
}

.bdCompareTable th {
  font-family: var(--site-display-font);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bdText);
  background: var(--bdBgCard);
}

.bdCompareTable th:first-child,
.bdCompareTable td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--bdText);
}

.bdCompareTable td {
  color: var(--bdTextMuted);
  background: var(--bdBg);
}

.bdCompareTable tr:last-child td,
.bdCompareTable tr:last-child th {
  border-bottom: none;
}

.bdCompareTable .bdCompareCol--featured {
  background: var(--bdBadgeBg);
  border-left: 1px solid var(--bdBadgeBorder);
  border-right: 1px solid var(--bdBadgeBorder);
  color: var(--bdBadgeText);
  font-weight: 700;
}

.bdCompareCheck {
  color: var(--site-success-color);
  font-size: 1rem;
}
.bdCompareCross {
  color: var(--bdTextFaint);
  font-size: 1rem;
}

/* ============================================================
   11. NEWSLETTER / EMAIL CAPTURE
   Usage: .bdNewsletter > .bdNewsletterForm
   ============================================================ */

.bdNewsletter {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-2xl);
  padding: 2.5rem 2rem;
  text-align: center;
}

.bdNewsletter__title {
  font-family: var(--site-display-font);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  color: var(--bdText);
  margin-bottom: 0.5rem;
}

.bdNewsletter__sub {
  font-size: 0.9rem;
  color: var(--bdTextMuted);
  margin-bottom: 1.5rem;
}

.bdNewsletterForm {
  display: flex;
  gap: 0.5rem;
  max-width: 460px;
  margin: 0 auto;
}

.bdNewsletterInput {
  flex: 1;
  background: var(--bdInputBg);
  border: 1.5px solid var(--bdInputBorder);
  border-radius: var(--radius-full);
  padding: 0.7rem 1.25rem;
  font-family: var(--site-body-font);
  font-size: 0.9rem;
  color: var(--bdInputText);
  outline: none;
  transition:
    border-color var(--bdTransition),
    box-shadow var(--bdTransition);
}

.bdNewsletterInput::placeholder {
  color: var(--bdInputPlaceholder);
}

.bdNewsletterInput:focus {
  border-color: var(--bdInputFocusBorder);
  box-shadow: 0 0 0 3px var(--bdInputFocusShadow);
}

@media (max-width: 480px) {
  .bdNewsletterForm {
    flex-direction: column;
  }
  .bdNewsletterInput {
    border-radius: var(--radius-lg);
  }
}

.bdNewsletter__note {
  font-size: 0.75rem;
  color: var(--bdTextFaint);
  margin-top: 0.75rem;
}

/* ============================================================
   COMPONENT RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 767px) {
  .bdPricingGrid {
    grid-template-columns: 1fr;
  }
  .bdStatsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bdTabNav {
    flex-wrap: wrap;
    border-radius: var(--radius-xl);
  }
  .bdFeatureRow {
    flex-direction: column;
  }
  .bdNewsletter {
    padding: 2rem 1.25rem;
  }
  .bdPricingCard {
    padding: 2rem 1.5rem;
  }
}

/* ============================================================
   EPAYMENTS PAGE — bdEpay* components
   Used by: bigdot-epayments-v2.html
   ============================================================ */

/*  Hero grid overlay  */
.bdEpayGridBg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--bdEpayGridLine) 1px, transparent 1px),
    linear-gradient(90deg, var(--bdEpayGridLine) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] {
  --bdEpayGridLine: rgba(34, 85, 232, 0.04);
}
[data-theme="dark"] {
  --bdEpayGridLine: rgba(0, 212, 255, 0.04);
}

/*  Animated orbs  */
@keyframes bdEpayDrift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(20px, 30px);
  }
}

.bdEpayOrb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.bdEpayOrb--1 {
  width: 520px;
  height: 520px;
  top: -80px;
  left: -100px;
  animation: bdEpayDrift 8s ease-in-out infinite alternate;
}

.bdEpayOrb--2 {
  width: 400px;
  height: 400px;
  bottom: 0;
  right: 5%;
  animation: bdEpayDrift 10s ease-in-out infinite alternate-reverse;
}

.bdEpayOrb--3 {
  width: 260px;
  height: 260px;
  top: 30%;
  right: 20%;
}

[data-theme="light"] .bdEpayOrb--1 {
  background: radial-gradient(circle, rgba(34, 85, 232, 0.12), transparent 70%);
}
[data-theme="light"] .bdEpayOrb--2 {
  background: radial-gradient(circle, rgba(34, 85, 232, 0.08), transparent 70%);
}
[data-theme="light"] .bdEpayOrb--3 {
  background: radial-gradient(circle, rgba(241, 90, 37, 0.08), transparent 70%);
}
[data-theme="dark"] .bdEpayOrb--1 {
  background: radial-gradient(circle, rgba(0, 119, 255, 0.22), transparent 70%);
}
[data-theme="dark"] .bdEpayOrb--2 {
  background: radial-gradient(circle, rgba(0, 212, 255, 0.15), transparent 70%);
}
[data-theme="dark"] .bdEpayOrb--3 {
  background: radial-gradient(
    circle,
    rgba(245, 200, 66, 0.12),
    transparent 70%
  );
}

/*  Gradient text for hero and stats  */
.bdEpayGradText {
  background: var(--bdEpayGrad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] {
  --bdEpayGrad: linear-gradient(90deg, #2255e8, #1c2d64);
}
[data-theme="dark"] {
  --bdEpayGrad: linear-gradient(90deg, #00d4ff, #0077ff);
}

/* Gold variant for hero title word */
.bdEpayGradText--gold {
  background: var(--bdEpayGradGold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] {
  --bdEpayGradGold: linear-gradient(90deg, #d97706, #f59e0b);
}
[data-theme="dark"] {
  --bdEpayGradGold: linear-gradient(90deg, #f5c842, #ffb700);
}

/*  ZATCA / gold-accent card  */
.bdEpayZatcaCard {
  border-color: rgba(245, 200, 66, 0.3) !important;
  position: relative;
  overflow: hidden;
}

.bdEpayZatcaCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 80% 50%,
    rgba(245, 200, 66, 0.07),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.bdEpayZatcaCard > * {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .bdEpayZatcaCard {
  background: linear-gradient(
    135deg,
    #0a1628 0%,
    #0d1f38 50%,
    #0a1a2e 100%
  ) !important;
}

/* Gold badge pill */
.bdEpayBadgeGold {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(245, 200, 66, 0.12);
  border: 1px solid rgba(245, 200, 66, 0.4);
  color: #b8902a;
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="dark"] .bdEpayBadgeGold {
  color: #f5c842;
}

/*  Featured pay-mode card  */
.bdEpayPayFeatured {
  border-color: rgba(245, 200, 66, 0.3) !important;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .bdEpayPayFeatured {
  background: linear-gradient(135deg, #0f1e34, #101c30) !important;
}

.bdEpayPayFeatured:hover {
  border-color: rgba(245, 200, 66, 0.55) !important;
}

/* Diagonal ribbon "Popular" */
.bdEpayRibbon {
  position: absolute;
  top: 16px;
  right: -28px;
  background: #f5c842;
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 36px;
  transform: rotate(45deg);
  z-index: 2;
}

/*  Animated status dot  */
@keyframes bdEpayPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}

.bdEpayStatusDot {
  flex-shrink: 0;
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00e5a0;
  box-shadow: 0 0 8px #00e5a0;
  animation: bdEpayPulse 2s ease infinite;
}

.bdEpayStatusDot--blue {
  background: #4db3ff;
  box-shadow: 0 0 8px #4db3ff;
}

/*  Compliance list  */
.bdEpayComplianceList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.bdEpayComplianceList li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--bdText);
  line-height: 1.6;
}

.bdEpayComplianceList li::before {
  content: "✓";
  width: 22px;
  height: 22px;
  border-radius: var(--radius-md);
  background: rgba(0, 229, 160, 0.15);
  border: 1px solid rgba(0, 229, 160, 0.3);
  color: #00e5a0;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/*  ZATCA logo block  */
.bdEpayZatcaBlock {
  background: var(--bdBgCard);
  border: 1px solid var(--bdBorder);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: border-color var(--bdTransition);
}

[data-theme="dark"] .bdEpayZatcaBlock {
  background: rgba(255, 255, 255, 0.04);
}

.bdEpayZatcaBlock__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.bdEpayZatcaBlock__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bdText);
  margin-bottom: 0.2rem;
}

.bdEpayZatcaBlock__sub {
  font-size: 0.8rem;
  color: var(--bdTextMuted);
  margin: 0;
  line-height: 1.4;
}

/*  Hero section override  */
.bdEpayHero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 7rem 0 5rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 767px) {
  .bdEpayOrb--1 {
    width: 300px;
    height: 300px;
  }
  .bdEpayOrb--2 {
    width: 240px;
    height: 240px;
  }
  .bdEpayOrb--3 {
    display: none;
  }
  .bdEpayZatcaCard .row {
    flex-direction: column;
  }
}

/* ============================================================
   Student Career Identity Onboarding (bdStudOnboard*)
   Light-first · Bootstrap 5.3 · camelCase
   ============================================================ */

/*  Shell  */
.bdStudOnboardShell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bdBg);
  color: var(--bdText);
  font-family: var(--site-primary-font);
  --bdStudOnboard-headerH: 66px;

  /*  Remap gold → design-system electric-blue (scoped to this wizard)  */
  --bdOnboard-gold: var(--bdHighlightAlt);
  --bdOnboard-goldLight: var(--bdHighlightAlt);
  --bdOnboard-goldDim: var(--bdBadgeBg);
  --bdOnboard-goldGlow: var(--bdCtaGlow1);
  --bdOnboard-goldBorder: var(--bdBadgeBorder);
  --bdOnboard-bg: var(--bdBg);
  --bdOnboard-bgOff: var(--bdBgAlt);
  --bdOnboard-bgCard: var(--bdBgCard);
  --bdOnboard-text: var(--bdText);
  --bdOnboard-silver: var(--bdTextMuted);
  --bdOnboard-border: var(--bdBorder);

  /*  Semantic tokens for this wizard  */
  --bdStudOnboard-textOnColor: #fff;
  --bdStudOnboard-linkedinBorder: rgba(10, 102, 194, 0.2);
  --bdStudOnboard-linkedinShadow: rgba(10, 102, 194, 0.35);
  --bdStudOnboard-linkedinGradEnd: #00a0dc;
  --bdStudOnboard-successBorder: rgba(22, 163, 74, 0.3);
  --bdStudOnboard-successBg: rgba(22, 163, 74, 0.04);
  --bdStudOnboard-successBadgeBg: rgba(22, 163, 74, 0.1);
  --bdStudOnboard-footerBg: rgba(255, 255, 255, 0.92);
  --bdStudOnboard-ctaGradEnd: var(--site-quaternary-color);
  --bdStudOnboard-ctaShadow: rgba(241, 90, 37, 0.35);
  --bdStudOnboard-borderHover: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .bdStudOnboardShell {
  --bdStudOnboard-footerBg: rgba(10, 10, 15, 0.92);
  --bdStudOnboard-borderHover: rgba(255, 255, 255, 0.15);
}

/*  HEADER  */
.bdStudOnboardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  height: var(--bdStudOnboard-headerH);
  background: var(--bdBg);
  border-bottom: 1px solid var(--bdBorder);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.bdStudOnboardHeaderRight {
  font-size: 0.78rem;
  color: var(--bdTextMuted);
  letter-spacing: 0.04em;
}

.bdStudOnboardHeaderRight strong {
  color: var(--bdHighlightAlt);
  font-weight: 600;
}

/*  BODY (sidebar + main row)  */
.bdStudOnboardBody {
  display: flex;
  flex: 1;
  min-height: 0;
}

/*  LEFT SIDEBAR  */
.bdStudOnboardSidebar {
  width: 300px;
  flex-shrink: 0;
  background: var(--bdBgAlt);
  border-right: 1px solid var(--bdBorder);
  padding: 2rem 1.5rem;
  position: sticky;
  top: var(--bdStudOnboard-headerH);
  height: calc(100vh - var(--bdStudOnboard-headerH));
  overflow: hidden;
}

/* Step item */
.bdStudOnboardStepItem {
  cursor: pointer;
  transition: background 0.2s;
}

.bdStudOnboardStepItem:not(.active):not(.done):hover {
  background: var(--bdOnboard-white08);
}

.bdStudOnboardStepItem.active {
  background: var(--bdOnboard-goldDim);
}

.bdStudOnboardStepItem.done {
  opacity: 0.75;
}

/* Step circle */
.bdStudOnboardStepCircle {
  width: 38px;
  height: 38px;
  border: 2px solid var(--bdOnboard-border);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bdOnboard-silver);
  transition: all 0.3s;
  flex-shrink: 0;
}

.bdStudOnboardStepItem.active .bdStudOnboardStepCircle {
  border-color: var(--bdOnboard-gold);
  background: var(--bdOnboard-gold);
  color: var(--bdOnboard-bg);
}

.bdStudOnboardStepItem.done .bdStudOnboardStepCircle {
  border-color: var(--bdOnboard-gold);
  background: transparent;
  color: var(--bdOnboard-gold);
}

/* Step labels */
.bdStudOnboardStepLabel {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bdOnboard-silver);
}

.bdStudOnboardStepName {
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 2px;
  color: var(--bdOnboard-text);
}

.bdStudOnboardStepItem.active .bdStudOnboardStepName {
  color: var(--bdOnboard-gold);
}
.bdStudOnboardStepItem.done .bdStudOnboardStepName {
  color: var(--bdOnboard-silver);
}

/* Step connector */
.bdStudOnboardStepConnector {
  width: 2px;
  height: 16px;
  background: var(--bdOnboard-border);
  margin: 2px 0 2px calc(1rem + 18px);
  border-radius: 2px;
  transition: background 0.4s;
}

.bdStudOnboardStepConnector.doneLine {
  background: var(--bdOnboard-gold);
}

/* Progress track */
.bdStudOnboardProgressTrack {
  height: 4px;
  background: var(--bdOnboard-white08);
  overflow: hidden;
}

.bdStudOnboardProgressFill {
  height: 100%;
  background: var(--bdStepLineGrad);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/*  MAIN PANEL  */
.bdStudOnboardMain {
  flex: 1;
  min-width: 0;
}

.bdStudOnboardContent {
  padding: 3rem 3.5rem 5rem;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

/*  STEP PANELS  */
.bdStudOnboardStepPanel {
  display: none;
  animation: studOnboardSlideIn 0.35s var(--bdOnboard-ease) both;
}

.bdStudOnboardStepPanel.active {
  display: block;
}

@keyframes studOnboardSlideIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*  STEP HEADER  */
.bdStudOnboardEyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bdOnboard-gold);
}

.bdStudOnboardTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bdOnboard-text);
  margin-bottom: 0.5rem;
}

.bdStudOnboardSubtitle {
  font-size: 0.92rem;
  color: var(--bdOnboard-silver);
  line-height: 1.65;
  margin-bottom: 0;
}

/*  SHARED TOKENS  */
.bdStudOnboardMuted {
  color: var(--bdOnboard-silver) !important;
}
.bdStudOnboardAccentText {
  color: var(--bdOnboard-gold) !important;
}

.bdStudOnboardOpt {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--bdOnboard-silver);
  margin-left: 4px;
}

.bdStudOnboardLabel {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bdOnboard-text);
  opacity: 0.75;
}

/*  FORM INPUTS  */
.bdStudOnboardInput {
  background: var(--bdOnboard-bgCard) !important;
  border: 1.5px solid var(--bdOnboard-border) !important;
  border-radius: 12px !important;
  padding: 0.8rem 1rem !important;
  color: var(--bdOnboard-text) !important;
  font-size: 0.9rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.bdStudOnboardInput::placeholder {
  color: var(--bdOnboard-silver);
}

.bdStudOnboardInput:focus {
  border-color: var(--bdInputFocusBorder) !important;
  box-shadow: 0 0 0 3px var(--bdInputFocusShadow) !important;
  background: var(--bdOnboard-bgCard) !important;
  outline: none;
}

.bdStudOnboardFieldError {
  font-size: 0.78rem;
  color: var(--bdOnboard-red);
  margin-top: 4px;
}

/*  PREFIX INPUT WRAPPER  */
.bdStudOnboardPrefixWrap {
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bdOnboard-bgCard);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.bdStudOnboardPrefixWrap:focus-within {
  border-color: var(--bdInputFocusBorder);
  box-shadow: 0 0 0 3px var(--bdInputFocusShadow);
}

.bdStudOnboardPrefixLabel {
  background: var(--bdBgAlt);
  border-right: 1px solid var(--bdBorder);
  padding: 0.8rem 1rem;
  font-size: 0.84rem;
  color: var(--bdOnboard-silver);
  white-space: nowrap;
}

.bdStudOnboardPrefixWrap input {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.8rem 1rem !important;
  background: var(--bdOnboard-bgCard) !important;
  color: var(--bdOnboard-text) !important;
  font-size: 0.9rem;
}

/*  AVATAR UPLOADER  */
.bdStudOnboardAvatarBlock {
  background: var(--bdOnboard-bgCard);
  border: 1.5px dashed var(--bdOnboard-border);
  border-radius: 16px;
  transition: border-color 0.2s;
}

.bdStudOnboardAvatarBlock:hover {
  border-color: var(--bdOnboard-gold);
}

.bdStudOnboardAvatarSquare {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    var(--bdOnboard-gold),
    var(--site-primary-color)
  );
  color: var(--bdStudOnboard-textOnColor);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.bdStudOnboardAvatarSquare:hover {
  opacity: 0.85;
}

.bdStudOnboardAvatarIcon {
  font-size: 2rem;
  opacity: 0.8;
}

.bdStudOnboardAvatarBtn {
  background: transparent;
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 6px;
  padding: 0.28rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bdOnboard-text);
  cursor: pointer;
  font-family: var(--site-primary-font);
  transition:
    border-color 0.2s,
    color 0.2s;
}

.bdStudOnboardAvatarBtn:hover {
  border-color: var(--bdOnboard-gold);
  color: var(--bdOnboard-gold);
}

.bdStudOnboardAvatarBtnRemove {
  color: var(--site-error-color);
  border-color: var(--bdErrorBg);
}

.bdStudOnboardAvatarBtnRemove:hover {
  border-color: var(--site-error-color);
  color: var(--site-error-color);
}

/*  PROFESSION CHIPS  */
.bdStudOnboardChip {
  border: 1.5px solid var(--bdOnboard-border);
  background: var(--bdOnboard-bgCard);
  color: var(--bdOnboard-text);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 600;
}

.bdStudOnboardChip:hover {
  border-color: var(--bdOnboard-goldBorder);
  color: var(--bdOnboard-gold);
}

.bdStudOnboardChip.selected {
  border-color: var(--bdOnboard-gold);
  background: var(--bdOnboard-goldDim);
  color: var(--bdOnboard-gold);
}

/*  EDUCATION CARD  */
.bdStudOnboardEduCard {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 16px;
  transition: border-color 0.2s;
}

.bdStudOnboardEduCard:hover {
  border-color: var(--bdOnboard-goldBorder);
}

.bdStudOnboardEduRemove {
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: var(--bdOnboard-error);
  color: var(--bdOnboard-red);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s;
  line-height: 1;
  border: none;
}

.bdStudOnboardEduRemove:hover {
  background: var(--bdErrorBg);
}

/*  ADD BUTTON  */
.bdStudOnboardAddBtn {
  background: transparent;
  border: 1.5px dashed var(--bdOnboard-goldBorder) !important;
  border-radius: 12px !important;
  color: var(--bdOnboard-gold);
  font-size: 0.84rem;
  cursor: pointer;
  font-family: var(--site-primary-font);
  transition:
    background 0.2s,
    border-color 0.2s;
}

.bdStudOnboardAddBtn:hover {
  background: var(--bdOnboard-goldDim);
  border-color: var(--bdOnboard-gold) !important;
}

/*  TIP BOX  */
.bdStudOnboardTipBox {
  background: var(--bdOnboard-goldDim);
  border: 1px solid var(--bdOnboard-goldBorder);
}

/*  LINKEDIN SECTION  */
.bdStudOnboardLiFeature {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 12px;
}

.bdStudOnboardLiHero {
  background: var(--bdOnboard-linkedinDim);
  border: 1.5px solid var(--bdStudOnboard-linkedinBorder);
}

.bdStudOnboardLiLogo {
  width: 54px;
  height: 54px;
  background: var(--bdOnboard-linkedin);
  border-radius: 12px;
  color: var(--bdStudOnboard-textOnColor);
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--site-secondary-font);
}

.bdStudOnboardBtnLinkedin {
  background: var(--bdOnboard-linkedin);
  color: var(--bdStudOnboard-textOnColor);
  font-family: var(--site-primary-font);
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.bdStudOnboardBtnLinkedin:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--bdStudOnboard-linkedinShadow);
}

.bdStudOnboardBtnLinkedin:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* LinkedIn connected state */
.bdStudOnboardLiConnected {
  border: 1.5px solid var(--bdStudOnboard-successBorder);
  background: var(--bdStudOnboard-successBg);
  border-radius: 14px;
}

.bdStudOnboardLiAvatar {
  width: 44px;
  height: 44px;
  background: linear-gradient(
    135deg,
    var(--bdOnboard-linkedin),
    var(--bdStudOnboard-linkedinGradEnd)
  );
  color: var(--bdStudOnboard-textOnColor);
  font-size: 1rem;
}

.bdStudOnboardLiBadge {
  background: var(--bdStudOnboard-successBadgeBg);
  border: 1px solid var(--bdStudOnboard-successBorder);
  color: var(--bdOnboard-green);
  font-size: 0.72rem;
  white-space: nowrap;
}

/*  PREVIEW CARD  */
.bdStudOnboardPreviewCard {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-goldBorder);
  border-radius: 20px;
  box-shadow: 0 0 40px var(--bdOnboard-goldGlow);
}

.bdStudOnboardPreviewAvatar {
  width: 54px;
  height: 54px;
  background: linear-gradient(
    135deg,
    var(--bdOnboard-gold),
    var(--site-primary-color)
  );
  color: var(--bdStudOnboard-textOnColor);
  font-size: 1.2rem;
}

.bdStudOnboardPChip {
  background: var(--bdOnboard-goldDim);
  border: 1px solid var(--bdOnboard-goldBorder);
  color: var(--bdOnboard-gold);
  font-size: 0.72rem;
}

.bdStudOnboardWhatNext {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-border);
  border-radius: 16px;
}

/*  FOOTER NAV  */
.bdStudOnboardFooterNav {
  background: var(--bdStudOnboard-footerBg);
  backdrop-filter: blur(20px);
  border-color: var(--bdBorder) !important;
  z-index: 10;
}

/*  BACK BUTTON  */
.bdStudOnboardBtnBack {
  background: transparent;
  border: 1.5px solid var(--bdOnboard-border) !important;
  color: var(--bdOnboard-silver);
  font-family: var(--site-primary-font);
  font-size: 0.88rem;
  transition: all 0.2s;
  cursor: pointer;
}

.bdStudOnboardBtnBack:hover:not(:disabled) {
  border-color: var(--bdStudOnboard-borderHover) !important;
  color: var(--bdOnboard-text);
}

.bdStudOnboardBtnBack:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/*  NEXT / LAUNCH BUTTON  */
.bdStudOnboardBtnNext {
  background: var(--bdCta);
  color: var(--bdCtaText);
  font-family: var(--site-primary-font);
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.bdStudOnboardBtnNext:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

.bdStudOnboardBtnNext.finish {
  background: linear-gradient(
    135deg,
    var(--bdCta),
    var(--bdStudOnboard-ctaGradEnd)
  );
  color: var(--bdStudOnboard-textOnColor);
}

.bdStudOnboardBtnNext.finish:hover {
  box-shadow: 0 8px 24px var(--bdStudOnboard-ctaShadow);
}

/*  SUCCESS SCREEN  */
.bdStudOnboardSuccess {
  min-height: 70vh;
  animation: studOnboardSlideIn 0.5s var(--bdOnboard-ease) both;
}

.bdStudOnboardSuccessBurst {
  width: 90px;
  height: 90px;
  background: var(--bdOnboard-goldDim);
  border: 2px solid var(--bdOnboard-goldBorder);
  font-size: 2.8rem;
  box-shadow: 0 0 40px var(--bdOnboard-goldGlow);
  animation: studOnboardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes studOnboardPop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.bdStudOnboardSuccessUrl {
  background: var(--bdOnboard-bgCard);
  border: 1.5px solid var(--bdOnboard-goldBorder) !important;
  border-radius: 12px;
  transition: border-color 0.2s;
}

.bdStudOnboardSuccessUrl:hover {
  border-color: var(--bdOnboard-gold) !important;
}

/*  TOAST  */
.bdStudOnboardToast {
  bottom: 2rem;
  right: 2rem;
  background: var(--bdOnboard-bgCard);
  border: 1px solid var(--bdOnboard-goldBorder) !important;
  border-radius: 12px;
  font-size: 0.84rem;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s var(--bdOnboard-ease);
  max-width: 300px;
  color: var(--bdOnboard-text);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.bdStudOnboardToast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/*  RESPONSIVE  */
@media (max-width: 992px) {
  .bdStudOnboardHeader {
    padding: 0.875rem 1.25rem;
  }

  .bdStudOnboardHeaderRight {
    display: none;
  }

  .bdStudOnboardContent {
    padding: 2rem 1.75rem 5rem;
  }
}

/* Extra utility classes (replace inline styles) */
.bdStudOnboardLogoImg {
  height: 26px;
}
.bdStudOnboardLiFeatureDesc {
  font-size: 0.78rem;
  line-height: 1.5;
}
.bdStudOnboardLiHeroText {
  max-width: 380px;
  line-height: 1.65;
}
.bdStudOnboardUrlHint {
  font-size: 0.72rem;
}
.bdStudOnboardSuccessText {
  max-width: 420px;
}
.bdStudOnboardSuccessUrl {
  max-width: 400px;
  cursor: pointer;
}

@media (max-width: 576px) {
  .bdStudOnboardContent {
    padding: 1.75rem 1.25rem 5rem;
  }

  .bdStudOnboardTitle {
    font-size: 1.7rem;
  }

  .bdStudOnboardFooterNav {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .bdStudOnboardBtnBack,
  .bdStudOnboardBtnNext {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: 0.82rem;
  }
}

/* ============================================================
   PORTAL LANDING PAGE — ServiceHeroes
   Prefix: portal + camelCase BEM-like
   Bootstrap 5.3 companion — only layout & surface not covered
   by utility classes is written here.
   ============================================================ */

/* ── Design Tokens ── */
:root {
  --portalBg: #f7f4ef;
  --portalSurface: #ffffff;
  --portalSurface2: #f2ede6;
  --portalBorder: #ddd6c8;
  --portalBorder2: #ccc3b0;
  --portalInk: #1c1510;
  --portalInk2: #6b5c4e;
  --portalInk3: #a0907e;
  --portalEmber: #c4520a;
  --portalEmberLight: #e06020;
  --portalEmberDim: rgba(196, 82, 10, 0.08);
  --portalForest: #2b5a3c;
  --portalForestDim: rgba(43, 90, 60, 0.08);
  --portalAmber: #f0a500;
  --portalFontDisplay: var(--site-secondary-font);
  --portalFontMono: "DM Mono", monospace;
  --portalFontBody: "Outfit", sans-serif;
}

/* ── Base ── */
.portalBody {
  background: var(--portalBg);
  color: var(--portalInk);
  font-family: var(--portalFontBody);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── Navigation ── */
.portalNav {
  z-index: 200;
  height: 60px;
  background: rgba(247, 244, 239, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--portalBorder);
}

.portalNavMark {
  width: 32px;
  height: 32px;
  background: var(--portalEmber);
  border-radius: 8px;
  flex-shrink: 0;
}

.portalNavMark svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.portalNavName {
  font-family: var(--portalFontDisplay);
  font-size: 19px;
  font-weight: 700;
  color: var(--portalInk);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.portalNavName__dot {
  color: var(--portalEmber);
}

.portalNavBtnHero {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 7px;
  background: var(--portalEmberDim);
  border: 1px solid rgba(196, 82, 10, 0.2);
  color: var(--portalEmber);
  font-family: var(--portalFontBody);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all 0.2s;
  white-space: nowrap;
}

.portalNavBtnHero svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

.portalNavBtnHero:hover {
  background: var(--portalEmber);
  color: #fff;
}

.portalNavBtnCo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 7px;
  background: var(--portalForestDim);
  border: 1px solid rgba(43, 90, 60, 0.2);
  color: var(--portalForest);
  font-family: var(--portalFontBody);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all 0.2s;
  white-space: nowrap;
}

.portalNavBtnCo svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

.portalNavBtnCo:hover {
  background: var(--portalForest);
  color: #fff;
}

/* ── Hero ── */
.portalHero {
  min-height: 100vh;
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

.portalHeroBgCircle {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(196, 82, 10, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.portalHeroBgLine {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(to top, var(--portalSurface2), transparent);
  pointer-events: none;
}

@keyframes portalBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.portalHeroPretitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--portalEmberDim);
  border: 1px solid rgba(196, 82, 10, 0.18);
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--portalFontMono);
  font-size: 11px;
  color: var(--portalEmber);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 28px;
  animation: bdFadeUp 0.6s ease both;
}

.portalHeroPretitleDot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--portalEmber);
  flex-shrink: 0;
  animation: portalBlink 2s ease infinite;
}

.portalHeroTitle {
  font-family: var(--portalFontDisplay);
  font-size: clamp(52px, 5.5vw, 80px);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--portalInk);
  margin-bottom: 22px;
  animation: bdFadeUp 0.65s ease 0.1s both;
}

.portalHeroTitle em {
  font-style: italic;
  color: var(--portalEmber);
}

.portalHeroSub {
  font-size: 17px;
  color: var(--portalInk2);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: 40px;
  font-weight: 300;
  animation: bdFadeUp 0.65s ease 0.2s both;
}

/* ── Search Box ── */
.portalSearchBox {
  display: flex;
  background: var(--portalSurface);
  border: 1.5px solid var(--portalBorder2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  animation: bdFadeUp 0.65s ease 0.3s both;
  max-width: 520px;
}

.portalSearchInput {
  flex: 1;
  border: none;
  outline: none;
  padding: 14px 18px;
  font-family: var(--portalFontBody);
  font-size: 14px;
  color: var(--portalInk);
  background: transparent;
  min-width: 0;
}

.portalSearchInput::placeholder {
  color: var(--portalInk3);
}

.portalSearchSep {
  width: 1px;
  background: var(--portalBorder);
  margin: 8px 0;
  flex-shrink: 0;
}

.portalSearchCityInput {
  border: none;
  outline: none;
  padding: 14px 18px;
  font-family: var(--portalFontBody);
  font-size: 14px;
  color: var(--portalInk);
  background: transparent;
  width: 130px;
  flex-shrink: 0;
}

.portalSearchCityInput::placeholder {
  color: var(--portalInk3);
}

.portalSearchBtn {
  background: var(--portalEmber);
  border: none;
  padding: 0 22px;
  cursor: pointer;
  color: #fff;
  font-family: var(--portalFontBody);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s;
  white-space: nowrap;
  /* Match the search box's 12px corners on the right edge so the button
     doesn't poke out as a square (the box uses overflow: visible). */
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.portalSearchBtn:hover {
  background: var(--portalEmberLight);
}

/* ── Hero Trust Items ── */
.portalTrustList {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  animation: bdFadeUp 0.65s ease 0.4s both;
  flex-wrap: wrap;
}

.portalTrustItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--portalInk3);
}

.portalTrustItem::before {
  content: "✓";
  color: var(--portalForest);
  font-weight: 700;
}

/* ── Quick-Pick Card ── */
.portalQuickCard {
  background: var(--portalSurface);
  border: 1px solid var(--portalBorder);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  animation: bdFadeUp 0.65s ease 0.25s both;
}

.portalQuickTitle {
  font-family: var(--portalFontDisplay);
  font-size: 20px;
  font-weight: 600;
  color: var(--portalInk);
  margin-bottom: 4px;
}

.portalQuickSub {
  font-size: 12px;
  color: var(--portalInk3);
  margin-bottom: 20px;
}

.portalQuickItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--portalBorder);
  background: var(--portalBg);
  text-decoration: none;
  transition: all 0.18s;
  color: var(--portalInk);
  width: 100%;
}

.portalQuickItem:hover {
  border-color: var(--portalEmber);
  background: var(--portalEmberDim);
  color: var(--portalEmber);
}

.portalQuickItem:hover .portalQuickArr {
  opacity: 1;
  transform: translate(2px, -2px);
}

.portalQuickIcon {
  font-size: 18px;
  flex-shrink: 0;
}
.portalQuickName {
  font-size: 12px;
  font-weight: 500;
}

.portalQuickArr {
  font-size: 10px;
  margin-left: auto;
  color: var(--portalEmber);
  opacity: 0;
  transition: all 0.18s;
}

/* ── Trust Strip ── */
.portalTrustStrip {
  background: var(--portalInk);
  padding: 20px 0;
}

.portalTrustStripItem {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.portalTrustStripIcon {
  font-size: 16px;
}

.portalTrustStripVal {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* ── Section Commons ── */
.portalSection {
  padding: 90px 0;
}

.portalEyebrow {
  display: block;
  font-family: var(--portalFontMono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--portalEmber);
  margin-bottom: 12px;
}

.portalSectionTitle {
  font-family: var(--portalFontDisplay);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--portalInk);
  line-height: 1.08;
  margin-bottom: 12px;
}

.portalSectionTitle em {
  font-style: italic;
  color: var(--portalEmber);
}

.portalSectionSub {
  font-size: 16px;
  color: var(--portalInk2);
  font-weight: 300;
  line-height: 1.7;
  max-width: 500px;
  margin: 0;
}

/* ── Services Section ── */
.portalServicesSec {
  background: var(--portalSurface);
}

.portalSvcGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--portalBorder);
  border: 1px solid var(--portalBorder);
  border-radius: 4px;
  overflow: hidden;
}

.portalSvcCard {
  background: var(--portalSurface);
  padding: 28px 22px;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
  color: var(--portalInk);
  transition: background 0.22s;
}

.portalSvcCard::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--portalEmber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.portalSvcCard:hover::after {
  transform: scaleX(1);
}
.portalSvcCard:hover {
  background: var(--portalBg);
  color: var(--portalInk);
}
.portalSvcCard:hover .portalSvcArrow {
  opacity: 1;
  color: var(--portalEmber);
}
.portalSvcCard:hover .portalSvcName {
  color: var(--portalEmber);
}

.portalSvcArrow {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: var(--portalInk3);
  opacity: 0;
  transition: all 0.2s;
}

.portalSvcEmoji {
  font-size: 28px;
  display: block;
  margin-bottom: 16px;
}

.portalSvcName {
  font-family: var(--portalFontDisplay);
  font-size: 18px;
  font-weight: 600;
  color: var(--portalInk);
  display: block;
  margin-bottom: 5px;
  transition: color 0.2s;
}

.portalSvcDesc {
  font-size: 12px;
  color: var(--portalInk3);
  display: block;
  margin-bottom: 14px;
  line-height: 1.5;
}
.portalSvcCount {
  font-family: var(--portalFontMono);
  font-size: 10px;
  color: var(--portalInk3);
  display: block;
  margin-bottom: 12px;
}

.portalSvcSkills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}

.portalSvcSkill {
  background: var(--portalSurface2);
  border: 1px solid var(--portalBorder);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  color: var(--portalInk3);
}

.portalSvcCta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--portalEmber);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portalSvcCardSpecial {
  background: linear-gradient(135deg, var(--portalEmberDim), transparent);
  border-bottom: 3px solid var(--portalEmber);
}

.portalSvcCardSpecial .portalSvcArrow {
  opacity: 1;
  color: var(--portalEmber);
}
.portalSvcCardSpecial .portalSvcName {
  color: var(--portalEmber);
}

/* ── How It Works ── */
.portalHiwSec {
  background: var(--portalBg);
}

.portalHiwSteps {
  position: relative;
  margin-top: 56px;
}

.portalHiwSteps::before {
  content: "";
  display: none;
  position: absolute;
  top: 36px;
  left: calc(16.66% + 20px);
  right: calc(16.66% + 20px);
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--portalEmber) 0%,
    var(--portalEmber) 33%,
    var(--portalBorder2) 33%,
    var(--portalBorder2) 100%
  );
  z-index: 0;
}

@media (min-width: 768px) {
  .portalHiwSteps::before {
    display: block;
  }
}

.portalHiwNum {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--portalFontMono);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.portalHiwNum--active {
  background: var(--portalEmber);
  color: #fff;
}
.portalHiwNum--pending {
  background: var(--portalSurface);
  border: 2px solid var(--portalBorder2);
  color: var(--portalInk3);
}

.portalHiwStepTitle {
  font-family: var(--portalFontDisplay);
  font-size: 22px;
  font-weight: 600;
  color: var(--portalInk);
  margin-bottom: 10px;
}

.portalHiwStepDesc {
  font-size: 14px;
  color: var(--portalInk2);
  line-height: 1.7;
  margin: 0;
}

/* ── Join Section ── */
.portalJoinSec {
  background: var(--portalInk);
  overflow: hidden;
}

.portalJoinHalf {
  padding: 80px 64px;
  position: relative;
  overflow: hidden;
}

/* The panels live in a .row.g-0, whose Bootstrap `.row > *` rule zeroes the
   column padding-left/right at equal specificity — dropping the 64px
   horizontal padding so content hugged the centre divider. Re-assert it with
   a higher-specificity selector. */
.portalJoinSec .portalJoinHalf {
  padding-left: 64px;
  padding-right: 64px;
}

.portalJoinHalf--border {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .portalJoinHalf--border {
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 767px) {
  .portalJoinSec .portalJoinHalf {
    padding-left: 28px;
    padding-right: 28px;
  }
}

.portalJoinGlyph {
  position: absolute;
  bottom: -40px;
  right: -20px;
  font-size: 220px;
  opacity: 0.04;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.portalJoinEyebrow {
  font-family: var(--portalFontMono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.portalJoinEyebrow--hero {
  color: var(--portalEmber);
}
.portalJoinEyebrow--co {
  color: #7eb8d4;
}

.portalJoinLine {
  width: 24px;
  height: 1px;
  flex-shrink: 0;
}
.portalJoinLine--hero {
  background: var(--portalEmber);
}
.portalJoinLine--co {
  background: #7eb8d4;
}

.portalJoinTitle {
  font-family: var(--portalFontDisplay);
  font-size: clamp(32px, 3.5vw, 46px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 14px;
}

.portalJoinTitle--hero em {
  font-style: italic;
  color: var(--portalEmber);
}
.portalJoinTitle--co em {
  font-style: italic;
  color: #7eb8d4;
}

.portalJoinSub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  margin-bottom: 32px;
  font-weight: 300;
}

.portalJoinPerks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.portalJoinPerk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.portalJoinPerkIcon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

.portalJoinPerkIcon--hero {
  background: rgba(196, 82, 10, 0.2);
  border: 1px solid rgba(196, 82, 10, 0.3);
}
.portalJoinPerkIcon--co {
  background: rgba(126, 184, 212, 0.15);
  border: 1px solid rgba(126, 184, 212, 0.2);
}

.portalJoinPerkTitle {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2px;
}
.portalJoinPerkDesc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
  margin: 0;
}

.portalJoinBtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 9px;
  font-family: var(--portalFontBody);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}

.portalJoinBtn--hero {
  background: var(--portalEmber);
  color: #fff;
}
.portalJoinBtn--hero:hover {
  background: var(--portalEmberLight);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(196, 82, 10, 0.4);
  color: #fff;
}

.portalJoinBtn--co {
  background: #7eb8d4;
  color: #000;
}
.portalJoinBtn--co:hover {
  background: #9ecfe6;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(126, 184, 212, 0.3);
  color: #000;
}

/* ── Testimonials ── */
.portalTestiSec {
  background: var(--portalSurface2);
}

.portalTestiCard {
  background: var(--portalSurface);
  border: 1px solid var(--portalBorder);
  border-radius: 16px;
  padding: 28px;
  height: 100%;
}

.portalTestiStars {
  color: var(--portalAmber);
  font-size: 14px;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

.portalTestiText {
  font-family: var(--portalFontDisplay);
  font-size: 17px;
  font-style: italic;
  color: var(--portalInk);
  line-height: 1.6;
  margin-bottom: 20px;
}

.portalTestiAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--portalSurface2);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--portalBorder);
  flex-shrink: 0;
}

.portalTestiName {
  font-size: 13px;
  font-weight: 600;
  color: var(--portalInk);
}
.portalTestiRole {
  font-size: 11px;
  color: var(--portalInk3);
}

.portalTestiTag {
  margin-top: 16px;
  display: inline-block;
  background: var(--portalEmberDim);
  border: 1px solid rgba(196, 82, 10, 0.15);
  color: var(--portalEmber);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

/* ── Footer ── */
.portalFooter {
  background: var(--portalInk);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 40px 0;
}

.portalFooterLogo {
  font-family: var(--portalFontDisplay);
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: -0.02em;
}

.portalFooterLogo span {
  color: var(--portalEmber);
}

.portalFooterLink {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.2s;
}

.portalFooterLink:hover {
  color: rgba(255, 255, 255, 0.8);
}

.portalFooterCopy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}

/* ── Scroll Reveal ── */
.portalReveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.portalReveal.portalReveal--visible {
  opacity: 1;
  transform: none;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .portalSvcGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .portalSvcGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .portalSection {
    padding: 60px 0;
  }
  .portalJoinHalf {
    padding: 50px 28px;
  }
  .portalSearchCityInput,
  .portalSearchSep {
    display: none;
  }
}

@media (max-width: 479px) {
  .portalSvcGrid {
    grid-template-columns: 1fr;
  }
  .portalHeroTitle {
    font-size: clamp(44px, 12vw, 60px);
  }
}

/* ============================================================
   MERGED FROM bigdot-wizard-v2.css
   Property "Add Listing" wizard + Service-Heroes onboarding/wizard
   flow (bdWiz* / bdPort* + wizard utility classes). Also still backs
   the onboarding chatbot until its dedicated CSS lands.
   ============================================================ */
/* =============================================================
   bigdot-wizard-v2.css
   BigDot Onboarding Chatbot Widget
   Mobile-first · Bootstrap 5.3 compatible
   Class convention: bdWiz[Component][Element][Modifier] — camelCase, no BEM separators
   ============================================================= */

/* 1. Project CSS Variables */

/* :root {
  --site-primary-font: "Plus Jakarta Sans", sans-serif;
  --site-secondary-font: var(--site-secondary-font);
  --site-tertiary-font: "Bricolage Grotesque", sans-serif;
  --site-primary-color: #1c2d64;
  --site-secondary-color: #f2f4ff;
  --site-tertiary-color: #2255e8;
  --site-quaternary-color: #f15a25;
  --site-text-color: #1c1a16;
  --site-text-muted-color: #808080;
} */

/* 2. Base Page */
.bdWizPage {
  font-family: var(--site-primary-font);
  background-color: #ffffff;
  color: var(--site-text-color);
  min-height: 100vh;
}

/* 3. Demo Hero */
.bdWizDemoHero {
  min-height: 100vh;
  background: linear-gradient(
    150deg,
    var(--site-secondary-color) 0%,
    #dce4ff 60%,
    #f0ecff 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem 6rem;
}

.bdWizDemoHeroEyebrow {
  font-family: var(--site-primary-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--site-tertiary-color);
  margin-bottom: 1rem;
}

.bdWizDemoHeroTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--site-primary-color);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.bdWizDemoHeroSubtitle {
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  color: var(--site-text-muted-color);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 2rem;
}

.bdWizDemoHeroTagline {
  font-size: 13px;
  color: var(--site-text-muted-color);
  margin-top: 1rem;
}

.bdWizDemoHeroStat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.bdWizDemoHeroStatNum {
  font-family: var(--site-tertiary-font);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--site-primary-color);
  line-height: 1.1;
}

.bdWizDemoHeroStatLabel {
  font-size: 11px;
  color: var(--site-text-muted-color);
  letter-spacing: 0.5px;
}

.bdWizDemoHeroDivider {
  width: 1px;
  height: 40px;
  background: rgba(28, 45, 100, 0.15);
}

/* 4. Floating Trigger Button */
.bdWizTriggerWrap {
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 1050;
}

.bdWizTriggerBtn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--site-quaternary-color);
  color: #ffffff;
  border: none;
  border-radius: 60px;
  padding: 11px 18px 11px 12px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(241, 90, 37, 0.45);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  font-family: var(--site-primary-font);
  text-align: left;
  position: relative;
}

.bdWizTriggerBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(241, 90, 37, 0.55);
}

.bdWizTriggerBtn:active {
  transform: scale(0.97);
}

.bdWizTriggerBtnIcon {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.bdWizTriggerBtnLabel {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.bdWizTriggerBtnLabelMain {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.bdWizTriggerBtnLabelSub {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.88;
  white-space: nowrap;
}

.bdWizTriggerBadge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 13px;
  height: 13px;
  background: #2ecc71;
  border-radius: 50%;
  border: 2px solid #ffffff;
  animation: bdWizBadgePulse 2s infinite;
}

@keyframes bdWizBadgePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(46, 204, 113, 0);
  }
}

/* Compact on very small screens */
@media (max-width: 380px) {
  .bdWizTriggerBtnLabel {
    display: none;
  }

  .bdWizTriggerBtn {
    padding: 12px;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    justify-content: center;
  }

  .bdWizTriggerBtnIcon {
    width: 30px;
    height: 30px;
    background: none;
    font-size: 22px;
  }
}

/* 5. Chat Widget Container */
/* Mobile-first: full screen slide-up */
.bdWizWidget {
  position: fixed;
  max-height: calc(100vh - 104px);
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  z-index: 1049;
  transition:
    transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
  transform-origin: bottom center;
  overflow: hidden;
}

.bdWizWidgetHidden {
  transform: translateY(100vh);
  opacity: 0;
  pointer-events: none;
}

/* Tablet and up: floating chat window */
@media (min-width: 576px) {
  .bdWizWidget {
    inset: auto;
    bottom: 28px;
    right: 20px;
    width: 420px;
    height: 580px;
    border-radius: 20px;
    box-shadow:
      0 24px 64px rgba(28, 45, 100, 0.2),
      0 4px 16px rgba(28, 45, 100, 0.1);
    transform-origin: bottom right;
  }

  .bdWizWidgetHidden {
    transform: scale(0.88) translateY(16px);
    opacity: 0;
    pointer-events: none;
  }

  .bdWizTriggerWrap {
    bottom: 24px;
    right: 24px;
  }
}

@media (max-width: 767px) {
  .bdWizWidget {
    max-height: calc(100vh - 40px) !important;
  }
}

@media (min-width: 768px) {
  .bdWizWidget {
    width: 460px;
    height: 620px;
    right: 28px;
    bottom: 28px;
  }

  .bdWizField .bdWizFormGroup {
    margin-bottom: 0px;
  }

  .bdWizTriggerWrap {
    bottom: 28px;
    right: 28px;
  }

  /* .bdWizTriggerWrap {
    bottom: 120px !important;
  } */
}

@media (min-width: 1200px) {
  .bdWizWidget {
    width: 500px;
    height: 640px;
  }
}

/* 6. Widget Header */
.bdWizHeader {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: var(--site-primary-color);
  flex-shrink: 0;
  border-radius: 0;
}

@media (min-width: 576px) {
  .bdWizHeader {
    border-radius: 20px 20px 0 0;
  }
}

.bdWizHeaderAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  position: relative;
}

.bdWizHeaderAvatarStatus {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  background: #2ecc71;
  border-radius: 50%;
  border: 2px solid var(--site-primary-color);
}

.bdWizHeaderInfo {
  flex: 1;
  min-width: 0;
}

.bdWizHeaderName {
  font-family: var(--site-primary-font);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.bdWizHeaderStatus {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.4;
}

.bdWizHeaderOnlineDot {
  color: #2ecc71;
}

.bdWizProgress {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.bdWizProgressBar {
  width: 72px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.bdWizProgressFill {
  height: 100%;
  background: linear-gradient(90deg, #a8c0ff, #ffffff);
  border-radius: 10px;
  transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

.bdWizProgressLabel {
  font-family: var(--site-primary-font);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.bdWizHeaderCloseBtn {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  flex-shrink: 0;
  transition: background 0.2s;
}

.bdWizHeaderCloseBtn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.bdWizHeaderResetBtn {
  width: auto;
  height: 30px;
  border-radius: 100px;
  padding: 0 10px;
  gap: 6px;
  font-family: var(--site-primary-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* 7. Chat Area */
.bdWizChatArea {
  flex: 1;
  overflow-y: auto;
  padding: 18px 14px;
  scroll-behavior: smooth;
  background: #fafbff;
}

.bdWizChatArea::-webkit-scrollbar {
  width: 4px;
}

.bdWizChatArea::-webkit-scrollbar-thumb {
  background: var(--site-primary-color);
  border-radius: 10px;
}

.bdWizDateSep {
  text-align: center;
  font-size: 11px;
  color: var(--site-text-muted-color);
  margin: 6px 0 16px;
  letter-spacing: 0.4px;
  font-family: var(--site-primary-font);
}

/* 8. Message Rows & Bubbles */
.bdWizMsgRow {
  display: flex;
  margin-bottom: 8px;
  animation: bdWizFadeUp 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.bdWizMsgRowBot {
  align-items: flex-end;
}

.bdWizMsgRowUser {
  flex-direction: row-reverse;
}

.bdWizMsgAvatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--site-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-right: 8px;
  margin-bottom: 2px;
}

.bdWizBubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.58;
  font-family: var(--site-primary-font);
}

.bdWizBubbleBot {
  background: #ffffff;
  color: var(--site-text-color);
  border-bottom-left-radius: 5px;
  border: 1px solid rgba(28, 45, 100, 0.1);
  box-shadow: 0 1px 5px rgba(28, 45, 100, 0.06);
}

.bdWizBubbleUser {
  background: var(--site-primary-color);
  color: #ffffff;
  font-weight: 500;
  border-bottom-right-radius: 5px;
}

.bdWizTextMuted {
  color: var(--site-text-muted-color);
  font-size: 0.85em;
}

/* 9. Typing Indicator */
.bdWizTypingWrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.bdWizTypingBubble {
  background: #ffffff;
  border: 1px solid rgba(28, 45, 100, 0.1);
  box-shadow: 0 1px 5px rgba(28, 45, 100, 0.06);
  padding: 11px 14px;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  display: flex;
  gap: 5px;
  align-items: center;
  animation: bdWizFadeUp 0.3s ease both;
}

.bdWizDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c0c8df;
  animation: bdWizBounce 1.2s infinite ease-in-out;
}

.bdWizDot:nth-child(2) {
  animation-delay: 0.2s;
}

.bdWizDot:nth-child(3) {
  animation-delay: 0.4s;
}

/* 10. Input Dock */
.bdWizDock {
  padding: 11px 13px 14px;
  background: #ffffff;
  border-top: 1px solid rgba(28, 45, 100, 0.08);
  flex-shrink: 0;
}

@media (min-width: 576px) {
  .bdWizDock {
    border-radius: 0 0 20px 20px;
  }
}

.bdWizInputRow {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

/* 11. Text Input */
.bdWizInputBox {
  flex: 1;
  min-width: 0;
  background: var(--site-secondary-color);
  border: 1.5px solid rgba(28, 45, 100, 0.14);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: var(--site-primary-font);
  color: var(--site-text-color);
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  resize: none;
  min-height: 44px;
  line-height: 1.45;
}

.bdWizInputBox::placeholder {
  color: var(--site-text-muted-color);
}

.bdWizInputBox:focus {
  border-color: var(--site-tertiary-color);
  background: #ffffff;
}

.bdWizInputBoxError {
  border-color: #d93025;
}

.bdWizInputBoxReadonly {
  opacity: 0.6;
  cursor: default;
  background: #eef0f8;
}

/* 12. Send Button */
.bdWizSendBtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    transform 0.15s,
    background 0.2s;
}

.bdWizSendBtn:hover {
  background: var(--site-primary-color);
  transform: scale(1.07);
}

.bdWizSendBtn:active {
  transform: scale(0.94);
}

.bdWizSendBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.bdWizSendBtn svg {
  fill: #ffffff;
}

/* 13. Hint / Error Text */
.bdWizHint {
  font-size: 11.5px;
  color: #d93025;
  margin-top: 5px;
  padding-left: 2px;
  min-height: 16px;
  font-family: var(--site-primary-font);
  transition: opacity 0.2s;
}

.bdWizHintOk {
  color: #1a8a4a;
}

/* 14. Autocomplete Dropdown */
.bdWizAutocompleteWrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* .bdWizDropdown.bdWizFullDropdown {
    bottom: calc(100% + -250px);
} */

.bdWizAutocompleteWrap .bdWizInputBox {
  width: 100%;
}

.bdWizDropdown {
  position: absolute;
  bottom: calc(100% + 0px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1.5px solid rgba(28, 45, 100, 0.12);
  border-radius: 12px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 28px rgba(28, 45, 100, 0.14);
  animation: bdWizFadeUp 0.2s ease both;
}

.bdWizDropdown::-webkit-scrollbar {
  width: 4px;
}

.bdWizDropdown::-webkit-scrollbar-thumb {
  background: var(--site-primary-color);
  border-radius: 10px;
}

.bdWizDropdownItem {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--site-primary-font);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(28, 45, 100, 0.06);
  transition: background 0.15s;
  color: var(--site-text-color);
}

.bdWizDropdownItem:last-child {
  border: none;
}

.bdWizDropdownItem:hover,
.bdWizDropdownItemActive {
  background: var(--site-secondary-color);
}

.bdWizDropdownItemFlag {
  font-size: 18px;
  flex-shrink: 0;
}

.bdWizDropdownItemMeta {
  font-size: 11px;
  color: var(--site-text-muted-color);
  margin-top: 1px;
}

/* 15. Selection Chips */
.bdWizChipsWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 6px;
  max-height: 148px;
  overflow-y: auto;
}

.bdWizChipsWrap::-webkit-scrollbar {
  width: 3px;
}

.bdWizChipsWrap::-webkit-scrollbar-thumb {
  background: #dde2f0;
  border-radius: 10px;
}

.bdWizChip {
  padding: 6px 13px;
  border-radius: 100px;
  background: var(--site-secondary-color);
  border: 1.5px solid rgba(28, 45, 100, 0.15);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.18s;
  color: var(--site-text-muted-color);
  font-family: var(--site-primary-font);
  white-space: nowrap;
  user-select: none;
}

.bdWizChip:hover {
  border-color: var(--site-tertiary-color);
  color: var(--site-primary-color);
  background: rgba(34, 85, 232, 0.06);
}

.bdWizChipSelected {
  background: rgba(34, 85, 232, 0.08);
  border-color: var(--site-tertiary-color);
  color: var(--site-tertiary-color);
  font-weight: 600;
}

/* 16. OTP Inputs */
.bdWizOtpWrap {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 4px 0;
}

.bdWizOtpDigit {
  width: 44px;
  height: 52px;
  background: var(--site-secondary-color);
  border: 2px solid rgba(28, 45, 100, 0.15);
  border-radius: 10px;
  text-align: center;
  font-size: 22px;
  font-family: var(--site-primary-font);
  font-weight: 700;
  color: var(--site-primary-color);
  outline: none;
  transition:
    border-color 0.2s,
    transform 0.15s,
    background 0.2s;
  caret-color: var(--site-tertiary-color);
}

.bdWizOtpDigit:focus {
  border-color: var(--site-tertiary-color);
  background: #ffffff;
  transform: scale(1.06);
}

.bdWizOtpDigitFilled {
  border-color: var(--site-primary-color);
  background: rgba(28, 45, 100, 0.05);
}

.bdWizOtpDigitError {
  border-color: #d93025;
  animation: bdWizShake 0.35s ease;
}

/* 17. Resend Row */
.bdWizResendRow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--site-text-muted-color);
  font-family: var(--site-primary-font);
}

.bdWizResendBtn {
  background: none;
  border: none;
  color: var(--site-tertiary-color);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--site-primary-font);
  font-weight: 600;
  padding: 0;
  transition: color 0.2s;
}

.bdWizResendBtn:hover {
  color: var(--site-primary-color);
}

.bdWizResendBtn:disabled {
  color: var(--site-text-muted-color);
  cursor: default;
}

/* 18. Address Fields */
.bdWizAddrFields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bdWizAddrRow {
  display: flex;
  gap: 8px;
}

.bdWizAddrRow .bdWizInputBox {
  flex: 1;
  min-width: 0;
}

.bdWizFieldLabel {
  font-size: 10px;
  font-weight: 600;
  color: var(--site-text-muted-color);
  margin-bottom: 3px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: var(--site-primary-font);
}

/* 19. Phone Flag Box */
.bdWizFlagBox {
  background: var(--site-secondary-color);
  border: 1.5px solid rgba(28, 45, 100, 0.14);
  border-radius: 12px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--site-text-color);
  font-size: 13px;
  white-space: nowrap;
  cursor: default;
  font-family: var(--site-primary-font);
  flex-shrink: 0;
  height: 44px;
}

/* 20. Map Preview */
.bdWizMapPreview {
  width: 100%;
  height: 112px;
  background: var(--site-secondary-color);
  border-radius: 12px;
  border: 1px solid rgba(28, 45, 100, 0.1);
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}

.bdWizMapGrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(28, 45, 100, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 45, 100, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
}

.bdWizMapRoads {
  position: absolute;
  inset: 0;
}

.bdWizMapPin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 26px;
  filter: drop-shadow(0 3px 6px rgba(28, 45, 100, 0.3));
}

.bdWizMapCircle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(34, 85, 232, 0.08);
  border: 1.5px solid rgba(34, 85, 232, 0.35);
  animation: bdWizRipple 2s infinite;
}

/* 21. Success Screen */
.bdWizSuccess {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 20px;
  text-align: center;
  animation: bdWizFadeUp 0.5s ease both;
}

.bdWizSuccessIcon {
  width: 72px;
  height: 72px;
  background: rgba(34, 85, 232, 0.07);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: 14px;
  border: 2px solid rgba(34, 85, 232, 0.25);
  animation: bdWizSuccessPulse 2.5s infinite;
}

.bdWizSuccessTitle {
  font-family: var(--site-primary-font);
  font-size: 19px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 6px;
}

.bdWizSuccessSubtitle {
  color: var(--site-text-muted-color);
  font-size: 13px;
  line-height: 1.65;
  max-width: 280px;
  margin: 0 auto 18px;
}

/* 22. Summary Card */
.bdWizSummaryCard {
  background: var(--site-secondary-color);
  border: 1px solid rgba(28, 45, 100, 0.1);
  border-radius: 14px;
  padding: 12px 14px;
  width: 100%;
  text-align: left;
}

.bdWizSummaryRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(28, 45, 100, 0.07);
  font-size: 12.5px;
  font-family: var(--site-primary-font);
  gap: 8px;
}

.bdWizSummaryRow:last-child {
  border: none;
}

.bdWizSummaryRowKey {
  color: var(--site-text-muted-color);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.bdWizSummaryRowVal {
  color: var(--site-primary-color);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  min-width: 0;
}

/* 23. Demo OTP Badge */
.bdWizDemoBadge {
  display: inline-block;
  background: rgba(34, 85, 232, 0.07);
  border: 1px solid rgba(34, 85, 232, 0.2);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--site-tertiary-color);
  font-family: var(--site-primary-font);
  margin-top: 6px;
}

/* 24. Utility */
.bdWizHidden {
  display: none !important;
}

#bdWizScrollAnchor {
  height: 1px;
}

/* 25. Keyframe Animations */
@keyframes bdWizFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

@keyframes bdWizBounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@keyframes bdWizShake {
  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-5px);
  }

  40%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes bdWizPinDrop {
  from {
    transform: translate(-50%, -120%);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -60%);
    opacity: 1;
  }
}

@keyframes bdWizRipple {
  0% {
    width: 36px;
    height: 36px;
    opacity: 1;
  }

  100% {
    width: 84px;
    height: 84px;
    opacity: 0;
  }
}

@keyframes bdWizSuccessPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 85, 232, 0.2);
  }

  50% {
    box-shadow: 0 0 0 14px rgba(34, 85, 232, 0);
  }
}

/* =============================================================
   PUBLISH MY ECOMMERCE STORE WIZARD
   Prefix: bdWizPub · Mobile-first · Bootstrap 5.3
   ============================================================= */

/* Pub Base Page */
.bdWizPubPage {
  background: #f7f9ff;
  min-height: 100vh;
}

/* Header */
.bdWizPubHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid rgba(28, 45, 100, 0.1);
  box-shadow: 0 1px 8px rgba(28, 45, 100, 0.07);
}

.bdWizPubHeaderInner {
  display: flex;
  align-items: center;
  padding: 11px 16px;
  gap: 12px;
}

.bdWizPubLogo {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  flex-shrink: 0;
}

.bdWizPubLogoBullet {
  color: var(--site-quaternary-color);
  font-size: 9px;
}

.bdWizPubLogoText {
  font-family: var(--site-tertiary-font);
  font-weight: 700;
  font-size: 17px;
  color: var(--site-primary-color);
}

.bdWizPubHeaderCenter {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.bdWizPubHeaderTitle {
  font-family: var(--site-primary-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--site-text-muted-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdWizPubHeaderRight {
  flex-shrink: 0;
}

.bdWizPubStepPill {
  font-size: 11px;
  font-family: var(--site-primary-font);
  font-weight: 700;
  color: var(--site-tertiary-color);
  background: rgba(34, 85, 232, 0.09);
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

.bdWizPubTopBar {
  height: 3px;
  background: rgba(28, 45, 100, 0.08);
}

.bdWizPubTopBarFill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--site-tertiary-color),
    var(--site-quaternary-color)
  );
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;
}

@media (max-width: 479px) {
  .bdWizPubHeaderTitle {
    display: none;
  }
}

/* Layout */
.bdWizPubLayout {
  display: flex;
  min-height: 100vh;
  padding-top: 56px;
  padding-bottom: 72px;
}

/* Sidebar */
.bdWizPubSidebar {
  display: none;
}

@media (min-width: 992px) {
  .bdWizPubSidebar {
    display: block;
    width: 256px;
    flex-shrink: 0;
    padding: 28px 0 28px 20px;
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    border-right: 1px solid rgba(28, 45, 100, 0.07);
    background: #fff;
  }
}

.bdWizPubSidebarLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--site-text-muted-color);
  margin-bottom: 12px;
  padding-left: 12px;
  font-family: var(--site-primary-font);
}

.bdWizPubStepNav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bdWizPubStepItem {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.bdWizPubStepItem:hover {
  background: rgba(28, 45, 100, 0.04);
}

.bdWizPubStepItemActive {
  background: rgba(34, 85, 232, 0.07);
}

.bdWizPubStepNum {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgba(28, 45, 100, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--site-text-muted-color);
  flex-shrink: 0;
  font-family: var(--site-primary-font);
  transition:
    background 0.2s,
    color 0.2s;
}

.bdWizPubStepItemActive .bdWizPubStepNum {
  background: var(--site-tertiary-color);
  color: #fff;
}

.bdWizPubStepItemDone .bdWizPubStepNum {
  background: #1a8a4a;
  color: #fff;
  font-size: 13px;
}

.bdWizPubStepInfo {
  flex: 1;
  min-width: 0;
}

.bdWizPubStepTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-text-muted-color);
  font-family: var(--site-primary-font);
  line-height: 1.3;
}

.bdWizPubStepItemActive .bdWizPubStepTitle {
  color: var(--site-primary-color);
}

.bdWizPubStepItemDone .bdWizPubStepTitle {
  color: #1a8a4a;
}

.bdWizPubStepDesc {
  font-size: 11px;
  color: var(--site-text-muted-color);
  font-family: var(--site-primary-font);
  margin-top: 1px;
}

/* Main Content */
.bdWizPubMain {
  flex: 1;
  min-width: 0;
  padding: 28px 16px 16px;
  max-width: 780px;
}

@media (min-width: 768px) {
  .bdWizPubMain {
    padding: 36px 36px 24px;
  }
}

/* Panels */
.bdWizPubPanel {
  display: none;
  animation: bdWizFadeUp 0.3s ease both;
}

.bdWizPubPanelActive {
  display: block;
}

/* Welcome Screen */
.bdWizPubWelcome {
  text-align: center;
  padding: 8px 0 24px;
}

.bdWizPubWelcomeIcon {
  font-size: 52px;
  margin-bottom: 14px;
  display: block;
}

.bdWizPubEyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--site-tertiary-color);
  margin-bottom: 10px;
  font-family: var(--site-primary-font);
}

.bdWizPubWelcomeTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--site-primary-color);
  line-height: 1.2;
  margin-bottom: 14px;
}

.bdWizPubWelcomeSubtitle {
  font-size: 15px;
  color: var(--site-text-muted-color);
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.7;
  font-family: var(--site-primary-font);
}

.bdWizPubOverviewGrid {
  max-width: 560px;
  margin: 0 auto 20px;
}

.bdWizPubOverviewCard {
  background: #fff;
  border: 1.5px solid rgba(28, 45, 100, 0.1);
  border-radius: 14px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  height: 100%;
}

.bdWizPubOverviewCard:hover {
  border-color: var(--site-tertiary-color);
  box-shadow: 0 4px 16px rgba(34, 85, 232, 0.1);
}

.bdWizPubOverviewIcon {
  font-size: 26px;
}

.bdWizPubOverviewLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--site-primary-color);
  font-family: var(--site-primary-font);
  text-align: center;
  line-height: 1.3;
}

.bdWizPubWelcomeNote {
  font-size: 13px;
  color: var(--site-text-muted-color);
  font-family: var(--site-primary-font);
  margin-top: 4px;
}

/* Panel Header */
.bdWizPubPanelHd {
  margin-bottom: 22px;
}

.bdWizPubPanelIconWrap {
  font-size: 34px;
  margin-bottom: 10px;
  display: block;
}

.bdWizPubPanelTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 5px;
  line-height: 1.2;
}

.bdWizPubPanelSubtitle {
  font-size: 14px;
  color: var(--site-text-muted-color);
  margin: 0;
  font-family: var(--site-primary-font);
  line-height: 1.6;
}

/* Cards */
.bdWizPubCard {
  background: #fff;
  border: 1.5px solid rgba(28, 45, 100, 0.1);
  border-radius: 16px;
  padding: 20px;
}

.bdWizPubCardTitle {
  font-family: var(--site-primary-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 6px;
}

.bdWizPubCardSubtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--site-text-muted-color);
  margin-bottom: 12px;
  font-family: var(--site-primary-font);
}

.bdWizPubCardDesc {
  font-size: 13px;
  color: var(--site-text-muted-color);
  margin-bottom: 14px;
  line-height: 1.6;
  font-family: var(--site-primary-font);
}

/* Form Controls */
.bdWizPubFormLabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--site-text-color);
  margin-bottom: 5px;
  display: block;
  font-family: var(--site-primary-font);
}

.bdWizPubRequired {
  color: #d93025;
  margin-left: 2px;
}

.bdWizPubOptional {
  font-size: 10px;
  font-weight: 400;
  color: var(--site-text-muted-color);
  background: rgba(28, 45, 100, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.bdWizPubFormInput.form-control,
.bdWizPubFormTextarea.form-control,
.bdWizPubFormSelect.form-select {
  background-color: var(--site-secondary-color);
  border: 1.5px solid rgba(28, 45, 100, 0.14);
  border-radius: 10px;
  font-family: var(--site-primary-font);
  font-size: 14px;
  color: var(--site-text-color);
  padding: 10px 13px;
}

.bdWizPubFormInput.form-control:focus,
.bdWizPubFormTextarea.form-control:focus,
.bdWizPubFormSelect.form-select:focus {
  border-color: var(--site-tertiary-color);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(34, 85, 232, 0.1);
}

.bdWizPubFormTextarea.form-control {
  resize: vertical;
  min-height: 70px;
}

/* Upload Zone */
.bdWizPubUploadZone {
  border: 2px dashed rgba(28, 45, 100, 0.2);
  border-radius: 14px;
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
  background: var(--site-secondary-color);
  position: relative;
  overflow: hidden;
}

.bdWizPubUploadZone:hover {
  border-color: var(--site-tertiary-color);
  background: rgba(34, 85, 232, 0.04);
}

.bdWizPubUploadZoneSm {
  padding: 16px 20px;
}

.bdWizPubUploadIcon {
  font-size: 26px;
  display: block;
  margin-bottom: 7px;
}

.bdWizPubUploadTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--site-primary-color);
  margin: 0 0 4px;
  font-family: var(--site-primary-font);
}

.bdWizPubUploadHint {
  font-size: 12px;
  color: var(--site-text-muted-color);
  margin: 0;
  font-family: var(--site-primary-font);
}

.bdWizPubUploadInput {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Operating Hours */
.bdWizPubHoursGrid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bdWizPubHoursRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(28, 45, 100, 0.06);
}

.bdWizPubHoursRow:last-child {
  border-bottom: none;
}

.bdWizPubHoursDay {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-text-color);
  width: 34px;
  flex-shrink: 0;
  font-family: var(--site-primary-font);
}

.bdWizPubHoursTimes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.bdWizPubHoursSep {
  font-size: 12px;
  color: var(--site-text-muted-color);
  flex-shrink: 0;
}

.bdWizPubHoursInput {
  background: var(--site-secondary-color);
  border: 1.5px solid rgba(28, 45, 100, 0.14);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--site-primary-font);
  color: var(--site-text-color);
  flex: 1;
  min-width: 0;
  outline: none;
}

.bdWizPubHoursInput:focus {
  border-color: var(--site-tertiary-color);
  background: #fff;
}

.bdWizPubHoursClosedLabel {
  font-size: 12px;
  color: var(--site-text-muted-color);
  font-family: var(--site-primary-font);
  font-style: italic;
}

/* Toggle Switch */
.bdWizPubSwitch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.bdWizPubSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.bdWizPubSwitchTrack {
  position: absolute;
  inset: 0;
  background: rgba(28, 45, 100, 0.15);
  border-radius: 100px;
  transition: background 0.2s;
}

.bdWizPubSwitchTrack::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.bdWizPubSwitch input:checked + .bdWizPubSwitchTrack {
  background: var(--site-tertiary-color);
}

.bdWizPubSwitch input:checked + .bdWizPubSwitchTrack::after {
  transform: translateX(18px);
}

/* Toggle Row */
.bdWizPubToggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bdWizPubToggleLabel {
  font-size: 14px;
  font-weight: 600;
  color: var(--site-text-color);
  margin: 0 0 2px;
  font-family: var(--site-primary-font);
}

.bdWizPubToggleDesc {
  font-size: 12px;
  color: var(--site-text-muted-color);
  margin: 0;
  font-family: var(--site-primary-font);
}

/* Payment / Delivery Check Cards */
.bdWizPubCheckCard {
  display: block;
  cursor: pointer;
  margin: 0;
}

.bdWizPubCheckCard input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bdWizPubCheckCardInner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(28, 45, 100, 0.12);
  background: var(--site-secondary-color);
  transition: all 0.18s;
  height: 100%;
}

.bdWizPubCheckCard input:checked + .bdWizPubCheckCardInner {
  border-color: var(--site-tertiary-color);
  background: rgba(34, 85, 232, 0.06);
  box-shadow: 0 0 0 2px rgba(34, 85, 232, 0.12);
}

.bdWizPubCheckCardIcon {
  font-size: 18px;
  flex-shrink: 0;
}

.bdWizPubCheckCardLabel {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--site-text-color);
  font-family: var(--site-primary-font);
  line-height: 1.3;
}

/* Outlet Cards */
.bdWizPubOutletCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--site-secondary-color);
  border: 1.5px solid rgba(28, 45, 100, 0.1);
  border-radius: 12px;
  margin-bottom: 8px;
  gap: 12px;
}

.bdWizPubOutletCardLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.bdWizPubOutletIcon {
  font-size: 22px;
  flex-shrink: 0;
}

.bdWizPubOutletName {
  font-size: 14px;
  font-weight: 600;
  color: var(--site-primary-color);
  margin: 0;
  font-family: var(--site-primary-font);
}

.bdWizPubOutletAddr {
  font-size: 12px;
  color: var(--site-text-muted-color);
  margin: 2px 0 0;
  font-family: var(--site-primary-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bdWizPubOutletBadge {
  font-size: 10px;
  font-weight: 700;
  background: var(--site-primary-color);
  color: #fff;
  padding: 3px 9px;
  border-radius: 100px;
  flex-shrink: 0;
  font-family: var(--site-primary-font);
  letter-spacing: 0.5px;
}

.bdWizPubOutletCount {
  font-size: 12px;
  font-weight: 600;
  color: var(--site-text-muted-color);
  background: rgba(28, 45, 100, 0.07);
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--site-primary-font);
}

/* Category Tags */
.bdWizPubCategoryList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
}

.bdWizPubTagChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(34, 85, 232, 0.07);
  border: 1.5px solid rgba(34, 85, 232, 0.2);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--site-primary-color);
  font-family: var(--site-primary-font);
}

.bdWizPubTagRemove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--site-text-muted-color);
  font-size: 15px;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

.bdWizPubTagRemove:hover {
  color: #d93025;
}

/* Item List */
.bdWizPubItemList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bdWizPubItemRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--site-secondary-color);
  border-radius: 10px;
  border: 1px solid rgba(28, 45, 100, 0.08);
}

.bdWizPubItemRowLeft {
  flex: 1;
  min-width: 0;
}

.bdWizPubItemRowName {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--site-text-color);
  margin: 0;
  font-family: var(--site-primary-font);
}

.bdWizPubItemRowMeta {
  font-size: 12px;
  color: var(--site-text-muted-color);
  margin: 2px 0 0;
  font-family: var(--site-primary-font);
}

.bdWizPubItemRowPrice {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-primary-color);
  font-family: var(--site-primary-font);
  flex-shrink: 0;
}

.bdWizPubItemRemoveBtn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--site-text-muted-color);
  font-size: 16px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}

.bdWizPubItemRemoveBtn:hover {
  color: #d93025;
}

.bdWizPubEmptyNote {
  font-size: 13px;
  color: var(--site-text-muted-color);
  text-align: center;
  padding: 20px 0;
  font-family: var(--site-primary-font);
  margin: 0;
}

/* Add / Action Buttons */
.bdWizPubBtnAddItem,
.bdWizPubBtnAddOutlet {
  background: rgba(34, 85, 232, 0.07);
  border: 1.5px solid rgba(34, 85, 232, 0.22);
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--site-tertiary-color);
  cursor: pointer;
  transition: all 0.18s;
  font-family: var(--site-primary-font);
}

.bdWizPubBtnAddItem:hover,
.bdWizPubBtnAddOutlet:hover {
  background: rgba(34, 85, 232, 0.13);
  border-color: var(--site-tertiary-color);
}

/* Add Outlet Form */
.bdWizPubAddOutletForm {
  padding-top: 16px;
  border-top: 1px dashed rgba(28, 45, 100, 0.12);
}

.bdWizPubSkipNote {
  font-size: 12px;
  color: var(--site-text-muted-color);
  text-align: center;
  margin-top: 12px;
  font-family: var(--site-primary-font);
}

/* Review Grid */
.bdWizPubReviewGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 576px) {
  .bdWizPubReviewGrid {
    grid-template-columns: 1fr 1fr;
  }
}

.bdWizPubReviewCard {
  background: #fff;
  border: 1.5px solid rgba(28, 45, 100, 0.1);
  border-radius: 14px;
  padding: 16px;
}

.bdWizPubReviewCardHd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.bdWizPubReviewCardIcon {
  font-size: 17px;
}

.bdWizPubReviewCardTitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--site-text-muted-color);
  font-family: var(--site-primary-font);
}

.bdWizPubReviewCardEdit {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--site-tertiary-color);
  font-family: var(--site-primary-font);
  font-weight: 600;
  padding: 0;
}

.bdWizPubReviewItem {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(28, 45, 100, 0.06);
  font-family: var(--site-primary-font);
}

.bdWizPubReviewItem:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bdWizPubReviewKey {
  font-size: 12px;
  color: var(--site-text-muted-color);
  flex-shrink: 0;
}

.bdWizPubReviewVal {
  font-size: 12px;
  font-weight: 600;
  color: var(--site-primary-color);
  text-align: right;
  word-break: break-word;
}

/* Go Live Banner */
.bdWizPubGoLiveBanner {
  background: linear-gradient(135deg, var(--site-primary-color), #2a4db0);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
}

.bdWizPubGoLiveIcon {
  font-size: 36px;
  flex-shrink: 0;
}

.bdWizPubGoLiveTitle {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  font-family: var(--site-primary-font);
}

.bdWizPubGoLiveSubtitle {
  font-size: 13px;
  opacity: 0.8;
  margin: 0;
  font-family: var(--site-primary-font);
  line-height: 1.5;
}

/* Footer CTA Bar */
.bdWizPubFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border-top: 1px solid rgba(28, 45, 100, 0.1);
  box-shadow: 0 -4px 16px rgba(28, 45, 100, 0.08);
}

.bdWizPubFooterInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 10px;
}

@media (min-width: 768px) {
  .bdWizPubFooterInner {
    padding: 14px 36px;
  }
}

.bdWizPubBtnBack {
  background: none;
  border: 1.5px solid rgba(28, 45, 100, 0.18);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--site-text-muted-color);
  cursor: pointer;
  transition: all 0.18s;
  font-family: var(--site-primary-font);
  white-space: nowrap;
}

.bdWizPubBtnBack:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
}

.bdWizPubBtnBack:disabled {
  opacity: 0.3;
  cursor: default;
}

.bdWizPubFooterRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bdWizPubBtnSkip {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--site-text-muted-color);
  cursor: pointer;
  font-family: var(--site-primary-font);
  padding: 10px 6px;
  transition: color 0.18s;
  white-space: nowrap;
}

.bdWizPubBtnSkip:hover {
  color: var(--site-primary-color);
}

.bdWizPubBtnPrimary {
  background: var(--site-tertiary-color);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--site-primary-font);
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(34, 85, 232, 0.28);
}

.bdWizPubBtnPrimary:hover {
  background: var(--site-primary-color);
  box-shadow: 0 6px 20px rgba(28, 45, 100, 0.32);
  transform: translateY(-1px);
}

.bdWizPubBtnPrimary:active {
  transform: translateY(0);
}

.bdWizPubBtnPublish {
  background: linear-gradient(135deg, #1a8a4a, #22c55e);
  box-shadow: 0 4px 14px rgba(26, 138, 74, 0.32);
}

.bdWizPubBtnPublish:hover {
  background: linear-gradient(135deg, #166b3a, #16a34a);
  box-shadow: 0 6px 20px rgba(26, 138, 74, 0.42);
}

/* Publish Success Screen */
.bdWizPubSuccessScreen {
  text-align: center;
  padding: 40px 20px;
}

.bdWizPubSuccessAnim {
  width: 80px;
  height: 80px;
  background: rgba(26, 138, 74, 0.09);
  border: 2px solid rgba(26, 138, 74, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin: 0 auto 18px;
  animation: bdWizSuccessPulse 2.5s infinite;
}

.bdWizPubSuccessTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 10px;
}

.bdWizPubSuccessSubtitle {
  font-size: 15px;
  color: var(--site-text-muted-color);
  max-width: 400px;
  margin: 0 auto 24px;
  font-family: var(--site-primary-font);
  line-height: 1.7;
}

.bdWizPubSuccessBtnGroup {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tools Selection Section (Success Screen) */
.bdWizToolsSection {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(28, 45, 100, 0.08);
}

.bdWizToolsPill {
  display: inline-block;
  background: #e8ecff;
  color: var(--site-primary-color);
  font-family: var(--site-primary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 12px;
}

.bdWizToolsHeading {
  font-family: var(--site-primary-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--site-primary-color);
  line-height: 1.4;
  margin: 0 0 4px;
}

.bdWizToolsSubtitle {
  font-family: var(--site-primary-font);
  font-size: 12px;
  color: var(--site-text-muted-color);
  font-style: italic;
  margin: 0 0 14px;
}

.bdWizToolsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.bdWizToolCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 14px;
  padding: 16px 10px;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    outline 0.1s;
  text-align: center;
  outline: 2px solid transparent;
}

.bdWizToolCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.bdWizToolCard:active {
  transform: translateY(0);
}

.bdWizToolCardSelected {
  outline: 2.5px solid var(--site-primary-color);
  box-shadow: 0 4px 16px rgba(28, 45, 100, 0.18);
}

.bdWizToolCardBlue {
  background: #e6eaff;
}

.bdWizToolCardPurple {
  background: #ece8ff;
}

.bdWizToolCardOrange {
  background: #ffe8d6;
}

.bdWizToolCardGreen {
  background: #d8f5e8;
}

.bdWizToolCardIcon {
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
}

.bdWizToolCardTitle {
  font-family: var(--site-primary-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--site-primary-color);
}

.bdWizToolCardDesc {
  font-family: var(--site-primary-font);
  font-size: 11px;
  color: var(--site-text-muted-color);
  line-height: 1.3;
}

.bdWizToolsNote {
  font-family: var(--site-primary-font);
  font-size: 11px;
  font-style: italic;
  color: var(--site-text-muted-color);
  text-align: center;
  margin: 0 0 14px;
}

.bdWizToolsProceedBtn {
  width: 100%;
  background: var(--site-primary-color);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 20px;
  font-family: var(--site-primary-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
}

.bdWizToolsProceedBtn:hover {
  background: #162354;
  transform: translateY(-1px);
}

.bdWizToolsDone {
  text-align: center;
  padding: 16px;
  background: #f0f4ff;
  border-radius: 12px;
  font-family: var(--site-primary-font);
  font-size: 13px;
  color: var(--site-primary-color);
  line-height: 1.5;
}

/* Type Picker */
.bdWizTypeGrid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.bdWizTypeCard {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--site-secondary-color);
  border: 1.5px solid rgba(28, 45, 100, 0.1);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font-family: var(--site-primary-font);
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.15s;
  width: 100%;
}

.bdWizTypeCard:hover {
  border-color: var(--site-tertiary-color);
  box-shadow: 0 4px 16px rgba(34, 85, 232, 0.12);
  transform: translateY(-1px);
}

.bdWizTypeIcon {
  font-size: 22px;
  width: 46px;
  height: 46px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(28, 45, 100, 0.08);
}

.bdWizTypeTitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 2px;
}

.bdWizTypeDesc {
  font-size: 12px;
  color: var(--site-text-muted-color);
}

/* Skip Button (shared style for all optional skips) */
.bdWizSkipBtn {
  background: none;
  border: 1.5px solid rgb(28 45 100);
  border-radius: 50px;
  padding: 3px 40px;
  font-family: var(--site-primary-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1c2d64;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    color 0.15s;
  display: inline-block;
  margin-top: 6px;
}

.bdWizSkipBtn:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
}

/* Bio Input */
.bdWizTextarea {
  width: 100%;
  resize: none;
  min-height: 72px;
  line-height: 1.5;
}

.bdWizBioWrap {
  display: flex;
  flex-direction: column;
}

.bdWizBioFooter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.bdWizCharCount {
  font-family: var(--site-primary-font);
  font-size: 11px;
  color: var(--site-text-muted-color);
  flex-grow: 1;
}

/* Social Handles */
.bdWizSocialsWrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bdWizSocialRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bdWizSocialIcon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--site-primary-font);
  background: var(--site-secondary-color);
  color: var(--site-primary-color);
  border: 1.5px solid rgba(28, 45, 100, 0.1);
}

.bdWizSocialLi {
  background: #e7f0ff;
  color: #0a66c2;
  border-color: rgba(10, 102, 194, 0.2);
}

.bdWizSocialX {
  background: #f0f0f0;
  color: #000;
  border-color: rgba(0, 0, 0, 0.12);
}

.bdWizSocialIg {
  background: #fff0f5;
  color: #c2185b;
  border-color: rgba(194, 24, 91, 0.2);
}

.bdWizSocialGh {
  background: #f0f0f0;
  color: #333;
  border-color: rgba(0, 0, 0, 0.12);
}

.bdWizSocialTg {
  background: #e8f4ff;
  color: #2196f3;
  border-color: rgba(33, 150, 243, 0.2);
}

.bdWizSocialOther {
  background: #f5f0ff;
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.2);
}

.bdWizSocialsFooter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(28, 45, 100, 0.07);
}

.bdWizSkipSocialsBtn {
  background: none;
  border: 1.5px solid rgba(28, 45, 100, 0.15);
  border-radius: 8px;
  padding: 7px 14px;
  font-family: var(--site-primary-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--site-text-muted-color);
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    color 0.15s;
  flex-shrink: 0;
  margin-top: 0;
}

.bdWizSkipSocialsBtn:hover {
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
}

.bdWizSocialsNote {
  font-family: var(--site-primary-font);
  font-size: 11px;
  color: var(--site-text-muted-color);
  flex-grow: 1;
}

/* Individual Success Screen */
.bdWizIndivSuccessHeader {
  font-family: var(--site-secondary-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--site-primary-color);
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.bdWizIndivSuccessHint {
  font-family: var(--site-primary-font);
  font-size: 12px;
  color: var(--site-text-muted-color);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 14px;
}

.bdWizIndivBtnGroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  width: 100%;
  align-self: stretch;
}

.bdWizIndivBtnPrimary {
  width: 100%;
  background: linear-gradient(
    135deg,
    var(--site-primary-color) 0%,
    #2a4db0 100%
  );
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 15px 20px;
  font-family: var(--site-primary-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(28, 45, 100, 0.3);
  letter-spacing: 0.01em;
}

.bdWizIndivBtnPrimary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(28, 45, 100, 0.38);
}

.bdWizIndivBtnPrimary:active {
  transform: translateY(0);
}

.bdWizIndivBtnSecondary {
  width: 100%;
  background: rgba(28, 45, 100, 0.04);
  color: var(--site-primary-color);
  border: 1.5px solid rgba(28, 45, 100, 0.18);
  border-radius: 14px;
  padding: 14px 20px;
  font-family: var(--site-primary-font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.15s;
  letter-spacing: 0.01em;
}

/* =============================================================
   PORTAL LEAD FORM
   Prefix: bdPort · Bootstrap 5.3 · Warm ember palette
   ============================================================= */

/* Portal CSS Tokens */
:root {
  --bd-ember: #c4520a;
  --bd-ember-light: #e06020;
  --bd-ember-dim: rgba(196, 82, 10, 0.08);
  --bd-forest-dim: rgba(43, 90, 60, 0.08);
  --bd-warm-bg: #f7f4ef;
  --bd-warm-surface2: #f2ede6;
  --bd-warm-border: #ddd6c8;
  --bd-warm-border2: #ccc3b0;
  --bd-warm-ink: #1c1510;
  --bd-warm-ink2: #6b5c4e;
  --bd-warm-ink3: #a0907e;
  --ff-display: var(--site-secondary-font);
  --ff-mono: "DM Mono", monospace;
}

/* Base */
.bdPortPage {
  background: var(--bd-warm-bg);
  color: var(--bd-warm-ink);
  font-size: 15px;
  line-height: 1.6;
}

/* Nav */
.bdPortNav {
  background: #fff;
  border-bottom: 1px solid var(--bd-warm-border);
  height: 56px;
  z-index: 100;
}

.bdPortNavLogoMark {
  width: 28px;
  height: 28px;
  background: var(--bd-ember);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bdPortNavLogoMark svg {
  width: 14px;
  height: 14px;
  fill: #fff;
}

.bdPortNavLogoName {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--bd-warm-ink);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.bdPortNavLogoName span {
  color: var(--bd-ember);
}

.bdPortBreadcrumb {
  font-size: 12px;
  color: var(--bd-warm-ink3);
}

.bdPortBreadcrumb a {
  color: var(--bd-warm-ink3);
  text-decoration: none;
  transition: color 0.2s;
}

.bdPortBreadcrumb a:hover {
  color: var(--bd-warm-ink);
}

/* Layout */
.bdPortLayout {
  min-height: calc(100vh - 56px);
}

/* Form Side */
.bdPortFormSide {
  flex: 1;
  padding: 48px 56px;
  /* max-width: 680px; */
  background: #f7f4ef;
}

@media (max-width: 991px) {
  .bdPortFormSide {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .bdPortFormSide {
    padding: 28px 20px;
  }
}

/* Service Header */
.bdPortSvcHeader {
  border-bottom: 1px solid var(--bd-warm-border);
}

.bdPortSvcIconBig {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  border: 1px solid var(--bd-warm-border2);
}

.bdPortSvcEyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bd-ember);
}

.bdPortSvcH1 {
  font-family: var(--ff-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--bd-warm-ink);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.bdPortSvcTagline {
  font-size: 13px;
  color: var(--bd-warm-ink2);
}

/* Steps Bar */
.bdPortStepsBar {
  display: flex;
}

.bdPortStepItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.bdPortStepItem:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 1px;
  background: var(--bd-warm-border2);
}

.bdPortStepDot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  transition: all 0.3s;
}

.bdPortStepDotDone {
  background: var(--bd-ember);
  color: #fff;
}

.bdPortStepDotActive {
  background: var(--bd-warm-ink);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(28, 21, 16, 0.12);
}

.bdPortStepDotPending {
  background: #fff;
  border: 1.5px solid var(--bd-warm-border2);
  color: var(--bd-warm-ink3);
}

.bdPortStepLabel {
  font-size: 10px;
  font-weight: 500;
  color: var(--bd-warm-ink3);
  text-align: center;
  letter-spacing: 0.03em;
}

.bdPortStepLabelActive {
  color: var(--bd-warm-ink);
  font-weight: 600;
}

.bdPortStepLabelDone {
  color: var(--bd-ember);
}

/* Form Sections */
.bdPortFormSection {
  display: none;
}

.bdPortFormSectionActive {
  display: block;
  animation: bdPortSlideIn 0.3s ease;
}

@keyframes bdPortSlideIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.bdPortSectionTitle {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--bd-warm-ink);
}

/* Form Controls */
.bdPortFormLabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--bd-warm-ink3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.bdPortFormLabel .req {
  color: var(--bd-ember);
}

.bdPortFormInput,
.bdPortFormSelect,
.bdPortFormTextarea {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--bd-warm-border);
  color: var(--bd-warm-ink);
  padding: 11px 14px;
  border-radius: 9px;
  font-family: var(--site-primary-font);
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  appearance: none;
}

.bdPortFormInput:focus,
.bdPortFormSelect:focus,
.bdPortFormTextarea:focus {
  border-color: var(--bd-ember);
  box-shadow: 0 0 0 3px var(--bd-ember-dim);
}

.bdPortFormInputError {
  border-color: var(--bd-ember) !important;
}

.bdPortFormTextarea {
  resize: none;
  height: 90px;
  line-height: 1.6;
}

/* Radio Option Cards */
.bdPortRadioGroup {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.bdPortRadioGroupCols3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 400px) {
  .bdPortRadioGroup {
    grid-template-columns: 1fr 1fr;
  }

  .bdPortRadioGroupCols3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bdPortRadioOpt {
  position: relative;
  cursor: pointer;
}

.bdPortRadioOpt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bdPortRadioLabel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 10px;
  border-radius: 9px;
  border: 1.5px solid var(--bd-warm-border);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  height: 100%;
}

.bdPortRadioOpt input:checked + .bdPortRadioLabel {
  border-color: var(--bd-ember);
  background: var(--bd-ember-dim);
}

.bdPortRadioLabelIcon {
  font-size: 20px;
}

.bdPortRadioLabelText {
  font-size: 12px;
  font-weight: 500;
  color: var(--bd-warm-ink2);
  line-height: 1.4;
}

.bdPortRadioOpt input:checked + .bdPortRadioLabel .bdPortRadioLabelText {
  color: var(--bd-ember);
  font-weight: 600;
}

.bdPortTimeHint {
  font-size: 10px;
  color: var(--bd-warm-ink3);
  display: block;
}

.bdPortTimeHintEmber {
  font-size: 10px;
  color: var(--bd-ember);
  display: block;
}

/* Checkbox Options */
.bdPortCheckOpt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1.5px solid var(--bd-warm-border);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s;
}

.bdPortCheckOpt:hover {
  border-color: var(--bd-warm-border2);
}

.bdPortCheckOpt input {
  width: 16px;
  height: 16px;
  accent-color: var(--bd-ember);
  cursor: pointer;
  flex-shrink: 0;
}

.bdPortCheckOptText {
  font-size: 13px;
  color: var(--bd-warm-ink2);
}

/* Form Nav Bar */
.bdPortFormNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--bd-warm-border);
}

.bdPortProgress {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--bd-warm-ink3);
}

.bdPortBtnBack {
  background: transparent;
  border: 1.5px solid var(--bd-warm-border2);
  color: var(--bd-warm-ink2);
  padding: 11px 24px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--site-primary-font);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 7px;
}

.bdPortBtnBack:hover {
  border-color: var(--bd-warm-ink);
  color: var(--bd-warm-ink);
}

.bdPortBtnNext {
  background: var(--bd-warm-ink);
  color: #fff;
  padding: 12px 32px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--site-primary-font);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.bdPortBtnNext:hover {
  background: #2a2018;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.bdPortBtnSubmit {
  background: var(--bd-ember);
  color: #fff;
  padding: 13px 36px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--site-primary-font);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  letter-spacing: 0.01em;
}

.bdPortBtnSubmit:hover {
  background: var(--bd-ember-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(196, 82, 10, 0.35);
}

/* Consent Box */
.bdPortConsentBox {
  background: var(--bd-warm-surface2);
  border: 1px solid var(--bd-warm-border);
  border-radius: 10px;
}

.bdPortConsentCheck {
  width: 16px;
  height: 16px;
  accent-color: var(--bd-ember);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

.bdPortConsentLabel {
  font-size: 12px;
  color: var(--bd-warm-ink2);
  cursor: pointer;
  line-height: 1.6;
  margin: 0;
}

.bdPortConsentLabel a {
  color: var(--bd-ember);
  text-decoration: none;
}

/* Success Screen */
.bdPortSuccessScreen {
  display: none;
  text-align: center;
  padding: 60px 0;
}

.bdPortSuccessScreenShow {
  display: block;
  animation: bdWizFadeUp 0.5s ease both;
}

.bdPortSuccessIcon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bd-forest-dim);
  border: 2px solid rgba(43, 90, 60, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 24px;
}

.bdPortSuccessH {
  font-family: var(--ff-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--bd-warm-ink);
}

.bdPortSuccessSub {
  font-size: 15px;
  color: var(--bd-warm-ink2);
  max-width: 400px;
  line-height: 1.7;
}

.bdPortSuccessRef {
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--bd-warm-ink3);
  background: var(--bd-warm-surface2);
  border: 1px solid var(--bd-warm-border);
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-block;
}

.bdPortBtnHome {
  background: var(--bd-warm-ink);
  color: #fff;
  padding: 12px 28px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.bdPortBtnHome:hover {
  background: #2a2018;
  color: #fff;
}

/* Aside Panel */
.bdPortAside {
  width: 420px;
  flex-shrink: 0;
  background: #fff;
  border-left: 1px solid var(--bd-warm-border);
  padding: 40px 32px;
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
}

.bdPortAside::-webkit-scrollbar {
  width: 4px;
}

.bdPortAside::-webkit-scrollbar-thumb {
  background: var(--bd-warm-border2);
  border-radius: 10px;
}

.bdPortAsideIcon {
  font-size: 40px;
}

.bdPortAsideSvcName {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--bd-warm-ink);
}

.bdPortAsideDesc {
  font-size: 13px;
  color: var(--bd-warm-ink2);
  line-height: 1.7;
}

.bdPortAsideSep {
  border-color: var(--bd-warm-border);
  opacity: 1;
}

.bdPortAsideTitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--bd-warm-ink3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bdPortTrustIcon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.bdPortTrustIconEmber {
  background: var(--bd-ember-dim);
}
.bdPortTrustIconForest {
  background: var(--bd-forest-dim);
}
.bdPortTrustIconAmber {
  background: rgba(240, 165, 0, 0.1);
}

.bdPortTrustItemTitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--bd-warm-ink);
  margin-bottom: 2px;
}

.bdPortTrustItemDesc {
  font-size: 11px;
  color: var(--bd-warm-ink3);
  line-height: 1.5;
}

.bdPortStepNumBadge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bd-ember);
  color: #fff;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.bdPortStepNumText {
  font-size: 12px;
  color: var(--bd-warm-ink2);
  line-height: 1.5;
}

.bdPortOtherChip {
  background: var(--bd-warm-surface2);
  border: 1px solid var(--bd-warm-border);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--bd-warm-ink2);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-block;
}

.bdPortOtherChip:hover {
  border-color: var(--bd-ember);
  color: var(--bd-ember);
}

/* Loading pill (eyebrow next to "Service Request") */
.bdPortLoadingPill {
  background: var(--bd-ember-dim);
  color: var(--bd-ember);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Radio label variant for options without an emoji icon — lay out
   on a single row instead of stacking icon-over-text. */
.bdPortRadioLabelNoIcon {
  flex-direction: row;
  justify-content: center;
  padding: 14px 12px;
}

/* Empty state — backend returned no Labels / SubTypes for the handle */
.bdPortEmptyState {
  text-align: center;
  padding: 80px 20px;
  animation: bdPortSlideIn 0.4s ease both;
}

.bdPortEmptyIcon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.bdPortEmptyTitle {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--bd-warm-ink);
  margin: 0 0 10px 0;
}

.bdPortEmptySub {
  font-size: 14px;
  color: var(--bd-warm-ink2);
  max-width: 380px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

/* Empty-state card inside the aside */
.bdPortAsideEmpty {
  background: var(--bd-warm-surface2);
  border: 1px dashed var(--bd-warm-border2);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  margin-bottom: 24px;
}

.bdPortAsideEmptyIcon {
  font-size: 28px;
  opacity: 0.6;
  margin-bottom: 8px;
}

.bdPortAsideEmptyTitle {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--bd-warm-ink);
  margin-bottom: 4px;
}

.bdPortAsideEmptySub {
  font-size: 12px;
  color: var(--bd-warm-ink3);
  margin: 0;
  line-height: 1.5;
}

.bdWizIndivBtnSecondary:hover {
  border-color: var(--site-primary-color);
  background: rgba(28, 45, 100, 0.08);
  transform: translateY(-1px);
}

.bdWizIndivBtnSecondary:active {
  transform: translateY(0);
}

.bdWizApiLoader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 1003;
  animation: fadeIn 0.25s ease-out;
}

.bdWizSpinnerGlobal {
  width: 32px;
  height: 32px;
  border: 4px solid rgba(0, 132, 255, 0.1);
  border-top-color: var(--site-primary-color);
  border-radius: 50%;
  animation: bdWizSpin 0.8s linear infinite;
}

/* ── Onboarding loader: multi-layer SVG animation ── */
.bdWizLoaderAnimation {
  width: 120px;
  height: 120px;
  position: relative;
}

.bdWizLoaderSvg {
  display: block;
  overflow: visible;
}

.bdWizLoaderRing {
  fill: none;
  stroke: var(--site-primary-color);
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 60px 60px;
}

.bdWizLoaderRingOuter {
  stroke-dasharray: 80 250;
  stroke-opacity: 0.85;
  animation: bdWizLoaderRotate 3s linear infinite;
}

.bdWizLoaderRingMiddle {
  stroke-width: 2.5;
  stroke-dasharray: 50 200;
  stroke-opacity: 0.5;
  animation: bdWizLoaderRotateReverse 2.2s linear infinite;
}

.bdWizLoaderRingInner {
  stroke-width: 3;
  stroke-dasharray: 30 130;
  stroke-opacity: 0.35;
  animation: bdWizLoaderRotate 1.6s linear infinite;
}

.bdWizLoaderPulse {
  fill: var(--site-primary-color);
  opacity: 0.12;
  transform-origin: 60px 60px;
  animation: bdWizLoaderPulse 1.8s ease-in-out infinite;
}

.bdWizLoaderCenter {
  fill: var(--site-primary-color);
  transform-origin: 60px 60px;
  animation: bdWizLoaderCenterPulse 1.8s ease-in-out infinite;
}

.bdWizLoaderDot {
  fill: var(--site-tertiary-color, var(--site-primary-color));
  transform-origin: 60px 60px;
  opacity: 0;
}

.bdWizLoaderDot1 {
  animation: bdWizLoaderOrbit 3s linear infinite;
}

.bdWizLoaderDot2 {
  animation: bdWizLoaderOrbit 3s linear infinite -1s;
}

.bdWizLoaderDot3 {
  animation: bdWizLoaderOrbit 3s linear infinite -2s;
}

@keyframes bdWizLoaderRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bdWizLoaderRotateReverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes bdWizLoaderPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.12;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.22;
  }
}

@keyframes bdWizLoaderCenterPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.85;
  }
}

@keyframes bdWizLoaderOrbit {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

.bdWizLoaderText {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.bdWizLoaderTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--site-primary-color);
  letter-spacing: 0.01em;
}

.bdWizLoaderStatus {
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;
  height: 18px;
  position: relative;
  width: 240px;
  overflow: hidden;
  display: block;
}

.bdWizLoaderStatusItem {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: bdWizLoaderStatusCycle 9s ease-in-out infinite;
}

.bdWizLoaderStatusItem:nth-child(2) {
  animation-delay: 3s;
}
.bdWizLoaderStatusItem:nth-child(3) {
  animation-delay: 6s;
}

@keyframes bdWizLoaderStatusCycle {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  4% {
    opacity: 1;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  34% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.bdWizVisualCategoryGrid.businessCategory {
  display: grid;
}

.bdWizVisualCategoryGrid {
  display: flex;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}

.bdWizDropdown.bdWizFullDropdown.SelectCategoryDropdown {
  bottom: calc(100% + -250px);
}

.bdWizVisualChip {
  height: 80px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.bdWizVisualChip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bdWizVisualChipOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bdWizVisualChipLabel {
  position: relative;
  z-index: 1;
  color: white;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 0 8px;
}

.bdWizSeparator {
  text-align: center;
  margin: 16px 0;
  font-size: 24px;
  font-weight: 400;
  color: var(--bd-text);
  position: relative;
}

.bdWizFieldLabel {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--bd-text);
  margin-bottom: 12px;
}

.bdWizSearchIcon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-52%);
  color: #94a3b8;
  pointer-events: none;
}

/* .bdWizInputRow .bdWizInputBox {
  padding-left: 40px;
} */

.bdWizInputPrefix {
  position: relative;
  color: var(--site-text-muted-color);
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
  border-right: 1px solid #d1d5db;
  padding-right: 10px;
  margin-left: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.bdWizAddressForm {
  background: white;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #edf2f7;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: slideUp 0.3s ease-out;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  /* margin-top: 10px; */
  overflow-y: auto;
  height: auto;
  max-height: 250px;
}

.bdWizField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.bdWizField .bdWizFieldLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--site-text-muted-color);
  margin-bottom: 0;
  letter-spacing: 0.5px;
}

.bdWizFormRow {
  display: flex;
  gap: 12px;
  width: 100%;
}

.bdWizAddressForm .bdWizInputBox {
  width: 100%;
}

.bdWizAddressForm .bdWizInputBox:focus {
  background: white;
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.1);
}

.bdWizConfirmBtn {
  width: 100%;
  padding: 14px;
  background: var(--site-primary-color);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer !important;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 132, 255, 0.2);
  pointer-events: auto !important;
}

.bdWizConfirmBtn:hover:not(:disabled) {
  background: #0073e6;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 132, 255, 0.3);
}

.bdWizConfirmBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(1);
}

.bdWizErrorMsg {
  font-size: 11px;
  color: #e74c3c;
  margin: 4px 0 8px 4px;
  font-weight: 600;
  animation: fadeIn 0.2s ease-out;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bdWizMapCard {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #edf2f7;
  margin: 12px 0;
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100%;
}

.bdWizMapCardHeader {
  padding: 14px 18px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #edf2f7;
}

.bdWizMapCardPin {
  font-size: 18px;
}

.bdWizMapCardTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdWizMapContainer {
  height: 300px;
  width: 100%;
  position: relative;
  background: #f1f5f9;
}

.bdWizMapContainer agm-map {
  height: 100%;
  width: 100%;
  display: block;
}

.bdWizMapLoading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

.bdWizMapCardFooter {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}

/* Premium Design for Onboarding Chatbot */
:host {
  display: block;
}

/* Selection Cards */
.bdWizSelectionGrid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* padding: 8px 12px; */
}

.bdWizSelectionCard {
  background: #ffffff;
  border: 1.5px solid rgba(28, 45, 100, 0.1);
  border-radius: 14px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  text-align: left;
}

.bdWizSelectionCard:hover {
  transform: translateY(-2px);
  border-color: #0d6efd;
  box-shadow: 0 10px 15px -3px rgba(13, 110, 253, 0.08);
}

.bdWizSelectionCard.active {
  background: #f0f7ff;
  border-color: #0d6efd;
}

.bdWizSelectionIcon {
  font-size: 26px;
  background: #f8fafc;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.bdWizSelectionIconUser {
  background: #f5f3ff;
  color: #6366f1;
}

.bdWizSelectionIconBiz {
  background: #eff6ff;
  color: #3b82f6;
}

.bdWizSelectionCard:hover .bdWizSelectionIcon {
  transform: scale(1.05);
}

.bdWizSelectionText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bdWizSelectionTitle {
  font-weight: 700;
  color: #0f172a;
  font-size: 16px;
}

.bdWizSelectionDesc {
  color: #64748b;
  font-size: 13px;
  font-weight: 400;
}

/* My Self Form Consolidated */
.bdWizMyselfForm {
  background: #ffffff;
  border-radius: 20px;
  padding: 0;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  max-height: 450px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  overflow: hidden;
}

.bdWizFormScroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}

.bdWizFormScroll::-webkit-scrollbar {
  width: 6px;
}

.bdWizFormScroll::-webkit-scrollbar-track {
  background: #f8fafc;
}

.bdWizFormScroll::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

/* Image Picker */
.bdWizImagePickerWrap {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.bdWizImageCircle {
  width: 100px;
  height: 100px;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  overflow: hidden;
}

.bdWizImageCircle:hover {
  border-color: #0d6efd;
  background: #f0f7ff;
}

.bdWizProfilePreview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bdWizImagePlaceholder {
  text-align: center;
  color: #94a3b8;
}

.bdWizImagePlaceholder span {
  font-size: 24px;
}

.bdWizImagePlaceholder p {
  font-size: 11px;
  margin: 4px 0 0;
  font-weight: 500;
}

.bdWizImageEditBadge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: #0d6efd;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dynamic Lists */
.bdWizDynamicList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.bdWizDynamicItem {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bdWizRemoveBtn {
  background: #fee2e2;
  color: #ef4444;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.bdWizRemoveBtn:hover {
  background: #fecaca;
}

.bdWizLinkBtn {
  background: transparent;
  color: #0d6efd;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.bdWizLinkBtn:hover {
  text-decoration: underline;
}

/* Info Box */
.bdWizInfoBox {
  background: #f0f7ff;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.bdWizInfoIcon {
  font-size: 18px;
  flex-shrink: 0;
}

.bdWizInfoText {
  font-size: 12px;
  color: #0369a1;
  line-height: 1.5;
}

.bdWizInfoText strong {
  color: #0c4a6e;
}

.bdWizBioWrap {
  position: relative;
}

.bdWizAiBtn {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  color: #0369a1;
  border-radius: 50px;
  padding: 0 15px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin-bottom: 20px;
  justify-content: center;
  margin: 0 auto 10px;
}

.bdWizAiBtn:hover {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.bdWizAiBtn .btn-text {
  font-size: 13px;
  font-weight: 600;
}

.bdWizAiBtn .ai-sparkle {
  font-size: 16px;
}

.bdWizFormGroup {
  margin-bottom: 10px;
}

.bdWizFormGroup label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}

/* Success Summary */
.bdWizSummary {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin: 10px 0;
}

.bdWizSummaryHeader {
  background: linear-gradient(to right, #0d6efd, #00d2ff);
  padding: 15px;
  color: white;
  text-align: center;
}

.bdWizSummaryList {
  padding: 10px;
}

.bdWizSummaryItem {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.bdWizSummaryKey {
  font-size: 13px;
  color: #64748b;
}

.bdWizSummaryVal {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

/* Conversational Multi-Choice Buttons */
.bdWizVisualCategoryGrid button.bdWizConfirmBtn {
  width: 100%;
}

/* My Self Photo Step */
.bdWizPhotoThumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

/* Conversational Info Box in Dock */
.bdWizChipsContainer .bdWizInfoBox {
  margin-top: 5px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 10px;
}

/* Image Message Bubbles */
.bdWizBubbleImage {
  padding: 8px !important;
  max-width: 200px !important;
  background: white !important;
  border: 1px solid #e2e8f0 !important;
}

.bdWizMsgImage {
  width: 100%;
  border-radius: 12px;
  display: block;
}

/* AI Bio Form in Modal */
.bdWizModalSub {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}

.bdWizAiForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

.bdWizAiForm .bdWizFormGroup {
  margin-bottom: 0;
}

.bdWizAiForm label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.bdWizAiForm textarea.bdWizInputBox {
  resize: none;
  font-family: inherit;
}

.bdWizTextareaRow {
  flex-direction: row;
  align-items: flex-end;
}

.bdWizTextareaBox {
  min-height: 80px;
  max-height: 150px;
  resize: none;
  padding: 12px 16px;
  line-height: 1.5;
  border-radius: 12px;
}

/* Input Dock (Floating at bottom of chat) */
.bdWizDock {
  background: #ffffff;
  padding: 16px 20px 24px;
  border-top: 1px solid #f1f5f9;
  z-index: 10;
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.05);
}

.bdWizInputRow {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.bdWizInputWithPrefix {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.bdWizInputGroup {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 0 16px;
  transition: all 0.2s ease;
  flex: 1;
}

.bdWizInputGroup:focus-within {
  border-color: #0d6efd;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

.bdWizInputGroupError {
  border-color: #ef4444 !important;
  background: #fffafa !important;
}

.bdWizInputPrefix {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  padding-right: 12px;
  border-right: 1px solid #e2e8f0;
  margin-right: 12px;
  white-space: nowrap;
}

.bdWizInputBox {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  color: #1e293b;
  transition: all 0.2s ease;
  outline: none;
}

.bdWizInputRow input#cb-input-search-chips {
  padding-left: 40px;
}

.bdWizInputBoxInner {
  border: none !important;
  background: transparent !important;
  padding: 12px 0 !important;
  box-shadow: none !important;
}

.bdWizInputBox:focus {
  border-color: #0d6efd;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

.bdWizInputBoxError {
  border-color: #ef4444 !important;
  background: #fffafa !important;
}

.bdWizErrorMsg {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  margin-left: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bdWizSendBtn {
  width: 48px;
  height: 48px;
  background: #0d6efd;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(13, 110, 253, 0.3);
  flex-shrink: 0;
}

.bdWizSendBtn:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(13, 110, 253, 0.4);
}

.bdWizSendBtn:active:not(:disabled) {
  transform: scale(0.95);
}

.bdWizSendBtn:disabled {
  background: #e2e8f0;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

.bdWizConfirmBtn:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

.bdWizSendBtnArea {
  margin-bottom: 8px;
}

/* Card Actions (Individual Flow) */
.bdWizCardActions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: #f8fafc;
  border-radius: 24px;
  margin-top: 15px;
  border: 1px solid #f1f5f9;
  width: 100%;
}

.bdWizPrimaryBtn {
  background: var(--SitePrimaryColor);
  color: #fff;
  border: none;
  padding: 15px 24px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 4px 6px -2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bdWizPrimaryBtn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.bdWizPrimaryBtn:active {
  transform: translateY(0);
}

.bdWizSecondaryBtn {
  background: transparent;
  color: #1c2d64;
  border: 2px solid #1c2d64;
  padding: 15px 24px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.bdWizSecondaryBtn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.bdWizSecondaryBtn:active {
  background: #e2e8f0;
}
/* ══ WIZARD PAGES SHARED (Light Theme) ══ */

/* ── Page Base ── */
.bdWizLightPage {
  font-family: var(--site-primary-font);
  background: #f7f4ef;
  color: var(--site-primary-color);
  min-height: 100vh;
  background: #f7f4ef;
}

/* ── Navbar ── */

.bdWizKycNavBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 100px;
  padding: 0.28rem 0.85rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: #e11d48;
}

/* ── Eyebrow ── */
.bdWizEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--site-tertiary-color);
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 100px;
  padding: 0.3rem 0.9rem;
}

.bdWizKycEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e11d48;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 100px;
  padding: 0.3rem 0.9rem;
}

.bdWizEyebrowDot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--site-tertiary-color);
  animation: bdWizDotPulse 2s ease-in-out infinite;
}

@keyframes bdWizDotPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ── Page Title / Sub ── */
.bdWizPageTitle {
  font-family: var(--site-secondary-font);
  font-size: clamp(1.65rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--site-primary-color);
  line-height: 1.15;
}

.bdWizPageTitle em {
  font-style: italic;
  color: var(--site-tertiary-color);
}

.bdWizPageSubtitleText {
  font-size: 0.92rem;
  color: var(--site-text-muted-color);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.65;
}

.bdWizHandleChip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.42rem 1rem;
  font-size: 0.8rem;
  color: var(--site-text-muted-color);
}

.bdWizHandleChip strong {
  color: var(--site-tertiary-color);
  font-family: var(--site-tertiary-font);
  font-weight: 700;
}

/* ── Stepper ── */
.bdWizStepperWrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem 1.75rem 1rem;
  box-shadow: 0 1px 4px rgba(28, 45, 100, 0.06);
}

.bdWizStepRow {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 0.75rem;
}

.bdWizStepTrack {
  position: absolute;
  top: 17px;
  left: 17px;
  right: 17px;
  height: 2px;
  background: #e2e8f0;
  z-index: 0;
}

.bdWizStepFill {
  position: absolute;
  top: 17px;
  left: 17px;
  height: 2px;
  background: linear-gradient(90deg, var(--site-tertiary-color), #60a5fa);
  z-index: 1;
  transition: width 0.4s ease;
  width: 0%;
}

.bdWizStepFillKyc {
  position: absolute;
  top: 17px;
  left: 17px;
  height: 2px;
  background: linear-gradient(90deg, #e11d48, #fb923c);
  z-index: 1;
  transition: width 0.4s ease;
  width: 0%;
}

.bdWizStepNode {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.bdWizStepBall {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--site-tertiary-font);
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid #cbd5e1;
  background: #f7f9ff;
  color: #94a3b8;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.bdWizStepBall.done {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.bdWizStepBall.done span {
  display: none;
}
.bdWizStepBall.done::after {
  content: "✓";
  font-size: 0.7rem;
  font-weight: 900;
  color: #fff;
}

.bdWizStepBall.active {
  background: var(--site-tertiary-color);
  border-color: var(--site-tertiary-color);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(34, 85, 232, 0.15);
}

.bdWizStepBall.activeKyc {
  background: #e11d48;
  border-color: #e11d48;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.15);
}

.bdWizStepLabel {
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
  line-height: 1.25;
  max-width: 56px;
}

.bdWizStepLabel.active {
  color: var(--site-tertiary-color);
}
.bdWizStepLabel.activeKyc {
  color: #e11d48;
}
.bdWizStepLabel.done {
  color: #22c55e;
}

.bdWizStepPct {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 100px;
  padding: 0.18rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--site-tertiary-color);
}

/* ── Step Card ── */
.bdWizStepCard {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(28, 45, 100, 0.07);
}

.bdWizStepCardHeader {
  padding: 1.5rem 2rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}

.bdWizStepEyebrow {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--site-tertiary-color);
  margin-bottom: 0.3rem;
}

.bdWizStepTitle {
  font-family: var(--site-secondary-font);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 0.2rem;
}

.bdWizStepHint {
  font-size: 0.83rem;
  color: var(--site-text-muted-color);
  line-height: 1.55;
}

.bdWizStepBody {
  padding: 1.75rem 2rem 2rem;
}

/* ── Step Navigation ── */
.bdWizStepNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 2rem;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}

.bdWizBtnBack {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-family: var(--site-primary-font);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  background: transparent;
  border: 1.5px solid #cbd5e1;
  color: #64748b;
}

.bdWizBtnBack:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: var(--site-primary-color);
}

.bdWizBtnNext {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-family: var(--site-primary-font);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--site-tertiary-color);
  border: none;
  color: #fff;
}

.bdWizBtnNext:hover {
  background: #1a44cc;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34, 85, 232, 0.28);
}

.bdWizBtnSubmit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 1.75rem;
  border-radius: 8px;
  font-family: var(--site-primary-font);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  background: linear-gradient(
    135deg,
    var(--site-primary-color),
    var(--site-tertiary-color)
  );
  border: none;
  color: #fff;
}

.bdWizBtnSubmit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(28, 45, 100, 0.25);
}

.bdWizNavMeta {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* ── Form Controls ── */
.bdWizFormLabel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  margin-bottom: 0.4rem;
}

.bdWizFormLabelOpt {
  font-size: 0.67rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
  margin-left: auto;
}

.bdWizFormRequired {
  color: #e11d48;
  margin-left: 0.15rem;
}

.bdWizFormControl {
  width: 100%;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  color: var(--site-primary-color);
  font-family: var(--site-primary-font);
  font-size: 0.9rem;
  padding: 0.68rem 1rem;
  outline: none;
  transition: all 0.18s;
  appearance: none;
  -webkit-appearance: none;
}

.bdWizFormControl:focus {
  border-color: var(--site-tertiary-color);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(34, 85, 232, 0.12);
}

.bdWizFormControl::placeholder {
  color: #b0bec5;
}

.bdWizFormControl.ok {
  border-color: #22c55e;
  background: #f0fdf4;
}

.bdWizFormControl.bad {
  border-color: #e11d48;
  background: #fff1f2;
}

/* ── Select / Input wrappers ── */
.bdWizSelectWrap {
  position: relative;
}

.bdWizSelectWrap::after {
  content: "▾";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  font-size: 0.85rem;
}

.bdWizSelectWrap select {
  padding-right: 2.2rem;
}

.bdWizInputWrap {
  position: relative;
}

.bdWizInputPrefix {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #94a3b8;
  pointer-events: none;
}

.bdWizInputPrefix ~ .bdWizFormControl {
  padding-left: 2.35rem;
}

/* ── Char counter ── */
.bdWizCharCount {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 0.28rem;
  transition: color 0.15s;
}

.bdWizCharCount.warn {
  color: #f59e0b;
}
.bdWizCharCount.over {
  color: #e11d48;
}

/* ── Field Messages ── */
.bdWizFieldMsg {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.75rem;
  margin-top: 0.32rem;
  min-height: 0.9rem;
  line-height: 1.4;
}

.bdWizFieldMsg.err {
  color: #e11d48;
}
.bdWizFieldMsg.ok2 {
  color: #22c55e;
}
.bdWizFieldMsg.info {
  color: #0284c7;
}
.bdWizFieldMsg.warn {
  color: #f59e0b;
}

/* ── Info Boxes ── */
.bdWizInfoBox {
  border-radius: 8px;
  padding: 0.85rem 1rem;
}

.bdWizInfoBoxBlue {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.bdWizInfoBoxBlue .bdWizInfoBoxText {
  color: #1d4ed8;
}
.bdWizInfoBoxBlue .bdWizInfoBoxText strong {
  color: #1e40af;
}

.bdWizInfoBoxAmber {
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.bdWizInfoBoxAmber .bdWizInfoBoxText {
  color: #92400e;
}
.bdWizInfoBoxAmber .bdWizInfoBoxText strong {
  color: #78350f;
}

.bdWizInfoBoxRed {
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.bdWizInfoBoxRed .bdWizInfoBoxText {
  color: #be123c;
}
.bdWizInfoBoxRed .bdWizInfoBoxText strong {
  color: #9f1239;
}

.bdWizInfoBoxTeal {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
}

.bdWizInfoBoxTeal .bdWizInfoBoxText {
  color: #0f766e;
}
.bdWizInfoBoxTeal .bdWizInfoBoxText strong {
  color: #0d5e56;
}

.bdWizInfoBoxIndigo {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}

.bdWizInfoBoxIndigo .bdWizInfoBoxText {
  color: #4338ca;
}
.bdWizInfoBoxIndigo .bdWizInfoBoxText strong {
  color: #3730a3;
}

.bdWizInfoBoxOrange {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.bdWizInfoBoxOrange .bdWizInfoBoxText {
  color: #c2410c;
}
.bdWizInfoBoxOrange .bdWizInfoBoxText strong {
  color: #9a3412;
}

.bdWizInfoBoxIcon {
  font-size: 0.95rem;
  flex-shrink: 0;
  padding-top: 0.05rem;
}

.bdWizInfoBoxText {
  font-size: 0.8rem;
  line-height: 1.6;
}

/* ── Gender Cards ── */
.bdWizGenderCards {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.bdWizGenderCard {
  flex: 1;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.8rem 0.4rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.17s;
  user-select: none;
}

.bdWizGenderCard:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.bdWizGenderCard.selected {
  border-color: var(--site-tertiary-color);
  background: #eef2ff;
  box-shadow: 0 0 0 2px rgba(34, 85, 232, 0.12);
}

.bdWizGenderCardIcon {
  font-size: 1.4rem;
}

.bdWizGenderCardLabel {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748b;
  text-align: center;
}

.bdWizGenderCard.selected .bdWizGenderCardLabel {
  color: var(--site-tertiary-color);
}

/* ── OTP Strip ── */
.bdWizOtpStrip {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bdWizOtpStatusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.bdWizOtpStatusDot.sent {
  background: #f59e0b;
  animation: bdWizDotPulse 1.5s infinite;
}

.bdWizOtpStatusDot.verified {
  background: #22c55e;
}

.bdWizOtpLabel {
  font-size: 0.8rem;
  color: #475569;
}

.bdWizOtpLabel strong {
  color: var(--site-primary-color);
}

.bdWizOtpSendBtn {
  background: #0d9488;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  font-family: var(--site-primary-font);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
}

.bdWizOtpSendBtn:hover {
  background: #0f766e;
}
.bdWizOtpSendBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── OTP Boxes ── */
.bdWizOtpBox {
  width: 44px;
  height: 48px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  color: var(--site-primary-color);
  font-family: var(--site-tertiary-font);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: all 0.18s;
}

.bdWizOtpBox:focus {
  border-color: var(--site-tertiary-color);
  box-shadow: 0 0 0 3px rgba(34, 85, 232, 0.12);
  background: #fff;
}

.bdWizOtpBox.filled {
  border-color: #22c55e;
  background: #f0fdf4;
}

/* ── City Toggle ── */
.bdWizCityToggleBtn {
  flex: 1;
  padding: 0.42rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  color: #64748b;
  text-align: center;
}

.bdWizCityToggleBtn.active {
  background: #eef2ff;
  border-color: var(--site-tertiary-color);
  color: var(--site-tertiary-color);
}

.bdWizCityPanel {
  display: none;
}
.bdWizCityPanel.visible {
  display: block;
}

.bdWizCitySearchWrap {
  position: relative;
}

.bdWizCitySuggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(28, 45, 100, 0.12);
  max-height: 260px;
  overflow-y: auto;
}

.bdWizCitySuggestionItem {
  padding: 0.55rem 0.9rem;
  font-size: 0.88rem;
  color: var(--site-primary-color);
  cursor: pointer;
  transition: background 0.15s;
}

.bdWizCitySuggestionItem:hover,
.bdWizCitySuggestionItem:focus {
  background: #eef2ff;
  color: var(--site-tertiary-color);
}

.bdWizCitySuggestionItem + .bdWizCitySuggestionItem {
  border-top: 1px solid #f1f5f9;
}

/* ── Review Cards ── */
.bdWizReviewCard {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(28, 45, 100, 0.05);
}

.bdWizReviewCardHeader {
  padding: 0.7rem 1.1rem;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bdWizReviewCardTitle {
  font-family: var(--site-tertiary-font);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--site-primary-color);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bdWizEditBtn {
  font-size: 0.73rem;
  color: var(--site-tertiary-color);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bdWizReviewRow {
  display: flex;
  align-items: flex-start;
  padding: 0.58rem 1.1rem;
  border-bottom: 1px solid #f8fafc;
}

.bdWizReviewRow:last-child {
  border-bottom: none;
}

.bdWizReviewKey {
  font-size: 0.74rem;
  color: #64748b;
  width: 145px;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.bdWizReviewVal {
  font-size: 0.84rem;
  color: var(--site-primary-color);
  font-weight: 500;
  flex: 1;
  line-height: 1.5;
}

.bdWizReviewVal.empty {
  color: #94a3b8;
  font-style: italic;
  font-weight: 400;
}

/* ── Badges ── */
.bdWizBadgeGreen {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.71rem;
  font-weight: 600;
  padding: 0.14rem 0.5rem;
  border-radius: 4px;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.bdWizBadgeAmber {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.71rem;
  font-weight: 600;
  padding: 0.14rem 0.5rem;
  border-radius: 4px;
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.bdWizBadgeRed {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.71rem;
  font-weight: 600;
  padding: 0.14rem 0.5rem;
  border-radius: 4px;
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}

/* ── Declaration ── */
.bdWizDeclBox {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem 1.1rem;
}

.bdWizDeclRow {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
  user-select: none;
}

.bdWizDeclRow + .bdWizDeclRow {
  margin-top: 0.75rem;
}

.bdWizCheckbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-top: 0.1rem;
}

.bdWizCheckbox.on {
  background: var(--site-tertiary-color);
  border-color: var(--site-tertiary-color);
}

.bdWizCheckbox.on::after {
  content: "";
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.bdWizDeclText {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.55;
}

.bdWizDeclText a {
  color: var(--site-tertiary-color);
}

/* ── Success Screen ── */
.bdWizSuccessScreen {
  text-align: center;
  padding: 3rem 2rem;
}

.bdWizSuccessRing {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
  animation: bdWizPopIn 0.4s ease;
}

@keyframes bdWizPopIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.bdWizSuccessTitle {
  font-family: var(--site-secondary-font);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 0.5rem;
}

.bdWizSuccessSubtitle {
  font-size: 0.9rem;
  color: var(--site-text-muted-color);
  max-width: 380px;
  margin: 0 auto 1.5rem;
  line-height: 1.65;
}

.bdWizAppIdBox {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
}

.bdWizAppIdLabel {
  font-size: 0.73rem;
  color: #64748b;
}

.bdWizAppIdValue {
  font-family: var(--site-tertiary-font);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--site-tertiary-color);
}

.bdWizNextSteps {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1.25rem;
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
}

.bdWizNextStepItem {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.82rem;
  color: #64748b;
}

.bdWizNextStepItem:last-child {
  border-bottom: none;
}

.bdWizNextStepNum {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--site-tertiary-color);
}

/* ── Mobile Footer ── */
.bdWizMobFooter {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid #e2e8f0;
  padding: 0.85rem 1.25rem;
  gap: 0.55rem;
  box-shadow: 0 -2px 12px rgba(28, 45, 100, 0.08);
}

@media (max-width: 640px) {
  .bdWizMobFooter {
    display: flex;
  }
  .bdWizShellPb {
    padding-bottom: 5.5rem;
  }
  .bdWizStepBody {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  .bdWizStepCardHeader {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  .bdWizStepNav {
    display: none;
  }
  .bdWizGenderCards .bdWizGenderCard {
    min-width: calc(50% - 0.35rem);
  }
}

/* ── Upload Area ── */
.bdWizUploadArea {
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  background: #f8fafc;
  position: relative;
}

.bdWizUploadArea:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.bdWizUploadArea.hasVal {
  border-color: #bbf7d0;
  border-style: solid;
  background: #f0fdf4;
}

.bdWizUploadIcon {
  font-size: 1.75rem;
  margin-bottom: 0.4rem;
}

.bdWizUploadTitle {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
}

.bdWizUploadSub {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}

.bdWizUploadInput {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.bdWizUploadPreview {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.bdWizUploadPreview.show {
  display: flex;
}

.bdWizPreviewName {
  font-size: 0.78rem;
  color: #16a34a;
  font-weight: 600;
}

.bdWizPreviewRemove {
  font-size: 0.7rem;
  color: #e11d48;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── KYC Banner ── */
.bdWizKycBanner {
  background: linear-gradient(135deg, #fff1f2, #fffbeb);
  border: 1px solid #fecdd3;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.bdWizKycBanner h3 {
  font-family: var(--site-tertiary-font);
  font-size: 0.9rem;
  font-weight: 700;
  color: #be123c;
  margin-bottom: 0.25rem;
}

.bdWizKycBanner p {
  font-size: 0.8rem;
  color: #9f1239;
  opacity: 0.9;
  line-height: 1.6;
}

/* ── Biometric Grid ── */
.bdWizBioGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
  .bdWizBioGrid {
    grid-template-columns: 1fr;
  }
}

.bdWizBioCard {
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.bdWizBioCard:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.bdWizBioCard.captured {
  border-style: solid;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.bdWizBioCard.requiredMissing {
  border-color: #fecdd3;
  border-style: solid;
  background: #fff1f2;
}

.bdWizBioCardInput {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.bdWizBioIcon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.bdWizBioType {
  font-family: var(--site-tertiary-font);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--site-primary-color);
  margin-bottom: 0.2rem;
}

.bdWizBioSub {
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1.4;
}

.bdWizBioTag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  margin-top: 0.4rem;
}

.bdWizBioTagRequired {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}

.bdWizBioTagOptional {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.bdWizBioTagDone {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.bdWizBioFilename {
  font-size: 0.72rem;
  color: #16a34a;
  margin-top: 0.35rem;
  font-weight: 600;
  display: none;
}

.bdWizBioCard.captured .bdWizBioFilename {
  display: block;
}

.bdWizBioRemoveBtn {
  display: none;
  font-size: 0.68rem;
  color: #e11d48;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 0.2rem;
}

.bdWizBioCard.captured .bdWizBioRemoveBtn {
  display: block;
}

/* ── Add Row / Del Buttons ── */
.bdWizAddRowBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: #eef2ff;
  border: 1.5px dashed #c7d2fe;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--site-tertiary-color);
  width: 100%;
  transition: all 0.17s;
  margin-top: 0.5rem;
}

.bdWizAddRowBtn:hover {
  background: #e0e7ff;
}

.bdWizDelBtn {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #e11d48;
  border-radius: 6px;
  padding: 0.38rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  align-self: flex-start;
  margin-top: 1.6rem;
  flex-shrink: 0;
}

.bdWizDelBtn:hover {
  background: #ffe4e6;
}

/* ── Row Table ── */
.bdWizRowTable {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.bdWizRowTableHeader {
  display: grid;
  padding: 0.55rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.bdWizTableRow {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}

.bdWizTableRow:last-child {
  border-bottom: none;
}
.bdWizTableRow:hover {
  background: #f8fafc;
}

/* ── Upload Mini ── */
.bdWizUploadMini {
  border: 1.5px dashed #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
  cursor: pointer;
  font-size: 0.76rem;
  color: #64748b;
  transition: all 0.18s;
  position: relative;
  background: #f8fafc;
}

.bdWizUploadMini:hover {
  border-color: #c7d2fe;
  color: var(--site-tertiary-color);
}

.bdWizUploadMini.uploaded {
  border-color: #bbf7d0;
  border-style: solid;
  color: #16a34a;
  background: #f0fdf4;
}

.bdWizUploadMiniInput {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* ── Vehicle Type Chips ── */
.bdWizVehType {
  padding: 0.5rem 0.9rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.17s;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bdWizVehType:hover {
  border-color: #c7d2fe;
}

.bdWizVehType.sel {
  background: #eef2ff;
  border-color: var(--site-tertiary-color);
  color: var(--site-tertiary-color);
}

/* ── Same Address ── */
.bdWizSameAddrRow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0.9rem;
}

.bdWizSameAddrLabel {
  font-size: 0.82rem;
  color: #475569;
}

/* ── Proficiency Pills ── */
.bdWizProfPill {
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  border: 1.5px solid #e2e8f0;
  background: transparent;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  color: #64748b;
}

.bdWizProfPill:hover {
  border-color: #c7d2fe;
  color: var(--site-tertiary-color);
}

.bdWizProfPill.sel1 {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #16a34a;
}
.bdWizProfPill.sel2 {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: var(--site-tertiary-color);
}
.bdWizProfPill.sel3 {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
}
.bdWizProfPill.sel4 {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

/* ── Skill / Language Tags ── */
.bdWizSkillTag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.22rem 0.6rem;
  font-size: 0.75rem;
  color: #475569;
  margin: 0.15rem;
}

.bdWizLangTag {
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  color: #0f766e;
}

/* ── Progress Chips ── */
.bdWizProgressChips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.bdWizProgressChip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
}

.bdWizChipDone {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.bdWizChipPending {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}
.bdWizChipMissing {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}

/* ── Verification Stars ── */
.bdWizVerifStar {
  font-size: 1rem;
  cursor: pointer;
  color: #cbd5e1;
  transition: color 0.12s;
}

.bdWizVerifStar.lit {
  color: #f59e0b;
}

/* ── Section Divider ── */
.bdWizSectionDiv {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1.1rem;
}

.bdWizSectionDivLine {
  flex: 1;
  height: 1px;
  background: #f1f5f9;
}

.bdWizSectionDivLabel {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  white-space: nowrap;
}

/* ── No Vehicle Row ── */
.bdWizNoVehRow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
  padding: 0.65rem 0;
  margin-bottom: 1rem;
}

/* ── Mini Bar ── */
.bdWizMiniBar {
  height: 3px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden;
}

.bdWizMiniFill {
  height: 100%;
  background: linear-gradient(90deg, var(--site-tertiary-color), #60a5fa);
  border-radius: 100px;
  transition: width 0.35s;
}

/* ── Row card for doc/peer/rel/veh rows ── */
.bdWizDynRow {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.bdWizDynRowInner {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  align-items: start;
}

/* ══════════════════════════════════════════
   INLINE-STYLE REPLACEMENTS — Light Wizards
══════════════════════════════════════════ */

.bdWizNavLink:hover {
  text-decoration: underline;
}

.bdWizNavDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  flex-shrink: 0;
  animation: bdWizDotPulse 2s infinite;
}

.bdWizNavEmoji {
  font-size: 0.85rem;
  animation: bdWizDotPulse 2s ease-in-out infinite;
}

/* ── Container width caps ── */
.bdWizContainerSm {
  max-width: 780px;
}
.bdWizContainerMd {
  max-width: 820px;
}
.bdWizContainerLg {
  max-width: 860px;
}

/* ── Stepper helpers ── */
.bdWizStepTitleText {
  color: var(--site-primary-color);
}

/* ── OTP & Field messages ── */
.bdWizOtpEntryPanel {
  margin-top: 0.75rem;
}
.bdWizFieldMsgMt {
  margin-top: 0.4rem;
}
.bdWizResendLink {
  color: var(--site-tertiary-color);
  cursor: pointer;
}
.bdWizVerifiedText {
  color: #16a34a;
}

/* ── Form inputs ── */
.bdWizFormControlReadonly {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: default;
}

.bdWizTextarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}

.bdWizTextareaBasic {
  resize: vertical;
  line-height: 1.6;
}

.bdWizInputPl {
  padding-left: 2.35rem;
}
.bdWizInputCenter {
  text-align: center;
}

/* ── Success / next-steps ── */
.bdWizClipboardIcon {
  font-size: 1.5rem;
}
.bdWizWarningIcon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.bdWizNextStepsHeading {
  font-family: var(--site-tertiary-font);
  color: var(--site-primary-color);
}

/* ── Mobile footer ── */
.bdWizMobNextFlex {
  flex: 2;
}

/* ── Review row column layout ── */
.bdWizReviewRowCol {
  flex-direction: column;
  gap: 0.5rem;
}

/* ══ KYC ACCENT CLASSES ══ */
.bdWizKycAccentText {
  color: #e11d48;
}

.bdWizKycStepPct {
  background: #fff1f2;
  border-color: #fecdd3 !important;
  color: #e11d48;
}

.bdWizKycMiniFill {
  height: 100%;
  background: linear-gradient(90deg, #e11d48, #fb923c);
  border-radius: 100px;
  transition: width 0.35s;
}

.bdWizBtnNextKyc {
  background: #e11d48 !important;
}
.bdWizBtnSubmitKyc {
  background: linear-gradient(135deg, #e11d48, #fb923c) !important;
}

.bdWizKycAppIdVal {
  color: #e11d48;
}

.bdWizMobNextKyc {
  flex: 2;
  background: #e11d48 !important;
}

/* ══ JS-GENERATED ROW GRIDS ══ */

/* Language rows (1fr 1fr auto) */
.bdWizLangRowGrid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  align-items: start;
}

/* Skill rows (1.4fr 1fr 80px auto) */
.bdWizSkillRowGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 80px auto;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  align-items: start;
}

/* Document rows (1.1fr 1fr 1fr auto) */
.bdWizDocRowGrid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr auto;
  gap: 0.9rem;
  padding: 1rem;
  align-items: start;
}

/* Document expiry extra row (1fr 1fr 1fr) */
.bdWizDocExtraGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.9rem;
  padding: 0 1rem 0.9rem;
}

/* Peer rows (1.4fr 1.1fr 1fr auto) */
.bdWizPeerRowGrid {
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 1fr auto;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  align-items: start;
}

/* Relative rows (1.2fr 1fr 1fr auto) */
.bdWizRelRowGrid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 0.9rem;
  padding: 1rem;
  align-items: start;
}

/* Shared row footer (comments / address strip) */
.bdWizRowFooter {
  padding: 0.3rem 1rem 0.9rem;
  border-top: 1px solid #f1f5f9;
}

/* Column helpers inside row grids */
.bdWizRowInnerCol {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.bdWizRowInnerColGap5 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* Compact form label inside row grids */
.bdWizFormLabelInline {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
}

/* Delete button vertical alignment in row grids */
.bdWizDelBtnMt {
  margin-top: 1.6rem;
}

/* Star-rating hint */
.bdWizVlHint {
  min-height: 1rem;
  font-size: 0.7rem;
}

/* Vehicle section */
.bdWizVehPadding {
  padding: 1rem;
}
.bdWizVehTitle {
  font-family: var(--site-tertiary-font);
  color: var(--site-primary-color);
}

/* Static table header grid columns */
.bdWizLangTableHeader {
  grid-template-columns: 1fr 1fr auto;
}
.bdWizSkillTableHeader {
  display: grid;
  grid-template-columns: 1.4fr 1fr 80px auto;
}

/* Star rating in review panels */
.bdWizStarRating {
  color: #f59e0b;
  font-size: 0.8rem;
}

/* =============================================================
   DESIGN SYSTEM COLOR INTEGRATION
   Applies primary · secondary · CTA · quaternary palette
   to all bdWizLight* wizard pages.
   ============================================================= */

/* Page background — use design system secondary */

.bdWizNavbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(28, 45, 100, 0.06);
  border-bottom: 2px solid var(--site-primary-color);
}

.bdWizNavLogo {
  font-family: var(--site-tertiary-font);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--site-primary-color);
}

.bdWizNavBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 100px;
  padding: 0.28rem 0.85rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--site-tertiary-color);
}

/* Nav link */
.bdWizNavLink {
  color: var(--site-cta-color);
}

/* Page eyebrow — CTA orange tint */
.bdWizEyebrow {
  color: var(--site-cta-color);
  background: rgba(240, 92, 41, 0.08);
  border-color: rgba(240, 92, 41, 0.25);
}
.bdWizEyebrowDot {
  background: var(--site-cta-color);
}

/* Title italic accent — CTA */
.bdWizPageTitle em {
  color: var(--site-cta-color);
}

/* Handle chip — primary border + secondary bg */
.bdWizHandleChip {
  background: #fff;
  border-color: rgba(21, 40, 93, 0.2);
}
.bdWizHandleChip strong {
  color: var(--site-cta-color);
}

/* Stepper wrap — white card on secondary bg */
.bdWizStepperWrap {
  background: #fff;
  border-color: rgba(21, 40, 93, 0.1);
}

/* Stepper progress fill — primary → CTA */
.bdWizStepFill {
  background: linear-gradient(
    90deg,
    var(--site-primary-color),
    var(--site-cta-color)
  );
}

/* Mini progress bar fill — CTA → primary */
.bdWizMiniFill {
  background: linear-gradient(
    90deg,
    var(--site-cta-color),
    var(--site-primary-color)
  );
}

/* Active step ball — CTA orange */
.bdWizStepBall.active {
  background: var(--site-cta-color);
  border-color: var(--site-cta-color);
  box-shadow: 0 0 0 4px rgba(240, 92, 41, 0.18);
}

/* Active step label — CTA */
.bdWizStepLabel.active {
  color: var(--site-cta-color);
}

/* Step % pill — primary */
.bdWizStepPct {
  background: rgba(21, 40, 93, 0.07);
  border-color: rgba(21, 40, 93, 0.2);
  color: var(--site-primary-color);
}

/* Step card — subtle shadow lift */
.bdWizStepCard {
  border-color: rgba(21, 40, 93, 0.1);
  box-shadow: 0 4px 20px rgba(21, 40, 93, 0.08);
}

/* Step card header — primary left accent + warm gradient */
.bdWizStepCardHeader {
  border-left: 4px solid var(--site-primary-color);
  background: linear-gradient(to right, rgba(21, 40, 93, 0.03), transparent);
  border-bottom-color: rgba(21, 40, 93, 0.07);
}

/* Step eyebrow — primary */
.bdWizStepEyebrow {
  color: var(--site-primary-color);
}

/* Step nav footer — secondary bg */
.bdWizStepNav {
  background: var(--site-secondary-color);
  border-top-color: rgba(21, 40, 93, 0.08);
}

/* Next button — CTA orange */
.bdWizBtnNext {
  background: var(--site-cta-color);
  box-shadow: 0 4px 14px rgba(240, 92, 41, 0.28);
}
.bdWizBtnNext:hover {
  background: #d44e21;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(240, 92, 41, 0.38);
}

/* Submit button — primary → CTA gradient */
.bdWizBtnSubmit {
  background: linear-gradient(
    135deg,
    var(--site-primary-color) 0%,
    var(--site-cta-color) 100%
  );
  box-shadow: 0 4px 16px rgba(240, 92, 41, 0.3);
}
.bdWizBtnSubmit:hover {
  box-shadow: 0 8px 24px rgba(240, 92, 41, 0.38);
}

/* KYC next button keeps its own red — no override */

/* Form control focus — primary ring */
.bdWizFormControl:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(21, 40, 93, 0.1);
}

/* Gender card selected — primary */
.bdWizGenderCard.selected {
  border-color: var(--site-primary-color);
  background: var(--site-secondary-color);
  box-shadow: 0 0 0 2px rgba(21, 40, 93, 0.12);
}
.bdWizGenderCard.selected .bdWizGenderCardLabel {
  color: var(--site-primary-color);
}

/* City toggle active — primary */
.bdWizCityToggleBtn.active {
  background: var(--site-secondary-color);
  border-color: var(--site-primary-color);
  color: var(--site-primary-color);
}

/* OTP send button — CTA */
.bdWizOtpSendBtn {
  background: var(--site-cta-color);
}
.bdWizOtpSendBtn:hover {
  background: #d44e21;
}

/* OTP box focus — primary */
.bdWizOtpBox:focus {
  border-color: var(--site-primary-color);
  box-shadow: 0 0 0 3px rgba(21, 40, 93, 0.1);
}

/* Review card header — primary micro-gradient */
.bdWizReviewCardHeader {
  background: linear-gradient(to right, rgba(21, 40, 93, 0.05), transparent);
  border-bottom-color: rgba(21, 40, 93, 0.06);
}

/* Edit button — CTA */
.bdWizEditBtn {
  color: var(--site-cta-color);
}

/* Declaration check — primary when on */
.bdWizCheckbox.on {
  background: var(--site-primary-color);
  border-color: var(--site-primary-color);
}

/* Declaration links — CTA */
.bdWizDeclText a {
  color: var(--site-cta-color);
}

/* Success ring — CTA tint */
.bdWizSuccessRing {
  background: rgba(240, 92, 41, 0.08);
  border-color: rgba(240, 92, 41, 0.25);
}

/* App ID box — secondary bg */
.bdWizAppIdBox {
  background: var(--site-secondary-color);
  border-color: rgba(21, 40, 93, 0.12);
}

/* App ID value — CTA */
.bdWizAppIdValue {
  color: var(--site-cta-color);
}

/* KYC-specific App ID */
.bdWizKycAppIdVal {
  color: #e11d48;
}

/* Next steps box */
.bdWizNextSteps {
  background: var(--site-secondary-color);
  border-color: rgba(21, 40, 93, 0.1);
}

/* Next step numbers — CTA */
.bdWizNextStepNum {
  background: rgba(240, 92, 41, 0.09);
  border-color: rgba(240, 92, 41, 0.28);
  color: var(--site-cta-color);
}

/* Upload area hover — secondary */
.bdWizUploadArea:hover {
  border-color: rgba(21, 40, 93, 0.3);
  background: var(--site-secondary-color);
}

/* Resend link — CTA */
.bdWizResendLink {
  color: var(--site-cta-color);
}

/* Mobile footer next button */
.bdWizMobNextFlex.bdWizBtnNext {
  background: var(--site-cta-color);
}

.bdWizInputBox.bdWizInputBoxInner {
  padding-left: 55px !important;
}

.bdWizPhoneWrap {
  display: flex;
  gap: 0;
}
.bdWizCountryCodeSel {
  flex: 0 0 auto;
  width: 130px;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
}
.bdWizPhoneInput {
  flex: 1;
  border-radius: 0 8px 8px 0 !important;
}

/* ── Services ── */
.bdWizServiceCategory {
  margin-bottom: 1.25rem;
}
.bdWizServiceCatHeader {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--site-primary-color);
  padding: 0.35rem 0 0.5rem;
  border-bottom: 1.5px solid #e2e8f0;
  margin-bottom: 0.6rem;
}
.bdWizServiceGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.bdWizServiceChip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.75rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: #475569;
  transition: all 0.15s;
  user-select: none;
}
.bdWizServiceChip:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: var(--site-tertiary-color);
}
.bdWizServiceChip.selected {
  border-color: var(--site-tertiary-color);
  background: #eef2ff;
  color: var(--site-tertiary-color);
  font-weight: 600;
}
.bdWizServiceChip .bi-check-circle-fill {
  display: none;
  font-size: 0.8rem;
}
.bdWizServiceChip.selected .bi-check-circle-fill {
  display: inline;
}
.bdWizSelectedCount {
  font-size: 0.78rem;
  color: var(--site-tertiary-color);
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Review services list */
.bdWizReviewServiceTag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--site-tertiary-color);
  margin: 0.15rem 0.15rem 0 0;
}

/* ══════════════════════════════════════════
   MIGRATED FROM bigdot-wizard.css (legacy v1)
   Still in use across listing wizards / sidebars / tabs.
   ══════════════════════════════════════════ */

.sideBar {
  border: none;
  background: #fff;
}

.sideBarSection {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: #777;
  cursor: pointer;
  transition: color 0.2s;
}

.sideBarSection.active,
.sideBarSection:hover {
  color: #00897b;
}

.sideBarSection .material-icons {
  margin-right: 10px;
  font-size: 22px;
}

.sideBarSection i {
  margin-right: 10px;
}

.btnTeal {
  background-color: #00897b !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.2s;
}

.btnTeal:hover {
  background-color: #00695c !important;
  color: #fff !important;
}

.btnSecondary {
  background-color: #444;
  color: #fff;
  border-radius: 8px;
  font-weight: 500;
  padding: 0.75rem 1rem;
}

.btnDanger {
  background-color: #ff4a5f !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 500;
  padding: 0.75rem 1rem;
}

.btnDanger:hover {
  background-color: #eb2940 !important;
}

.textBlack {
  color: #111111;
}

.wizardHeader {
  background: #ffffff;
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  border-radius: 10px;
}

.wizardStep {
  background: #ff4a5f !important;
  color: #fff;
  padding: 8px 16px;
  height: 40px;
  width: 40px;
  font-size: 18px;
  display: inline-block;
  margin-right: 8px;
}

.wizardForm label {
  font-size: 13px;
  color: #444;
  font-weight: 500;
  margin-bottom: 5px;
}

.wizardForm .form-control {
  border-radius: 10px;
  border: 2px solid #e9ecef;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.wizardForm .form-select {
  border-radius: 10px;
  border: 2px solid #e9ecef;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.wizardForm .input-group-text {
  border: 2px solid #e9ecef;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
}

.wizardForm .form-control:focus,
.wizardForm .form-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.wizardForm .input-group:focus-within .input-group-text {
  border-color: #007bff;
}

.helperBox {
  background: #e9e9e9;
  border-radius: 10px;
  font-size: 15px;
  color: #443322;
}

.helperBox .material-icons {
  color: #00897b;
}

.tabNav {
  border-bottom: 2.5px solid #e0e0e0;
  margin-bottom: 20px;
  margin-top: 16px;
}

.tabNav .tabNavItem {
  background: #f8f8f8;
  border: none;
  outline: none;
  color: #333;
  font-weight: 600;
  padding: 12px 50px 12px 35px;
  border-radius: 0;
  border-right: 1.5px solid #e0e0e0;
  position: relative;
}

.tabNav .tabNavItem:last-child {
  border-right: 0;
}

.tabNav .tabNavItem.active {
  background: #fff;
  color: #00897b;
  border-bottom: 3px solid #00897b;
  margin-bottom: -2px;
}

.tabNav .badgeNew {
  background: #ff4a5f;
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 10px;
  vertical-align: top;
  margin-left: 6px;
  font-weight: 600;
  position: absolute;
  top: 11px;
  right: 4px;
}

.tabNavWrapper {
  margin-bottom: 0px;
  padding-bottom: 0px !important;
}

.tabNavWrapper::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.adTypeGroup {
  display: flex;
  gap: 10px;
  margin: 20px 0 25px 0;
  overflow-x: auto;
  justify-content: initial !important;
  padding-bottom: 15px;
}

.adTypeGroup::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.adTypeBtn {
  flex: 0 0 auto;
  border: 1.5px solid #ececec;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
  background: #f7f7f7;
  color: #222;
  cursor: pointer;
  transition:
    background 0.13s,
    color 0.13s,
    border 0.13s;
  white-space: nowrap;
}

.adTypeBtn.selected,
.adTypeBtn:active,
.adTypeBtn:focus {
  background: #00897b !important;
  border-color: #00897b;
  color: #fff !important;
  outline: none;
}

.cardBorder {
  border: 1.5px solid #e1e1e1;
  border-radius: 15px;
}

form.wizardForm.card.cardBorder .text-center.mb-0 {
  margin-bottom: 10px !important;
}

@media (max-width: 991.98px) {
  .sideBar {
    display: none !important;
  }

  .wizardForm {
    box-shadow: none !important;
  }
}

@media (max-width: 767px) {
  .formScrollBar {
    margin-top: 20px;
  }
}

@media (max-width: 576px) {
  .tabNavWrapper {
    scrollbar-width: none !important;
  }

  .adTypeGroup {
    scrollbar-width: none !important;
  }
}

@media (max-width: 575.98px) {
  .wizardHeader {
    font-size: 1rem;
    padding: 15px 8px;
  }

  .wizardStep {
    font-size: 15px;
    padding: 7px 14px;
  }

  .wizardForm {
    padding: 0.75rem !important;
  }

  .btnTeal,
  .btnDanger,
  .btnSecondary {
    width: 100%;
    margin-top: 12px;
    font-size: 14px;
  }

  .tabNav .tabNavItem {
    padding: 10px 15px;
  }

  .tabNav .badgeNew {
    position: absolute;
    top: -14px;
    right: -2px;
  }

  .adTypeBtn {
    padding: 8px 20px;
  }
}