/* =========================
   CARD / BAR
========================= */
.contactx-card{
  background: #ffffff !important;
  border-radius:22px;
  padding:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.12) !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

.ebookbar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-bottom:12px;padding:12px 14px;border-radius:16px;
  background:rgba(255, 255, 255, 0.06);
  border:1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  justify-content:center !important;
}

.navCenter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
}

/* ปุ่มเป็นแบบไอคอนเล็ก */
.navCenter .ebookbtn{
  padding:8px 10px;
  min-width:42px;
  height:38px;
  border-radius:999px;
  font-size:15px;
  line-height:1;
  background:#f1f5f9 !important;
  border-color:#e2e8f0 !important;
  color:#334155 !important;
}

/* เลขหน้าเด่นขึ้น */
.navCenter .ebookhint{
  font-size:13px;
  font-weight:700;
  color:#1e40af;
  padding:0 2px;
  white-space:nowrap;
}

.ebookbar .ebookbtn:first-child,
.ebookbar .ebookbtn:last-child{
  color:#334155;
  background:#f1f5f9;
  border-color:#e2e8f0;
}

.ebookbtn{
  appearance:none;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;border-radius:12px;padding:9px 14px;cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.ebookbtn:hover{ transform: translateY(-1px); background:rgba(255,255,255,.12); }
.ebookbtn:active{ transform: translateY(0px) scale(.98); }
.ebookbtn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.ebookhint{font-size:13px;opacity:.9; white-space:nowrap;}

.bookWrap{ display:flex; justify-content:center; }

/* =========================
   BOOK STAGE
========================= */
.bookstage{
  width:min(1120px, 96vw);
  height:min(760px, 78vh);
  position:relative;
  border-radius:18px;
  overflow:hidden;
  user-select:none;

  background:
    radial-gradient(1200px 700px at 50% 12%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 600px at 20% 100%, rgba(99,102,241,.12), transparent 65%),
    linear-gradient(180deg, #ffffff, #ffffff);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);
}

/* “ความหนาหนังสือ” ซ้าย/ขวา */
.bookstage:before,
.bookstage:after{
  content:"";
  position:absolute; top:14px; bottom:14px;
  width:28px;
  z-index:1;
  opacity:.75;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  filter: blur(.2px);
}
.bookstage:before{ left:10px; border-radius:16px 0 0 16px; }
.bookstage:after { right:10px; border-radius:0 16px 16px 0; }

/* =========================
   SPREAD (กระดาษ)
========================= */
.spread{
  position:absolute;
  inset:18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0;
  border-radius:16px;
  overflow:hidden;
  z-index:2;

  background:
    radial-gradient(900px 450px at 50% 10%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, #f7f2e9, #f3efe7);
}

/* สันกลาง */
.spine{
  position:absolute; left:50%; top:18px; bottom:18px;
  width:18px; transform:translateX(-50%);
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.15)),
    radial-gradient(18px 140px at 50% 45%, rgba(0,0,0,.28), transparent 72%);
  border-left:1px solid rgba(0,0,0,.10);
  border-right:1px solid rgba(255,255,255,.35);
  opacity:.9;
}

/* =========================
   PAGE BOX (หน้ากระดาษจริง)
========================= */
.pageBox{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(0deg, rgba(255,255,255,.96), rgba(255,255,255,.98)),
    radial-gradient(900px 450px at 50% 10%, rgba(0,0,0,.06), transparent 62%);

  border:1px solid rgba(0,0,0,.08);
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.65);
}

/* เงาเข้าหาสัน */
.pageBox.left{
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    inset -18px 0 28px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.65);
}
.pageBox.right{
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    inset 18px 0 28px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.65);
}

/* ✅ ให้รูปเต็มหน้า */
.pageBox img{
  width:100%;
  height:100%;
  display:block;
  background:transparent;
  object-fit: cover;
  image-rendering:auto;
}

/* มุมพับเบา ๆ (desktop) */
@media (hover:hover){
  .pageBox.right::after{
    content:"";
    position:absolute; right:-2px; top:-2px;
    width:100px; height:100px;
    background: radial-gradient(circle at 0% 100%, rgba(0,0,0,.12), transparent 65%);
    opacity:0;
    transition: opacity .2s ease;
    pointer-events:none;
  }
  .bookstage:hover .pageBox.right::after{ opacity:.20; }
}

