/* =========================
   PREMIUM DOWNLOAD POPUP
========================= */

/* OVERLAY */

.download-popup{

  position:fixed;

  inset:0;

  z-index:999999;

  display:flex;

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

  padding:22px;

  background:
  rgba(15,23,42,.42);

  backdrop-filter:
  blur(14px);

  -webkit-backdrop-filter:
  blur(14px);

  animation:
  popupFade .28s ease;
}

/* =========================
   POPUP BOX
========================= */

.download-box{

  position:relative;

  width:100%;

  max-width:420px;

  padding:
  34px 28px 28px;

  border-radius:34px;

  overflow:hidden;

  text-align:center;

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,.98),
    rgba(241,245,249,.98)
  );

  border:
  1px solid rgba(255,255,255,.75);

  box-shadow:
    0 25px 60px rgba(15,23,42,.20),
    0 10px 30px rgba(37,99,235,.10);

  animation:
  popupScale .30s ease;
}

/* =========================
   TOP GLOW
========================= */

.download-box::before{

  content:"";

  position:absolute;

  top:-120px;
  left:50%;

  transform:
  translateX(-50%);

  width:260px;
  height:260px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(56,189,248,.22),
    transparent 70%
  );

  pointer-events:none;
}

/* =========================
   ICON
========================= */

.download-icon{

  width:88px;
  height:88px;

  margin:
  0 auto 22px;

  border-radius:28px;

  display:flex;

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

  font-size:38px;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  box-shadow:
    0 18px 35px rgba(37,99,235,.24),
    0 0 35px rgba(6,182,212,.18);
}

/* =========================
   TITLE
========================= */

.download-title{

  font-size:34px;

  font-weight:900;

  line-height:1.22;

  letter-spacing:-.5px;

  color:#0f172a;

  margin-bottom:16px;
}

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

.download-text{

  font-size:17px;

  line-height:1.7;

  color:#64748b;

  margin-bottom:30px;
}

/* =========================
   BUTTON WRAPPER
========================= */

.download-actions{

  width:100%;

  display:flex;

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

  gap:16px;

  flex-wrap:wrap;
}

/* =========================
   BUTTON BASE
========================= */

.download-main-btn,
.download-cancel-btn{

  border:none;

  outline:none;

  cursor:pointer;

  display:flex;

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

  font-weight:800;

  transition:
  transform .22s ease,
  box-shadow .22s ease,
  background .22s ease;

  white-space:nowrap;
}

/* =========================
   DOWNLOAD BUTTON
========================= */

.download-main-btn{

  min-width:210px;

  height:62px;

  padding:
  0 34px;

  border-radius:22px;

  font-size:18px;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  box-shadow:
    0 18px 36px rgba(37,99,235,.24),
    0 0 30px rgba(6,182,212,.18);
}

/* HOVER */

.download-main-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
    0 22px 40px rgba(37,99,235,.30),
    0 0 35px rgba(6,182,212,.24);
}

/* =========================
   CANCEL BUTTON
========================= */

.download-cancel-btn{

  min-width:130px;

  height:62px;

  padding:
  0 28px;

  border-radius:22px;

  font-size:17px;

  color:#334155;

  background:
  linear-gradient(
    135deg,
    #ffffff,
    #e2e8f0
  );

  border:
  1px solid rgba(148,163,184,.16);

  box-shadow:
  0 10px 22px rgba(15,23,42,.06);
}

/* HOVER */

.download-cancel-btn:hover{

  background:
  linear-gradient(
    135deg,
    #eef2ff,
    #dbeafe
  );

  transform:
  translateY(-2px);
}

/* =========================
   ACTIVE
========================= */

.download-main-btn:active,
.download-cancel-btn:active{

  transform:
  scale(.96);
}

/* =========================
   ANIMATIONS
========================= */

@keyframes popupFade{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@keyframes popupScale{

  from{

    opacity:0;

    transform:
    scale(.88)
    translateY(20px);
  }

  to{

    opacity:1;

    transform:
    scale(1)
    translateY(0);
  }
}

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

@media(max-width:600px){

  .download-box{

    max-width:100%;

    padding:
    28px 22px 24px;

    border-radius:30px;
  }

  .download-icon{

    width:78px;
    height:78px;

    font-size:34px;

    border-radius:24px;
  }

  .download-title{

    font-size:28px;
  }

  .download-text{

    font-size:16px;

    margin-bottom:26px;
  }

  .download-actions{

    gap:12px;
  }

  .download-main-btn{

    width:100%;

    min-width:100%;

    height:58px;

    font-size:17px;
  }

  .download-cancel-btn{

    width:100%;

    min-width:100%;

    height:56px;

    font-size:16px;
    margin-top:8px;
  }

}
/* =========================
   SIDEBAR ABOVE TOOLBAR FIX
========================= */

/* SIDEBAR */

.sidebar{

  position:fixed;

  top:0;
  left:-100%;

  width:82%;
  max-width:320px;

  height:100vh;

  z-index:9999999; /* 🔥 toolbar se upar */

  background:
  linear-gradient(
    180deg,
    #ffffff,
    #f8fafc
  );

  transition:
  left .22s ease;

  overflow-y:auto;

  padding-bottom:40px;
}

/* OPEN */

.sidebar.active{

  left:0;
}

/* OVERLAY */

#overlay{

  position:fixed;

  inset:0;

  z-index:9999998; /* toolbar se upar */

  background:
  rgba(15,23,42,.18);

  backdrop-filter:
  blur(4px);

  -webkit-backdrop-filter:
  blur(4px);

  opacity:0;

  visibility:hidden;

  transition:.2s ease;
}

#overlay.active{

  opacity:1;

  visibility:visible;
}

/* =========================
   TOOLBAR BELOW SIDEBAR
========================= */

.kk-toolbar{

  position:fixed;

  left:50%;
  bottom:16px;

  transform:
  translateX(-50%);

  z-index:9999; /* 🔥 sidebar se niche */

  display:flex;

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

  gap:8px;

  padding:8px 10px;

  border-radius:999px;

  background:
  rgba(255,255,255,.92);

  backdrop-filter:
  blur(16px);

  -webkit-backdrop-filter:
  blur(16px);

  box-shadow:
  0 10px 30px rgba(0,0,0,.10);
}

/* =========================
   HIDE TOOLBAR WHEN SIDEBAR OPEN
========================= */

.sidebar.active ~ .kk-toolbar{

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:
  translateX(-50%)
  translateY(20px);
}
/* =========================
   PREMIUM SAM CARD
========================= */

.sam-card{

  position:relative;

  margin:24px 16px;

  padding:28px 24px;

  border-radius:34px;

  overflow:hidden;

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,.96),
    rgba(241,245,249,.94)
  );

  border:
  1px solid rgba(255,255,255,.85);

  box-shadow:
    0 20px 50px rgba(15,23,42,.10),
    0 8px 24px rgba(37,99,235,.08);

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);
}

/* TOP LIGHT */

.sam-card::before{

  content:"";

  position:absolute;

  top:-120px;
  right:-120px;

  width:260px;
  height:260px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(56,189,248,.22),
    transparent 72%
  );

  pointer-events:none;
}

/* TITLE */

.sam-card h2{

  font-size:38px;

  font-weight:900;

  line-height:1.15;

  letter-spacing:-1px;

  margin-bottom:18px;

  color:#0f172a;
}

/* DESCRIPTION */

.sam-card p{

  font-size:20px;

  line-height:1.8;

  color:#475569;

  margin-bottom:24px;
}

/* POINTS WRAP */

.sam-points{

  display:flex;

  flex-wrap:wrap;

  gap:12px;
}

/* POINTS */

.sam-points span{

  display:flex;

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

  gap:8px;

  padding:
  12px 18px;

  border-radius:999px;

  font-size:14px;

  font-weight:700;

  color:#0f172a;

  background:
  linear-gradient(
    135deg,
    #ffffff,
    #e2e8f0
  );

  border:
  1px solid rgba(148,163,184,.12);

  box-shadow:
  0 6px 16px rgba(15,23,42,.05);

  transition:.22s ease;
}

/* HOVER */

.sam-points span:hover{

  transform:
  translateY(-2px);

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  color:#fff;

  box-shadow:
  0 12px 24px rgba(37,99,235,.18);
}

/* =========================
   PREMIUM FOOTER
========================= */

.premium-footer{

  position:relative;

  margin-top:70px;

  padding:
  50px 22px 26px;

  overflow:hidden;

  background:
  linear-gradient(
    180deg,
    #ffffff,
    #f8fafc
  );

  border-top:
  1px solid rgba(148,163,184,.12);

  box-shadow:
  0 -10px 40px rgba(15,23,42,.05);
}

/* TOP GLOW */

