/* user-style.css (switch-aware, compact, deduped) */

/* Featured images */
.aspect-wrapper{display:block;position:relative;overflow:hidden;border-radius:6px}
.aspect-ratio{position:relative;width:100%;padding-bottom:56.25%;background:var(--base-3)}
.aspect-ratio img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}

/* SEO box (theme-switch aware) */
.seo-box {
  background: var(--base-3);
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  margin: 2rem 0;
  position: relative;
  font-size: .95rem;
  color: var(--text);
}

/* Collapsible description */
.seo-description {
  max-height: 120px;
  overflow: hidden;
  position: relative;
  transition: max-height .4s ease;
  line-height: 1.7;
}

/* Fade-out tail that adapts to theme */
.seo-description::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, var(--base-3));
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Expanded state */
.seo-description.expanded {
  max-height: 1000px;
}

/* Hide tail when expanded */
.seo-description.expanded::after {
  opacity: 0;
}

/* Toggle button */
.seo-toggle {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: .45rem 1rem;
  margin-top: .75rem;
  border-radius: 6px;
  font-size: .9rem;
  cursor: pointer;
  transition: background .2s ease;
}

/* Hover + focus styles */
.seo-toggle:hover {
  background: color-mix(in srgb, var(--brand) 85%, #000 15%);
}

.seo-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 70%, #fff 30%);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .seo-description {
    transition: none;
  }
  .seo-description::after {
    transition: none;
  }
  .seo-toggle {
    transition: none;
  }
}


/* Single Anime: layout */
#anime-single{width:100%;margin:0 auto;padding:2rem 1rem;font-family:system-ui,sans-serif}
.anime-info{width:100%;margin:0 auto;padding:2rem 1rem;font-family:system-ui,sans-serif}

