/* ═══════════════════════════════════════════════════════════════
   cRyPtO sMaRt — PUBLISHER-GRADE 3D BOOK COVERS
   Penguin/HarperCollins level — real 3D depth, foil titles
   Logo framed by gold corner brackets
   Works in BOTH dark and light themes
   ═══════════════════════════════════════════════════════════════ */

/* ── 3D BOOK WRAPPER — default slight angle ── */
.book-cover{
  position:relative;width:100%;max-width:280px;margin:0 auto;
  aspect-ratio:5/7.2;
  display:flex;flex-direction:column;align-items:center;
  overflow:visible;
  transform:perspective(900px) rotateY(-4deg);
  transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(0.23,1,0.32,1);
}

/* ── THE COVER FACE ── */
.book-cover .bc-face{
  position:relative;width:100%;height:100%;
  padding:24px 26px 18px;
  display:flex;flex-direction:column;align-items:center;
  overflow:hidden;z-index:2;
  box-shadow:
    8px 10px 35px rgba(0,0,0,0.5),
    3px 4px 12px rgba(0,0,0,0.3),
    inset -2px 0 8px rgba(0,0,0,0.15),
    0 0 1px rgba(201,168,76,0.15);
}

/* Paper/leather texture */
.book-cover .bc-face::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;mix-blend-mode:overlay;
}
.book-cover .bc-face>*{position:relative;z-index:1}

/* ── THICK SPINE — left edge with real depth ── */
.bc-spine{
  position:absolute;top:0;left:0;width:16px;height:100%;z-index:3;
  background:linear-gradient(90deg,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.2) 20%,
    rgba(255,255,255,0.05) 40%,
    rgba(0,0,0,0.05) 60%,
    rgba(0,0,0,0.15) 80%,
    rgba(0,0,0,0.3) 100%
  );
  border-right:1px solid rgba(255,255,255,0.03);
}

/* ── PAGE EDGES — right side, thick and visible ── */
.book-cover::after{
  content:'';
  position:absolute;top:4px;right:-12px;width:12px;height:calc(100% - 8px);z-index:1;
  background:
    linear-gradient(90deg,
      #c8c2b0 0px,#d8d2c0 1px,
      #bfb9a8 2px,#d0cab8 3px,
      #c4bead 4px,#d5cfbc 5px,
      #c0baaa 6px,#cfc9b6 7px,
      #c6c0ae 8px,#d2ccba 9px,
      #c2bcab 10px,#cdc7b4 12px
    );
  border-radius:0 3px 3px 0;
  box-shadow:3px 3px 8px rgba(0,0,0,0.3),1px 0 2px rgba(0,0,0,0.15);
  transform:perspective(200px) rotateY(8deg);
}

/* Light theme page edges */
[data-theme="light"] .book-cover::after{
  background:
    linear-gradient(90deg,
      #b5b0a0 0px,#c5c0b0 1px,
      #aca7a0 2px,#bcb7a8 3px,
      #b0aba0 4px,#c0bbb0 5px,
      #ada8a0 6px,#bdb8a8 7px,
      #b2ada0 8px,#c2bdae 9px,
      #afa9a0 10px,#bfbab0 12px
    );
  box-shadow:3px 3px 10px rgba(0,0,0,0.2),1px 0 2px rgba(0,0,0,0.1);
}

/* ── BOTTOM SHADOW — book on table ── */
.book-cover::before{
  content:'';
  position:absolute;bottom:-14px;left:8%;width:88%;height:14px;z-index:0;
  background:radial-gradient(ellipse at 60% 0%,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.15) 50%,transparent 75%);
  filter:blur(3px);
  transform:skewX(-3deg);
}
[data-theme="light"] .book-cover::before{
  background:radial-gradient(ellipse at 60% 0%,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.08) 50%,transparent 75%);
}

/* ── HOVER — deeper 3D tilt ── */
.course-item:hover .book-cover{
  transform:perspective(900px) rotateY(-8deg) translateY(-6px);
}
.course-item:hover .bc-face{
  box-shadow:
    12px 16px 50px rgba(0,0,0,0.6),
    5px 8px 20px rgba(0,0,0,0.35),
    inset -2px 0 10px rgba(0,0,0,0.2),
    0 0 40px rgba(201,168,76,0.08);
}

