/*=======   Footer Buttons   ========*/
   /* Footer Skeleton (REAL LOOK) */
.footer-skeleton {
  width: 100%;
  height: 60px;                   /* EXACT same as footer */
  background: #f1f2f3;            /* soft skeleton color */
  border-top: 1px solid #ccc;
  box-shadow: 0 -2px 2px rgba(0,0,0,0.05);
  animation: pulse 1.3s infinite ease-in-out;
}

/* Skeleton animation */
@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}




.glootube-footer-wrapper {
  width: 100%;             
  position: sticky;
  bottom: 0;
  box-sizing: border-box;
  z-index: 999;               
  background: transparent;
  padding: 0;
}

/* the actual footer bar - scoped name */
.glootube-mobile-footer {
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around; /* equal spacing */
  align-items: center;
  box-shadow: 0 -2px 2px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* link styling inside footer only */
.glootube-mobile-footer .glootube-footer-link {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-size: 11px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
}

.glootube-footer-link .shorts-icon {
  width: 22px;        /* similar to SVG size */
  height: 22px;
  object-fit: contain;
  display: inline-block;
}

/* svg/icon sizing (scoped) */
.glootube-mobile-footer svg,
.glootube-mobile-footer .glootube-icon-userrr {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  object-fit: cover;
}

.glootube-footer-link img.zuzuur-icon-user-img {
width: 22px;
height: 22px;
border-radius: 50%;
vertical-align: middle;
}


.glootube-mobile-footer a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
}


/* user icon variant */
.glootube-icon-userrr {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50%;
}
.glootube-tab-wrapper {
  max-width: 1100px;      /* maximum width */
  width: 100%;             /* take full width up to max */
  margin: 0 auto;          /* center horizontally */
  padding: 0;         /* optional: small padding on sides */
  box-sizing: border-box;  /* include padding in width */
}
/* Active / selected button style */
.button.active, 
.glootube-footer-link.active {
  background-color: #f1f2f3;  /* blue for active */
}


/* Hover effect for top buttons */
.button:hover:not(.active) {
  background-color: #f1f2f3;
}

/* Hover effect for footer links */
.glootube-footer-link:hover:not(.active) {
  background-color: #f1f2f3;
}




/* Hide footer on desktop (larger than 1024px) */
@media (min-width: 1025px) {
  .glootube-footer-wrapper {
    display: none !important;
  }
}

/* Show footer on tablets and mobile */
@media (max-width: 823px) {
  .glootube-footer-wrapper {
    display: block !important;
  }
}