.premium-footer::before{

  content:"";

  position:absolute;

  top:-120px;
  left:50%;

  transform:
  translateX(-50%);

  width:420px;
  height:220px;

  background:
  radial-gradient(
    circle,
    rgba(56,189,248,.16),
    transparent 72%
  );

  pointer-events:none;
}

/* CONTAINER */

.footer-container{

  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  gap:30px;
}

/* BRAND */

.footer-brand{

  text-align:center;
}

/* LOGO TEXT */

.footer-brand h3{

  font-size:34px;

  font-weight:900;

  letter-spacing:-1px;

  margin-bottom:14px;

  color:#0f172a;
}

/* DESCRIPTION */

.footer-brand p{

  max-width:520px;

  margin:auto;

  font-size:16px;

  line-height:1.8;

  color:#64748b;
}

/* =========================
   FOOTER LINKS
========================= */

.footer-links{

  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:14px;
}

/* LINK BUTTON */

.footer-links a{

  position:relative;

  text-decoration:none;

  padding:
  14px 22px;

  border-radius:18px;

  font-size:15px;

  font-weight:700;

  color:#0f172a;

  background:
  linear-gradient(
    135deg,
    #ffffff,
    #eef2ff
  );

  border:
  1px solid rgba(148,163,184,.10);

  box-shadow:
  0 6px 18px rgba(15,23,42,.05);

  transition:
  .24s ease;
}

/* HOVER */

.footer-links a:hover{

  transform:
  translateY(-3px);

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  color:#fff;

  box-shadow:
  0 14px 30px rgba(37,99,235,.18);
}

/* =========================
   FOOTER BOTTOM
========================= */

.footer-bottom{

  position:relative;

  z-index:2;

  margin-top:34px;

  padding-top:24px;

  border-top:
  1px solid rgba(148,163,184,.10);

  text-align:center;
}

/* COPYRIGHT */

.footer-bottom p{

  font-size:15px;

  line-height:1.8;

  color:#64748b;
}

/* DEVELOPED BY */

.footer-bottom .dev{

  margin-top:10px;

  font-size:16px;

  font-weight:600;

  color:#334155;
}

/* SAMIR */

.footer-bottom .dev span{

  display:inline-flex;

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

  margin-left:6px;

  padding:
  10px 18px;

  border-radius:999px;

  font-size:15px;

  font-weight:800;

  letter-spacing:.3px;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  box-shadow:
  0 12px 24px rgba(37,99,235,.18);
}

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

@media(max-width:600px){

  .sam-card{

    padding:
    24px 20px;

    border-radius:28px;
  }

  .sam-card h2{

    font-size:30px;
  }

  .sam-card p{

    font-size:20px;
  }

  .sam-points{

    gap:10px;
  }

  .sam-points span{

    width:100%;

    justify-content:flex-start;

    font-size:13px;
  }

  .footer-brand h3{

    font-size:28px;
  }

  .footer-brand p{

    font-size:14px;
  }

  .footer-links{

    gap:10px;
  }

  .footer-links a{

    width:calc(50% - 10px);

    text-align:center;

    padding:
    13px 12px;

    font-size:13px;
  }

  .footer-bottom p{

    font-size:13px;
  }

  .footer-bottom .dev{

    font-size:14px;
  }

}
/* =========================
   PREMIUM BOOK CARD
========================= */

.card{

  position:relative;

  overflow:hidden;

  border-radius:34px;

  padding:0;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.98),
    rgba(248,250,252,.96)
  );

  border:
  1px solid rgba(255,255,255,.9);

  box-shadow:
    0 18px 45px rgba(15,23,42,.08),
    0 8px 20px rgba(37,99,235,.06);

  transition:
  transform .28s ease,
  box-shadow .28s ease;

  margin-bottom:28px;
}

/* HOVER */

.card:hover{

  transform:
  translateY(-4px);

  box-shadow:
    0 28px 60px rgba(15,23,42,.12),
    0 12px 28px rgba(37,99,235,.12);
}

/* =========================
   IMAGE BOX
========================= */

.img-box{

  position:relative;

  overflow:hidden;

  border-radius:
  34px 34px 0 0;

  background:#e2e8f0;
}

/* IMAGE */

.img{

  width:100%;

  aspect-ratio:3/4;

  object-fit:cover;

  transition:
  transform .4s ease;
}

.card:hover .img{

  transform:scale(1.03);
}

/* =========================
   SHARE BUTTON
========================= */

.share-icon{

  position:absolute;

  top:16px;
  right:16px;

  width:56px;
  height:56px;

  display:flex;

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

  border-radius:50%;

  font-size:24px;

  cursor:pointer;

  color:#2563eb;

  background:
  rgba(255,255,255,.92);

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  border:
  1px solid rgba(255,255,255,.9);

  box-shadow:
  0 12px 26px rgba(15,23,42,.12);

  transition:.24s ease;

  z-index:10;
}

.share-icon:hover{

  transform:
  scale(1.08);

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  color:#fff;
}

/* =========================
   TOP BADGES
========================= */

.top-badges{

  position:absolute;

  top:16px;
  left:16px;

  display:flex;

  flex-direction:column;

  gap:10px;

  z-index:10;
}

/* BADGE */

.badge{

  display:flex;

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

  width:max-content;

  padding:
  10px 16px;

  border-radius:999px;

  font-size:13px;

  font-weight:800;

  letter-spacing:.2px;

  color:#fff;

  backdrop-filter:
  blur(10px);

  box-shadow:
  0 10px 24px rgba(0,0,0,.14);
}

/* TRENDING */

.badge.trending{

  background:
  linear-gradient(
    135deg,
    #7c3aed,
    #2563eb
  );
}

/* HOT */

.badge.hot{

  background:
  linear-gradient(
    135deg,
    #ff512f,
    #ff9966
  );
}

/* =========================
   CARD BODY
========================= */

.card-body{

  padding:
  22px 22px 18px;
}

/* TITLE */

.title{

  font-size:25px;

  line-height:1.35;

  font-weight:900;

  letter-spacing:-.5px;

  color:#0f172a;

  margin-bottom:14px;
}

/* DESCRIPTION */

.desc{

  font-size:15px;

  line-height:1.8;

  color:#64748b;

  margin-bottom:14px;
}

/* READ MORE */

.readmore{

  display:inline-flex;

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

  margin-bottom:18px;

  font-size:14px;

  font-weight:800;

  color:#2563eb;

  cursor:pointer;

  transition:.2s ease;
}

.readmore:hover{

  transform:
  translateX(4px);
}

/* =========================
   BIG RATING
========================= */

.rating-big{

  display:flex;

  align-items:center;

  gap:8px;

  margin-bottom:14px;

  font-size:28px;

  font-weight:900;

  color:#f59e0b;
}

/* NUMBER */

.rating-num{

  font-size:18px;

  font-weight:800;

  color:#0f172a;
}

/* =========================
   USERS
========================= */

.users-big{

  display:flex;

  align-items:center;

  gap:8px;

  margin-bottom:18px;

  font-size:20px;

  font-weight:800;

  color:#2563eb;
}

/* =========================
   PRICE BOX
========================= */

.price-box{

  margin-top:12px;
}

/* WRAP */

.price-wrap{

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:12px;
}

/* OLD PRICE */

.price-old{

  font-size:24px;

  font-weight:700;

  text-decoration:line-through;

  color:#94a3b8;
}

/* NEW PRICE */

.price-new{

  font-size:52px;

  line-height:1;

  font-weight:900;

  letter-spacing:-2px;

  color:#2563eb;
}

/* DISCOUNT */

.price-badge{

  display:flex;

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

  padding:
  10px 18px;

  border-radius:999px;

  font-size:15px;

  font-weight:900;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #ff512f,
    #ff9966
  );

  box-shadow:
  0 10px 24px rgba(255,81,47,.22);
}

/* FREE */

.price-free{

  display:inline-flex;

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

  padding:
  12px 20px;

  border-radius:999px;

  font-size:25px;

  font-weight:900;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #16a34a,
    #22c55e
  );

  box-shadow:
  0 10px 24px rgba(34,197,94,.18);
}

/* =========================
   BUY BUTTON
========================= */

.buy-btn{

  position:relative;

  width:calc(100% - 32px);

  margin:
  0 auto 18px;

  height:68px;

  border:none;

  border-radius:22px;

  overflow:hidden;

  cursor:pointer;

  display:flex;

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

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  box-shadow:
    0 18px 34px rgba(37,99,235,.24),
    inset 0 1px 0 rgba(255,255,255,.3);

  transition:
  transform .22s ease,
  box-shadow .22s ease;
}

/* SHINE */

.buy-btn::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:120%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.26),
    transparent
  );

  transition:.7s ease;
}

