#navbar {
  border-bottom: 1px solid #D8E1EE;
  width: 100%;
  height: 68px;
}

.centernavbar {
  width: 876px;
  margin:auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

#profilBtnNavbar {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 22px;
}

.profilBtnNavbardiv {
  height: 44px;
}



#divHamberger{
  padding-left: 24px;
  /*margin-top: 2px; /*new style - for menu popup burger icon center */
}

 #unfloldhamberger {
  /*width: 18px;*/
  /*height: 18px;*/
  /*padding: 0 1px;*/
  /*cursor: pointer;*/
   width: 20px;
   height: 18px;
   padding: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #foldhamberger {
  /*width: 20px;
  height: 14px;
  cursor: pointer;*/
   width: 20px;
   height: 18px;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
 }

#pophambergerdesktop {
  position: absolute;
  top: 68px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  min-width: 272px;
  padding: 16px 16px 0 16px;
  background-color: white;
  z-index: 1000;
}

#pophambergerdesktop  div {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  display: flex;/* new style - for menu popup elems center*/
  align-items: center;
}

#pophambergerdesktop  div svg {
  margin-right: 12px;  
}

#loginbtn, #signup {
  margin: auto;
  cursor: pointer;  
  font-size: 16px;
  font-weight: 600;  
  color: #2277F7;
  width: 80px;
  height: 44px;
  background-color: white;
  border: 1.2px solid #2277F7;
  border-radius: 8px;
}

#messageBtn, #incomesBtn {
  all: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 16px;  
}

#messageBtn {
  margin-right: 24px;  
}

#addFeedBtn {
  border-radius: 8px;
  border: 0;
  background-color: #2277F7;
  color: white;
  font-size: 16px;
  font-weight: 600;
  height: 44px;
  padding: 0 18px;
  display: flex;
  align-items: center; /* Vertically centers the content */
  justify-content: center;
}

#addFeedBtn svg {
  margin-right: 8px;
}

#profilBtnNavbar {
  padding: unset;
  margin-left: 24px;
  cursor: pointer;
}

#signup {
  margin-left: 1em;
}

#loginbtn {
  margin-left: 10px;
}

.logodiv {
  margin: auto;
  margin-left: 0;
}



@media screen and (max-width: 876px)   {
  #navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
    background-color: white;    
    height: 54px;
  }

  #divHamberger {
    display: none;
  }

  .centernavbar {
    width: 100%;
  }

  .logodiv {
    display: none;
  }

  #signup, #loginbtn {
    height: 32px;
    border: none;
    background-color: #EDF4FE ;
    color: #2277F7;
    font-size: 14px;
    font-weight: 500;
  }

  #signup {
    margin-right: 14px;
  }

  .centernavbar {
    justify-content: space-around;
  }

  #loginbtn, #signup {
    margin: 0;
    padding: 0 ;
  }

  #loginbtn {
    margin-left: 12px;
  }

  #signup {
    margin-right: 12px;
  }

  #divLoginbtn {
    order: 1;
  }

  #divSignupbtn {
    order: 3;
  }

  #profilBtnNavbar {
    margin:0;
    width: 28px;
    height: 28px;
    background-size: cover;
    border: 2px solid #2277F7;
    display: flex;
    align-items: center;
  }
}

/* main style */

#content {
  max-width: 876px;
  margin: auto;
}

body {
margin: 0;
}

* {
  font-family: 'Poppins', sans-serif;
  color: #01122C;
}


.title {
  border-bottom: 1px solid #D8E1EE;
  width: 100%;
  height: 80px;
  display: flex;
  padding-top: 32px;
  box-sizing: border-box;
}

.title h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  padding-left: 16px;
  height: 32px;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.smallbtn {
  height: 32px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 0 1em;
}

.btnlightblue {
  background-color: #EDF4FE;
  color: #2277F7;
}

.btndeepblue {
  background-color: #2277F7;
  color: #FFFFFF;
}

.dnone {
  display: none !important;
}

/* Saved-card confirmation popups (includes/subscription_popup.php, the media
   unlock popup in myModels.php): the card row, the "you will be charged" line
   and the breakdown under it. Every block keeps to the same 24px margins the
   card list and the buttons sit in, so the two popups read as one screen. */
.chargedoneclick {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #677180;
  margin: 12px 24px 0 24px;
  padding: 0;
  box-sizing: border-box;
}
/* Label on the left, amount hard against the right margin: the amount track is
   only as wide as its widest figure and the labels take what is left, so the
   column of figures lines up on its right edge whatever the digits. */
