/* HOT.24x clone refinements; base theme is retained from the source Blogger template. */
html { scroll-behavior: smooth; }
body { margin: 0; }
.pageWrapper { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
.topbar .wrap { width: min(1200px, calc(100% - 32px)); }
.brand-group { display: flex; align-items: center; gap: 8px; }
.brand-icon { display: grid; place-items: center; background: linear-gradient(135deg, #f43f5e, #6366f1); color: #fff; }
.nav a.active { color: #fb7185; }
.mobile-nav[hidden] { display: none !important; }
.ad-page-wrap { flex: 1; padding-top: 12px; }
.ad-sidebar-grid { align-items: start; }
.primary-column { min-width: 0; }
.main-section { width: 100%; min-width: 0; box-sizing: border-box; flex: 1; padding-top: 12px; padding-bottom: 30px; }
.section-head h2 { color: #f8fafc; }
.post-outer { min-width: 0; }
.post-card-copy { padding: 0 14px 13px; }
.post-title { padding: 12px 0 7px !important; }
.post-title a:hover, .nav a:hover { color: #fb7185 !important; }
.post-card-meta, .single-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #94a3b8; font-size: 12px; }
.post-card-meta { padding-bottom: 2px; }
.post-label { color: #fecdd3; border: 1px solid rgba(244,63,94,.28); background: rgba(244,63,94,.1); border-radius: 999px; padding: 3px 8px; font-size: 11px; }
.post-thumb-box video { display: block; }
.video-overlay-wrapper { position: relative; width: 100%; height: 100%; }
.preview-open { position: absolute; z-index: 11; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; background: rgba(15,23,42,.8); cursor: pointer; transition: transform .18s ease, background .18s ease; }
.preview-open:hover { transform: scale(1.06); background: #f43f5e; }
.hero .slide-media-box { position: absolute; inset: 0; }
.hero .slide-media-box video { width: 100% !important; height: 100% !important; object-fit: cover !important; border: 0 !important; }
.hero .slide { min-height: inherit; }
.hero .slide-content { right: 0; }
#blog-pager .pager-next { min-width: auto !important; }
.adsterra-slot { margin: 16px auto; text-align: center; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: rgba(15,23,42,.25); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; min-height: 60px; }
.adsterra-slot iframe, .adsterra-slot img, .adsterra-slot div { max-width: 100% !important; margin: 0 auto !important; }
.native-ad-slot { min-height: 60px; }
.modal-ad-box { width: 100%; min-height: 60px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; }
.modal-ad-box iframe, .modal-ad-box img, .modal-ad-box div { max-width: 100% !important; margin: 0 auto !important; }
.smartlink-slot { padding: 8px 4px 18px; text-align: center; font-size: 12px; }
.smartlink-slot a { color: #cbd5e1; text-decoration: underline; text-underline-offset: 3px; }
.smartlink-slot a:hover { color: #fb7185; }
.site-footer { margin-top: auto; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.05); text-align: center; color: #64748b; font-size: 12px; font-weight: 500; }
.site-footer p { margin: 0; }
.breadcrumbs { display: flex; gap: 10px; color: #94a3b8; font-size: 13px; margin: 8px 0 18px; }
.breadcrumbs a:hover { color: #fb7185; }
.item-post-card { background: rgba(15,23,42,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: clamp(18px, 4vw, 30px); }
.single-title { color: #f8fafc; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; margin: 0 0 12px; font-weight: 800; }
.single-meta { margin-bottom: 20px; }
.single-video-box { position: relative; width: min(100%, 620px); aspect-ratio: 3 / 4; overflow: hidden; margin: 0 auto; border-radius: 16px; background: #000; }
.single-video-box video, .single-video-box iframe { display: block; width: 100% !important; height: 100% !important; object-fit: contain; border: 0; }
.single-video-box .video-overlay-wrapper { height: 100%; }
.post-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; color: #cbd5e1; font-size: 14px; }
.post-pager a { padding: 9px 12px; background: rgba(30,41,59,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.post-pager a:hover { color: #fff; border-color: rgba(244,63,94,.45); }
.empty-state { min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(15,23,42,.45); color: #94a3b8; }
.empty-state p { margin: 0; }
.empty-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fb7185; background: rgba(244,63,94,.12); }
.search-page-form { max-width: 600px; margin: 0 0 18px; color: #cbd5e1; }
.search-page-form label { display: block; margin-bottom: 7px; font-size: 13px; }
.search-page-form > div { display: flex; gap: 8px; }
.search-page-form input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #f8fafc; background: rgba(15,23,42,.8); }
.search-page-form button, .home-button { border: 0; border-radius: 10px; padding: 10px 14px; color: #fff; background: linear-gradient(135deg,#f43f5e,#6366f1); font-weight: 700; cursor: pointer; }
.search-summary { color: #94a3b8; font-size: 13px; }
.not-found h1 { color: #f8fafc; }
.not-found p { color: #94a3b8; }
.home-button { display: inline-flex; margin-top: 10px; }
@media (max-width: 1024px) {
  .ad-sidebar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap, .topbar .wrap { width: min(100% - 24px, 1200px); }
  .single-meta { margin-bottom: 16px; }
  .single-video-box { border-radius: 12px; }
  .search-page-form > div { flex-direction: column; }
  .search-page-form button { align-self: flex-start; }
  .post-pager { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}