.buy-btn:hover::before{

  left:120%;
}

/* HOVER */

.buy-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
    0 24px 44px rgba(37,99,235,.32);
}

/* CONTENT */

.buy-content{

  display:flex;

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

  gap:12px;

  position:relative;

  z-index:2;
}

/* ICON */

.buy-icon{

  width:24px;
  height:24px;

  fill:#fff;
}

/* TEXT */

.buy-text{

  font-size:20px;

  font-weight:900;

  letter-spacing:.2px;

  color:#fff;
}

/* =========================
   DOWNLOAD BUTTON
========================= */

.download-btn{

  width:calc(100% - 32px);

  margin:
  0 auto 18px;

  height:64px;

  border:none;

  border-radius:20px;

  cursor:pointer;

  font-size:18px;

  font-weight:900;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #16a34a,
    #22c55e
  );

  box-shadow:
  0 16px 30px rgba(34,197,94,.22);

  transition:.24s ease;
}

.download-btn:hover{

  transform:
  translateY(-3px);
}

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

@media(max-width:600px){

  .card{

    border-radius:28px;
  }

  .img-box{

    border-radius:
    28px 28px 0 0;
  }


  .rating-big{

    font-size:20px;
  }

  .rating-num{

    font-size:16px;
  }

  .users-big{

    font-size:17px;
  }


  .price-badge{

    font-size:19px;

    padding:
    8px 14px;
  }

  .buy-btn{

    height:60px;

    border-radius:18px;
  }

  .buy-text{

    font-size:25px;
  }

  .download-btn{

    height:58px;

    font-size:16px;
  }

  .share-icon{

    width:50px;
    height:50px;

    font-size:20px;
  }

  .badge{

    font-size:12px;

    padding:
    8px 14px;
  }

}
/* =========================
   PREMIUM SHARE BUTTON
========================= */

.share-icon{

  position:absolute;

  top:18px;
  right:18px;

  width:58px;
  height:58px;

  display:flex;

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

  border-radius:50%;

  cursor:pointer;

  z-index:20;

  font-size:24px;

  color:#ffffff;

  background:
  linear-gradient(
    135deg,
    rgba(37,99,235,.96),
    rgba(6,182,212,.96)
  );

  border:
  1px solid rgba(255,255,255,.35);

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  box-shadow:
    0 12px 28px rgba(37,99,235,.30),
    0 4px 12px rgba(6,182,212,.18),
    inset 0 1px 0 rgba(255,255,255,.28);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease;
}

/* GLOW */

.share-icon::before{

  content:"";

  position:absolute;

  inset:-2px;

  border-radius:inherit;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,0)
  );

  opacity:.7;

  z-index:-1;
}

/* SHINE */

.share-icon::after{

  content:"";

  position:absolute;

  top:-30%;
  left:-120%;

  width:70%;
  height:180%;

  transform:rotate(20deg);

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.38),
    transparent
  );

  transition:.7s ease;
}

.share-icon:hover::after{

  left:160%;
}

/* HOVER */

.share-icon:hover{

  transform:
  scale(1.08)
  translateY(-2px);

  box-shadow:
    0 18px 40px rgba(37,99,235,.38),
    0 8px 18px rgba(6,182,212,.24);
}

/* CLICK */

.share-icon:active{

  transform:
  scale(.96);
}

/* MOBILE */

@media(max-width:600px){

  .share-icon{

    width:52px;
    height:52px;

    top:14px;
    right:14px;

    font-size:20px;
  }

}
/* =========================
   BODY BOTTOM SPACE
========================= */

body{

  padding-bottom:120px;
}

/* =========================
   PREMIUM FLOAT TOOLBAR
========================= */

.kk-toolbar{

  position:fixed;

  left:50%;
  bottom:14px;

  transform:translateX(-50%);

  z-index:9999;

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

  gap:10px;

  padding:10px 12px;

  border-radius:999px;

  background:
  rgba(255,255,255,.92);

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  border:
  1px solid rgba(255,255,255,.75);

  box-shadow:
    0 10px 35px rgba(15,23,42,.10),
    0 2px 10px rgba(37,99,235,.08);

  transition:
  bottom .25s ease,
  transform .25s ease;
}

/* =========================
   FOOTER ACTIVE FIX
========================= */

body.footer-visible .kk-toolbar{

  bottom:95px;
}

/* =========================
   BUTTON
========================= */

.kk-tool-btn{

  width:50px;
  height:50px;

  border:none;

  border-radius:50%;

  display:flex;

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

  cursor:pointer;

  color:#2563eb;

  background:
  linear-gradient(
    135deg,
    #ffffff,
    #f3f7ff
  );

  box-shadow:
    0 4px 14px rgba(37,99,235,.08);

  transition:
  .22s ease;
}

.kk-tool-btn:hover{

  transform:
  translateY(-2px);

  box-shadow:
    0 8px 20px rgba(37,99,235,.16);
}

/* =========================
   MAIN BUTTON
========================= */

.kk-main-tool{

  width:56px;
  height:56px;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  box-shadow:
    0 10px 24px rgba(37,99,235,.28);
}

/* =========================
   SVG
========================= */

.kk-tool-btn svg{

  width:21px;
  height:21px;

  stroke-width:2.3;
}

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

@media(max-width:600px){

  body{

    padding-bottom:135px;
  }

  .kk-toolbar{

    bottom:12px;

    gap:8px;

    padding:8px 10px;
  }

  body.footer-visible .kk-toolbar{

    bottom:88px;
  }

  .kk-tool-btn{

    width:46px;
    height:46px;
  }

  .kk-main-tool{

    width:52px;
    height:52px;
  }

}
/* =========================
   PREMIUM NETWORK POPUP
========================= */

#networkStatusBox{

  position:fixed !important;

  top:24px !important;
  left:50% !important;

  transform:
  translateX(-50%) translateY(-20px) !important;

  min-width:240px;

  padding:16px 22px !important;

  border-radius:22px !important;

  background:
  rgba(15,23,42,.88) !important;

  backdrop-filter:
  blur(22px);

  -webkit-backdrop-filter:
  blur(22px);

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
    0 12px 40px rgba(0,0,0,.30),
    0 0 30px rgba(37,99,235,.12);

  color:#fff !important;

  font-size:14px !important;
  font-weight:700 !important;

  text-align:center;

  z-index:999999 !important;

  opacity:0;

  transition:
  .32s ease !important;
}
/* =========================
   PREMIUM SMART NOTIFICATION
========================= */

.smart-notify{

  /* HIDDEN FIRST */
  display:none;

  position:fixed !important;

  top:50% !important;
  left:50% !important;

  transform:
  translate(-50%,-50%)
  scale(.88);

  width:calc(100% - 30px);
  max-width:390px;

  padding:28px 22px;

  border-radius:32px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.96),
    rgba(248,250,252,.98)
  );

  backdrop-filter:
  blur(24px);

  -webkit-backdrop-filter:
  blur(24px);

  border:
  1px solid rgba(255,255,255,.85);

  box-shadow:
    0 30px 80px rgba(15,23,42,.18),
    0 12px 40px rgba(37,99,235,.12);

  z-index:999999999 !important;

  flex-direction:column;

  gap:20px;

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility .28s ease;

}

/* =========================
   SHOW
========================= */

.smart-notify.show{

  display:flex !important;

  opacity:1 !important;

  visibility:visible !important;

  pointer-events:auto !important;

  transform:
  translate(-50%,-50%)
  scale(1);

}

/* =========================
   ICON
========================= */

.smart-icon{

  width:84px;
  height:84px;

  margin:0 auto;

  border-radius:26px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

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

  color:#fff;

  box-shadow:
    0 18px 40px rgba(37,99,235,.26);

}

.smart-icon svg{

  width:38px;
  height:38px;

}

/* =========================
   CONTENT
========================= */

.smart-content{

  text-align:center;

}

.smart-content h3{

  font-size:30px;
  font-weight:900;

  color:#0f172a;

  margin-bottom:10px;

  line-height:1.2;

}

.smart-content p{

  font-size:15px;

  line-height:1.8;

  color:#64748b;

}

/* =========================
   BUTTON AREA
========================= */

.smart-actions{

  display:flex;

  align-items:center;

  gap:12px;

}

/* =========================
   BUTTONS
========================= */

.smart-actions button{

  flex:1;

  height:56px;

  border:none;

  border-radius:18px;

  font-size:15px;
  font-weight:800;

  cursor:pointer;

  transition:.25s ease;

}

/* LATER */

#laterNotifyBtn{

  background:
  linear-gradient(
    135deg,
    #f8fafc,
    #e2e8f0
  );

  color:#334155;

  box-shadow:
  0 8px 20px rgba(0,0,0,.05);

}

/* ENABLE */

