/* ========== Full Page Facebook Layout ========== */

.gdb-allowed-layout {
  position: relative;
  width: 100%;    
  background: #fff;
  
}

.gdb-allowed-layout * {
  pointer-events: auto;
}


.gdb-overlay-ad {   
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: auto;  
  margin-top: 0 !important;
}


/* Hide body scroll when layout is active */


#gdb-allowed .gdb-hd {
  background: #ffffff !important;
  color: #1c1e21 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #dadde1 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.1) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

#gdb-seo-content {
  background: #ffffff !important;
  color: #1c1e21 !important;
  padding: 8px 16px !important;  
  border-bottom: 1px solid #dadde1 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.1) !important;
  pointer-events: none !important;
  position: fixed;  
  z-index: -1000 !important;
}

#gdb-allowed .brand {
  font-weight: 700 !important;
  font-size: 24px !important;
  color: #1877f2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#gdb-allowed .navbtns {
  display: flex !important;
  gap: 8px !important;
}

#gdb-allowed .navbtns button {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #f0f2f5 !important;
  color: #65676b !important;  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  transition: background 0.2s !important;
}

#gdb-allowed .navbtns button:hover {
  background: #e4e6ea !important;
}

#gdb-allowed .header-profile {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #fff !important;  
}

#gdb-allowed .header-profile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#gdb-allowed .gdb-main {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}
#gdb-allowed .container {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 16px !important;
  pointer-events: none !important;
}

/* Video Feed */
.video-feed {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Video Posts */
.video-post {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.video-post.featured-post {
  position: relative !important;
  z-index: 5 !important;
}
/* ============================================================
   FIXED CORE LAYERING (ADS -> IMAGE -> PLAY BUTTON)
   ============================================================ */

/* Container Utama sesuai Screenshot */
.video-container {
    position: relative !important;
    width: 100%;
    height: 300px;
    background: #000;
    overflow: hidden;
}

/* Iklan: Biarkan opacity 1 agar aman dari bot */
.post-ads {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Gambar: Secara alami menutup iklan karena ditulis setelahnya */
.gdb-mask {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important; /* Klik tembus ke iklan */
}

/* Overlay & Button: Paling depan karena paling akhir di DOM */
.play-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important; /* Klik tembus ke iklan */
}

.play-button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid white;
    background: rgba(0,0,0,0.5); /* Hanya tombol yang pakai transparan */
    display: flex;
    align-items: center;
    justify-content: center;
	pointer-events: none !important; /* Klik tembus ke iklan */
}
/* Pastikan elemen iklan (iframe/ins) bisa diklik */
.post-ads * {
  pointer-events: auto !important;
}

.video-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fcfcfc;
  overflow: hidden;
}

/* IKLAN - Kita buat dia 'mengambang' di dasar */
.video-content .gdb-overlay-ad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Pastikan tingginya sama dengan container */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: auto; /* Agar tetap bisa diklik */
}

/* GAMBAR - Kita buat dia menutupi iklan */
.video-content img {
  position: absolute; /* UBAH DARI RELATIVE KE ABSOLUTE */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* KUNCI: Klik tembus ke iklan di bawahnya */
}

/* icon */
.play-overlay .play-button i {
  color: #fff;
  font-size: 22px;
}

/* ========== ACTIONS ========== */
.action-container {
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:8px 16px;
  border-top: 1px solid #dadde1;
}

/* styles lain yang tidak krusial tetap dibiarkan (header, nav, age modal, dsb) */
/* ----- minor responsive tweaks ----- */
@media (max-width: 768px) {
  .video-container { height: 220px; }
}

/* Video Info Overlay (right side stats) */
.video-info {
  position: absolute !important;
  right: 16px !important;
  bottom: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  z-index: 30 !important;
}

.video-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.stat-item i {
  font-size: 24px !important;
  color: #fff !important;
  text-shadow: 0 0 8px rgba(0,0,0,0.8) !important;
}

.stat-item span {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-shadow: 0 0 8px rgba(0,0,0,0.8) !important;
}

/* FOR RESPOSNSIVE ADS */

.responsive-ads { 
    display: block; 
    width: 100%; /* Mengikuti lebar container (336px) */
    height: 280px; /* Tinggi default */
}

/* Jika ingin ukurannya berubah di layar yang lebih besar atau kecil */
@media(min-width: 500px) { .responsive-ads { width: 100%; height: 280px; } }
@media(min-width: 800px) { .responsive-ads { width: 100%; height: 280px; } }
/* Post Header */
.post-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px 8px 16px !important;
}

