/*
Theme Name: Astra Child
Theme URI: http://kathasaar.local
Description: Child theme for Astra
Author: Your Name
Template: astra
Version: 1.0
*/

body {
  font-family: 'Noto Sans', sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;   /* iOS */
}

/* Allow in forms and code */
textarea, input, select, code, pre, 
.story-part-content blockquote,
.story-comments * {
    -webkit-user-select: text !important;
    user-select: text !important;
}

.dev {
  font-family: 'Noto Serif Devanagari', serif;
}

.genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 22px;
}

.genre-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none !important;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.genre-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

.genre-card:hover .genre-count{
  transform:translateY(-2px);
  transition:.25s ease;
}

.genre-poster{
  position:relative;
  height:220px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

/* Dark gradient overlay */
.genre-poster::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1));
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .genre-poster {
    height: 180px;
  }

  .genre-caption h3 {
    font-size: 15px !important;
  }
}

@media(max-width:600px){
  .genre-poster{
    height:180px;
  }
}

.genre-caption {
  padding: 14px 14px 16px;
  background: #fff;
}

.genre-caption h3 {
  margin: 0;
  font-size: 16px !important;
  font-weight: 600;
  color: var(--ast-global-color-2); /* #1e293b */
  line-height: 1.3;
}

.genre-caption p {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  width: 100%;
}

.story-meta {
  font-size: 13px;
  color: #6b7280;
}

.story-excerpt {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.45;
  margin-top: 8px;
}

/* Badges */
.story-badge {
  display: inline-block;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  font-weight: 600;
}

.story-badge-series {
  background: #eef2ff;
  color: #4338ca;
}

.story-badge-single {
  background: #ecfeff;
  color: #0369a1;
}

/* Mobile */
@media (max-width: 600px) {
  .story-poster {
    height: 190px;
  }
}

/* Search Bar */
.story-search {
  display: flex;
  gap: 10px;
  margin: 24px 0 36px;
  max-width: 420px;
}

.post-type-archive-stories .story-search {
  margin-left: 0;
}

.story-search input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
}

.story-search button {
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: var(--ast-global-color-0);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/* Story cards – match genres */
.story-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.story-poster {
  height: 260px;
}

/* Text overlay spacing */
.story-caption {
  padding: 16px 18px 20px;
}

.story-excerpt {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
  margin-top: 6px;
}

/* Align badge like genres */
.story-badge {
  margin-bottom: 8px;
}

/* Mobile polish */
@media (max-width: 600px) {
  .story-search {
    max-width: 100%;
  }

  .story-poster {
    height: 200px;
  }
}

@media (max-width: 768px) {
  .post-type-archive-stories .ast-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Ensure content does not stick left */
.post-type-archive-stories .story-grid,
.post-type-archive-stories .story-search {
  margin-left: auto;
  margin-right: auto;
}

/* STORIES – FINAL GRID FIX (ASTRA SAFE) */
.post-type-archive-stories .story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 24px;
}

/* Story card */
.post-type-archive-stories .story-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.post-type-archive-stories .story-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

/* Poster */
.post-type-archive-stories .story-poster {
  height: 410px;
  background-size: cover;
  background-position: center;
}

/* Caption */
.post-type-archive-stories .story-caption {
  padding: 16px 18px 20px;
}

.post-type-archive-stories .story-caption h3 {
  margin: 6px 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ast-global-color-2);
}

.post-type-archive-stories .story-meta,
.post-type-archive-stories .story-excerpt {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.45;
}

/* Badge */
.post-type-archive-stories .story-badge {
  display: inline-block;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  font-weight: 600;
	z-index: 3;
}

.post-type-archive-stories .story-badge-series {
  background: #eef2ff;
  color: #4338ca;
}

.post-type-archive-stories .story-badge-single {
  background: #ecfeff;
  color: #0369a1;
}

/* Mobile */
@media (max-width: 600px) {
  .post-type-archive-stories .story-poster {
    height: 500px;
  }
}

.post-type-archive-stories .stories-archive {
  width: 100%;
  flex: 1 1 100%;
  margin-top: 88px;
}

.post-type-archive-stories .story-grid {
  width: 100%;
}

/* ===== KATHASAAR HOME HERO ===== */

.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #f68b28, #f36c3c);
  display: flex;
  align-items: center;
  padding: 40px 16px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 80px;
  align-items: center;
}

.hero-inner {
  gap: 80px;
}

/* Mobile layout */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ===== LOGIN CARD ===== */

.hero-card {
  background: #ffffff;
  color: #222;
  border-radius: 22px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.hero-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

/* Fix Ultimate Member form spacing */
.hero-card .um-form {
  margin-top: 10px;
}

.hero-card .um-field input {
  border-radius: 12px !important;
}

/* ===== TEXT SIDE ===== */

.big-title {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  max-width: 650px;
}

.sub {
  font-size: 18px;
  color: rgba(255,255,255,0.9);
  margin-top: 16px;
  max-width: 500px;
}

.big-title .dev {
  font-family: "Noto Serif Devanagari", serif;
}

/* Center text on mobile */
@media (max-width: 900px) {
  .big-title,
  .sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== REMOVE ASTRA DEFAULT SPACING ===== */

.page .ast-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero-card .um-button {
  background: #d44a1f !important;
  border-radius: 12px !important;
  font-weight: 600;
}

.hero-card .um-button.um-alt{
	  background: #80162b !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

/* Remove extra content padding */
.home .site-content {
  padding: 0 !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
}

/* Remove top spacing */
.home .site-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.home .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Break hero out of Astra container */
.home .hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.hero-card {
  margin-left: 0;
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .hero-card {
    margin: 0 auto;
  }

  .big-title,
  .sub {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.section .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* ===== RESPONSIVE GRID ===== */

.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(6, 1fr);
}

/* Large laptop */
@media (max-width: 1400px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Tablet */
@media (max-width: 1100px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Small tablet */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
		padding: 10px;
  }
}

/* Break hero out of Astra container cleanly */
.home .hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.home .entry-content {
  display: block;
}

/* Disable Astra flex layout ONLY on homepage */
@media (min-width: 922px) {
  .home .site-content .ast-container {
    display: block !important;
  }
}

/* ===== HERO FULL WIDTH ONLY ===== */
.home .hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* ===== SECTIONS BELOW HERO ===== */

.section {
  padding: 110px 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.section .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;
}

/* Section Title */
.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.section-title h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: #111827;
}



/* Alternate background */
.section:nth-of-type(odd) {
  background: #0f172a;
	color: #fff;
}

/* Alternate background */
.section:nth-of-type(odd) .section-title h2{
	color: #fff;
}

.badge {
  background: #f3f4f6;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

/* GRID FIX */
.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* CARD DESIGN */
.card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
	border: 1px solid #b9a8a8;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.thumb {
  aspect-ratio: 3 / 4;
  border-radius: 16px 16px 0 0;
  background-size: cover;
  background-position: center;
}

.meta {
  padding: 14px 16px 18px;
}

.title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
  color: #111827;
}

.by {
  font-size: 13px;
  color: #6b7280;
}

.site-header {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  transition: all 0.3s ease;
}

/* When scrolled */
.site-header.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.authors-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.author-card {
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.author-card img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-weight: 600;
}

.author-meta {
  font-size: 13px;
  color: #6b7280;
}

.app-section {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  border-radius: 24px;
  margin: 80px auto;
  max-width: 1200px;
}

.app-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 80px !important;
  gap: 40px;
}

.app-content h2 {
  color: #fff;
  font-size: 28px;
  margin-bottom: 14px;
}

.app-content p {
  color: rgba(255,255,255,0.9);
  margin-bottom: 24px;
}

.app-btn {
  background: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  margin-right: 10px;
  font-weight: 600;
  color: #111;
}

.app-image img {
  width: 100%;
  border-radius: 20px;
}

@media (max-width: 900px) {
  .app-inner {
    grid-template-columns: 1fr;
    padding: 50px 30px !important;
  }
}

.custom-footer {
  background: #111827;
  color: #d1d5db;
  padding: 80px 20px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-col h5 {
  color: #fff;
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  color: #9ca3af;
  margin-bottom: 8px;
  text-decoration: none;
}

.footer-col a:hover {
  color: #fff;
}

.footer-brand p {
  margin-top: 10px;
  font-size: 14px;
  color: #9ca3af;
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* Section title clickable */
.section-title-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.section-title-link:hover h4 {
  color: #f97316;
}

/* View all card */
.view-all-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f3f4f6;
  border: 2px dashed #e5e7eb;
  transition: all .25s ease;
}

.view-all-card:hover {
  background: #fff7ed;
  border-color: #f97316;
  transform: translateY(-6px);
}

.view-thumb {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg,#f97316,#ea580c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-all-card .title {
  font-weight: 700;
  font-size: 15px;
  color: #f97316;
}

/* RESPONSIVE GRID FIX */
.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1400px) {
  .grid { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr; }
}

.login-alert {
  background: #fff3cd;
  color: #856404;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 921px) {
    .site-content .ast-container {
        flex-direction: column;
        margin-top: 85px;
        margin-left: 0px;
    }
	
	.app-section{
		margin: 0px auto;
    max-width: 1200px;
    padding: 0px;
    width: 100%;
    margin-bottom: 20px;
	}
	
	.custom-footer{
		padding: 50px 20px;
    margin-left: 0px;
	}
}

/* ===== STORY PART PAGE ===== */

.story-part-wrapper {
    margin: 80px auto;
    padding: 20px 20px;
    background: #ffffff;
}

.story-breadcrumb {
    font-size: 14px;
    margin-bottom: 16px;
    color: #6b7280;
}

.story-breadcrumb a {
    font-weight: 600;
    color: #2196F3;
    text-decoration: underline !important;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: #9ca3af;
}

.story-part-title {
    font-size: 32px;
    margin-bottom: 12px;
}

.story-meta {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 30px;
}

.meta-separator {
    margin: 0 8px;
}

.story-part-content {
    font-size: 17px;
    line-height: 1.9;
    color: #111827;
}

.chapter-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    margin-bottom: 40px;
}