#enableNotifyBtn{

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  color:#fff;

  box-shadow:
  0 14px 30px rgba(37,99,235,.24);

}

/* HOVER */

.smart-actions button:hover{

  transform:
  translateY(-2px)
  scale(1.02);

}

/* =========================
   CLOSE BUTTON
========================= */

.smart-close{

  position:absolute;

  top:14px;
  right:14px;

  width:40px;
  height:40px;

  border:none;

  border-radius:15px;

  background:
  rgba(241,245,249,.95);

  color:#64748b;

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

  cursor:pointer;

  transition:.25s ease;

}

.smart-close:hover{

  background:#2563eb;

  color:#fff;

  transform:
  rotate(90deg)
  scale(1.06);

}

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

@media(max-width:600px){

  .smart-notify{

    width:calc(100% - 20px);

    padding:24px 18px;

    border-radius:28px;

  }

  .smart-content h3{

    font-size:25px;

  }

  .smart-content p{

    font-size:14px;

  }

  .smart-icon{

    width:76px;
    height:76px;

    border-radius:24px;

  }

  .smart-actions button{

    height:52px;

    font-size:14px;

  }

}




/* =========================
   FREE BADGE
========================= */

.price-free{

  display:inline-flex;

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

  padding:14px 26px;

  margin:14px auto 20px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    #16a34a,
    #22c55e
  );

  color:#fff;

  font-size:25px;
  font-weight:900;

  letter-spacing:.3px;

  box-shadow:
    0 14px 30px rgba(34,197,94,.24),
    0 0 20px rgba(34,197,94,.12);

  border:
  1px solid rgba(255,255,255,.18);
}

/* =========================
   DOWNLOAD BUTTON WRAP
========================= */

.download-wrap{

  width:100%;

  display:flex;

  justify-content:center;

  margin-top:12px;
}

/* =========================
   PREMIUM DOWNLOAD BUTTON
========================= */

.download-btn{

  width:88%;

  height:72px;

  border:none;

  border-radius:26px;

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

  gap:10px;

  cursor:pointer;

  background:
  linear-gradient(
    135deg,
    #16a34a,
    #22c55e
  );

  color:#fff;

  font-size:24px;
  font-weight:900;

  letter-spacing:-.3px;

  box-shadow:
    0 20px 40px rgba(34,197,94,.24),
    0 0 30px rgba(34,197,94,.14);

  transition:
  transform .22s ease,
  box-shadow .22s ease;
}

/* HOVER */

.download-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
    0 24px 46px rgba(34,197,94,.28),
    0 0 34px rgba(34,197,94,.18);
}

/* ACTIVE */

.download-btn:active{

  transform:
  scale(.97);
}

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

@media(max-width:600px){

  .price-free{

    font-size:25px;

    padding:12px 22px;
  }

  .download-btn{

    width:92%;

    height:66px;

    font-size:20px;

    border-radius:22px;
  }

}
/* =========================
   PREMIUM LOAD MORE BUTTON
========================= */

.view-all-wrapper{

  display:flex;
  justify-content:center;

  padding:34px 20px 10px;
}

.view-all-btn{

  position:relative;

  min-width:260px;
  height:68px;

  padding:0 34px;

  border:none;
  outline:none;

  border-radius:999px;

  cursor:pointer;

  overflow:hidden;

  font-size:18px;
  font-weight:800;
  letter-spacing:.3px;

  color:#ffffff;

  background:
  linear-gradient(
    135deg,
    #2563eb 0%,
    #06b6d4 100%
  );

  box-shadow:
    0 14px 35px rgba(37,99,235,.24),
    0 0 30px rgba(6,182,212,.12);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

/* GLOW */

.view-all-btn::before{

  content:"";

  position:absolute;

  top:-40%;
  left:-120%;

  width:80%;
  height:180%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
  );

  transform:rotate(20deg);

  transition:.7s ease;
}

/* HOVER */

.view-all-btn:hover{

  transform:
  translateY(-3px)
  scale(1.02);

  box-shadow:
    0 20px 40px rgba(37,99,235,.30),
    0 0 40px rgba(6,182,212,.16);
}

.view-all-btn:hover::before{

  left:140%;
}

/* ACTIVE */

.view-all-btn:active{

  transform:
  scale(.97);
}

/* ICON */

.view-all-btn::after{

  content:"→";

  font-size:22px;
  font-weight:900;

  transition:transform .22s ease;
}

.view-all-btn:hover::after{

  transform:
  translateX(4px);
}

/* MOBILE */

@media(max-width:600px){

  .view-all-btn{

    width:100%;

    min-width:100%;

    height:64px;

    font-size:17px;
  }

}
/* =========================
   PREMIUM RED BUTTON
========================= */

.view-all-btn{

  position:relative;

  width:290px;
  height:72px;

  border:none;
  outline:none;

  border-radius:24px;

  cursor:pointer;

  overflow:hidden;

  font-size:18px;
  font-weight:800;
  letter-spacing:.3px;

  color:#ffffff;

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

  /* 🔥 PREMIUM RED */
  background:
  linear-gradient(
    135deg,
    #7f1d1d 0%,
    #b91c1c 45%,
    #ef4444 100%
  );

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
    0 18px 40px rgba(239,68,68,.22),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition:
  transform .25s ease,
  box-shadow .25s ease;
}

/* SHINE EFFECT */

.view-all-btn::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:60%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.26),
    transparent
  );

  transform:skewX(-25deg);

  transition:.8s ease;
}

/* PREMIUM DOWN ARROW */

.view-all-btn::after{

  content:"";

  position:absolute;

  right:24px;

  font-size:30px;
  font-weight:300;

  line-height:1;

  color:#ffffff;

  transition:
  transform .25s ease;
}

/* HOVER */

.view-all-btn:hover{

  transform:
  translateY(-4px);

  box-shadow:
    0 24px 55px rgba(239,68,68,.30),
    0 0 35px rgba(239,68,68,.16);
}

.view-all-btn:hover::before{

  left:150%;
}

.view-all-btn:hover::after{

  transform:
  translateY(4px);
}

/* ACTIVE */

.view-all-btn:active{

  transform:
  scale(.97);
}

/* MOBILE */

@media(max-width:600px){

  .view-all-btn{

    width:100%;
    height:66px;

    border-radius:20px;

    font-size:17px;
  }

  .view-all-btn::after{

    right:22px;

    font-size:26px;
  }

}
/* =========================
   PREMIUM TOP NOTIFICATION
========================= */

.kk-notify{

  position:fixed;

  top:20px;
  left:50%;

  transform:
  translateX(-50%)
  translateY(-120px);

  min-width:280px;
  max-width:420px;

  padding:18px 22px;

  border-radius:24px;

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #1e293b
  );

  color:#ffffff;

  display:flex;
  align-items:center;

  gap:14px;

  z-index:999999999;

  box-shadow:
  0 20px 45px rgba(15,23,42,.28);

  opacity:0;

  transition:
  .32s ease;
}

/* SHOW */

.kk-notify.show{

  opacity:1;

  transform:
  translateX(-50%)
  translateY(0);
}

/* ICON */

.kk-notify-icon{

  width:44px;
  height:44px;

  border-radius:14px;

  background:
  linear-gradient(
    135deg,
    #ef4444,
    #f97316
  );

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

  font-size:20px;

  flex-shrink:0;
}

/* TEXT */

.kk-notify-text{

  font-size:15px;
  font-weight:700;

  line-height:1.5;
}
/* SEARCH FOUND EFFECT */

.search-highlight{

  animation:
  searchGlow 1.2s ease infinite alternate;
}

@keyframes searchGlow{

  from{

    box-shadow:
    0 0 0 rgba(37,99,235,0);
  }

  to{

    box-shadow:
    0 0 30px rgba(37,99,235,.35);
  }

}

/* SUCCESS NOTIFICATION */

.kk-notify.success .kk-notify-icon{

  background:
  linear-gradient(
    135deg,
    #16a34a,
    #22c55e
  );
}
/* =========================
   SEARCH HIGHLIGHT
========================= */

.search-highlight{

  animation:
  premiumGlow 1s ease infinite alternate;
}

@keyframes premiumGlow{

  from{

    box-shadow:
    0 0 0 rgba(37,99,235,0);
  }

  to{

    box-shadow:
      0 0 35px rgba(37,99,235,.28),
      0 0 12px rgba(6,182,212,.18);
  }

}

/* SUCCESS */

.kk-notify.success .kk-notify-icon{

  background:
  linear-gradient(
    135deg,
    #16a34a,
    #22c55e
  );
}
/* ================= PREMIUM SUGGESTIONS ================= */

