#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;
}

/* The wait modal a payment opens carries no .popupclose — a charge in flight
   must not be dismissable — and that button's margin box is what pushes the
   title off the top edge in every other popup (.popup itself pads the bottom
   only). Without a stand-in the title sits flush against the rounded corner. */
.popup.popup-noclose {
  /* Exactly the close button's margin box — 8px top + 34px of button + 6px
     bottom — so this popup and the one the subscribe flow shows start their
     title on the same line. */
  padding-top: 48px;
}

.popup-spinner {
  width: 50px;
  height: 50px;
  margin: 20px auto 0;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  /* Its OWN keyframes name: several sheets in this tree define a `spin` that
     carries a translateY(-50%) for a vertically-centred element, and one of
     those winning the cascade would shove this one half its height upwards. */
  animation: popup-spin 1s linear infinite;
}

@keyframes popup-spin {
  to { transform: rotate(360deg); }
}

.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;
}