/* =========================
   FLIP OVERLAY (หน้าที่กำลังพลิก)
========================= */
.flipOverlay{
  position:absolute;
  top:18px; bottom:18px;
  width:calc(50% - 9px);
  z-index:4;
  pointer-events:none;
  overflow:hidden;
  border-radius:0 16px 16px 0;
  display:none;

  background: linear-gradient(180deg, #f7f2e9, #f3efe7);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
}

.flipOverlay img{
  width:100%;
  height:100%;
  display:block;
  background:transparent;
  object-fit: cover;
}

.flipShade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.40));
  opacity:0;
}

/* สถานะ flip */
.bookstage.is-flipping .flipOverlay{ display:block; }

.bookstage.flip-next .flipOverlay{
  left:calc(50% + 9px);
  transform-origin:left center;
  animation: flipNext .95s cubic-bezier(.2,.7,.2,1) forwards;
}
.bookstage.flip-next .flipOverlay .flipShade{
  animation: shadeNext .95s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes flipNext{
  0%  { transform: perspective(1700px) rotateY(0deg); }
  100%{ transform: perspective(1700px) rotateY(-178deg); }
}
@keyframes shadeNext{
  0%{ opacity:.0; }
  60%{ opacity:.55; }
  100%{ opacity:.12; }
}

.bookstage.flip-prev .flipOverlay{
  left:18px;
  width:calc(50% - 9px);
  border-radius:16px 0 0 16px;
  transform-origin:right center;
  animation: flipPrev .95s cubic-bezier(.2,.7,.2,1) forwards;
}
.bookstage.flip-prev .flipOverlay .flipShade{
  background: linear-gradient(90deg, rgba(0,0,0,.40), rgba(0,0,0,.08));
  animation: shadePrev .95s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes flipPrev{
  0%  { transform: perspective(1700px) rotateY(0deg); }
  100%{ transform: perspective(1700px) rotateY(178deg); }
}
@keyframes shadePrev{
  0%{ opacity:.0; }
  60%{ opacity:.55; }
  100%{ opacity:.12; }
}

/* =========================
   LOADING / HINT / DRAG
========================= */
.loading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; opacity:.95;
  z-index:6;
}
.loading .box{
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.tapHint{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-size:12px; opacity:.55; z-index:7;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
  padding:6px 10px; border-radius:999px;
}

.bookstage.dragging{ cursor: grabbing; }
.bookstage.dragging .spread{ filter: brightness(.99); }

/* =========================
   MOBILE: Responsive ทั้งกรอบ (สวยแบบ Ebook)
========================= */
@media (max-width: 820px){
  .ebookbar{
    padding:10px 10px;
    border-radius:14px;
    gap:8px;
  }
  .ebookbtn{
    padding:10px 12px;
    border-radius:12px;
    font-size:14px;
  }
  .ebookhint{ font-size:12px; }

  .bookstage{
    width: min(520px, 96vw);
    height: min(82vh, 720px);
    border-radius:18px;
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
    border:1px solid rgba(0,0,0,.08);
  }

  .bookstage:before,
  .bookstage:after{ display:none !important; }

  .spread{
    display:flex !important;
    align-items:center;
    justify-content:center;
    inset:14px !important;
    border-radius:16px;
    background: transparent !important;
  }

  .spine{ display:none !important; }
  .pageBox.right{ display:none !important; }

  .pageBox.left{
    width: 100% !important;
    height: 100% !important;
    border-radius:16px;
    overflow:hidden;
    background: linear-gradient(180deg, #ffffff, #fbfbfb);
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow:
      0 14px 28px rgba(0,0,0,.18),
      inset 0 0 0 1px rgba(255,255,255,.65) !important;
    padding:10px;
  }

  .pageBox.left img{
    width:100%;
    height:100%;
    object-fit: contain !important;
    background:#fff !important;
    border-radius:12px;
    display:block;
  }

  .flipOverlay{
    top:14px !important;
    bottom:14px !important;
    left:14px !important;
    width: calc(100% - 28px) !important;
    border-radius:16px !important;
    background: linear-gradient(180deg, #ffffff, #fbfbfb) !important;
  }
  .flipOverlay img{
    object-fit: contain !important;
    background:#fff !important;
    border-radius:12px;
    padding:10px;
  }

  .tapHint{
    bottom:8px;
    font-size:11px;
    opacity:.55;
  }
}