/* Single Anime: heading & text */
#anime-single h1{font-size:1.5rem;font-weight:800;color:var(--text)}
@media (min-width:768px){#anime-single h1{font-size:2.25rem}}
#anime-single p.italic{color:var(--muted);font-style:italic}
#anime-single ul li strong{font-weight:600;color:var(--text)}
.anime-meta-list strong{font-weight:600;color:var(--text)}

/* Single Anime: badges & cta */
#anime-single .badge{background:color-mix(in srgb,var(--brand) 18%,#fff 82%);color:var(--brand);padding:.25rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:600;display:inline-block;margin:.25rem .25rem 0 0;border:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
#anime-single .badge-studio{background:color-mix(in srgb,#7c3aed 18%,#fff 82%);color:#7c3aed;border-color:color-mix(in srgb,#7c3aed 35%,transparent)}
#anime-single .watch-now{display:inline-flex;align-items:center;padding:.5rem 1rem;background:var(--brand);color:#fff;border-radius:.5rem;text-decoration:none;font-weight:600;margin-top:1rem;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:background-color .2s}
#anime-single .watch-now:hover{background:color-mix(in srgb,var(--brand) 85%,#000 15%)}
#anime-single .prose{line-height:1.7;color:var(--text);margin-top:2rem}

/* Single Anime: media blocks */
.watch-single{display:flex;justify-content:center;align-items:center;height:auto;margin-top:1rem;text-align:center}
.img-single{display:flex;justify-content:center;align-items:center;height:auto}
#anime-single .img-fluid{max-width:40%}
@media (min-width:768px){#anime-single .img-fluid{max-width:80%}.episode-img{max-width:40%}}

/* Single Anime: grid */
#anime-single .grid{display:grid;grid-template-columns:1fr;gap:1.5rem;background: var(--bg-anime-info);}
#anime-single .md\:col-span-1{max-width:100%}
@media (min-width:768px){#anime-single .grid{grid-template-columns:1fr 3fr}}

/* Single Anime: meta list */
.anime-meta-list{display:grid;grid-template-columns:1fr;gap:10px 30px;padding:0;margin:20px 0;list-style:none}
@media (min-width:768px){.anime-meta-list{grid-template-columns:repeat(2,1fr)}}
.anime-meta-list li{display:flex;gap:6px;line-height:1.5;font-size:15px}

/* Single Anime: synopsis */
.synopsis-single{background:var(--bg-anime-info);padding:1.5rem;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-bottom:2rem;transition:background .3s}
.synopsis-single h2{font-size:1.6rem;margin-bottom:1rem;border-left:4px solid var(--brand);padding-left:10px;font-weight:600;color:var(--text)}
.synopsis-content{font-size:1rem;line-height:1.8;color:var(--text);max-height:220px;overflow:hidden;position:relative;transition:max-height .4s}
.synopsis-content::after{content:"";position:absolute;bottom:0;left:0;right:0;height:4rem;background:linear-gradient(to bottom,transparent,var(--base-3));pointer-events:none;transition:opacity .3s}
.synopsis-content.expanded{max-height:10000px}
.synopsis-content.expanded::after{opacity:0}
.synopsis-toggle{display:inline-block;margin-top:1rem;background:var(--brand);color:#fff;border:none;padding:.5rem 1.2rem;border-radius:6px;font-size:.95rem;cursor:pointer;transition:background .2s}
.synopsis-toggle:hover{background:color-mix(in srgb,var(--brand) 85%,#000 15%)}

/* Bookmarks: button */
.bookmark-button{margin:12px 0;padding:8px 14px;background:var(--brand);color:#fff;font-size:14px;border:none;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s}
.bookmark-button:hover{background:color-mix(in srgb,var(--brand) 85%,#000 15%)}
.bookmark-button.bookmarked{background:#ff9800}
.bookmark-icon{fill:currentColor;transition:fill .3s}
.bookmark-label{font-weight:500}

/* Episode: wrapper + header */
.episode-wrapper{background:var(--base-2);border:1px solid var(--line);border-radius:12px;padding:.75rem;box-shadow:0 2px 6px rgba(0,0,0,.05);margin-bottom:2rem}
.series-header{display:flex;align-items:center;background:var(--base-2);border-radius:10px;padding:1rem;box-shadow:0 1px 4px rgba(0,0,0,.05);margin-bottom:1.5rem}
.series-header img{width:60px;height:60px !important;object-fit:cover;border-radius:50% !important;margin-right:1rem}
.series-header h3{margin:0;font-size:1.2rem;color:var(--text)}
.series-header span{font-size:.95rem;color:var(--muted)}

/* Episode: search */
#episode-search{width:100%;padding:.65rem 1rem;margin-bottom:1rem;font-size:1rem;border:1px solid var(--line);border-radius:.5rem;background:var(--base-2);color:var(--text)}
#episode-list{max-height:480px;overflow-y:auto;padding-right:5px}
#episode-list::-webkit-scrollbar{width:6px}
#episode-list::-webkit-scrollbar-thumb{background-color:var(--line);border-radius:4px}

/* Episode: list + card */
.episode-list{display:flex;flex-direction:column;gap:.75rem}
.episode-list img{border-radius:2px !important;border:2px solid transparent;transition:border-color .3s}
.episode-card{position:relative;display:flex;align-items:center;background:var(--base-2);border-radius:12px;padding:10px;transition:background .3s,transform .3s;overflow:hidden;text-decoration:none;color:var(--text);border:1px solid var(--line)}
.episode-card:hover{background:var(--base-3);transform:translateY(-2px)}
.episode-card.current{background-color:color-mix(in srgb,var(--brand) 15%,var(--base-2) 85%);border-left:4px solid var(--brand)}
.episode-card img{flex-shrink:0;width:130px;max-width:30%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-right:1rem}
.episode-card:hover img{border-color:#f59e0b !important}
.episode-info{flex-grow:1}
.episode-info h4{margin:0;font-size:1rem;font-weight:600;color:var(--text)}
.episode-info p{margin:.25rem 0 0;font-size:.85rem;color:var(--muted)}
.episode-card .play-icon{font-size:1.5rem;color:#3b82f6;margin-left:auto;align-self:center}

/* Episode: thumb overlay */
.episode-thumb{position:relative;width:130px;height:auto;aspect-ratio:16/9;border-radius:8px;overflow:hidden;flex-shrink:0;margin-right:1rem}
.episode-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.ep-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;border-radius:8px;pointer-events:none}
.ep-overlay .play-icon{color:#fff;font-size:20px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}

@media (max-width:640px){
  .episode-card{flex-direction:row;align-items:center}
  .episode-card img{width:auto;max-width:25%;margin:0 1rem 0 0}
  .episode-info{flex:1}
  .episode-card .play-icon{width:90%}
}

/* Bookmark page */
.bookmark-container{width:70%}
.bookmark-wrapper{max-width:960px;margin:20px auto;padding:0 15px;overflow-x:auto}
.bookmark-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700;font-size:20px;color:var(--text)}
.bookmark-heading i{color:gold;margin-right:5px}
.clear-bookmark-btn{background:#dc3545;color:#fff;border:none;padding:6px 12px;border-radius:5px;cursor:pointer;font-weight:700;transition:background .2s}
.clear-bookmark-btn:hover{background:#b02a37}

.bookmark-table{width:100%;border-collapse:collapse;background:var(--base-2);border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.1);border:1px solid var(--line)}
.bookmark-table thead{background:var(--brand);color:#fff;text-align:left}
.bookmark-table th,
.bookmark-table td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px;color:var(--text)}
.bookmark-table th{font-weight:600}
.bookmark-table td{background:var(--base-2)}
.bookmark-table tr:last-child td{border-bottom:none}

.bookmark-title{display:flex;align-items:center;gap:10px}
.bookmark-title img{width:45px;height:60px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.bookmark-title a{font-weight:700;font-size:14px;color:var(--brand);text-decoration:none}
.bookmark-title a:hover{text-decoration:underline}
.bookmark-time{font-size:12px;color:var(--muted)}

.badge-status{padding:4px 10px;border-radius:20px;font-size:13px;font-weight:600;display:inline-block;color:#fff;background:gray}
.badge-status.ongoing{background:#28a745}
.badge-status.completed{background:#dc3545}

.remove-bookmark-btn{background:color-mix(in srgb,#dc3545 12%,#fff 88%);color:#721c24;border:1px solid color-mix(in srgb,#dc3545 35%,transparent);border-radius:5px;padding:4px 8px;font-size:14px;cursor:pointer;transition:.2s}
.remove-bookmark-btn:hover{background-color:color-mix(in srgb,#dc3545 18%,#fff 82%);color:#721c24}

@media (max-width:600px){
  .bookmark-table thead{display:none}
  .bookmark-table,
  .bookmark-table tbody,
  .bookmark-table tr,
  .bookmark-table td{display:block;width:100%}
  .bookmark-table tr{margin-bottom:15px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--base-2)}
  .bookmark-table td{padding:10px;text-align:right;position:relative}
  .bookmark-table td::before{content:attr(data-label);position:absolute;left:10px;font-weight:700;text-align:left;color:var(--muted)}
}

/* Live search */
.live-search-results{position:absolute;top:100%;left:0;z-index:9999;width:100%;max-width:1200px;max-height:400px;background:var(--base-2);border:1px solid var(--line);border-radius:4px;box-shadow:0 4px 10px rgba(0,0,0,.15);overflow-y:auto;display:none;color:var(--text)}
.live-search-results a{display:flex;padding:10px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}
.live-search-results a:hover{background:var(--base-3)}
.live-search-results img{width:60px;height:auto;margin-right:10px;border-radius:3px;background:var(--base-3)}
.live-search-results .info{text-align:left}
.live-search-results .info h4{font-size:14px;margin:0 0 5px;font-weight:500;color:var(--text)}
.live-search-results .info small{font-size:12px;color:var(--muted);display:block;margin-top:5px}
.live-search-results .no-results{padding:12px;color:var(--muted);text-align:center;font-style:italic}
#search-loading{min-height:40px;visibility:hidden;padding:10px;color:var(--muted);font-style:italic;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
#search-loading.active{visibility:visible}
.spinner{width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--text);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:768px){
  .live-search-results{left:50%;transform:translateX(-50%);width:98vw;max-width:500px}
}

/* User profile: nick, badge, rank */
.user-info{display:grid}
img.badge-icon{width:18px !important;height:18px !important;object-fit:contain;border-radius:0}
.nickname-mask-text{display:inline-block;font-weight:700;font-size:16px;background-size:cover;background-position:center;background-repeat:no-repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;line-height:1.4;max-width:100%;font-family:'Parisienne',cursive}
.badge-text{font-family:cursive;font-weight:700;font-style:italic;letter-spacing:1px;color:#fff;text-shadow:0 0 1px rgba(0,0,0,.3)}
[class*="rank-"]{background-repeat:no-repeat;background-position:center;background-size:cover}
[class^="rank-"]{background-repeat:no-repeat;background-position:center;background-size:cover}

.rank-commoner{background-color:#898989}
.rank-dou-fighter{background-color:#d8a9d9}
.rank-dou-master{background-color:#a9d9cf}
.rank-dou-grandmaster{background-color:#67ca60}
.rank-dou-spirit{background-color:#e0e719}
.rank-dou-king{background-color:#2bff03}
.rank-dou-emperor{background-color:#ff0303}

.rank-dou-sect{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/gif/dou-sect.gif')}
.rank-dou-venerate{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/gif/dou-venerate.gif')}
.rank-dou-saint{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/gif/dou-saint.gif')}
.rank-dou-god{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/gif/dou-god.gif')}
.rank-heavenly-emperor{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/gif/heavenly-emperor.gif')}
.rank-admin{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/gif/admin.gif')}

/* VIP offer highlight */
.vip-offer-highlight{display:inline-block;padding:8px 14px;font-weight:700;font-size:1rem;border-radius:10px;background:color-mix(in srgb,var(--brand) 8%,#fff 92%);color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);text-decoration:none;animation:pulseZoom 1.5s ease-in-out infinite;transition:.3s}
.vip-offer-highlight:hover{background:color-mix(in srgb,var(--brand) 12%,#fff 88%);box-shadow:0 0 12px color-mix(in srgb,var(--brand) 35%,transparent);transform:scale(1.02)}
html[data-theme="dark"] .vip-offer-highlight{background:color-mix(in srgb,#ffd700 8%,var(--base-2) 92%);color:#ffdd33;border-color:color-mix(in srgb,#ffd700 25%,transparent)}

/* Avatar/frames */
.avatar-wrapper{width:48px;height:48px;position:relative;flex-shrink:0}
.avatar-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:none !important}
.avatar-wrapper::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:250%;height:250%;background-size:cover;background-repeat:no-repeat;pointer-events:none;z-index:2}
.frame-basic::after{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/frames/basic.png')}
.frame-silver::after{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/frames/silver.png')}
.frame-gold::after{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/frames/gold.png')}
.frame-platinum::after{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/frames/platinum.png')}
.frame-diamond::after{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/frames/diamond.png')}
.frame-legend::after{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/frames/legend.png')}
.frame-admin::after{background-image:url('/wp-content/themes/generatepress-child/user-system/assets/frames/admin.png')}

.vip-basic{background:linear-gradient(180deg,#f8fafc,#eef2f7);color:#0f172a;border-color:#e5e7eb}
.vip-basic .vip-dot{background:#9ca3af}
.vip-silver{background:linear-gradient(180deg,#f6f7fb,#e9edf5);color:#0f172a;border-color:#e5e7eb}
.vip-silver .vip-dot{background:#a1a1aa}
.vip-gold{background:linear-gradient(180deg,#fff4cc,#ffe3a7);color:#0f172a;border-color:#f5d27a}
.vip-gold .vip-dot{background:#f59e0b}
.vip-platinum{background:linear-gradient(180deg,#eef5ff,#dce8ff);color:#0f172a;border-color:#c7d7ff}
.vip-platinum .vip-dot{background:#60a5fa}
.vip-diamond{background:linear-gradient(180deg,#e6fbff,#ccf6ff);color:#0f172a;border-color:#99e9f8}
.vip-diamond .vip-dot{background:#06b6d4}
.vip-legend{background:linear-gradient(180deg,#fdf2ff,#f6d9ff);color:#0f172a;border-color:#e9b9ff}
.vip-legend .vip-dot{background:#a855f7}
.vip-admin{background:linear-gradient(180deg,#eef2ff,#dae2ff);color:#0f172a;border-color:#c7d2fe}
.vip-admin .vip-dot{background:#6366f1}

/* Avatar selection */
.avatar-select{width:17%;border:2px solid var(--brand);transition:transform .2s}
.avatar-select:hover{transform:scale(1.5);border:3px solid;border-image:linear-gradient(45deg,#ff00cc,#3333ff) 1}
.avatar-selected{transform:scale(1.5);border:3px solid;border-image:linear-gradient(45deg,#ff00cc,#3333ff) 1;box-shadow:0 0 6px rgba(0,0,0,.2);border-radius:10px}

/* Avatar rank */
.avatar-rank{position:relative;width:80px;height:80px;display:inline-block}
.avatar-img{width:100% !important;height:100% !important;border-radius:50%;object-fit:cover;border:2px solid transparent;z-index:1;position:relative}
.rank-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}

/* VIP badge / button */
.vip-label{display:inline-block;padding:4px 12px;border-radius:20px;font-weight:700;box-shadow:0 0 0 1px currentColor inset}
.upgrade-vip-btn{background:linear-gradient(45deg,#fcb045,#fd1d1d);border:none;border-radius:10px;color:#fff}

/* Comments (user-system context) */
.comment-actions{gap:.25rem !important;color:var(--muted);font-size:14px}
.comment-content-box{padding:10px 14px;border-radius:8px;font-size:15px;background:var(--base-2);color:var(--text);border:1px solid var(--line)}
.comment-content-box.user-content{background:color-mix(in srgb,var(--brand) 10%,var(--base-2) 90%);border:1px solid var(--brand);color:var(--text)}
.comment-content-box.admin-content{background:color-mix(in srgb,#e74c3c 10%,var(--base-2) 90%);border:1px solid #e74c3c;color:color-mix(in srgb,#e74c3c 80%,#000 20%);font-weight:500}
.comment-content-box p{margin-bottom:0 !important}
.comment-admin{background:color-mix(in srgb,#e74c3c 8%,var(--base-2) 92%);border-left:4px solid #e74c3c;padding:12px;border-radius:8px;box-shadow:0 2px 4px rgba(231,76,60,.1)}
.comment-admin .nickname{color:#e74c3c;font-weight:700}
.comment-user{background:var(--base-3);border-left:4px solid var(--brand);padding:5px;border-radius:8px}
.like-btn-wrap.reacted .like-button{background:var(--brand);color:#fff}
.comment-children.mt-2{margin-left:-35px}

/* Emoji reactions */
.emoji-summary{font-size:16px;font-weight:500;color:var(--text);line-height:1}
.emoji-summary-stacked{font-size:16px;font-weight:500;color:var(--text);line-height:1}
.emoji-icons{font-size:18px;display:inline-block}
.emoji-count{font-size:14px;color:var(--muted);font-weight:700}
.emoji-stack-wrap{display:flex;align-items:center;position:relative}
.emoji-icon-stack{background:var(--base-2);border:1px solid var(--line);border-radius:50%;padding:2px;width:24px;height:24px;font-size:16px;display:flex;align-items:center;justify-content:center;position:relative;margin-left:-8px;box-shadow:0 0 1px rgba(0,0,0,.2)}
.emoji-icon-stack:first-child{margin-left:0;z-index:3}
.emoji-icon-stack:nth-child(2){z-index:2}
.emoji-icon-stack:nth-child(3){z-index:1}

/* Animation */
@keyframes pulseZoom{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}

/* User tabs */
.nav-tabs-cs{width:100%;padding:0}
.nav-tabs{display:flex;flex-wrap:wrap;width:100%;margin:0 auto;padding:0;border-bottom:2px solid var(--line);overflow:hidden}
.nav-tabs .nav-item{flex:1 0 25%;text-align:center;margin-bottom:-1px;border-right:1px solid var(--line)}
.nav-tabs .nav-item:last-child{border-right:none}
.nav-tabs .nav-link{display:block;padding:12px 0;font-size:1.1rem;font-weight:600;background:var(--base-3);color:var(--muted);border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s}
.nav-tabs .nav-link:hover{background:color-mix(in srgb,var(--base-3) 70%,#000 30%);color:var(--text)}
.nav-tabs .nav-link.active{color:#fff;background:var(--brand);border-color:var(--brand);font-weight:700}
@media (max-width:767.98px){
  .nav-tabs{border-bottom:none}
  .nav-tabs .nav-item{flex:1 1 50%;margin-bottom:10px;border-right:none !important}
  .nav-tabs .nav-link{font-size:1rem;padding:10px 0}
}