/* ==========================================================================
   GLOBAL LAYOUT & RESPONSIVE CONTAINER
   ========================================================================== */

/* Custom responsive container widths */
.custom-container {
  width: 100%;
  max-width: 1400px;
}

/* Breakpoints matching Bootstrap grid tiers */
@media (max-width: 1399.98px) { .custom-container { max-width: 1080px; } }
@media (max-width: 1199.98px) { .custom-container { max-width: 960px; } }
@media (max-width: 991.98px)  { .custom-container { max-width: 720px; } }
@media (max-width: 767.98px)  { .custom-container { max-width: 100%; } }

/* ==========================================================================
   LEFT SIDEBAR STYLES
   ========================================================================== */

/* Sidebar item (bubble) base */
.bubble {
  border-radius: 50px;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Default (non-hover) state */
.bubble i,
.bubble span {
  color: #8a96a3;
  transition: color 0.2s ease;
}

/* Hover state */
.bubble:hover {
  background-color: rgba(136, 205, 248, 0.1); /* light blue tint */
}
.bubble:hover i,
.bubble:hover span {
  color: #2b8ad7; /* Bootstrap primary blue */
}

/* Icon + text sizes */
.bubble i { font-size: 2rem; }
.bubble span {
  font-size: 1.2rem; /* ~18px */
  font-weight: 500;
}

/* Hide sidebar text below 1280px and align icons right */
@media (max-width: 1279.98px) {
  .bubble span { display: none; }

  .bubble {
    justify-content: flex-end;
    padding-right: 1.5rem;
  }

  .bubble i { margin-right: 0 !important; }
}

/* ==========================================================================
   RIGHT COLUMN — SUBSCRIPTION CARD
   ========================================================================== */

/* Card title */
.subscription-card .card-title {
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  color: #8a96a3;
}

/* Subscribe button */
.subscribe-btn {
  font-size: 0.875rem;
  border: none;
  background-color: #00aff0;
  transition: background-color 0.2s ease;
}
.subscribe-btn:hover {
  background-color: #0091c5; /* darker blue */
}

/* ==========================================================================
   MIDDLE COLUMN — FEED AREA
   ========================================================================== */

/* Remove middle column borders on small screens */
@media (max-width: 575.98px) {
  main.border-start.border-end {
    border-left: none !important;
    border-right: none !important;
  }
}

/* ==========================================================================
   BANNER / OVERLAY SECTION
   ========================================================================== */

/* Darken image for better text contrast */
.darkened-image {
  filter: brightness(80%);
}

/* Overlay block (arrow + text above banner image) */
.overlay-block {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
.overlay-block .text-white {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay-block i {
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #fff !important;
}

/* Stats row inside overlay (images, videos, likes) */
.stats-row {
  gap: 0.5rem;
}
.stats-row i {
  font-size: 1rem;
  color: #fff !important;
}
.stats-row span {
  font-size: 0.9rem;
}

/* ==========================================================================
   PROFILE SECTION (PHOTO + NAME + STATUS)
   ========================================================================== */

/* Image wrapper acts as positioning parent */
.image-wrapper {
  position: relative;
}

/* Profile photo wrapper — fixed 50% overlap over banner bottom */
.profile-photo-wrapper {
  position: absolute;
  bottom: -62.5px; /* half of profile-photo height (125px / 2) */
  left: 2rem;
  z-index: 3;
}

/* Profile photo */
.profile-photo {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 4px solid #fff;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  background-color: #fff;
}

/* Green active status dot on profile photo */
.profile-photo-wrapper::after {
  content: "";
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background-color: #28a745; /* Bootstrap success green */
  border: 3px solid #fff;
  border-radius: 50%;
  z-index: 4;
}

/* Profile header (below overlapping image) */
.profile-header {
  position: relative;
  z-index: 2;
  margin-top: 80px; /* creates space for overlapping profile photo */
}

/* Profile name text */
.profile-name {
  font-size: 1.5rem;
  color: #000;
}

/* Verification icon next to name */
.verification-icon {
  font-size: 1rem;
  color: #000;
  position: relative;
  top: -1px;
}

/* Profile subtitle (handle + status) */
.profile-subtitle {
  font-size: 1rem;
  color: #555555b7 !important;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ==========================================================================
   PROFILE DETAILS SECTION
   ========================================================================== */

/* Real name (under username/subtitle) */
.profile-realname {
  font-size: 1rem;
  color: #000;
}

/* Subtle bio text */
.profile-description {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.235); /* almost invisible gray */
  max-width: 80%;
}

/* "More info" link */
.profile-moreinfo {
  font-size: 0.95rem;
  color: #00aff0; /* Bootstrap primary blue */
  cursor: pointer;
  transition: color 0.2s ease;
}
.profile-moreinfo:hover {
  color: #0069b9; /* darker blue on hover */
  text-decoration: underline !important;
}

/* ==========================================================================
   MEDIA NAVIGATION SECTION
   ========================================================================== */

.media-tab {
  flex: 1;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.4) !important; /* muted gray text by default */
  border-bottom: 3px solid transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, padding 0.15s ease;
  padding: 0.75rem 0; /* default vertical padding */
}

/* Hover effect: light blue background + blue text + visible padding */
.media-tab:hover {
  background-color: rgba(0, 175, 240, 0.1); /* light blue tint */
  color: #00aff0 !important;                /* blue text */
}

/* Active state: black underline + black text */
.media-tab.active {
  color: #000 !important;
  border-bottom-color: #000 !important;
  background-color: transparent !important;
  padding-top: 0.75rem; /* reset hover padding */
  padding-bottom: 0.75rem;
}

/* ==========================================================================
   LOCKED MEDIA SECTION
   ========================================================================== */

.locked-media-banner {
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #dee2e6;
}

/* Centered lock icon overlay */
.lock-overlay-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;            /* adjust size as desired */
  color: rgba(0, 0, 0, 0.3);  /* subtle gray tone */
  pointer-events: none;       /* ensures clicks pass through */
}

/* ==========================================================================
   LOCKED MEDIA SECTION (banner + footer overlay)
   ========================================================================== */

.locked-media-banner {
  position: relative;
  background-color: #fff;
  overflow: hidden; /* ensures the footer doesn’t spill outside */
}

/* Centered lock icon overlay */
.lock-overlay-icon {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Compact version of the locked-footer */
.locked-footer {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  padding: 0.75rem 1rem; /* smaller inner spacing */
  background-color: transparent;
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 3;
}

/* Smaller font sizes inside */
.locked-footer,
.locked-footer i,
.locked-footer span {
  font-size: 0.9rem !important; /* slightly smaller text */
}

/* Smaller subscribe button */
.locked-footer .subscribe-btn {
  font-size: 0.9rem;          /* smaller text in button */
  padding: 0.6rem 1rem;       /* less vertical height */
  border-radius: 50px;
}

/* ==========================================================================
   PROFILE IMAGE MODAL
   ========================================================================== */

.modal-content img {
  max-width: 300px; /* adjust as you like */
  display: block;
  margin: 0 auto;
}

.modal-backdrop.show {
  opacity: 0.85; /* slightly darker backdrop */
}

.modal-dialog {
  max-width: none; /* remove default Bootstrap modal width restriction */
}

/* ==========================================================================
   GEOLOCATION OVERLAY
   ========================================================================== */

.geo-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

.geo-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

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

.geo-title {
  font-size: 1.5rem;
  color: #000;
}

.geo-text {
  color: #666;
}

/* Loading modal styling */
.geo-modal-content {
  max-width: 400px;
}

/* Shake animation for alert */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

.alert-danger {
  animation: shake 0.3s ease-in-out;
}