.suggestions{

  position:absolute;

  top:calc(100% + 14px);

  left:0;

  width:100%;

  max-height:460px;

  overflow-y:auto;

  padding:10px;

  border-radius:30px;

  background:
  rgba(255,255,255,.96);

  backdrop-filter:
  blur(22px);

  -webkit-backdrop-filter:
  blur(22px);

  border:
  1px solid rgba(255,255,255,.8);

  box-shadow:
    0 25px 60px rgba(15,23,42,.12),
    0 10px 25px rgba(37,99,235,.08);

  z-index:999999;

  display:none;
}

/* ITEM */

.suggestion-item{

  display:flex;

  align-items:center;

  gap:14px;

  padding:14px;

  border-radius:22px;

  cursor:pointer;

  transition:.22s ease;
}

.suggestion-item:hover{

  background:
  linear-gradient(
    135deg,
    rgba(37,99,235,.08),
    rgba(6,182,212,.05)
  );

  transform:
  translateY(-2px);
}

/* COVER */

.suggestion-cover{

  width:58px;
  height:58px;

  border-radius:18px;

  overflow:hidden;

  flex-shrink:0;

  background:#f1f5f9;
}

.suggestion-cover img{

  width:100%;
  height:100%;

  object-fit:cover;
}

/* INFO */

.suggestion-info{

  flex:1;

  min-width:0;
}

/* TITLE */

.suggestion-title{

  font-size:15px;
  font-weight:800;

  color:#0f172a;

  line-height:1.5;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}

/* META */

.suggestion-meta{

  margin-top:4px;

  font-size:13px;
  font-weight:700;

  color:#64748b;
}

/* ARROW */

.suggestion-arrow{

  width:40px;
  height:40px;

  border-radius:14px;

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

  color:#2563eb;

  background:
  linear-gradient(
    135deg,
    #eff6ff,
    #dbeafe
  );

  flex-shrink:0;
}

/* EMPTY */

.suggestion-empty{

  padding:30px 20px;

  text-align:center;
}

.suggestion-empty-icon{

  font-size:34px;

  margin-bottom:12px;
}

.suggestion-empty-text{

  font-size:15px;
  font-weight:700;

  color:#64748b;
}

/* SCROLLBAR */

.suggestions::-webkit-scrollbar{

  width:7px;
}

.suggestions::-webkit-scrollbar-thumb{

  background:
  linear-gradient(
    #2563eb,
    #06b6d4
  );

  border-radius:999px;
}

/* ================= PAGE TRANSITION ================= */

.page-transition{

  position:fixed;

  inset:0;

  z-index:999999999;

  background:
  rgba(255,255,255,.92);

  backdrop-filter:
  blur(12px);

  display:flex;

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

  opacity:0;

  pointer-events:none;

  transition:.25s ease;
}

.page-transition.show{

  opacity:1;
}

.transition-loader{

  text-align:center;
}

/* LOADER */

.loader-ring{

  width:62px;
  height:62px;

  margin:auto;

  border-radius:50%;

  border:
  4px solid rgba(37,99,235,.12);

  border-top-color:#2563eb;

  animation:
  spin .7s linear infinite;
}

/* TEXT */

.loader-text{

  margin-top:16px;

  font-size:15px;
  font-weight:800;

  color:#0f172a;
}

/* SPIN */

@keyframes spin{

  to{

    transform:
    rotate(360deg);
  }

}
/* =========================
   PREMIUM SALE BADGE
========================= */

.sale-badge{

  position:absolute;

  top:14px;
  left:14px;

  z-index:30;

  display:flex;
  align-items:center;
  gap:8px;

  padding:12px 18px;

  border-radius:999px;

  color:#fff;

  font-size:14px;
  font-weight:900;
  letter-spacing:.4px;

  background:
  linear-gradient(
    135deg,
    #ff1744,
    #ff4d6d,
    #ff9100
  );

  background-size:200% 200%;

  animation:
  saleGlow 3s ease infinite;

  border:
  1px solid rgba(255,255,255,.18);

  box-shadow:
  0 12px 28px rgba(255,23,68,.32),
  0 0 24px rgba(255,145,0,.22);

  backdrop-filter:
  blur(12px);

  -webkit-backdrop-filter:
  blur(12px);
}

/* =========================
   SALE TIMER
========================= */

.sale-timer{

  position:absolute;

  left:50%;
  top:50%;

  transform:
  translate(-50%,-50%);

  z-index:25;

  width:90%;

  pointer-events:none;
}

/* =========================
   TIMER WRAPPER
========================= */

.timer-wrapper{

  padding:18px;

  border-radius:28px;

  background:
  linear-gradient(
    145deg,
    rgba(8,15,32,.92),
    rgba(15,23,42,.88)
  );

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  box-shadow:
  0 18px 45px rgba(0,0,0,.28),
  0 0 40px rgba(37,99,235,.16);
}

/* =========================
   TIMER TITLE
========================= */

.timer-title{

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

  gap:8px;

  margin-bottom:16px;

  color:#fff;

  font-size:15px;
  font-weight:800;

  letter-spacing:.4px;
}

/* =========================
   ICON
========================= */

.timer-icon{

  width:18px;
  height:18px;

  fill:#38bdf8;
}

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

.timer-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:12px;
}

/* =========================
   TIME CARD
========================= */

.time-card{

  padding:14px 10px;

  border-radius:22px;

  text-align:center;

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.04)
  );

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.08);
}

/* =========================
   NUMBER
========================= */

.time-num{

  font-size:28px;
  font-weight:900;

  line-height:1;

  color:#fff;

  margin-bottom:8px;

  text-shadow:
  0 0 18px rgba(56,189,248,.28);
}

/* =========================
   LABEL
========================= */

.time-label{

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

  color:rgba(255,255,255,.72);

  letter-spacing:1px;
}

/* =========================
   ENDED
========================= */

.timer-ended{

  padding:16px;

  border-radius:22px;

  text-align:center;

  font-size:16px;
  font-weight:900;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #ef4444,
    #dc2626
  );

  box-shadow:
  0 14px 35px rgba(239,68,68,.28);
}

/* =========================
   ANIMATION
========================= */

@keyframes saleGlow{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }
}

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

@media(max-width:600px){

  .sale-badge{

    top:12px;
    left:12px;

    padding:10px 15px;

    font-size:12px;
  }

  .timer-wrapper{

    padding:15px;
  }

  .time-num{

    font-size:22px;
  }

  .time-card{

    padding:12px 8px;
  }

}
/* =========================
   PREMIUM STARS
========================= */

.rating-big{

  display:flex;
  align-items:center;
  gap:10px;

  margin-top:14px;
  margin-bottom:14px;

  font-size:30px;
  font-weight:900;

  letter-spacing:3px;

  color:#f59e0b;

  text-shadow:
    0 0 10px rgba(245,158,11,.28),
    0 4px 14px rgba(245,158,11,.18);

  animation:
    starGlow 2.8s ease-in-out infinite;
}

/* NUMBER */

.rating-num{

  font-size:22px;
  font-weight:900;

  color:#0f172a;

  letter-spacing:0;

  padding:8px 14px;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.95),
      rgba(241,245,249,.95)
    );

  border:
    1px solid rgba(148,163,184,.18);

  box-shadow:
    0 8px 20px rgba(15,23,42,.08);
}

/* =========================
   PREMIUM FREE BADGE
========================= */

.price-free{

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

  padding:14px 28px;

  border-radius:999px;

  font-size:25px;
  font-weight:900;

  color:#fff;

  letter-spacing:.4px;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #9333ea,
      #ec4899
    );

  background-size:200% 200%;

  border:
    1px solid rgba(255,255,255,.16);

  box-shadow:
    0 16px 35px rgba(147,51,234,.28),
    0 0 28px rgba(236,72,153,.18);

  animation:
    freeGlow 4s ease infinite;
}

/* =========================
   USERS
========================= */

.users-big{

  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:18px;

  font-size:22px;
  font-weight:800;

  color:#2563eb;

  text-shadow:
    0 2px 10px rgba(37,99,235,.12);
}

/* =========================
   ANIMATIONS
========================= */

@keyframes freeGlow{

  0%{
    background-position:0% 50%;
    transform:translateY(0);
  }

  50%{
    background-position:100% 50%;
    transform:translateY(-2px);
  }

  100%{
    background-position:0% 50%;
    transform:translateY(0);
  }
}

@keyframes starGlow{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.03);
  }

  100%{
    transform:scale(1);
  }
}

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

@media(max-width:600px){

  .rating-big{

    font-size:26px;
    gap:8px;
  }

  .rating-num{

    font-size:18px;
    padding:7px 12px;
  }

  .users-big{

    font-size:20px;
  }


}
/* =========================
   PREMIUM TOP CATEGORY LOADER
========================= */