.post-header .profile-pic {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.post-header .post-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.post-header .post-author {
  font-weight: 600 !important;
  color: #1c1e21 !important;
  font-size: 15px !important;
}

.post-header .follow-link {
  color: #1877f2 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.post-header .follow-link:hover {
  text-decoration: underline !important;
}

.post-header .post-menu {
  background: transparent !important;
  border: none !important;
  color: #65676b !important;
  cursor: pointer !important;
  padding: 8px !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s !important;
}

.post-header .post-menu:hover {
  background: #f0f2f5 !important;
}

/* Status Text */
.post-status {
  padding: 0 16px 12px 16px !important;
  min-height: 65px; /* Sesuaikan dengan tinggi rata-rata 3 baris */
  overflow: hidden;
}

.post-status p {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Maksimal 3 baris saja */
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
  color: #1c1e21 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}

.post-stats {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #dadde1 !important;
  margin-bottom: 8px !important;
}

.stats-left .reaction-summary {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.stats-left .reaction-icons {
  display: flex !important;
  gap: 2px !important;
}

.stats-left .reaction-icons span {
  font-size: 12px !important;
  line-height: 1 !important;
}

.stats-left .reaction-count {
  font-size: 13px !important;
  color: #65676b !important;
  font-weight: 400 !important;
}

.stats-right {
  display: flex !important;
  gap: 12px !important;
}

.stats-right span {
  font-size: 13px !important;
  color: #65676b !important;
  font-weight: 400 !important;
}

.post-text .post-actions {
  display: flex !important;
  gap: 0 !important;
  padding: 0 !important;
}

.post-text .post-actions {
  display: flex !important;
  justify-content: space-around !important;
  padding: 8px 0 !important;
}

.post-text .post-actions button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #65676b !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: background 0.2s !important;
  border-radius: 8px !important;
  flex: 1 !important;
  max-width: 80px !important;
}

.post-text .post-actions button:hover {
  background: #f0f2f5 !important;
}

.post-text .post-actions button i {
  font-size: 18px !important;
  margin-bottom: 2px !important;
}


/* Facebook Top Navigation */
.fb-top-nav {
  background: #ffffff !important;
  border-bottom: 1px solid #dadde1 !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  padding: 8px 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.1) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.fb-top-nav .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border-radius: 8px !important;
  position: relative !important;
}

.fb-top-nav .nav-item.active {
  background: #1877f2 !important;
  color: #ffffff !important;
}

.fb-top-nav .nav-item.active i,
.fb-top-nav .nav-item.active span {
  color: #ffffff !important;
}

.fb-top-nav .nav-item:hover:not(.active) {
  background: #f0f2f5 !important;
}

.fb-top-nav .nav-item i {
  font-size: 20px !important;
  margin-bottom: 2px !important;
  color: #65676b !important;
}


/* Action Container */
.action-container {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  padding: 6px 16px !important;
  border-top: 1px solid #dadde1 !important;
}

.action-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border: none !important;
  background: transparent !important;
  color: #65676b !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background 0.2s !important;
  border-radius: 8px !important;
}

.action-btn:hover {
  background: #f0f2f5 !important;
}

.action-btn i {
  font-size: 18px !important;
}

.reaction-btn i {
  color: #e0245e !important;
}

.comment-btn i {
  color: #1877f2 !important;
}

.share-btn i {
  color: #1877f2 !important;
}

/* Footer */
.gdb-allowed-layout .gdb-ft {
  background: #ffffff !important;
  color: #65676b !important;
  padding: 12px 16px !important;
  text-align: center !important;
  border-top: 1px solid #dadde1 !important;
}

.gdb-allowed-layout .gdb-ft small {
  font-size: 12px !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  #gdb-allowed .container {
    padding: 8px !important;
  }

  .stories-container {
    padding: 8px !important;
  }

  .create-post {
    padding: 8px 12px !important;
  }

  .post-header,
  .post-content,
  .post-stats {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .post-actions button {
    font-size: 12px !important;
    padding: 6px !important;
  }
}

/* feed-age custom styles */
#age-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.90);
    z-index: 999999 !important;
    /* Default: Hilang total */
    display: none !important; 
    opacity: 0 !important;
    pointer-events: none !important;
}


#age-container .age-box {
  max-width: 400px !important;
  transform: none !important; /* Menghilangkan geseran akibat koordinat relatif */
  left: auto !important;
  top: auto !important;
  background: #ffffff;
  border-radius: 18px;
  padding: 36px 28px 32px;  
  text-align: center;  
  width: 90%;
  box-shadow:
    0 20px 40px rgba(0,0,0,.25),
    0 4px 12px rgba(0,0,0,.12);
  animation: agePop .35s ease-out;
}

@keyframes agePop {
  from {
    opacity: 0;
    transform: scale(.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#age-container .age-box h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

#age-container .age-box p {
  font-size: .95rem;
  line-height: 1.5;
  color: #555;
  margin-bottom: 22px;
}

#age-container .age-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

#age-container .age-box button {
  flex: 1;
  padding: 12px 0;
  border-radius: 999px;
  border: none;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}

#age-yes {
  background: linear-gradient(135deg, #1877f2, #3b82f6);
  color: #fff;
  box-shadow: 0 6px 14px rgba(24,119,242,.35);
}

#age-yes:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(24,119,242,.45);
}

#age-no {
  background: #f1f3f5;
  color: #444;
}

#age-no:hover {
  background: #e5e7eb;
}

#age-container .age-footer {
  margin-top: 18px;
  font-size: .75rem;
  color: #999;
}