.popup-charge-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 0 12px;
  margin: 12px 24px 0 24px;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  color: #677180;
}
.popup-charge-grid > div:nth-child(even) {
  text-align: right;
  white-space: nowrap;
}
.popup-charge-total {
  color: #01122C;
}
.popup-change-method {
  color: #2277F7;
  font-size: 14px;
  font-weight: 500;
  margin: 0 24px 8px 24px;
  cursor: pointer;
}
.paymentmethodselection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 24px 20px 24px;
  border-bottom: 1px solid #ECEDEF;
  padding-bottom: 20px;
  cursor: pointer;
}
.paymentmethodselection div {
  display: flex;
  align-items: center;
}
.carddisplay {
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px 8px 10px;
  border-radius: 8px;
  border: 1px solid #2277F7;
  margin-left: 12px;
  flex: 1;
}

.bigBtn {
  border-radius: 8px;
  border: none;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
}

.w100 {
  width: 100%;
}

.ml12 {
  margin-left: 12px !important;
}

.ml16 {
  margin-left: 16px !important;
}


.caption {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 32px;
  padding: 0 8px ;
  overflow-wrap: anywhere;

}

@media screen and (min-width: 877px) {
  .ml16bigscreens {
    margin-left: 16px !important;
  }

  
}

@media screen and (max-width: 877px) {
  
  .mr16smallscreen {
    margin-right: 16px !important;
  }
  
}



.mr16 {
  margin-right: 16px !important;
}

.mb18 {
  margin-bottom: 18px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.mb32 {
  margin-bottom: 32px !important;
}

.p0 {
  padding: 0 !important;
}

.plr16 {
  padding: 0 16px;
}

@media screen and (max-width: 876px)   {
  .plr16mob {
    padding: 0 16px;
  } 
  .caption {
    padding: 0 24px ;
  
  }
}

video {
  width: 100%;
 
}

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

.roundcorner14 {
  border-radius: 14px !important;
}

.roundpic {
  border-radius: 50% !important;
}

.fontSize14Weight500 {
  font-size: 14px;
  font-weight: 500;
}

.mt28 {
  margin-top: 28px !important;
}

.pt16 {
  padding-top: 16px !important;
}

.space-around {
  display: flex;
  justify-content: space-around !important;
}

.space-between {
  display: flex;
  justify-content: space-between !important;
}

button {
  cursor: pointer;
}

.titletxt h4 {
  padding: 0;
}


#titlemobileclose {
  display: none;
}

#divAddFeedBtnMobil {
  display: none;
}

.modelpicnamebar {
  display: flex;
  height: 32px;
  padding: 0 16px;
}

.pp {
  position: relative;
}

.pp svg {
  position: absolute;
  top: 0;
  left: 16px;
}

.pp img { 
  width: 32px !important;
  height: 32px !important;
}

@media screen and (max-width: 876px)   {

  #incomesBtn, #messageBtn {
    margin-right: 0 !important;
  }

  #divAddFeedBtnMobil, .profilBtnNavbardiv  {
    width: 32px !important;
  }

  .pp svg {
    left: 0;
  }

  #divAddFeedBtnMobil {
    display: block;
  }

  .title {
    padding: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  #titlemobileclose {
    position: absolute;
    top: 12;
    right: 12;
    display: block; /* Ensures the div is displayed */
  }

  .titletxt h4 {
    font-size: 16px;
    padding-left: 16px;
  }

  #divAddFeedBtn {
    display: none;  
  }
}

.flex1 {
  flex: 1;
}

/* popup style */

.popupclose {
  width: 34px;
  align-self: flex-end;
  margin: 8px 8px 6px 0;
  cursor: pointer;
}

.popup {
  filter: unset;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: white;
  border-radius: 12px;
  max-width: 345px;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

.popuptitle {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  padding: 0 8px;
}

.popupsubtitle {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  margin-top: 12px;
  color: #677180;
  padding: 16px;
}

.popupbuttons {
  margin: 12px 24px 0px 24px;
  gap: 16px;
  display: flex;
}

.popupbuttons button {
  width: 100%;
  max-width: 140px;
  border-radius: 12px;
  border: none;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
}

.popupbuttons button {
  width: 100%;
  max-width: 140px;
  border-radius: 12px;
  border: none;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
}

.blurry {
  filter: blur(2px);
}



.overlay-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 40% black */
  z-index: 110; /* Ensure the overlay is on top */
}

/* Public profile social links (baz_user_social) — clickable SVG logos under the bio. */
.profile-social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.profile-social-link {
  display: inline-flex;
  color: #677180;
  transition: color .15s ease, transform .15s ease;
}
.profile-social-link:hover {
  color: #2277F7;
  transform: translateY(-1px);
}
.profile-social-link svg {
  display: block;
}