.category-loading{

  position:fixed;

  top:22px;
  left:50%;

  transform:
  translateX(-50%)
  translateY(-120px);

  z-index:999999999;

  min-width:320px;
  max-width:92%;

  padding:18px 24px;

  border-radius:24px;

  display:flex;
  align-items:center;

  gap:16px;

  background:
  linear-gradient(
    135deg,
    rgba(15,23,42,.96),
    rgba(30,41,59,.96)
  );

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
    0 25px 50px rgba(0,0,0,.28),
    0 0 30px rgba(37,99,235,.12);

  opacity:0;

  visibility:hidden;

  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    opacity .35s ease,
    visibility .35s ease;
}

/* =========================
   SHOW
========================= */

.category-loading.show{

  opacity:1;

  visibility:visible;

  transform:
  translateX(-50%)
  translateY(0);
}

/* =========================
   ICON
========================= */

.category-loading-icon{

  width:58px;
  height:58px;

  min-width:58px;

  border-radius:18px;

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

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  box-shadow:
    0 12px 30px rgba(37,99,235,.24);

  position:relative;

  overflow:hidden;
}

/* GLOW */

.category-loading-icon::before{

  content:"";

  position:absolute;

  inset:-40%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
  );

  animation:
  categoryGlow 1.4s linear infinite;
}

/* SVG */

.category-loading-icon svg{

  width:28px;
  height:28px;

  color:#fff;

  position:relative;

  z-index:2;
}

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

.category-loading-text{

  flex:1;
}

.category-loading-title{

  font-size:18px;
  font-weight:800;

  color:#fff;

  margin-bottom:5px;
}

.category-loading-sub{

  font-size:14px;

  color:
  rgba(255,255,255,.68);

  line-height:1.5;
}

/* =========================
   DOTS
========================= */

.category-loading-dots{

  display:flex;

  gap:5px;

  margin-top:10px;
}

.category-loading-dots span{

  width:7px;
  height:7px;

  border-radius:50%;

  background:#38bdf8;

  animation:
  dotPulse 1s infinite ease-in-out;
}

.category-loading-dots span:nth-child(2){

  animation-delay:.15s;
}

.category-loading-dots span:nth-child(3){

  animation-delay:.3s;
}

/* =========================
   ANIMATION
========================= */

@keyframes categoryGlow{

  from{

    transform:
    translateX(-120%);
  }

  to{

    transform:
    translateX(120%);
  }

}

@keyframes dotPulse{

  0%,100%{

    opacity:.35;

    transform:scale(.8);
  }

  50%{

    opacity:1;

    transform:scale(1.15);
  }

}

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

@media(max-width:600px){

  .category-loading{

    top:16px;

    min-width:unset;

    width:calc(100% - 24px);

    padding:16px 18px;

    border-radius:22px;
  }

  .category-loading-icon{

    width:52px;
    height:52px;

    min-width:52px;
  }

  .category-loading-title{

    font-size:16px;
  }

  .category-loading-sub{

    font-size:13px;
  }

}
/* =========================
   CATEGORY LOADING
========================= */

.category-loading{

  position:fixed;

  top:18px;
  left:50%;

  transform:
  translateX(-50%)
  translateY(-120px);

  width:calc(100% - 28px);
  max-width:460px;

  min-height:76px;

  padding:16px 20px;

  border-radius:24px;

  display:flex;
  align-items:center;

  gap:16px;

  z-index:999999999;

  opacity:0;
  visibility:hidden;

  background:
  linear-gradient(
    135deg,
    rgba(15,23,42,.96),
    rgba(30,41,59,.96)
  );

  backdrop-filter:
  blur(18px);

  -webkit-backdrop-filter:
  blur(18px);

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
    0 22px 55px rgba(0,0,0,.24),
    0 8px 20px rgba(37,99,235,.16);

  transition:
    all .38s cubic-bezier(.22,1,.36,1);
}

/* SHOW */

.category-loading.show{

  opacity:1;

  visibility:visible;

  transform:
  translateX(-50%)
  translateY(0);
}

/* ICON */

.category-loading-icon{

  width:56px;
  height:56px;

  min-width:56px;

  border-radius:18px;

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

  font-size:24px;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  box-shadow:
  0 12px 28px rgba(37,99,235,.24);
}

/* CONTENT */

.category-loading-content{

  flex:1;
}

.category-loading-title{

  font-size:18px;
  font-weight:800;

  color:#fff;

  margin-bottom:4px;
}

.category-loading-sub{

  font-size:14px;

  line-height:1.5;

  color:
  rgba(255,255,255,.68);
}

/* MOBILE */

@media(max-width:600px){

  .category-loading{

    top:14px;

    padding:15px 16px;

    border-radius:22px;
  }

  .category-loading-icon{

    width:50px;
    height:50px;

    min-width:50px;

    border-radius:16px;

    font-size:22px;
  }

  .category-loading-title{

    font-size:16px;
  }

  .category-loading-sub{

    font-size:13px;
  }

}
/* =========================
   ALL BOOKS UNIQUE STYLE
========================= */

.all-books-item{

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  ) !important;

  color:#fff !important;

  border:none !important;

  box-shadow:
  0 14px 35px rgba(37,99,235,.24);
}

.all-books-item .cat-name,
.all-books-item .cat-count,
.all-books-item .cat-icon{

  color:#fff !important;
}

.all-books-item:hover{

  transform:
  translateY(-2px)
  scale(1.02);

  box-shadow:
  0 18px 40px rgba(37,99,235,.32);
}
/* =========================
   PREMIUM TELEGRAM CARD
========================= */

.premium-telegram-card{

  position:relative;

  margin:34px 20px;

  padding:34px 24px;

  border-radius:34px;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #111827,
    #0f172a
  );

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
    0 25px 60px rgba(15,23,42,.22),
    0 0 45px rgba(37,99,235,.10);

  text-align:center;
}

/* =========================
   GLOW
========================= */

.telegram-glow{

  position:absolute;

  top:-120px;
  left:50%;

  transform:
  translateX(-50%);

  width:260px;
  height:260px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(6,182,212,.22),
    transparent 70%
  );

  pointer-events:none;
}

/* =========================
   ICON
========================= */

.telegram-icon{

  width:92px;
  height:92px;

  margin:
  0 auto 22px;

  border-radius:30px;

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

  font-size:42px;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  box-shadow:
    0 20px 45px rgba(37,99,235,.28),
    0 0 40px rgba(6,182,212,.18);
}

/* =========================
   CONTENT
========================= */

.telegram-content{

  position:relative;

  z-index:2;
}

.telegram-badge{

  display:inline-flex;

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

  padding:10px 18px;

  border-radius:999px;

  margin-bottom:18px;

  font-size:13px;
  font-weight:800;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    rgba(37,99,235,.24),
    rgba(6,182,212,.22)
  );

  border:
  1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(12px);
}

.premium-telegram-card h3{

  font-size:34px;

  font-weight:900;

  line-height:1.2;

  color:#fff;

  margin-bottom:16px;
}

.premium-telegram-card p{

  color:
  rgba(255,255,255,.74);

  font-size:16px;

  line-height:1.8;

  margin-bottom:24px;
}

/* =========================
   STATS
========================= */

.telegram-stats{

  display:flex;

  flex-wrap:wrap;

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

  gap:12px;

  margin-bottom:28px;
}

.telegram-stats span{

  padding:10px 16px;

  border-radius:16px;

  font-size:13px;
  font-weight:700;

  color:#fff;

  background:
  rgba(255,255,255,.06);

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(12px);
}

/* =========================
   BUTTON
========================= */

.telegram-btn{

  width:100%;

  height:64px;

  border:none;

  border-radius:22px;

  display:flex;

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

  gap:12px;

  cursor:pointer;

  color:#fff;

  font-size:17px;
  font-weight:800;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  box-shadow:
    0 18px 40px rgba(37,99,235,.28),
    0 0 35px rgba(6,182,212,.20);

  transition:
  transform .22s ease,
  box-shadow .22s ease;
}

.telegram-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
    0 24px 48px rgba(37,99,235,.34),
    0 0 40px rgba(6,182,212,.24);
}

.telegram-btn:active{

  transform:
  scale(.97);
}

/* =========================
   NOTE
========================= */