.chapter-navigation a {
    background: #f3f4f6;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    color: #111827;
    transition: 0.2s ease;
}

.chapter-navigation a:hover {
    background: #e5e7eb;
}

.story-comments {
    margin-top: 40px;
}

.story-meta {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 28px;
}

.meta-separator {
    margin: 0 8px;
    color: #d1d5db;
}

.profile-follow-stats {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
}

.profile-follow-stats strong {
    font-weight: 700;
    color: #111;
}


@media (min-width: 1200px) {
    .ast-plain-container.ast-no-sidebar #primary {
        margin-top: 100px;
        margin-bottom: 60px;
    }
}

/* Followers / Following page layout */

.follow-page .authors-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

/* Tablet */
@media (max-width:1100px){
    .follow-page .authors-row{
        grid-template-columns: repeat(4,1fr);
    }
}

/* Mobile */
@media (max-width:700px){
    .follow-page .authors-row{
        grid-template-columns: repeat(2,1fr);
    }
}

/* Small mobile */
@media (max-width:480px){
    .follow-page .authors-row{
        grid-template-columns: 1fr;
    }
}

.notification-menu{
position:relative;
}

.notification-link{
font-size:18px;
position:relative;
}

.notification-count{
  position: absolute;
  top: 20px;
  right: 10px;
  background: #ff3b30;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  padding: 2px 6px;
  line-height: 1;
}

/* Mobile bell spacing */
@media (max-width: 768px) {

  .notification-menu {
    display: flex;
    align-items: center;
  }

  .notification-link {
    padding: 12px 16px;
    font-size: 20px;
  }

  .notification-count {
    top: 2px;
    right: 6px;
  }
}

.notifications-list {
  max-width: 600px;
  margin: 40px auto;
}

.notification-item {
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}

.notification-time {
  display:block;
  font-size:12px;
  color:#888;
  margin-top:4px;
}

/* ===== STORIES FILTER ===== */

.stories-filter-form{
  margin-bottom:25px;
}

.filter-row{
  display:flex;
  gap:15px;
  align-items:center;
}

/* Search */
.story-search-input{
  flex:1 !important;
  padding:10px 14px !important;
  border-radius:8px !important;
  border:1px solid #ddd !important;
  font-size:14px !important;
  min-width: 160px !important;
}

/* Genre Select */
.genre-select{
  padding:10px 14px;
  border-radius:8px;
  border:1px solid #ddd;
  background:#fff;
  font-size:14px;
  cursor:pointer;
  min-width:160px;
}

/* Hover */
.genre-select:hover,
.story-search-input:focus{
  border-color:#f36c3c;
  outline:none;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

  .filter-row{
    flex-direction:column;
    gap:10px;
  }

  .genre-select,
  .story-search-input{
    width:100%;
  }

}

/* ===== STORY CARD – PREMIUM ARCHIVE VERSION ===== */

.post-type-archive-stories .story-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  transition:transform .25s ease, box-shadow .25s ease;
}

.post-type-archive-stories .story-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

/* Poster */
.post-type-archive-stories .story-poster{
  position:relative;
  height:410px;
  background-size:cover;
  background-position:center;
}

/* Badge on image */
.post-type-archive-stories .story-badge{
  position:absolute;
  bottom: 5px;
  right: 5px;
  font-size:11px;
  padding:5px 10px;
  border-radius:999px;
  font-weight:600;
  backdrop-filter:blur(6px);
}

/* Series */
.post-type-archive-stories .story-badge-series{
  background:rgba(67,56,202,0.9);
  color:#fff;
}

/* Single */
.post-type-archive-stories .story-badge-single{
  background:rgba(3,105,161,0.9);
  color:#fff;
}

/* Caption */
.post-type-archive-stories .story-caption{
  padding:14px 16px 18px;
}

/* Title max 2 lines */
.story-title{
  font-size:15px;
  font-weight:600;
  color:#111827;
  margin:0 0 6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.4;
  min-height:42px;
}

/* Author */
.story-author{
  font-size:13px;
  color:#6b7280;
  margin-bottom:8px;
}

/* Genre tags */
.story-genres{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.genre-tag{
      font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ec5c0e6b;
    color: #380913;
}

/* Mobile */
@media(max-width:600px){
  .post-type-archive-stories .story-poster{
    height:200px;
  }
}

/* Story count badge */
.genre-count{
  position:absolute;
  bottom:12px;
  left:12px;
  background:rgba(255,255,255,0.95);
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  z-index:2;
  color:#111827;
}

/* ===== DEFAULT PROFILE COVER ===== */

.um-cover {
  position: relative;
  min-height: 220px;
  background-size: cover;
  background-position: center;
}

/* If no background image */
.um-cover:not([style*="background-image"]) {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

/* Decorative pattern overlay */
.um-cover:not([style*="background-image"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.12) 0%, transparent 40%);
}

.um-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
}

.um-cover:not([style*="background-image"]) {
  background-size: 200% 200%;
  animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.um-page .entry-header {
    display: none;
}

.um .um-form input[type=number]{
	width: 100% !important;
    padding: 0 12px !important;
    height: 40px !important;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 10px;
    margin-top: 8px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #f97316; /* orange */
    width: 0%;
    transition: width 0.3s ease;
}

.watermark-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    opacity: 0.08;
}

.watermark-overlay span {
    width: 25%;
    text-align: center;
    font-size: 20px;
    transform: rotate(-20deg);
    color: #000;
}

.share-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 24px;
    padding: 12px 16px;
    background: #f8f8f8;
    border-radius: 12px;
}

.share-label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.share-buttons {
    display: flex;
    gap: 8px;
}

.share-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none !important;
    border: none;
    cursor: pointer;

    padding: 0;
    line-height: 1;

    font-size: 16px;
    color: #fff;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Platform colors */
