/*
Theme Name: PagalWorld
Theme URI: https://pagalworld.is
Description: Exact PagalWorld mobile-first music download theme - dark header, 3-col grid, orange download buttons, section bars.
Version: 2.0.0
Author: PagalWorld Theme
Text Domain: pagalworld
Tags: music, download, entertainment, mobile, dark
*/

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --bg:          #111111;
  --bg2:         #1a1a1a;
  --bg3:         #222222;
  --card-bg:     #1c1c1c;
  --accent:      #e8490a;
  --accent2:     #ff5500;
  --accent-dark: #b33a08;
  --gold:        #f5a623;
  --text:        #eeeeee;
  --text2:       #bbbbbb;
  --text3:       #888888;
  --border:      #2c2c2c;
  --section-bar: linear-gradient(90deg,#c0392b 0%,#e74c3c 40%,#e8490a 100%);
  --font:        'Arial','Helvetica',sans-serif;
  --radius:      4px;
  --thumb-ratio: 56.25%; /* 16:9 */
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;line-height:1.5;min-height:100vh;overflow-x:hidden}
a{color:var(--text);text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button,input,select,textarea{font-family:var(--font);font-size:13px;border:none;outline:none}
button{cursor:pointer;background:none}

/* ============================================================
   TOP HEADER BAR
   ============================================================ */
.pw-topbar{
  background:#0a0a0a;
  padding:5px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  position:sticky;top:0;z-index:200;
  border-bottom:1px solid #1a1a1a;
}
.pw-logo-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pw-logo-img{width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0}
.pw-logo-text{font-size:15px;font-weight:bold;color:#fff;letter-spacing:-0.3px;white-space:nowrap}
.pw-logo-text span{color:var(--accent)}

/* Search */
.pw-search-wrap{flex:1;display:flex;min-width:0}
.pw-search-wrap input{
  flex:1;background:#222;border:1px solid #333;color:#eee;
  padding:6px 10px;border-radius:3px 0 0 3px;font-size:12px;
  min-width:0;
}
.pw-search-wrap input::placeholder{color:#555}
.pw-search-wrap button{
  background:var(--accent);color:#fff;padding:6px 10px;
  border-radius:0 3px 3px 0;font-size:12px;white-space:nowrap;
}

/* Social icons in header */
.pw-social{display:flex;gap:6px;flex-shrink:0}
.pw-social a{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;color:#fff;text-decoration:none;
}
.pw-social a.fb{background:#1877f2}
.pw-social a.yt{background:#ff0000}
.pw-social a.tg{background:#0088cc}
.pw-social a.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}

/* ============================================================
   NAV MENU (horizontal scroll)
   ============================================================ */
.pw-nav{
  background:#0d0d0d;
  border-bottom:2px solid var(--accent);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
}
.pw-nav::-webkit-scrollbar{display:none}
.pw-nav ul{display:inline-flex;padding:0}
.pw-nav ul li a{
  display:block;padding:8px 14px;font-size:11px;font-weight:bold;
  text-transform:uppercase;letter-spacing:0.5px;color:#bbb;
  border-right:1px solid #1a1a1a;white-space:nowrap;
  transition:background 0.15s,color 0.15s;
}
.pw-nav ul li a:hover,
.pw-nav ul li.current-menu-item>a,
.pw-nav ul li.current-menu-ancestor>a{background:var(--accent);color:#fff}
/* dropdown */
.pw-nav ul li{position:relative;display:inline-block}
.pw-nav ul li ul{
  display:none;position:absolute;top:100%;left:0;
  background:#1a1a1a;border:1px solid var(--accent);
  min-width:160px;z-index:300;white-space:nowrap;
}
.pw-nav ul li:hover>ul{display:block}
.pw-nav ul li ul li{display:block}
.pw-nav ul li ul li a{border-right:none;border-bottom:1px solid #2a2a2a;padding:7px 12px;font-size:11px;text-transform:none;letter-spacing:0}
.pw-nav ul li ul li a:hover{background:var(--accent);color:#fff}

/* ============================================================
   WRAPPER
   ============================================================ */
.pw-wrap{max-width:480px;margin:0 auto;padding:0}

/* ============================================================
   SECTION HEADER BAR  (orange-red gradient, like screenshot)
   ============================================================ */
.pw-sec-bar{
  background:var(--section-bar);
  padding:7px 10px;
  font-size:12px;font-weight:bold;color:#fff;
  text-transform:uppercase;letter-spacing:0.5px;
  display:flex;align-items:center;justify-content:space-between;
  margin-top:6px;
}
.pw-sec-bar a{color:#ffd;font-size:10px;font-weight:normal;text-transform:none;letter-spacing:0;opacity:0.9}
.pw-sec-bar a:hover{text-decoration:underline}

/* ============================================================
   FEATURED LARGE CARD (top of page / hero)
   ============================================================ */
.pw-featured{
  position:relative;overflow:hidden;
  background:#111;
  display:block;
}
.pw-featured img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.pw-featured-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent 0%,rgba(0,0,0,0.85) 100%);
  padding:20px 10px 8px;
}
.pw-featured-title{
  font-size:13px;font-weight:bold;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.9);
  margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pw-featured-meta{font-size:10px;color:#ccc}

/* ============================================================
   3-COLUMN GRID  (main layout from screenshot)
   ============================================================ */
.pw-grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--border);
}
.pw-grid3-item{
  background:var(--card-bg);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.pw-grid3-item a{display:block;color:var(--text);text-decoration:none}

/* Thumbnail */
.pw-thumb-wrap{
  position:relative;
  width:100%;
  padding-top:var(--thumb-ratio);
  background:#111;
  overflow:hidden;
}
.pw-thumb-wrap img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.3s;
}
.pw-grid3-item:hover .pw-thumb-wrap img{transform:scale(1.04)}

/* Play overlay icon */
.pw-play-icon{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:28px;height:28px;
  background:rgba(232,73,10,0.85);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;
  opacity:0;transition:opacity 0.2s;
  pointer-events:none;
}
.pw-grid3-item:hover .pw-play-icon{opacity:1}

/* NEW / HOT badge */
.pw-badge{
  position:absolute;top:4px;left:4px;
  font-size:8px;font-weight:bold;padding:2px 5px;
  border-radius:2px;text-transform:uppercase;color:#fff;letter-spacing:0.5px;
}
.pw-badge-new{background:#27ae60}
.pw-badge-hot{background:#e74c3c}
.pw-badge-hq{background:#2980b9}

/* Quality label bottom-right of thumb */
.pw-quality{
  position:absolute;bottom:3px;right:3px;
  background:rgba(0,0,0,0.75);
  color:#fff;font-size:8px;padding:1px 4px;border-radius:2px;
}

/* Card title under thumb */
.pw-card-title{
  font-size:10px;color:var(--text2);
  padding:4px 5px 5px;
  line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  flex:1;
}

/* ============================================================
   ORANGE DOWNLOAD BUTTON  (full-width, below each grid row)
   ============================================================ */
.pw-dl-strip{
  background:linear-gradient(90deg,var(--accent-dark),var(--accent2));
  color:#fff;
  font-size:11px;font-weight:bold;
  text-align:center;
  padding:7px 10px;
  display:flex;align-items:center;justify-content:center;
  gap:6px;
  text-transform:uppercase;letter-spacing:0.5px;
  cursor:pointer;
  text-decoration:none;
  margin-top:2px;
  transition:filter 0.15s;
}
.pw-dl-strip:hover{filter:brightness(1.1);color:#fff}
.pw-dl-strip .arrow{font-size:14px}

/* ============================================================
   DOWNLOAD PAGE — SINGLE FILE
   ============================================================ */
/* Big cover */
.pw-single-cover{
  width:100%;position:relative;
  background:#111;
}
.pw-single-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pw-single-cover-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.9));
  padding:30px 10px 10px;
}
.pw-single-title{
  font-size:15px;font-weight:bold;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,1);
  margin-bottom:4px;
}

/* Info table */
.pw-info-table{width:100%;border-collapse:collapse;background:var(--bg2)}
.pw-info-table tr{border-bottom:1px solid var(--border)}
.pw-info-table td{padding:6px 10px;font-size:11px;vertical-align:top}
.pw-info-table td:first-child{color:var(--text3);width:90px;font-weight:bold;white-space:nowrap}
.pw-info-table td:last-child{color:var(--text2)}
.pw-info-table a{color:var(--accent2)}

/* Star rating */
.pw-stars{color:#f5a623;font-size:13px;letter-spacing:1px}

/* Online player */
.pw-player{
  background:#0d0d0d;
  border-top:2px solid var(--accent);
  padding:10px;
}
.pw-player-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pw-player-art{width:42px;height:42px;border-radius:3px;object-fit:cover;background:#222;flex-shrink:0}
.pw-player-meta{flex:1;min-width:0}
.pw-player-song{font-size:12px;font-weight:bold;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-player-artist{font-size:10px;color:#777}
.pw-player-controls{display:flex;align-items:center;gap:6px}
.pw-ctrl-btn{color:#888;font-size:16px;padding:4px;transition:color 0.15s}
.pw-ctrl-btn:hover{color:var(--accent)}
.pw-ctrl-play{
  width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
  transition:background 0.15s;
}
.pw-ctrl-play:hover{background:var(--accent-dark)}
.pw-prog-wrap{flex:1;display:flex;align-items:center;gap:5px}
.pw-prog-bar{
  flex:1;height:3px;background:#333;border-radius:2px;cursor:pointer;
  position:relative;overflow:hidden;
}
.pw-prog-fill{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width 0.1s}
.pw-time{font-size:9px;color:#555;white-space:nowrap}
.pw-vol-wrap{display:flex;align-items:center;gap:4px}
.pw-vol-wrap input[type=range]{width:50px;accent-color:var(--accent)}

/* Download buttons on single page */
.pw-dl-list{background:var(--bg2)}
.pw-dl-item{
  display:flex;align-items:center;
  border-bottom:1px solid var(--border);
  padding:8px 10px;gap:10px;
}
.pw-dl-item-info{flex:1}
.pw-dl-item-label{font-size:12px;font-weight:bold;color:var(--text)}
.pw-dl-item-size{font-size:10px;color:var(--text3)}
.pw-dl-btn{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-size:11px;font-weight:bold;
  padding:7px 14px;border-radius:3px;white-space:nowrap;
  transition:filter 0.15s;
}
.pw-dl-btn:hover{filter:brightness(1.15);color:#fff}

/* Lyrics */
.pw-lyrics-box{background:var(--bg2);padding:10px}
.pw-lyrics-text{
  font-size:12px;color:#999;line-height:2;
  max-height:220px;overflow:hidden;
  transition:max-height 0.4s;
}
.pw-lyrics-text.open{max-height:2000px}
.pw-lyrics-more{
  display:block;text-align:center;padding:7px;
  background:#1a1a1a;color:var(--accent);font-size:11px;
  border-top:1px solid var(--border);cursor:pointer;
}

/* Related grid on single */
.pw-related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:var(--border);
}

/* ============================================================
   CATEGORY ARCHIVE
   ============================================================ */
.pw-archive-intro{
  background:var(--bg2);
  padding:10px;
  border-bottom:1px solid var(--border);
}
.pw-archive-intro h1{font-size:14px;color:#fff;margin-bottom:4px}
.pw-archive-intro p{font-size:11px;color:#777}
.pw-archive-stats{display:flex;gap:12px;margin-top:6px;font-size:10px;color:#666}
.pw-archive-stats strong{color:var(--accent2)}

/* Sub-cat pills */
.pw-subcat-pills{
  display:flex;flex-wrap:wrap;gap:5px;padding:8px 10px;
  background:var(--bg2);border-bottom:1px solid var(--border);
}
.pw-subcat-pill{
  background:#222;border:1px solid #333;color:#999;
  padding:3px 9px;font-size:10px;border-radius:20px;
  transition:all 0.15s;white-space:nowrap;
}
.pw-subcat-pill:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ============================================================
   PAGINATION
   ============================================================ */
.pw-paging{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:4px;padding:12px 10px;background:var(--bg2);
  border-top:1px solid var(--border);
  margin-top:2px;
}
.pw-paging a,.pw-paging span{
  min-width:30px;height:28px;display:inline-flex;
  align-items:center;justify-content:center;
  background:#222;border:1px solid #333;color:#999;
  font-size:11px;border-radius:2px;padding:0 6px;
}
.pw-paging .current,.pw-paging a:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.pw-search-header{padding:8px 10px;background:var(--bg2);border-bottom:1px solid var(--border)}
.pw-search-header h1{font-size:13px;color:#ccc}
.pw-search-header strong{color:var(--accent2)}

/* ============================================================
   COMMENTS
   ============================================================ */
.pw-comment-wrap{background:var(--bg2);padding:0}
.pw-comment-item{
  display:flex;gap:8px;padding:8px 10px;
  border-bottom:1px solid var(--border);
}
.pw-comment-av{
  width:30px;height:30px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;flex-shrink:0;font-weight:bold;
}
.pw-comment-body{flex:1}
.pw-comment-author{font-size:11px;font-weight:bold;color:var(--accent2)}
.pw-comment-date{font-size:9px;color:#555;margin-left:6px}
.pw-comment-txt{font-size:11px;color:#999;line-height:1.5;margin-top:2px}
.pw-comment-form-wrap{padding:10px;background:var(--bg2)}
.pw-comment-form-wrap textarea{
  width:100%;background:#111;border:1px solid #333;color:#eee;
  padding:8px;border-radius:3px;resize:vertical;min-height:70px;
  font-size:11px;margin-bottom:6px;
}
.pw-comment-form-wrap input[type=text],
.pw-comment-form-wrap input[type=email]{
  width:100%;background:#111;border:1px solid #333;color:#eee;
  padding:7px 10px;border-radius:3px;font-size:11px;margin-bottom:6px;
}
.pw-comment-submit{
  background:var(--accent);color:#fff;
  padding:7px 18px;border-radius:3px;font-size:12px;font-weight:bold;
}

/* ============================================================
   FOOTER
   ============================================================ */
.pw-footer{
  background:#0a0a0a;border-top:2px solid var(--accent);
  margin-top:8px;padding-bottom:56px;/* space for bottom nav */
}
.pw-footer-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;border-bottom:1px solid #1a1a1a;
}
.pw-footer-col{padding:12px 10px;border-right:1px solid #1a1a1a}
.pw-footer-col:last-child,.pw-footer-col:nth-child(2){border-right:none}
.pw-footer-col h4{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid #1a1a1a}
.pw-footer-col ul li{margin-bottom:4px}
.pw-footer-col ul li a{font-size:10px;color:#555;display:flex;align-items:center;gap:4px}
.pw-footer-col ul li a:hover{color:var(--accent)}
.pw-footer-col ul li a::before{content:'›';color:var(--accent)}
.pw-footer-bottom{padding:10px;text-align:center;font-size:10px;color:#333}
.pw-footer-bottom a{color:#444}

/* ============================================================
   BOTTOM NAV (mobile — fixed)
   ============================================================ */
.pw-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:#0d0d0d;border-top:1px solid #222;
  display:flex;align-items:stretch;
  max-width:480px;margin:0 auto;
}
.pw-bnav-item{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:5px 2px;font-size:8px;color:#555;
  gap:2px;border-right:1px solid #1a1a1a;
  transition:color 0.15s;
}
.pw-bnav-item:last-child{border-right:none}
.pw-bnav-item.active,.pw-bnav-item:hover{color:var(--accent)}
.pw-bnav-item .icon{font-size:18px}

/* ============================================================
   AD PLACEHOLDERS
   ============================================================ */
.pw-ad{
  background:repeating-linear-gradient(45deg,#111,#111 4px,#131313 4px,#131313 8px);
  border:1px dashed #222;display:flex;align-items:center;justify-content:center;
  color:#333;font-size:10px;text-align:center;
}
.pw-ad-banner{height:60px;margin:4px 0}
.pw-ad-rect{height:90px;margin:4px 0}

/* ============================================================
   NOTICE / ALERT
   ============================================================ */
.pw-notice{
  padding:8px 10px;font-size:11px;
  background:rgba(232,73,10,0.1);
  border-left:3px solid var(--accent);color:#999;
  margin:4px 0;
}

/* ============================================================
   TICKER
   ============================================================ */
.pw-ticker{
  background:#1a1a1a;border-bottom:1px solid var(--border);
  display:flex;align-items:center;overflow:hidden;height:28px;
}
.pw-ticker-label{
  background:var(--accent);color:#fff;
  padding:0 8px;font-size:9px;font-weight:bold;
  text-transform:uppercase;white-space:nowrap;height:100%;
  display:flex;align-items:center;flex-shrink:0;letter-spacing:0.5px;
}
.pw-ticker-scroll{
  display:flex;white-space:nowrap;
  animation:ticker 35s linear infinite;
}
.pw-ticker-scroll a{
  color:#888;font-size:10px;padding:0 14px;
  border-right:1px solid #2a2a2a;
}
.pw-ticker-scroll a:hover{color:var(--accent)}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.pw-totop{
  position:fixed;bottom:62px;right:10px;z-index:250;
  width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:14px;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.6);
}
.pw-totop.show{display:flex}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.pw-breadcrumb{
  padding:5px 10px;font-size:10px;color:#444;
  background:var(--bg2);border-bottom:1px solid var(--border);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pw-breadcrumb a{color:#555}
.pw-breadcrumb a:hover{color:var(--accent)}
.pw-breadcrumb span{color:#333;margin:0 4px}

/* ============================================================
   UTILITIES
   ============================================================ */
.hide{display:none!important}
.text-accent{color:var(--accent2)}
.mt-2{margin-top:2px}
.section-gap{height:6px;background:var(--bg)}

/* ============================================================
   DESKTOP — CENTERED MAX 480px
   ============================================================ */
@media(min-width:500px){
  body{background:#000}
  .pw-wrap{box-shadow:0 0 30px rgba(0,0,0,0.8)}
  .pw-bottom-nav{max-width:480px;left:50%;transform:translateX(-50%)}
  .pw-totop{right:calc(50% - 260px)}
}
@media(min-width:800px){
  .pw-wrap{max-width:480px}
}