.telegram-note{

  margin-top:18px;

  color:
  rgba(255,255,255,.55);

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

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

@media(max-width:600px){

  .premium-telegram-card{

    padding:30px 20px;
  }

  .premium-telegram-card h3{

    font-size:28px;
  }

  .premium-telegram-card p{

    font-size:15px;
  }

  .telegram-btn{

    height:60px;

    font-size:16px;
  }

}
/* =========================
   PREMIUM PAGINATION
========================= */

.pagination-wrap{

  display:flex;
  flex-direction:column;

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

  gap:18px;

  margin:38px 0 28px;

}

/* PAGE NUMBERS TOP */

.pagination-numbers{

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

  flex-wrap:wrap;

  gap:12px;

  max-width:100%;

}

/* PAGE BUTTON */

.page-number-btn{

  min-width:50px;
  height:50px;

  padding:0 16px;

  border:none;

  border-radius:18px;

  background:
  rgba(255,255,255,.88);

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);

  color:#111827;

  font-size:15px;
  font-weight:800;

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

  box-shadow:
  0 10px 28px rgba(0,0,0,.08);

  transition:
  transform .25s ease,
  background .25s ease,
  color .25s ease;

  cursor:pointer;

}

/* ACTIVE PAGE */

.page-number-btn.active{

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  color:#fff;

  transform:scale(1.08);

  box-shadow:
  0 14px 35px rgba(37,99,235,.30);

}

/* HOVER */

.page-number-btn:hover{

  transform:translateY(-3px);

}

/* NEXT PREV BUTTONS */

.pagination-controls{

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

  gap:16px;

}

/* PREMIUM NAV BUTTON */

.premium-page-btn{

  width:58px;
  height:58px;

  border:none;

  border-radius:20px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  color:#fff;

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

  font-size:22px;
  font-weight:800;

  cursor:pointer;

  box-shadow:
  0 14px 35px rgba(37,99,235,.28);

  transition:.25s ease;

}

.premium-page-btn:hover{

  transform:
  translateY(-3px)
  scale(1.04);

}

/* MOBILE */

@media(max-width:600px){

  .page-number-btn{

    min-width:46px;
    height:46px;

    border-radius:16px;

    font-size:14px;

  }

  .premium-page-btn{

    width:52px;
    height:52px;

    border-radius:18px;

    font-size:20px;

  }

}
/* =========================
   PREMIUM SALE POPUP
========================= */

.sale-popup{

  position:fixed;

  top:24px;
  left:50%;

  transform:
  translateX(-50%)
  translateY(-20px)
  scale(.95);

  width:calc(100% - 28px);
  max-width:420px;

  min-height:92px;

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

  gap:16px;

  padding:18px 18px;

  border-radius:26px;

  overflow:hidden;

  z-index:999999;

  opacity:0;

  cursor:pointer;

  background:
  linear-gradient(
    135deg,
    rgba(13,18,40,.96),
    rgba(20,35,70,.96)
  );

  border:
  1px solid
  rgba(255,255,255,.08);

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  box-shadow:
  0 22px 60px rgba(0,0,0,.32),
  0 0 0 1px rgba(255,255,255,.03);

  transition:
  opacity .35s ease,
  transform .35s ease;

}

/* =========================
   GLOW
========================= */

.popup-glow{

  position:absolute;

  inset:-40%;

  background:
  radial-gradient(
    circle,
    rgba(37,99,235,.28),
    transparent 70%
  );

  animation:
  popupGlow 4s linear infinite;

  pointer-events:none;

}

@keyframes popupGlow{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }

}

/* =========================
   CONTENT
========================= */

.popup-content{

  position:relative;

  z-index:2;

  flex:1;

  display:flex;
  flex-direction:column;

  gap:6px;

}

/* TITLE */

.popup-title{

  font-size:18px;
  font-weight:800;

  color:#fff;

  letter-spacing:.2px;

  line-height:1.2;

}

/* MESSAGE */

.popup-msg{

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

  color:
  rgba(255,255,255,.88);

  line-height:1.4;

}

/* SUB */

.popup-sub{

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

  color:
  rgba(255,255,255,.58);

  margin-top:2px;

}

/* =========================
   ARROW
========================= */
/* =========================
   ARROW BUTTON
========================= */

.popup-arrow{

  position:absolute;

  right:18px;
  bottom:5px;

  width:64px;
  height:64px;
  

  border-radius:22px;

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

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
  );

  color:#fff;

  font-size:28px;
  font-weight:800;

  box-shadow:
  0 12px 32px rgba(37,99,235,.35);

  z-index:2;

  transition:.25s ease;

}

.sale-popup:hover .popup-arrow{

  transform:
  translateX(4px)
  scale(1.05);

}
.sale-popup:hover .popup-arrow{

  transform:
  translateX(4px)
  scale(1.05);

}

/* =========================
   CLOSE BUTTON
========================= */

/* =========================
   CLOSE BUTTON
========================= */

.popup-close{

  position:absolute;

  top:14px;
  right:14px;

  width:36px;
  height:36px;

  border-radius:14px;

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

  background:
  rgba(255,255,255,.10);

  border:
  1px solid rgba(255,255,255,.08);

  color:#fff;

  font-size:16px;
  font-weight:700;

  z-index:10;

  backdrop-filter:blur(10px);

  transition:.25s ease;

}

.popup-close:hover{

  transform:
  rotate(90deg)
  scale(1.06);

  background:
  rgba(255,255,255,.16);

}
.popup-close:hover{

  background:
  rgba(255,255,255,.14);

  color:#fff;

  transform:
  rotate(90deg)
  scale(1.06);

}

/* =========================
   SHOW STATE
========================= */

.sale-popup.show{

  opacity:1;

  transform:
  translateX(-50%)
  translateY(0)
  scale(1);

}

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

@media(max-width:600px){

  .sale-popup{

    top:16px;

    width:calc(100% - 18px);

    padding:16px;

    border-radius:22px;

  }

  .popup-title{

    font-size:16px;

  }

  .popup-msg{

    font-size:13px;

  }

  .popup-arrow{

    min-width:46px;
    height:46px;

    font-size:20px;

    border-radius:16px;

  }

}
.readmore-btn{

  margin-top:10px;

  border:none;

  background:none;

  color:#2563eb;

  font-size:14px;
  font-weight:700;

  cursor:pointer;
}
.explore-latest{

  width:
  min(92%, 420px);

  margin:
  8px auto 22px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:16px;

  padding:
  18px 22px;

  border-radius:26px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.84),
    rgba(255,255,255,.72)
  );

  backdrop-filter:
  blur(18px);

  border:
  1px solid rgba(255,255,255,.92);

  box-shadow:
  0 16px 40px rgba(15,23,42,.06);

  position:relative;

  overflow:hidden;

  transition:
  transform .28s ease,
  box-shadow .28s ease;

}


/* PREMIUM LIGHT */

.explore-latest::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.38),
    transparent
  );

  transform:
  translateX(-120%);

  animation:
  shineMove 5s linear infinite;

}


/* HOVER */

.explore-latest:hover{

  transform:
  translateY(-3px);

  box-shadow:
  0 22px 48px rgba(37,99,235,.10);

}


/* ICON */

.explore-icon{

  width:58px;
  height:58px;

  border-radius:20px;

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

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #60a5fa
  );

  box-shadow:
  0 12px 28px rgba(37,99,235,.24);

  flex:none;

}


.explore-icon svg{

  width:26px;
  height:26px;

  stroke:#fff;

  stroke-width:2.2;

  stroke-linecap:round;

  stroke-linejoin:round;

  fill:none;

}


/* TEXT */

.explore-text{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

}


.explore-text span{

  font-size:1.05rem;

  font-weight:800;

  color:#0f172a;

  letter-spacing:-.2px;

}


.explore-text small{

  margin-top:3px;

  color:#64748b;

  font-size:1rem;

  font-weight:500;

}


/* SHINE */

@keyframes shineMove{

  100%{
    transform:
    translateX(120%);
  }

}


/* MOBILE */

@media(max-width:600px){

  .explore-latest{

    padding:
    16px 18px;

    border-radius:22px;

    gap:14px;

  }

  .explore-icon{

    width:52px;
    height:52px;

    border-radius:18px;

  }

  .explore-icon svg{

    width:24px;
    height:24px;

  }

  .explore-text span{

    font-size:1.3rem;

  }

  .explore-text small{

    font-size:1rem;

  }

}

/* =========================
   REVIEW BUTTON
========================= */

.open-review-btn{

  width:100%;

  margin-top:16px;

  border:none;

  outline:none;

  padding:
  14px 18px;

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #1e293b
  );

  color:#fff;

  font-size:.95rem;
  font-weight:800;

  cursor:pointer;

  transition:.25s ease;

}


.open-review-btn:active{

  transform:scale(.98);

}


/* =========================
   FORM
========================= */

.review-form-wrap{

  max-height:0;

  overflow:hidden;

  opacity:0;

  transform:
  translateY(-8px);

  transition:
  max-height .45s ease,
  opacity .3s ease,
  transform .3s ease;

}


.review-form-wrap.show{

  max-height:520px;

  opacity:1;

  transform:
  translateY(0);

  margin-top:16px;

}


/* =========================
   FORM INNER
========================= */