.share-btn.whatsapp { background: #25D366; }
.share-btn.facebook { background: #1877F2; }
.share-btn.telegram { background: #0088cc; }
.share-btn.copy { background: #111; }

.share-btn i {
    pointer-events: none;
}

/* Wrapper */
.related-stories {
    margin-top: 40px;
}

/* Grid */
.related-stories .story-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card */
.related-stories .story-card {
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-stories .story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

/* Poster */
.related-stories .story-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
}

/* Badge */
.related-stories .story-badge {
    position: absolute;
    top: 10px;
    left: 10px;

    background: rgba(255,255,255,0.9);
    color: #333;

    padding: 4px 10px;
    border-radius: 20px;

    font-size: 12px;
    font-weight: 600;
}

/* Caption */
.related-stories .story-caption {
    padding: 12px 14px 16px;
}

/* Title */
.related-stories .story-title {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    text-decoration: none;
}

/* Remove underline strictly */
.related-stories .story-card a,
.related-stories .story-title {
    text-decoration: none !important;
}

/* Author */
.related-stories .story-author {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

/* Genres */
.related-stories .genre-tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
}

/* Mobile */
@media (max-width: 768px) {
    .related-stories .story-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.story-views {
    font-size: 14px;
    color: #777;
    margin-top: 6px;
}

/* Scoped to Ultimate Member */
.um-members .author-extra {
    margin-top: 8px;
}

.um-members .author-bio {
    font-size: 13px;
    color: #777;
    margin-bottom: 6px;
    line-height: 1.4;
}

.um-members .author-stats {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.um-members .author-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.follow-btn {
    background: #ff5a5f;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
}

.view-profile-btn {
    background: #eee;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    color: #333;
}

.follow-toggle-btn {
    background: #ff5a5f;
    color: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    border: none;
}

.follow-toggle-btn.following {
    background: #ddd;
    color: #333;
}

.mature-badge {
    position: absolute;
    top: 10px;
    right: 10px;

    background: rgba(0, 0, 0, 0.75);
    color: #fff;

    font-size: 11px;
    font-weight: 600;

    padding: 4px 8px;
    border-radius: 6px;

    z-index: 2;
}

.mature-badge {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 20px;
}

.blurred {
    filter: blur(8px);
    position: relative;
}

.blur-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 13px;
    font-weight: 600;

    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
}

.story-poster {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

/* background layer */
.poster-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* blur ONLY background */
.poster-bg.blurred {
    filter: blur(5px);
    transform: scale(1.05); /* avoid edges showing */
}

/* overlay above blur */
.blur-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-weight: 600;

    background: rgba(0,0,0,0.4);
    z-index: 2;
}

/* badge always visible */
.mature-badge {
    position: absolute;
    top: 10px;
    right: 10px;

    z-index: 3; /* above everything */

    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
}

.mature-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;
}


.mature-warning-inline {
    margin: 15px 0;
    padding: 12px 16px;

    background: #fff8e1;
    border-left: 4px solid #f4b400;

    font-size: 14px;
    color: #333;

    border-radius: 6px;
}

.back-to-all-stories {
    position: sticky;
    top: 85px; /* exact header height */
    z-index: 100;

    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;

    padding: 10px 15px;
	 backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.85);
}

/* inner alignment */
.back-to-all-stories a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
}

.back-to-all-stories a:hover {
    background: #eee;
}

.font-controls {
    display: flex;
    justify-content: flex-end; /* RIGHT SIDE */
    align-items: center;
    gap: 8px;
    margin: 15px 0;
}

.font-label {
    font-size: 13px;
    color: #666;
    margin-right: 6px;
}

.font-controls button {
    padding: 6px 10px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    color: #333 !important; /* FIX TEXT COLOR */
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.font-controls button:hover {
    background: #eee;
}

/* Content font */
.story-part-content,
.story-content {
    font-size: 16px;
    line-height: 1.8;
	transition: font-size 0.25s ease; /* 🔥 SMOOTH */
}

/* hide on desktop */
.mobile-profile-icon {
    display: none;
}

/* show only on mobile */
@media (max-width: 768px) {

    /* 🔥 Make button inline instead of flex container */
    .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle {
        display: none !important;
        align-items: center;
    }

    /* 🔥 Make parent behave properly */
    .ast-button-wrap {
        display: flex;
        align-items: flex-end; /* 🔥 aligns icon + menu better */
        gap: 10px;
    }

    /* Profile icon alignment */
    .mobile-profile-icon {
		display: inline;
		align-items: center;
		justify-content: center;

		position: relative; /* 🔥 REQUIRED for pulse */

		margin-right: 0px;
		min-width: 40px; /* 🔥 FIX WIDTH */
    	text-align: center;
	}

    .mobile-profile-icon img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: transform 0.15s ease, box-shadow 0.2s ease !important;
        border: 2px solid transparent;
        background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, #f47622, #9e505e) border-box;
    }

    /* ensure menu button aligns */
    .menu-toggle {
        display: flex;
        align-items: center;
    }
}

.mobile-profile-icon::after {
    content: '';
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 🔥 CENTER */

    width: 36px;   /* match avatar better */
    height: 36px;

    border: 2px solid rgba(255, 120, 0, 0.4);

    border-radius: 50%;

    animation: pulse 2s infinite;
    animation-delay: 3s;
}

.mobile-profile-icon:active img {
    transform: scale(0.9);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/*************Profile Related CSS******************/
.um-cover,
.um-cover-e {
    display: none !important;
}

.um-profile-body {
    max-width: 600px;
    margin: 0 auto;
}

.um-header {
    text-align: center;
    padding: 20px 15px;
}

.um-profile-photo {
    float: none !important;
    margin: 0 auto;
	top: -24px !important;
}

.um-profile-meta {
    padding-left: 0 !important;
}

.um-profile-edit {
    position: absolute;
    top: 10px;
    right: 10px;
}

.um-header {
    position: relative;
}

.um-name a {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.profile-follow-stats {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
}

.um-meta-text {
    margin-top: 6px;
    font-size: 13px;
    color: #888;
}

.profile-tabs {
    position: sticky;
    top: 80px;
    z-index: 50;

    display: flex;
    gap: 10px;

    padding: 10px;
    background: #fff;

    border-bottom: 1px solid #eee;
}

/* tab card */
.profile-tabs .tab {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 10px 6px;

    border-radius: 12px;
    background: #fafafa;

    border: 1px solid transparent;

    transition: all 0.2s ease;
}

/* hover */
.profile-tabs .tab:hover {
    background: #f3f3f3;
}

/* icon */
.profile-tabs .icon {
    font-size: 18px;
    margin-bottom: 2px;
}

/* label */
.profile-tabs .label {
    font-size: 10px;
    color: #777;
}

/* active */
.profile-tabs .tab.active {
    background: linear-gradient(135deg, #fff2ea, #fff);
    border: 1px solid #f47622;
    box-shadow: 0 3px 10px rgba(244, 118, 34, 0.15);
}

.profile-tabs .tab.active .label {
    color: #f47622;
    font-weight: 600;
}

/* click effect */
.profile-tabs .tab:active {
    transform: scale(0.95);
}

/* content */
.tab-content {
    display: none;
    padding: 15px;
    margin-top: 10px;
}

.tab-content.active {
    display: block;
}

.tab-content p {
    text-align: center;
    color: #888;
    font-size: 14px;
    margin-top: 20px;
}

.favorite-wrapper {
    margin: 10px 0;
}

.fav-btn {
    background: none !important;
    border: none !important;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.fav-btn.active {
    opacity: 1;
    transform: scale(1.2);
}

.fav-btn:hover {
    opacity: 1;
}

.view-all-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background: #fafafa;
    border: 1px dashed #ddd;
}

.view-all-card .title {
    font-weight: 600;
    color: #f47622;
}

.view-all-card:hover {
    background: #fff3ec;
}

.timeline {
    padding: 10px;
}

.timeline-item {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* avatar */
.timeline-avatar img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

/* card */
.timeline-card {
    flex: 1;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* header */
.timeline-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

/* time */
.timeline-header .time {
    color: #999;
    font-size: 11px;
}

/* body */
.timeline-body {
    font-size: 14px;
}

/* story highlight */
.timeline-story {
    margin-top: 6px;
    font-weight: 600;
    color: #333;
}

/* hover */
.timeline-card:hover {
    transform: translateY(-2px);
    transition: 0.2s;
}

.tab-content {
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Container */
.write-story-container {
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
}

/* Form */
.write-story-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Inputs */
.write-story-form input[type="text"],
.write-story-form textarea,
.write-story-form input[type="file"] {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.write-story-form input[type="text"] {
    font-size: 16px;
    font-weight: 600;
}

/* Textarea */
.write-story-form textarea {
    min-height: 180px;
    line-height: 1.6;
}

/* Genres */
.genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.genre-item {
    position: relative;
}

.genre-item input {
    display: none;
}

.genre-item span {
    padding: 6px 12px;
    border-radius: 20px;
    background: #eee;
}

.genre-item input:checked + span {
    background: #f47622;
    color: #fff;
}

/* Button */
.write-story-form button {
    background: #f47622;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
}

.write-story-form button {
    background: linear-gradient(45deg, #f47622, #ff6a00);
    box-shadow: 0 3px 10px rgba(244, 118, 34, 0.3);
}

/* Mobile */
@media (max-width: 600px) {
    .write-story-container {
        padding: 15px;
    }
}

/* MY SECTION */
.my-section {
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.write-story-form input[type="file"] {
    background: #fafafa;
    padding: 10px;
    border-radius: 10px;
}

/* Header */
.my-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.my-header h3 {
    font-size: 18px;
    font-weight: 600;
}

/* New Story Button */
.new-story-btn {
    background: linear-gradient(45deg, #f47622, #ff6a00);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Tabs */
.my-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.subtab {
    flex: 1;
    padding: 10px;
    border-radius: 25px;
    border: 1px solid #eee;
    background: #f5f5f5;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    transition: all 0.2s ease;
}

.subtab:hover {
    background: #eee;
}

.subtab.active {
    background: linear-gradient(45deg, #f47622, #ff6a00);
    color: #fff;
    border: none;
    box-shadow: 0 2px 6px rgba(244, 118, 34, 0.3);
}

/* Empty state */
.sub-content p {
    text-align: center;
    color: #888;
    margin-top: 20px;
}

.write-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.back-btn {
    background: #f5f5f5;
    padding: 6px 10px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
}

.write-header h2 {
    font-size: 18px;
    margin: 0;
}

@media (max-width: 768px) {

    .new-story-btn {
        padding: 10px;
        font-size: 14px;
    }

    .subtab {
        font-size: 11px;
    }

}

/* PAGE */
.editor-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
}

/* TOP BAR */
.editor-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.back-btn {
    background: #f3f3f3;
    padding: 6px 10px;
    border-radius: 20px;
    text-decoration: none;
}

.editor-title-top {
    font-size: 20px;
    font-weight: 600;
    margin: 10px 0 12px;
}

/* BLOCK */
.editor-block {
    border-radius: 14px;
    margin-bottom: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* HEADER */
.block-header {
    padding: 14px;
    font-weight: 600;
    font-size: 14px;
    background: #fafafa;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.block-header.open {
    color: #f47622;
}

/* BODY */
.block-body {
    display: none;
    padding: 14px;
}

.block-body.open {
    display: block;
}

/* FIELD GROUP */
.field {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.field label {
    font-size: 12px;
    color: #777;
    margin-bottom: 4px;
}

/* INPUT */
.editor-title,
.editor-intro {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.editor-title {
    font-size: 16px;
    font-weight: 600;
}

.editor-intro {
    min-height: 180px;
    line-height: 1.6;
}

/* BUTTON */
.save-btn {
    width: 100%;
    margin-top: 10px;
    background: linear-gradient(45deg, #f47622, #ff6a00);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 25px;
    font-weight: 600;
}

/* GENRES */
.genres {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.genre-item {
    display: inline-flex;
}

.genre-item span {
    padding: 6px 12px;
    border-radius: 20px;
    background: #f1f1f1;
    font-size: 12px;
    border: 1px solid #ddd;
}

.genre-item input:checked + span {
    background: #f47622;
    color: #fff;
    border-color: #f47622;
}

/* CHAPTER */
.chapter-card {
    padding: 12px;
    border-radius: 10px;
    background: #f9f9f9;
    margin-top: 8px;
}

/* MOBILE */
@media (max-width: 768px) {

    .editor-page {
        padding: 12px;
    }

    .editor-title {
        font-size: 15px;
    }

    .editor-intro {
        min-height: 200px;
    }

}

.arrow {
    transition: transform 0.25s ease;
}

.block-header.open .arrow {
    transform: rotate(180deg);
}

.cover-preview img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 8px;
}

.chapter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.add-btn {
    background: #f47622;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
}

/* LIST */
.chapter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* CARD */
.chapter-card {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: #fafafa;
    text-decoration: none;
    color: inherit;
}

/* LEFT NUMBER */
.chapter-number {
    background: #f47622;
    color: #fff;
    padding: 6px 10px;
    border-radius: 50%;
    font-size: 12px;
}

/* CONTENT */
.chapter-title {
    font-weight: 600;
    font-size: 14px;
}

.chapter-meta {
    font-size: 12px;
    color: #888;
}

/* EMPTY */
.empty-chapters {
    text-align: center;
    padding: 20px 0;
    color: #777;
}


/**** CENSORED WORD START *****/
.censored-word {
    color: inherit;
    cursor: help;
    border-bottom: 1px dotted #e67e22;   /* Subtle orange dotted line */
    padding-bottom: 1px;
    transition: all 0.2s ease;
}

.censored-word:hover {
    background-color: rgba(230, 126, 34, 0.08);
    border-bottom-style: solid;
}

/* ====================== GOOGLE LOGIN BUTTON STYLING ====================== */

.nextend-social-login {
    margin: 25px 0 !important;
}

.nsl-container {
    display: flex;
    justify-content: center;
    width: 100% !important;
}

.nsl-button {
    width: 100% !important;
    max-width: 320px !important;
    height: 52px !important;
    border-radius: 12px !important;
    border: 1px solid #dadce0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #3c4043 !important;
    transition: all 0.2s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.nsl-button:hover {
    background-color: #f8f9fa !important;
    border-color: #c6c6c6 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.nsl-button:active {
    background-color: #f1f3f4 !important;
}

/* Google Logo */
.nsl-button .nsl-button-svg {
    width: 24px !important;
    height: 24px !important;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .nsl-button {
        height: 50px !important;
        font-size: 15.5px !important;
        max-width: 100% !important;
    }
    
    .nextend-social-login {
        margin: 20px 0 15px !important;
    }
}

/* Make it look more premium */
.um-login .nsl-container {
    padding: 0 15px;
}

/* ====================== CHAPTER NAVIGATION - IMPROVED ====================== */

.chapter-navigation {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 15px;
    margin: 50px 0 30px;
    flex-wrap: wrap;
}

.chapter-navigation a {
    flex: 1;
    padding: 18px 22px;
    border-radius: 14px;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    min-height: 68px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* Previous Chapter */
.prev-chapter {
    background: #f8f9fa;
    color: #444;
    border: 2px solid #e5e5e5;
    justify-content: flex-start;
}

.prev-chapter:hover {
    background: #f1f3f4;
    border-color: #d0d0d0;
    transform: translateY(-3px);
}

/* Next Chapter */
.next-chapter {
    background: #f47622;
    color: white;
    border: 2px solid #f47622;
    justify-content: flex-end;
    text-align: right;
}

.next-chapter:hover {
    background: #e66b1e;
    border-color: #e66b1e;
    transform: translateY(-3px);
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .chapter-navigation {
        margin: 40px 0 25px;
        gap: 12px;
    }
    
    .chapter-navigation a {
        padding: 16px 18px;
        font-size: 15px;
        min-height: 62px;
    }
}

/* Very Small Screens */
@media (max-width: 480px) {
    .chapter-navigation {
        flex-direction: column;
    }
    
    .chapter-navigation a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

.pagination {
    margin: 40px 0 !important;
    text-align: center !important;
}

.pagination ul {
    display: inline-flex;
    list-style: none !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin: 0;
}

.pagination li a, .pagination li span {
    padding: 3px 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    min-width: 30px !important;
    display: inline-block;
}

.pagination li .current {
    background: #0073aa !important;
    color: white !important;
    border-color: #0073aa !important;
}

/* ====================== STORY HERO IMAGE - FINAL CLEAN LAYOUT ====================== */

.story-featured-hero {
    position: relative;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
    margin-bottom: 45px;
    border-radius: 16px;
}

.story-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.75));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px 20px 35px;
}

/* Bottom Bar */
.story-hero-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
    flex-wrap: wrap;
}

/* Font Controls */
.hero-font-controls {
    background: rgba(0,0,0,0.55) !important;
    padding: 8px 14px !important;
    border-radius: 30px;
    backdrop-filter: blur(8px);
}

.hero-font-controls .font-label {
    color: #fff;
    font-size: 13.5px;
    margin-right: 6px;
}

.hero-font-controls button {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border: none;
    padding: 6px 11px;
    border-radius: 20px;
    font-size: 13.5px;
}

/* Views */
.story-hero-overlay .story-views {
    color: #fff;
    font-size: 15.5px;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
    white-space: nowrap;
	margin-top: 0px;
    text-align: right;
    width: 100%;
}

/* Share Box */
.hero-share-box {
    background: rgba(0,0,0,0.55) !important;
    padding: 8px 16px !important;
    border-radius: 30px;
    backdrop-filter: blur(8px);
}

.hero-share-box .share-label {
    color: #fff;
    margin-right: 10px;
}

.hero-share-box .share-buttons {
    gap: 8px;
}

.hero-share-box .share-btn {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .story-hero-overlay {
        padding: 20px 18px 28px;
		display: inline-grid;
    }
    .story-hero-bottom-bar {
        gap: 0px;
        align-items: center;
        height: 195px;
        display: inline-grid;
        position: absolute;
        bottom: 15px;
        right: 0;
        width: 300px;
    }
    .hero-share-box {
        width: 100%;
        justify-content: center;
		margin: 0px !important;
		justify-content: space-between;
    }
	.hero-font-controls{
		margin:0px !important;
	}
}

.site-content .ast-container .content-area.primary{
	padding: 0px !important;
}

.hero-favorite-top{
	text-align: right;
}

.chapter-image {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 20px auto;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .chapter-image {
        max-width: 100%;
        margin: 15px auto;
    }
}

/* ====================== ACTIVE READERS - MODERN UI ====================== */

.active-readers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.reader-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.reader-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.reader-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.reader-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f8fafc;
}

.reader-name {
    font-size: 17px;
    color: #1f2937;
}

.last-active {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}

.reader-stats {
    margin: 16px 0;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.stat-icon {
    font-size: 18px;
}

.stat-value {
    font-weight: 600;
    color: #1f2937;
}

.view-details-btn {
    display: inline-block;
    width: calc(100% - 25px);
    text-align: center;
    background: #f47622;
    color: white;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 8px;
    transition: all 0.3s ease;
}

.view-details-btn:hover {
    background: #e66b1e;
    transform: translateY(-2px);
}

/* Mobile Friendly */
@media (max-width: 768px) {
    .active-readers-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .reader-card {
        padding: 18px;
    }
}

/* ====================== START READING BUTTON ====================== */
.start-reading-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f47622, #e65c00);
    color: #ffffff !important;
    font-size: 19px;
    font-weight: 700;
    padding: 17px 42px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(244, 118, 34, 0.45);
    transition: all 0.3s ease;
    border: 4px solid #fff;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.4px;
    min-height: 60px;
}

/* Pulse Animation */
.start-reading-btn {
    animation: buttonPulse 2.3s infinite ease-in-out;
}

@keyframes buttonPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.start-reading-btn:hover,
.start-reading-btn:active {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 18px 40px rgba(244, 118, 34, 0.6);
}

/* Shine Effect */
.start-reading-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 60%;
    height: 200%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.75), transparent);
    transition: 0.7s;
}

.start-reading-btn:hover::before,
.start-reading-btn:active::before {
    left: 250%;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .start-reading-btn {
        font-size: 17.5px;
        padding: 16px 38px;
        min-height: 58px;
    }
}

@media (max-width: 480px) {
    .start-reading-btn {
        font-size: 17px;
        padding: 15px 35px;
        width: 90%;
        max-width: 340px;
    }
}

pasted-text.txt

pasted-text.txt
jQuery(document).on('click', '#follow-btn', function(){
    var btn = jQuery(this);
    var user_id = btn.data('user');
    btn.prop('disabled', true);
    jQuery.post(kathasaar_ajax.ajax_url, {
        action: 'toggle_follow',
        user_id: user_id
    }, function(response){
        if(response.success){
            if(response.data.status === 'followed'){
                btn.text('Unfollow');
            } else {
                btn.text('Follow');
            }
        }
        btn.prop('disabled', false);
    });
});
 

<?php get_header(); ?>
<div class="stories-archive">
    <h1 class="page-title">All Stories</h1>
    <?php
    $mature_term = get_term_by('slug', 'mature', 'genres');
    $exclude_ids = $mature_term ? [$mature_term->term_id] : [];
   
    $genres = get_terms([
        'taxonomy' => 'genres',
        'hide_empty' => false,
        'exclude' => $exclude_ids
    ]);
    $current_genre = isset($_GET['genre']) ? sanitize_text_field($_GET['genre']) : 'all';
    ?>
    <!-- Filter Form -->
    <form method="GET" class="stories-filter-form">
        <div class="filter-row">
            <input type="search"
                   name="s"
                   placeholder="Search stories..."
                   value="<?php echo esc_attr(get_search_query()); ?>"
                   class="story-search-input">
            <select name="genre" class="genre-select" onchange="this.form.submit()">
                <option value="all" <?php selected($current_genre, 'all'); ?>>All Genres</option>
                <?php foreach ($genres as $genre): ?>
                    <option value="<?php echo esc_attr($genre->slug); ?>"
                            <?php selected($current_genre, $genre->slug); ?>>
                        <?php echo esc_html($genre->name); ?>
                    </option>
                <?php endforeach; ?>
            </select>
            <button type="submit" class="filter-submit-btn">Search</button>
        </div>
    </form>
    <div class="story-count">
        <?php echo $wp_query->found_posts; ?> stories found
    </div>
    <!-- Pagination - Top -->
    <?php if ($wp_query->max_num_pages > 1): ?>
        <div class="pagination top-pagination">
            <?php
            the_posts_pagination(array(
                'mid_size' => 2,
                'prev_text' => '« Previous',
                'next_text' => 'Next »',
                'type' => 'list'
            ));
            ?>
        </div>
    <?php endif; ?>
    <!-- Story Grid -->
    <div class="grid">
        <?php if (have_posts()) : while (have_posts()) : the_post();
            $story_id = get_the_ID();
            $image = get_the_post_thumbnail_url($story_id, 'large');
            if (!$image) {
                $image = get_stylesheet_directory_uri() . '/assets/story-placeholder.jpg';
            }
            $author_name = get_the_author();
            $genres = get_the_terms($story_id, 'genres');
            $parts = get_posts([
                'post_type' => 'story_parts',
                'meta_key' => 'parent_story',
                'meta_value' => $story_id,
                'fields' => 'ids',
                'numberposts' => -1
            ]);
            $parts_count = count($parts);
            $badge = ($parts_count > 0) ? "Series • $parts_count Chapters" : 'Single Story';
            $badge_class = ($parts_count > 0) ? 'story-badge-series' : 'story-badge-single';
        ?>
            <a href="<?php the_permalink(); ?>" class="card">
                <div class="thumb" style="position: relative;">
                    <div class="poster-bg <?php echo has_term('mature', 'genres', $story_id) && !is_user_logged_in() ? 'mature-blur' : ''; ?>"
                         style="background-image:url('<?php echo esc_url($image); ?>')">
                    </div>
                    <?php if (has_term('mature', 'genres', $story_id)): ?>
                        <span class="mature-badge">Mature</span>
                    <?php endif; ?>
                    <span class="story-badge <?php echo esc_attr($badge_class); ?>">
                        <?php echo esc_html($badge); ?>
                    </span>
                    <?php if (has_term('mature', 'genres', $story_id) && !is_user_logged_in()): ?>
                        <div class="blur-overlay">Login to view</div>
                    <?php endif; ?>
                </div>
                <div class="meta">
                    <h3 class="story-title"><?php the_title(); ?></h3>
                    <div class="by">by <?php echo esc_html($author_name); ?></div>
                    <?php if ($genres && !is_wp_error($genres)): ?>
                        <div class="story-genres">
                            <?php foreach ($genres as $g):
                                if ($g->slug !== 'mature'): ?>
                                    <span class="genre-tag"><?php echo esc_html($g->name); ?></span>
                                <?php endif;
                            endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </a>
        <?php endwhile; else: ?>
            <p>No stories found matching your search criteria.</p>
        <?php endif; ?>
    </div>
    <!-- Pagination - Bottom -->
    <?php if ($wp_query->max_num_pages > 1): ?>
        <div class="pagination bottom-pagination">
            <?php
            the_posts_pagination(array(
                'mid_size' => 2,
                'prev_text' => '« Previous',
                'next_text' => 'Next »',
                'type' => 'list'
            ));
            ?>
        </div>
    <?php endif; ?>
</div>
<?php get_footer(); ?>
 
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<?php astra_content_bottom(); ?>
</div>
</div>
</div>
<?php
astra_body_bottom();
wp_footer();
?>
<footer class="custom-footer">
  <div class="footer-inner">
    <div class="footer-brand">
      <div class="logo">Kathasaar</div>
      <p>© <?php echo date("Y"); ?> Kathasaar</p>
    </div>
    <div class="footer-col">
      <h5>Company</h5>
      <a href="/about-kathasaar/">About</a>
      <a href="/careers">Careers</a>
      <a href="/contact/">Contact</a>
    </div>
    <div class="footer-col">
      <h5>Legal</h5>
      <a href="/privacy-policy-kathasaar/">Privacy</a>
      <a href="/terms-and-conditions-kathasaar/">Terms</a>
    </div>
    <div class="footer-col">
      <h5>Explore</h5>
      <a href="/members">Authors</a>
      <a href="/stories/">Discover</a>
    </div>
  </div>
</footer>
<script>
/* Disable copy / right click */
document.addEventListener('contextmenu', e => e.preventDefault());
document.addEventListener('copy', e => e.preventDefault());
document.addEventListener('cut', e => e.preventDefault());
</script>
<script>
/* Header scroll effect */
window.addEventListener("scroll", function() {
  const header = document.querySelector(".site-header");
  if (window.scrollY > 50) {
    header.classList.add("scrolled");
  } else {
    header.classList.remove("scrolled");
  }
});
/* Blur when tab inactive */
document.addEventListener("visibilitychange", function() {
    document.body.style.filter = document.hidden ? "blur(10px)" : "none";
});
/* Copy link UI */
function copyLink(url) {
    navigator.clipboard.writeText(url);
    const btn = event.currentTarget;
    const icon = btn.querySelector('i');
    icon.classList.remove('fa-link');
    icon.classList.add('fa-check');
    setTimeout(() => {
        icon.classList.remove('fa-check');
        icon.classList.add('fa-link');
    }, 1000);
}
/* Share tracking */
function trackShare(type) {
    fetch(kathasaarShare.ajax_url, {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: new URLSearchParams({
            action: "kathasaar_track_share",
            story_id: kathasaarShare.story_id,
            story_part_id: kathasaarShare.story_part_id,
            share_type: type
        })
    });
}
</script>
<script>
/* Font size system */
let currentFontSize = localStorage.getItem('kathasaar_font_size') || 16;
function applyFontSize() {
    document.querySelectorAll('.story-part-content, .story-content')
        .forEach(el => {
            el.style.fontSize = currentFontSize + 'px';
        });
    document.querySelectorAll('.font-label').forEach(el => {
        el.innerText = "Text size (" + currentFontSize + "px)";
    });
}
function changeFontSize(change) {
    currentFontSize = parseInt(currentFontSize) + change;
    if (currentFontSize < 14) currentFontSize = 14;
    if (currentFontSize > 26) currentFontSize = 26;
    localStorage.setItem('kathasaar_font_size', currentFontSize);
    applyFontSize();
}
function resetFont() {
    currentFontSize = 16;
    localStorage.setItem('kathasaar_font_size', currentFontSize);
    applyFontSize();
}
document.addEventListener('DOMContentLoaded', applyFontSize);
</script>
<script>
/* Favorite toggle */
document.addEventListener('click', function(e) {
    const btn = e.target.closest('.fav-btn');
    if (!btn) return;
    const storyId = btn.dataset.story;
    fetch("<?php echo admin_url('admin-ajax.php'); ?>", {
        method: "POST",
        body: new URLSearchParams({
            action: "toggle_favorite",
            story_id: storyId
        })
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            btn.classList.toggle('active');
        }
    });
});
</script>
</body>
</html>
 
<?php get_header(); ?>
<section class="hero">
  <div class="hero-inner">
    <!-- LOGIN CARD -->
    <div class="hero-card">
      <?php if (isset($_GET['login_required'])) : ?>
        <div class="login-alert">
            🔒 Please login to access this page.
        </div>
      <?php endif; ?>
      <h3>Login</h3>
      <?php
        if (isset($_GET['redirect_to']) && !empty($_GET['redirect_to'])) {
            $redirect_to = esc_url($_GET['redirect_to']);
            echo do_shortcode('[ultimatemember form_id="33" redirect="'.$redirect_to.'"]');
        } else {
            $profile_url = um_user_profile_url(get_current_user_id()) . '?tab=continue';
            echo do_shortcode('[ultimatemember form_id="33" redirect="profile"]');
        }
      ?>
    </div>
    <!-- TEXT SIDE -->
    <div>
      <h1 class="big-title">
        <span class="dev">कथासार</span> — Read stories, write your own.
      </h1>
      <p class="sub">
        A beautiful home for stories in every language.
      </p>
    </div>
  </div>
</section>
<?php
// ====================== MATURE CONTENT PREFERENCE ======================
$user_id = get_current_user_id();
$show_mature = true;
if (is_user_logged_in()) {
    $meta = get_user_meta($user_id, 'show_mature_content_radio', true);
   
    // Handle array case
    if (is_array($meta)) {
        $meta = reset($meta);
    }
   
    // Extract value from "1 : Yes" or "0 : No" format
    if (strpos($meta, ':') !== false) {
        $meta = trim(explode(':', $meta)[0]);
    }
   
    // Final decision
    $show_mature = ($meta === '1' || $meta === 1);
}
?>
<?php
// ====================== RESPONSIVE LIMIT FUNCTION ======================
function kathasaar_get_limit($desktop = 5, $mobile = 3) {
    $is_mobile = (wp_is_mobile() || strpos($_SERVER['HTTP_USER_AGENT'] ?? '', 'Mobile') !== false);
    return $is_mobile ? $mobile : $desktop;
}
?>
<?php if (is_user_logged_in()):
    $stories = kathasaar_get_user_reading_progress($user_id);
    if (!empty($stories)):
?>
<section class="section">
  <div class="inner">
    <h2 class="section-title">
      <span class="badge">Continue</span>
      Continue Reading
    </h2>
    <div class="grid">
    <?php
    $limit = 4;
    $count = 0;
    foreach ($stories as $story_id => $data):
        $last_part = $data['last_part'];
        list($current, $total) = kathasaar_get_story_progress($story_id, $last_part);
        $progress_percent = ($total > 0) ? ($current / $total) * 100 : 0;
        // 🔥 SKIP COMPLETED STORIES (100%)
        if ($progress_percent >= 100) continue;
        $is_mature = has_term('mature', 'genres', $story_id);
        if ($is_mature && !$show_mature) continue;
        if ($count >= $limit) break;
        $count++;
        $image = get_the_post_thumbnail_url($story_id, 'large');
        if (!$image) $image = get_stylesheet_directory_uri() . '/assets/story-placeholder.jpg';
    ?>
        <a href="<?php echo get_permalink($last_part); ?>" class="card">
            <div class="thumb" style="background-image:url('<?php echo esc_url($image); ?>');position: relative;">
                <?php if ($is_mature): ?>
                    <span class="mature-badge">Mature</span>
                <?php endif; ?>
            </div>
            <div class="meta">
                <div class="title"><?php echo get_the_title($story_id); ?></div>
                <div class="by">Chapter <?php echo $current; ?> of <?php echo $total; ?></div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: <?php echo $progress_percent; ?>%"></div>
                </div>
            </div>
        </a>
    <?php endforeach; ?>
    <?php if (count($stories) > $count): // Show View All if more stories exist ?>
        <a href="<?php echo um_user_profile_url($user_id); ?>" class="card view-all-card">
            <div class="thumb view-thumb"></div>
            <div class="meta">
                <div class="title">View All →</div>
                <div class="by">See all your reading</div>
            </div>
        </a>
    <?php endif; ?>
    </div>
  </div>
</section>
<?php endif; endif; ?>
<!-- EDITOR PICKS -->
<section class="section">
  <div class="inner">
    <a href="<?php echo home_url('/stories/'); ?>" class="section-title-link">
      <div class="section-title">
        <span class="badge">Editor’s Picks</span>
        <h2>Discover great stories</h2>
      </div>
    </a>
    <div class="grid">
      <?php
        $featured = new WP_Query(array(
          'post_type' => 'stories',
          'posts_per_page' => 4,
          'orderby' => 'rand'
        ));
        $featured_ids = wp_list_pluck($featured->posts, 'ID');
        if ($featured->have_posts()) :
          while ($featured->have_posts()) : $featured->the_post();
            $is_mature = has_term('mature', 'genres', get_the_ID());
            if ($is_mature && !$show_mature) continue;
            $image = get_the_post_thumbnail_url(get_the_ID(), 'large');
            if (!$image) $image = get_stylesheet_directory_uri() . '/assets/story-placeholder.jpg';
      ?>
        <a href="<?php the_permalink(); ?>" class="card">
          <div class="thumb" style="background-image:url('<?php echo esc_url($image); ?>');position: relative;">
            <?php if ($is_mature): ?>
              <span class="mature-badge">Mature</span>
            <?php endif; ?>
          </div>
          <div class="meta">
            <div class="title"><?php the_title(); ?></div>
            <div class="by">by <?php the_author(); ?></div>
          </div>
        </a>
      <?php endwhile; wp_reset_postdata(); endif; ?>
      <a href="<?php echo home_url('/stories/'); ?>" class="card view-all-card">
        <div class="thumb view-thumb"></div>
        <div class="meta">
          <div class="title">View All Stories →</div>
        </div>
      </a>
    </div>
  </div>
</section>
<!-- DAILY SERIES -->
<section class="section">
  <div class="inner">
    <a href="<?php echo home_url('/stories/'); ?>" class="section-title-link">
      <div class="section-title">
        <span class="badge">Recommended</span>
        <h2>Popular & Ongoing Stories</h2>
      </div>
    </a>
    <div class="grid">
      <?php
      $series = new WP_Query(array(
        'post_type' => 'stories',
        'posts_per_page' => 4,
        'orderby' => 'rand',
        'post__not_in' => $featured_ids
      ));
      if ($series->have_posts()) :
        while ($series->have_posts()) : $series->the_post();
          $is_mature = has_term('mature', 'genres', get_the_ID());
          if ($is_mature && !$show_mature) continue;
          $image = get_the_post_thumbnail_url(get_the_ID(), 'large');
          if (!$image) $image = get_stylesheet_directory_uri() . '/assets/story-placeholder.jpg';
      ?>
        <a href="<?php the_permalink(); ?>" class="card">
          <div class="thumb" style="background-image:url('<?php echo esc_url($image); ?>');position: relative;">
            <?php if ($is_mature): ?>
              <span class="mature-badge">Mature</span>
            <?php endif; ?>
          </div>
          <div class="meta">
            <div class="title"><?php the_title(); ?></div>
            <div class="by">by <?php the_author(); ?></div>
          </div>
        </a>
      <?php endwhile; wp_reset_postdata(); endif; ?>
      <a href="<?php echo home_url('/stories/'); ?>" class="card view-all-card">
        <div class="thumb view-thumb"></div>
        <div class="meta">
          <div class="title">Explore More →</div>
        </div>
      </a>
    </div>
  </div>
</section>
<!-- TRENDING AUTHORS -->
<section class="section authors-section">
  <div class="inner">
    <a href="<?php echo site_url('/members'); ?>" class="section-title-link">
      <div class="section-title">
          <span class="badge">Authors</span>
          <h2>Trending authors</h2>
      </div>
    </a>
    <?php
    $users = get_users(array('role' => 'um_writer', 'number' => 200));
    $authors = array();
    foreach ($users as $user) {
        $story_count = count_user_posts($user->ID, 'stories');
        if ($story_count > 0) {
            $authors[] = array('user' => $user, 'count' => $story_count);
        }
    }
    usort($authors, function($a, $b) {
        return $b['count'] - $a['count'];
    });
    $authors = array_slice($authors, 0, 8);
    ?>
    <div class="authors-row">
      <?php if (!empty($authors)) : ?>
        <?php foreach ($authors as $author_data) :
            $user = $author_data['user'];
            $count = $author_data['count'];
            $avatar = get_avatar_url($user->ID, ['size' => 150]);
        ?>
          <a href="<?php echo esc_url(um_user_profile_url($user->ID)); ?>" class="author-card">
              <img src="<?php echo esc_url($avatar); ?>" alt="<?php echo esc_attr($user->display_name); ?>">
              <div class="author-info">
                  <div class="author-name"><?php echo esc_html($user->display_name); ?></div>
                  <div class="author-meta"><?php echo esc_html($count); ?> stories</div>
              </div>
          </a>
        <?php endforeach; ?>
      <?php else : ?>
        <p>No trending authors yet.</p>
      <?php endif; ?>
    </div>
  </div>
</section>
<!-- APP SECTION -->
<section class="section app-section">
  <div class="inner app-inner">
    <div class="app-content">
      <h2>Get the Kathasaar App</h2>
      <p>Read offline, receive personalized recommendations, and publish from your phone.</p>
      <div class="app-buttons">
        <a href="#" class="app-btn">Google Play</a>
        <a href="#" class="app-btn">App Store</a>
      </div>
    </div>
  </div>
</section>
<?php get_footer(); ?>
 
<?php
/**
 * The header for Astra Theme.
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Astra
 * @since 1.0.0
 */
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
?>
<!DOCTYPE html>
<?php astra_html_before(); ?>
<html <?php language_attributes(); ?>>
<head>
<?php astra_head_top(); ?>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6ESSZ9NHQZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-6ESSZ9NHQZ');
</script>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php
if ( apply_filters( 'astra_header_profile_gmpg_link', true ) ) {
?>
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php
}
?>
<?php wp_head(); ?>
<?php astra_head_bottom(); ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&family=Noto+Serif+Devanagari:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body <?php astra_schema_body(); ?> <?php body_class(); ?>>
<?php astra_body_top(); ?>
<?php wp_body_open(); ?>
<a
class="skip-link screen-reader-text"
href="#content">
<?php echo esc_html( astra_default_strings( 'string-header-skip-link', false ) ); ?>
</a>
<div
<?php
echo wp_kses_post(
astra_attr(
'site',
array(
'id' => 'page',
'class' => 'hfeed site',
)
)
);
?>
>
<?php
astra_header_before();
astra_header();
astra_header_after();
astra_content_before();
?>
<div id="content" class="site-content">
<div class="ast-container">
<?php astra_content_top(); ?>
 
 
<?php
$log_id = intval($_GET['log'] ?? 0);
$story_id = intval($_GET['story'] ?? 0);
if (!$log_id || !$story_id) {
    wp_redirect(home_url());
    exit;
}
global $wpdb;
$table = $wpdb->prefix . 'newsletter_logs';
/*
|--------------------------------------------------------------------------
| UPDATE CLICK DATA
|--------------------------------------------------------------------------
*/
$wpdb->update(
    $table,
    [
        'clicked_at' => current_time('mysql'),
        'click_story_id' => $story_id
    ],
    [
        'id' => $log_id
    ]
);
/*
|--------------------------------------------------------------------------
| OPTIONAL EXTRA TRACKING
|--------------------------------------------------------------------------
*/
$wpdb->query($wpdb->prepare("
    UPDATE $table
    SET clicked_url = %s
    WHERE id = %d
",
    get_permalink($story_id),
    $log_id
));
/*
|--------------------------------------------------------------------------
| REDIRECT TO STORY
|--------------------------------------------------------------------------
*/
wp_redirect(get_permalink($story_id));
exit;
 
<?php
get_header();
$chapter_id = intval($_GET['chapter_id']);
if (!$chapter_id) {
    echo "<p>Invalid chapter</p>";
    get_footer();
    return;
}
?>
<div class="editor-page">
    <div class="editor-topbar">
        <a href="javascript:history.back()" class="back-btn">←</a>
        <h2>Edit Chapter</h2>
    </div>
    <form method="post">
        <input type="hidden" name="chapter_id" value="<?php echo $chapter_id; ?>">
        <div class="field">
            <label>Chapter Title</label>
            <input type="text"
                   name="chapter_title"
                   value="<?php echo esc_attr(get_the_title($chapter_id)); ?>">
        </div>
        <div class="field">
            <label>Chapter Content</label>
            <textarea name="chapter_content" class="editor-intro"><?php
                echo esc_textarea(get_post_field('post_content', $chapter_id));
            ?></textarea>
        </div>
        <button type="submit" name="update_chapter" class="save-btn">
            Save Chapter
        </button>
    </form>
</div>
<?php get_footer(); ?>
 
<?php
if (isset($_GET['edit_story'])) {
    $story_id = intval($_GET['edit_story']);
    if (get_current_user_id() == get_post_field('post_author', $story_id)) {
        include get_stylesheet_directory() . '/story-editor.php';
        return;
    }
}
?>
<?php
/* Template Name: Write Story */
get_header();
?>
<div class="write-story-container">
<div class="write-header">
<a href="/user/<?php echo um_user('user_login'); ?>/?tab=my" class="back-btn">←</a>
<h2>New Story</h2>
</div>
    <form method="post" enctype="multipart/form-data" class="write-story-form">
        <input type="text" name="title" placeholder="Story Title" required>
        <textarea name="intro" placeholder="Write introduction..."></textarea>
        <label>Cover Image</label>
        <input type="file" name="image">
        <div class="genres">
            <label>Select Genres</label>
            <?php
            $genres = get_terms(['taxonomy' => 'genres', 'hide_empty' => false]);
            foreach ($genres as $g) {
echo '<label class="genre-item">
<input type="checkbox" name="genres[]" value="'.$g->term_id.'">
<span>'.$g->name.'</span>
</label>';
            }
            ?>
        </div>
        <button type="submit" name="create_story">Create Story</button>
    </form>
</div>
<?php get_footer(); ?>
 
<?php get_header(); ?>
<div class="story-part-wrapper">
<?php
if (have_posts()) :
    while (have_posts()) : the_post();
        $current_id = get_the_ID();
        // Parent story
        $parent_story_id = get_post_meta($current_id, 'parent_story', true);
        $parent_story_title = $parent_story_id ? get_the_title($parent_story_id) : '';
        $parent_story_link = $parent_story_id ? get_permalink($parent_story_id) : '';
        // Get all chapters
        $chapters = get_posts(array(
            'post_type' => 'story_parts',
            'posts_per_page' => -1,
            'meta_key' => 'part_number',
            'orderby' => 'meta_value_num',
            'order' => 'ASC',
            'meta_query' => array(
                array(
                    'key' => 'parent_story',
                    'value' => $parent_story_id,
                )
            )
        ));
        $prev_chapter = null;
        $next_chapter = null;
        $chapter_number = 1;
        $total_chapters = count($chapters);
        foreach ($chapters as $index => $chapter) {
            if ($chapter->ID == $current_id) {
                $chapter_number = $index + 1;
                if (isset($chapters[$index - 1])) {
                    $prev_chapter = $chapters[$index - 1];
                }
                if (isset($chapters[$index + 1])) {
                    $next_chapter = $chapters[$index + 1];
                }
                break;
            }
        }
        // Reading time (average 170 words per minute)
        $content = wp_strip_all_tags(get_the_content());
        $content = trim(preg_replace('/\s+/', ' ', $content));
        // Count words properly for Hindi + English
        $word_count = preg_match_all('/[\p{L}\p{N}]+/u', $content);
        $reading_time = max(1, ceil($word_count / 170));
?>
<?php
$share = kathasaar_get_share_data();
$share_url = urlencode($share['url']);
$share_title = urlencode($share['title']);
?>
<div class="back-to-all-stories">
<a href="<?php echo site_url('/stories/'); ?>">
 ⟵ All Stories
</a>
</div>
<?php if (is_user_logged_in()):
$user_id = get_current_user_id();
$story_id = get_post_meta(get_the_ID(), 'parent_story', true);
$favorites = get_user_meta($user_id, 'kathasaar_favorites', true);
$is_fav = is_array($favorites) && in_array($story_id, $favorites);
?>
<div class="favorite-wrapper">
<button class="fav-btn <?php echo $is_fav ? 'active' : ''; ?>"
data-story="<?php echo $story_id; ?>">
❤️
</button>
</div>
<?php endif; ?>
<div class="share-box">
<span class="share-label">Share</span>
<div class="share-buttons">
<!-- WhatsApp -->
<a class="share-btn whatsapp"
   onclick="trackShare('whatsapp')"
   href="https://wa.me/?text=<?php echo $share_title . '%20' . $share_url; ?>"
   target="_blank">
   <i class="fab fa-whatsapp"></i>
</a>
<a class="share-btn facebook"
   onclick="trackShare('facebook')"
   href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $share_url; ?>"
   target="_blank">
   <i class="fab fa-facebook-f"></i>
</a>
<a class="share-btn telegram"
   onclick="trackShare('telegram')"
   href="https://t.me/share/url?url=<?php echo $share_url; ?>&text=<?php echo $share_title; ?>"
   target="_blank">
   <i class="fab fa-telegram-plane"></i>
</a>
<!-- Copy -->
<button class="share-btn copy"
onclick="copyLink('<?php echo $share['url']; ?>'); trackShare('copy')">
<i class="fas fa-link"></i>
</button>
</div>
</div>
    <!-- Breadcrumb -->
    <?php if ($parent_story_title) : ?>
        <div class="story-breadcrumb">
            <a href="<?php echo esc_url($parent_story_link); ?>">
                <?php echo esc_html($parent_story_title); ?>
            </a>
            <span class="breadcrumb-separator">›</span>
            <span class="chapter-title"><?php the_title(); ?></span>
        </div>
    <?php endif; ?>
    <!-- Title -->
    <h1 class="story-part-title"><?php the_title(); ?></h1>
<?php
$views = kathasaar_get_story_part_views(get_the_ID());
?>
    <!-- Meta -->
    <div class="story-meta">
        <span>By <a href="<?php echo esc_url( um_user_profile_url( get_the_author_meta('ID') ) ); ?>">
                <?php the_author(); ?>
            </a>
        </span>
        <span class="meta-separator">•</span>
        <span><?php echo get_the_date(); ?></span>
        <span class="meta-separator">•</span>
        <span>Chapter <?php echo $chapter_number; ?> of <?php echo $total_chapters; ?></span>
        <span class="meta-separator">•</span>
        <span><?php echo $reading_time; ?> min read</span>
<span class="meta-separator">•</span>
<span><?php echo number_format($views); ?> views</span>
    </div>
<?php
// Check parent story for mature
$parent_story_id = get_post_meta(get_the_ID(), 'parent_story', true);
$is_mature = has_term('mature', 'genres', $parent_story_id);
?>
<?php if ($is_mature): ?>
<div class="mature-warning-inline">
<strong>आगे बढ़ने से पहले:</strong>
इस कहानी में ऐसे विषय और भाषा-शैली हो सकती है जो हर पाठक के लिए सहज न हो।
कृपया अपनी समझ और विवेक से आगे बढ़ें।
</div>
<?php endif; ?>
<?php if (is_user_logged_in()): ?>
<div class="watermark-overlay">
<?php for ($i=0; $i<10; $i++): ?>
<span><?php echo wp_get_current_user()->user_email; ?></span>
<?php endfor; ?>
</div>
<?php endif; ?>
<div class="font-controls">
<span class="font-label">Text size</span>
<button onclick="changeFontSize(-1)" title="Decrease text size">A-</button>
<button onclick="changeFontSize(1)" title="Increase text size">A+</button>
<button onclick="resetFont()">Reset</button>
</div>
    <!-- Content -->
    <div class="story-part-content">
        <?php the_content(); ?>
    </div>
    <!-- Navigation -->
    <!-- Chapter Navigation -->
<div class="chapter-navigation">
<?php if ($prev_chapter) : ?>
<a href="<?php echo get_permalink($prev_chapter->ID); ?>" class="prev-chapter">
← <?php echo esc_html(get_the_title($prev_chapter->ID)); ?>
</a>
<?php endif; ?>
<?php if ($next_chapter) : ?>
<a href="<?php echo get_permalink($next_chapter->ID); ?>" class="next-chapter">
<?php echo esc_html(get_the_title($next_chapter->ID)); ?> →
</a>
<?php endif; ?>
</div>
<?php kathasaar_related_stories_section(); ?>
    <!-- Comments -->
    <div class="story-comments">
        <?php comments_template(); ?>
    </div>
<?php
    endwhile;
endif;
?>
</div>
<script>
function getMySQLTime() {
    let now = new Date();
    let year = now.getFullYear();
    let month = String(now.getMonth() + 1).padStart(2, '0');
    let day = String(now.getDate()).padStart(2, '0');
    let hours = String(now.getHours()).padStart(2, '0');
    let minutes = String(now.getMinutes()).padStart(2, '0');
    let seconds = String(now.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
let storyPartId = <?php echo get_the_ID(); ?>;
let startTime = getMySQLTime();
function sendReadingLog() {
    let endTime = getMySQLTime();
    let duration = Math.floor((Date.now() - new Date(startTime)) / 1000);
    if (duration < 1) return;
    navigator.sendBeacon(
        "<?php echo admin_url('admin-ajax.php'); ?>",
        new URLSearchParams({
            action: "save_reading_log",
            story_part_id: storyPartId,
            start_time: startTime,
            end_time: endTime,
            duration: duration
        })
    );
    startTime = getMySQLTime();
}
// ✅ heartbeat every 10 sec
setInterval(sendReadingLog, 10000);
// ✅ also send on page exit
window.addEventListener("pagehide", sendReadingLog);
</script>
<?php get_footer(); ?>
 
<?php
get_header();
$story_id = intval($_GET['edit_story']);
?>
<h2 class="editor-title-top">
    <?php echo esc_html(get_the_title($story_id)); ?>
</h2>
<!-- BASIC DETAILS -->
<form method="post" enctype="multipart/form-data">
<div class="editor-block">
<div class="block-header" onclick="toggleBlock(this)">
<span>Basic Details</span>
<span class="arrow">⌄</span>
</div>
<div class="block-body"> <!-- ❌ NO open class (collapsed by default) -->
<!-- IMAGE -->
<div class="field">
<label>Cover Image</label>
<div class="cover-preview">
<?php echo get_the_post_thumbnail($story_id, 'medium'); ?>
</div>
<input type="file" name="cover_image">
</div>
<!-- TITLE -->
<div class="field">
<label>Story Title</label>
<input type="text"
   name="story_title"
   class="editor-title"
   value="<?php echo esc_attr(get_the_title($story_id)); ?>">
</div>
<!-- INTRO -->
<div class="field">
<label>Introduction</label>
<textarea name="story_intro" class="editor-intro"><?php
echo esc_textarea(get_post_field('post_content', $story_id));
?></textarea>
</div>
<!-- GENRES -->
<div class="field">
<label>Select Genres</label>
<div class="genres">
<?php
$genres = get_terms([
'taxonomy' => 'genres',
'hide_empty' => false
]);
$selected = wp_get_post_terms($story_id, 'genres', ['fields' => 'ids']);
if (!empty($genres) && !is_wp_error($genres)) {
foreach ($genres as $g) {
?>
<label class="genre-item">
<input type="checkbox"
   name="genres[]"
   value="<?php echo $g->term_id; ?>"
   <?php checked(in_array($g->term_id, $selected)); ?>>
<span><?php echo esc_html($g->name); ?></span>
</label>
<?php
}
}
?>
</div>
</div>
<button type="submit" name="update_story" class="save-btn">
Save Details
</button>
</div>
</div>
</form>
<?php
$chapters = get_posts([
    'post_type' => 'story_parts',
    'meta_key' => 'parent_story',
    'meta_value' => $story_id,
    'orderby' => 'meta_value_num',
    'meta_key' => 'part_number',
    'order' => 'ASC'
]);
?>
<!-- CHAPTER SECTION -->
<div class="editor-block">
    <div class="block-header open" onclick="toggleBlock(this)">
        <span>Chapters</span>
        <span class="arrow">⌄</span>
    </div>
    <div class="block-body open">
        <div class="chapter-top">
            <h3>All Chapters</h3>
            <form method="post">
                <input type="hidden" name="story_id" value="<?php echo $story_id; ?>">
                <button type="submit" name="add_chapter" class="add-btn">
                    + Add Chapter
                </button>
            </form>
        </div>
        <?php if (!empty($chapters)): ?>
           
            <div class="chapter-list">
                <?php foreach ($chapters as $c): ?>
                   
                    <a href="<?php echo home_url('/write-chapter/?chapter_id=' . $c->ID); ?>" class="chapter-card">
                        <div class="chapter-left">
                            <span class="chapter-number">
                                <?php echo get_post_meta($c->ID, 'part_number', true); ?>
                            </span>
                        </div>
                        <div class="chapter-content">
                            <div class="chapter-title">
                                <?php echo esc_html($c->post_title); ?>
                            </div>
                            <div class="chapter-meta">
                                Tap to edit →
                            </div>
                        </div>
                    </a>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="empty-chapters">
                <p>No chapters yet</p>
                <span>Start writing your first chapter ✍️</span>
            </div>
        <?php endif; ?>
    </div>
</div>
<script>
function toggleBlock(el) {
    const body = el.nextElementSibling;
    const isOpen = body.classList.contains('open');
    // close all blocks (optional for clean UX)
    document.querySelectorAll('.block-body').forEach(b => b.classList.remove('open'));
    document.querySelectorAll('.block-header').forEach(h => h.classList.remove('open'));
    if (!isOpen) {
        body.classList.add('open');
        el.classList.add('open');
    }
}
</script>
<?php get_footer(); ?>
 
 
------
 
On mobile device, and android we should show Read Stories in App, or Download Android App, whatever best suits best.
 
https://play.google.com/store/apps/details?id=com.kathasaar.app&hl=en_IN


Thought for 12s
I'll add a clean, non-intrusive mobile-only sticky banner that appears on Android (and mobile in general) encouraging users to open/read stories in the Kathasaar app.

What will be added:
A fixed bottom banner (only on mobile ≤ 768px)
Text: "Read stories in the Kathasaar App"
Button: "Open App" → links to your Play Store
Easy dismiss (X) that remembers for the session
Soft orange branding matching your theme
1. Add this CSS (in your child theme style.css)
/* ===== MOBILE APP BANNER ===== */
.kathasaar-app-banner {
  display: none; /* hidden by default */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #f47622, #e65c00);
  color: #fff;
  padding: 12px 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  font-family: 'Noto Sans', sans-serif;
}

.kathasaar-app-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.kathasaar-app-banner-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.kathasaar-app-banner-btn {
  background: #fff;
  color: #e65c00;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 50px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.kathasaar-app-banner-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

/* Show only on mobile */
@media (max-width: 768px) {
  .kathasaar-app-banner {
    display: block;
  }
  
  /* Add bottom padding so content doesn't hide behind banner */
  body {
    padding-bottom: 70px;
  }
}

/* ===== MOBILE APP BANNER (Improved) ===== */
.kathasaar-app-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #f47622, #e65c00);
  color: #fff;
  padding: 11px 14px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.18);
  font-family: 'Noto Sans', sans-serif;
}

.kathasaar-app-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.kathasaar-app-banner-text {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
}

.kathasaar-app-banner-btn {
  background: #fff;
  color: #e65c00;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 50px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.kathasaar-app-banner-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.9);
  font-size: 22px;
  line-height: 1;
  padding: 0 2px 0 6px;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .kathasaar-app-banner {
    display: block;
  }
  body {
    padding-bottom: 64px;
  }
}