/* Gold light sweep on hover */
.bc-face::before{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent 38%,rgba(201,168,76,0.05) 42%,rgba(245,230,176,0.1) 50%,rgba(201,168,76,0.05) 58%,transparent 62%);
  z-index:5;pointer-events:none;
  transition:left 0.9s ease;
}
.course-item:hover .bc-face::before{left:200%}

/* ═══════════════════════════════════════════
   COVER COLORS — Deep, rich, publisher-grade
   Same in both themes (books are self-contained)
   ═══════════════════════════════════════════ */
.bc-1 .bc-face{background:linear-gradient(170deg,#0c1628 0%,#0a1220 40%,#070d18 100%);color:#c8c0b0}
.bc-2 .bc-face{background:linear-gradient(170deg,#141414 0%,#0f0f0f 40%,#0a0a0a 100%);color:#c8c0b0}
.bc-3 .bc-face{background:linear-gradient(170deg,#1e0c14 0%,#180a10 40%,#10060a 100%);color:#d0c0c0}
.bc-4 .bc-face{background:linear-gradient(170deg,#0a1810 0%,#08140c 40%,#040e08 100%);color:#b8c8b8}
.bc-5 .bc-face{background:linear-gradient(170deg,#12101e 0%,#0e0c18 40%,#080610 100%);color:#c0bcc8}
.bc-6 .bc-face{background:linear-gradient(170deg,#181008 0%,#140e06 40%,#0e0a04 100%);color:#c8c0b0}

/* Light theme shadow adjustments */
[data-theme="light"] .bc-face{
  box-shadow:
    8px 10px 40px rgba(0,0,0,0.3),
    3px 4px 12px rgba(0,0,0,0.2),
    inset -2px 0 8px rgba(0,0,0,0.1),
    0 0 1px rgba(201,168,76,0.2);
}
[data-theme="light"] .course-item:hover .bc-face{
  box-shadow:
    12px 16px 55px rgba(0,0,0,0.35),
    5px 8px 20px rgba(0,0,0,0.25),
    inset -2px 0 10px rgba(0,0,0,0.15),
    0 0 45px rgba(201,168,76,0.1);
}

/* ═══════════════════════════════════════════
   COVER ELEMENTS
   ═══════════════════════════════════════════ */

/* ── GOLD CORNER BRACKETS — forms frame for logo ── */
.bc-corner{position:absolute;width:28px;height:28px;z-index:3}
.bc-corner::before,.bc-corner::after{content:'';position:absolute;background:#d4af37}
.bc-tl{top:18px;left:18px}.bc-tl::before{width:28px;height:1.5px;top:0;left:0}.bc-tl::after{width:1.5px;height:28px;top:0;left:0}
.bc-tr{top:18px;right:18px}.bc-tr::before{width:28px;height:1.5px;top:0;right:0}.bc-tr::after{width:1.5px;height:28px;top:0;right:0}
.bc-bl{bottom:18px;left:18px}.bc-bl::before{width:28px;height:1.5px;bottom:0;left:0}.bc-bl::after{width:1.5px;height:28px;bottom:0;left:0}
.bc-br{bottom:18px;right:18px}.bc-br::before{width:28px;height:1.5px;bottom:0;right:0}.bc-br::after{width:1.5px;height:28px;bottom:0;right:0}

/* ── TOP GOLD BAR ── */
.bc-topbar{
  width:100%;height:2px;
  background:linear-gradient(90deg,#a08030,#f5e6b8,#d4af37,#f5e6b8,#a08030);
  background-size:300% auto;animation:shimmer 4s linear infinite;
  margin-bottom:12px;
  box-shadow:0 1px 10px rgba(201,168,76,0.25);
}

/* ── LOGO — centered inside corner frame ── */
.bc-logo{
  width:50px;height:50px;object-fit:contain;
  margin:0 auto;display:block;
  position:absolute;
  top:-4%;left:12%;
  transform:translate(-50%,-50%);
  z-index:4;
  filter:brightness(2.5) contrast(0.9) drop-shadow(0 0 15px rgba(201,168,76,0.6)) drop-shadow(0 0 30px rgba(201,168,76,0.25));
}

/* ── PUBLISHER NAME ── */
.bc-brand{
  font-family:'Playfair Display',serif;font-size:0.58rem;font-weight:700;
  letter-spacing:5px;
  background:linear-gradient(135deg,#a08030,#f5e6b8,#d4af37,#f5e6b8,#a08030);
  background-size:300% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:shimmer 5s linear infinite;
  margin-top:3px;
}

/* ── SERIES LABEL ── */
.bc-series{
  font-family:'Outfit',sans-serif;font-size:0.36rem;font-weight:500;
  letter-spacing:4px;text-transform:uppercase;
  color:#d4af37;opacity:0.35;margin-top:4px;
}

/* ── GOLD DIVIDER ── */
.bc-divider{
  width:50%;height:1px;margin:9px auto;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,0.5),transparent);
}

/* ── MAIN TITLE — with emboss shadow ── */
.bc-title-main{
  font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:800;
  line-height:1.1;letter-spacing:3px;text-align:center;
  text-shadow:0 2px 4px rgba(0,0,0,0.6),0 0 1px rgba(0,0,0,0.3);
}

/* ── GOLD FOIL TITLE ── */
.bc-title-gold{
  font-family:'Playfair Display',serif;font-size:2rem;font-weight:800;
  line-height:1.1;letter-spacing:3px;text-align:center;
  background:linear-gradient(135deg,#8a6e28 0%,#f5e6b8 15%,#d4af37 30%,#f8ecc4 50%,#c9a84c 65%,#f5e6b8 80%,#a08030 100%);
  background-size:400% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:shimmer 5s linear infinite;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.bc-title-sub{
  font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:800;
  line-height:1.1;letter-spacing:3px;text-align:center;
  text-shadow:0 2px 4px rgba(0,0,0,0.6);
}

.bc-title-danger{
  font-family:'Playfair Display',serif;font-size:2rem;font-weight:800;
  line-height:1.1;letter-spacing:2px;text-align:center;
  color:#cc4444;text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* ── SUBTITLE ── */
.bc-subtitle{
  font-family:'Outfit',sans-serif;font-size:0.5rem;font-weight:300;
  letter-spacing:1.5px;text-align:center;line-height:1.7;
  opacity:0.45;margin-top:5px;
}

/* ── CHART DECORATION ── */
.bc-chart{
  flex:1;width:100%;display:flex;align-items:flex-end;
  padding:0 10px;margin-top:5px;opacity:1;
}
.bc-chart svg{width:100%;height:auto;color:#d4af37}
.bc-chart svg *{opacity:1 !important}

/* ── BOTTOM — Author + Seal ── */
.bc-bottom{
  width:100%;text-align:center;margin-top:auto;padding-top:5px;
}
.bc-author{
  font-family:'Outfit',sans-serif;font-size:0.42rem;font-weight:500;
  letter-spacing:3px;
  background:linear-gradient(90deg,#a08030,#d4af37,#a08030);
  background-size:300% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:shimmer 6s linear infinite;
  margin-top:6px;
}

/* ── FREE COURSE GOLD SEAL ── */
.bc-badge{
  display:inline-block;
  font-family:'Outfit',sans-serif;font-size:0.36rem;font-weight:600;
  letter-spacing:3px;
  color:#d4af37;
  border:1px solid rgba(212,175,55,0.35);
  padding:4px 14px;margin-top:8px;
  box-shadow:0 0 10px rgba(212,175,55,0.08),inset 0 0 8px rgba(212,175,55,0.05);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:768px){
  .book-cover{max-width:240px;transform:perspective(900px) rotateY(-3deg)}
  .book-cover .bc-face{padding:20px 20px 14px}
  .bc-title-main{font-size:1.3rem}
  .bc-title-gold{font-size:1.5rem}
  .bc-title-sub{font-size:1.1rem}
  .bc-title-danger{font-size:1.5rem}
  .book-cover::after{right:-8px;width:8px}
  .bc-logo{width:40px;height:40px}
  .bc-corner{width:22px;height:22px}
  .bc-tl{top:14px;left:14px}.bc-tr{top:14px;right:14px}
  .bc-bl{bottom:14px;left:14px}.bc-br{bottom:14px;right:14px}
  .bc-corner::before{width:22px !important}.bc-corner::after{height:22px !important}
}