.review-form-inner{

  padding:20px;

  border-radius:24px;

  background:
  rgba(255,255,255,.92);

  backdrop-filter:
  blur(12px);

  border:
  1px solid rgba(255,255,255,.9);

  box-shadow:
  0 18px 44px rgba(15,23,42,.08);

}


/* =========================
   INPUTS
========================= */

.review-input,
.review-textarea{

  width:100%;

  border:none;

  outline:none;

  background:#f8fafc;

  border-radius:18px;

  padding:
  14px 16px;

  margin-top:12px;

  font-size:.94rem;

}


.review-textarea{

  min-height:120px;

  resize:none;

}


/* =========================
   STARS
========================= */

.star-select{

  display:flex;

  gap:8px;

  margin-top:18px;

}


.star-select span{

  font-size:32px;

  color:#cbd5e1;

  cursor:pointer;

  transition:.2s ease;

  user-select:none;

}


.star-select span.active{

  color:#f59e0b;

  transform:scale(1.08);

}


/* =========================
   SUBMIT
========================= */

.submit-review-btn{

  width:100%;

  margin-top:18px;

  border:none;

  outline:none;

  padding:
  14px 18px;

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #60a5fa
  );

  color:#fff;

  font-size:.95rem;
  font-weight:800;

  cursor:pointer;

}

/* =========================
   PREMIUM REVIEWS SYSTEM
========================= */

.reviews-list{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
}


/* =========================
   REVIEW CARD
========================= */

.review-item{

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,.98),
    rgba(248,250,252,.95)
  );

  border-radius:28px;

  padding:20px;

  border:1px solid rgba(255,255,255,.9);

  box-shadow:
    0 12px 40px rgba(15,23,42,.07),
    0 2px 10px rgba(15,23,42,.04);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.review-item:active{
  transform:scale(.985);
}

.review-item::before{

  content:"";

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:5px;

  background:
  linear-gradient(
    90deg,
    #2563eb,
    #38bdf8,
    #06b6d4
  );
}


/* =========================
   TOP SECTION
========================= */

.review-top{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:14px;

  margin-bottom:14px;
}


/* =========================
   USER SECTION
========================= */

.review-user-wrap{

  display:flex;

  align-items:center;

  gap:14px;

  min-width:0;
}


/* =========================
   AVATAR
========================= */

.review-avatar{

  width:54px;

  height:54px;

  min-width:54px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:24px;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #38bdf8
  );

  box-shadow:
    0 10px 24px rgba(37,99,235,.28);
}


/* =========================
   USER INFO
========================= */

.review-user{

  font-size:17px;

  font-weight:800;

  color:#0f172a;

  line-height:1.2;

  word-break:break-word;
}

.review-date{

  margin-top:4px;

  font-size:12px;

  color:#64748b;

  font-weight:600;
}


/* =========================
   STARS
========================= */

.review-stars{

  display:flex;

  align-items:center;

  gap:2px;

  color:#f59e0b;

  font-size:19px;

  letter-spacing:1px;

  flex-shrink:0;

  text-shadow:
    0 2px 8px rgba(245,158,11,.25);
}


/* =========================
   MESSAGE
========================= */

.review-msg{

  color:#334155;

  font-size:15px;

  line-height:1.8;

  font-weight:500;

  word-break:break-word;

  padding-left:68px;
}


/* =========================
   REVIEW BUTTONS
========================= */

.review-actions{
  margin-top:8px;
}

.more-reviews-btn,
.less-reviews-btn{

  width:100%;

  border:none;

  outline:none;

  cursor:pointer;

  padding:16px 18px;

  border-radius:20px;

  font-size:15px;

  font-weight:800;

  color:#fff;

  transition:
    transform .2s ease,
    opacity .2s ease;

  box-shadow:
    0 12px 28px rgba(37,99,235,.28);
}

.more-reviews-btn{

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #38bdf8
  );
}

.less-reviews-btn{

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #334155
  );
}

.more-reviews-btn:active,
.less-reviews-btn:active{
  transform:scale(.98);
}


/* =========================
   EMPTY STATE
========================= */

.no-review{

  text-align:center;

  padding:28px 18px;

  border-radius:24px;

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,.95),
    rgba(248,250,252,.9)
  );

  color:#64748b;

  font-size:15px;

  font-weight:700;

  box-shadow:
    0 10px 35px rgba(15,23,42,.06);
}


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

@media(max-width:600px){

  .review-item{
    padding:18px;
    border-radius:24px;
  }

  .review-avatar{
    width:50px;
    height:50px;
    min-width:50px;
    font-size:22px;
  }

  .review-user{
    font-size:16px;
  }

  .review-stars{
    font-size:17px;
  }

  .review-msg{
    font-size:14px;
    padding-left:64px;
  }

  .more-reviews-btn,
  .less-reviews-btn{
    padding:15px;
    font-size:14px;
  }
}


/* =========================
   SMOOTH ANIMATION
========================= */


/* =========================
   PREMIUM HACKER BOOK META
========================= */

.collection-big{

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

  width:auto !important;
  max-width:max-content;

  padding:
  14px 28px;

  margin:
  20px auto;

  border-radius:999px;

  position:relative;

  left:50%;

  transform:
  translateX(-50%);

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #0f172a,
    #2563eb,
    #06b6d4
  );

  border:
  1px solid rgba(96,165,250,.35);

  color:#ffffff;

  font-size:20px;

  font-weight:900;

  letter-spacing:1px;

  text-transform:uppercase;

  font-family:
  "Orbitron",
  sans-serif;

  box-shadow:
    0 0 18px rgba(37,99,235,.22),
    0 0 42px rgba(6,182,212,.16);

}

/* GLOW LINE */

.collection-big::after{

  content:"";

  position:absolute;

  inset:0;

  border-radius:999px;

  padding:1px;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.55),
    transparent,
    rgba(255,255,255,.35)
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;

          mask-composite:exclude;

}

/* SHINE */

.collection-big::before{

  content:"";

  position:absolute;

  top:0;
  left:-140%;

  width:70%;
  height:100%;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );

  transform:skewX(-20deg);

  animation:
  hackerShine 4s linear infinite;

}

@keyframes hackerShine{

  100%{

    left:160%;
  }

}

/* =========================
   HIGHLIGHT
========================= */

.highlight-big{

  margin-top:18px;

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

  gap:10px;

  color:#00e5ff;

  font-size:20px;

  font-weight:900;

  letter-spacing:.8px;

  text-transform:uppercase;

  font-family:
  "Orbitron",
  sans-serif;

  text-shadow:
    0 0 10px rgba(0,229,255,.55);

}

/* =========================
   NOTE
========================= */

.note-big{

  margin-top:16px;

  padding:
  18px 20px;

  border-radius:22px;

  background:
  rgba(15,23,42,.06);

  border:
  1px solid rgba(148,163,184,.16);

  color:#475569;

  font-size:18px;

  line-height:1.9;

  font-weight:600;

  backdrop-filter:
  blur(12px);

}

/* =========================
   PREMIUM SMALL TAGS
========================= */

.book-meta-wrap{

  display:flex;
  flex-wrap:wrap;

  justify-content:center;

  gap:12px;

  margin-top:18px;

}

.book-meta-tag{

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

  padding:
  10px 18px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    rgba(15,23,42,.96),
    rgba(30,41,59,.94)
  );

  border:
  1px solid rgba(96,165,250,.22);

  color:#ffffff;

  font-size:15px;

  font-weight:800;

  letter-spacing:.6px;

  text-transform:uppercase;

  font-family:
  "Orbitron",
  sans-serif;

  box-shadow:
    0 0 14px rgba(37,99,235,.10);

}

/* =========================
   DOWNLOAD BUTTON
========================= */

.download-btn{

  position:relative;

  overflow:hidden;

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

  width:100%;

  min-height:74px;

  border:none;

  border-radius:24px;

  background:
  linear-gradient(
    135deg,
    #00c853,
    #00e676
  );

  color:#ffffff;

  font-size:20px;

  font-weight:900;

  letter-spacing:.8px;

  text-transform:uppercase;

  font-family:
  "Orbitron",
  sans-serif;

  box-shadow:
    0 0 24px rgba(0,230,118,.26);

}

/* DOWNLOAD SHINE */

.download-btn::before{

  content:"";

  position:absolute;

  top:0;
  left:-140%;

  width:70%;
  height:100%;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );

  transform:skewX(-20deg);

  animation:
  hackerShine 4s linear infinite;

}

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

@media(max-width:600px){

  .collection-big{

    font-size:18px;

    padding:
    13px 22px;
  }

  .highlight-big{

    font-size:18px;
  }

  .note-big{

    font-size:16px;
  }

  .download-btn{

    font-size:18px;

    min-height:68px;
  }

}