/* ChitraVithi Artisanal & Digital Creations Design System */
:root {
  /* Colors directly inspired by the ChitraVithi Logo */
  --cv-navy: #0B2240;          /* Deep Royal Navy from CHITRA lettering & silhouette */
  --cv-navy-dark: #071626;     /* Midnight Navy */
  --cv-navy-light: #163A66;    /* Soft Navy */
  
  --cv-orange: #FF6A00;        /* Vibrant Flame Orange from paintbrush tip */
  --cv-orange-hover: #E05300;
  
  --cv-magenta: #E01E5A;       /* Magenta Pink feather from brush */
  --cv-purple: #7038A8;        /* Royal Purple from VITHI lettering */
  --cv-teal: #0096C7;          /* Electric Cyan / Teal accent */
  
  --cv-canvas: #F8FAFC;        /* Clean art gallery canvas background */
  --cv-border: #E2E8F0;
  
  /* Primary & Accent references */
  --primary: #0B2240;
  --primary-hover: #163A66;
  --secondary: #FF6A00;
  --accent: #E01E5A;
}

/* ==========================================================
   GENEROUS SIDE SPACING / GUTTERS FOR ALL SECTIONS & PAGES
   (Matches user UI reference: spacious left & right margins)
   ========================================================== */
.container,
.site-container,
section > .container,
main > .container,
footer > .container {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;  /* 24px on small mobile */
  padding-right: 1.5rem !important; /* 24px on small mobile */
  box-sizing: border-box !important;
}

/* Header specific container allowing single-row nav */
.header-container {
  width: 100% !important;
  max-width: 1380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .container,
  .site-container,
  section > .container,
  main > .container,
  footer > .container {
    padding-left: 2.5rem !important;  /* 40px on tablet */
    padding-right: 2.5rem !important; /* 40px on tablet */
  }

  .header-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .container,
  .site-container,
  section > .container,
  main > .container,
  footer > .container {
    padding-left: 4.5rem !important;  /* 72px on laptop */
    padding-right: 4.5rem !important; /* 72px on laptop */
    max-width: 1240px !important;
  }

  .header-container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (min-width: 1280px) {
  .container,
  .site-container,
  section > .container,
  main > .container,
  footer > .container {
    padding-left: 6rem !important;    /* 96px on desktop - provides the generous breathing space */
    padding-right: 6rem !important;   /* 96px on desktop */
    max-width: 1300px !important;
  }
}

@media (min-width: 1536px) {
  .container,
  .site-container,
  section > .container,
  main > .container,
  footer > .container {
    padding-left: 7.5rem !important;  /* 120px on large monitor screens */
    padding-right: 7.5rem !important; /* 120px on large monitor screens */
    max-width: 1380px !important;
  }
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--cv-canvas);
  color: #1E293B;
}

h1, h2, h3, .font-heading {
  font-family: 'Cinzel', serif;
}

/* ChitraVithi Signature Spectrum Gradient */
.bg-cv-gradient {
  background: linear-gradient(135deg, #FF6A00 0%, #E01E5A 50%, #7038A8 100%);
}

.bg-cv-gradient-hover:hover {
  background: linear-gradient(135deg, #E05300 0%, #BE185D 50%, #5B21B6 100%);
}

.bg-cv-navy-gradient {
  background: linear-gradient(135deg, #071626 0%, #0B2240 50%, #163A66 100%);
}

.text-cv-gradient {
  background: linear-gradient(135deg, #FF6A00 0%, #E01E5A 50%, #7038A8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subtle Art Border */
.cv-border-top {
  border-top: 2px solid transparent;
  border-image: linear-gradient(to right, #FF6A00, #E01E5A, #7038A8, #0096C7) 1;
}

.cv-border-bottom {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, #FF6A00, #E01E5A, #7038A8, #0096C7) 1;
}

/* Product Card Hover & Shadows */
.product-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--cv-border);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(11, 34, 64, 0.1), 0 8px 10px -6px rgba(11, 34, 64, 0.05);
  border-color: #CBD5E1;
}

.product-card .img-container {
  overflow: hidden;
  position: relative;
}

.product-card .img-container img {
  transition: transform 0.6s ease;
}

.product-card:hover .img-container img {
  transform: scale(1.06);
}

/* Custom Badges */
.badge-artisan {
  background: linear-gradient(135deg, #FF6A00 0%, #E01E5A 100%);
  color: #FFFFFF;
}

.badge-heritage {
  background: linear-gradient(135deg, #0B2240 0%, #163A66 100%);
  color: #FFFFFF;
}

.badge-customizable {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}

/* Live Inscription Preview Box */
.live-preview-box {
  background: radial-gradient(circle, #F8FAFC 0%, #EFF6FF 100%);
  border: 2px dashed #93C5FD;
}

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 300px;
  max-width: 420px;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  animation: slideInToast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.25s ease;
}

.toast-success {
  background: #064E3B;
  color: #ECFDF5;
  border-left: 5px solid #10B981;
}

.toast-error {
  background: #881337;
  color: #FFF1F2;
  border-left: 5px solid #F43F5E;
}

.toast-info {
  background: #0B2240;
  color: #F0F9FF;
  border-left: 5px solid #0096C7;
}

@keyframes slideInToast {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Universal Button Standards - Guarantees High Contrast & No White Buttons */
.btn-primary,
button.btn-primary,
a.btn-primary {
  background-color: #0B2240 !important;
  color: #FFFFFF !important;
}
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background-color: #163A66 !important;
  color: #FFFFFF !important;
}

/* Ensure all buttons with text-white have dark high-contrast backgrounds */
button.text-white:not([class*="bg-"]):not([style*="background"]) {
  background-color: #0B2240 !important;
}

/* ==========================================================
   3D DIGITAL FLIPBOOK & E-BOOK STYLES
   ========================================================== */
.book-3d-card {
  perspective: 1200px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.book-3d-card:hover {
  transform: translateY(-8px);
}

.book-3d-cover-wrap {
  position: relative;
  transform-style: preserve-3d;
  box-shadow: -6px 10px 20px -4px rgba(15, 23, 42, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  border-radius: 6px 14px 14px 6px;
  overflow: hidden;
  transition: transform 0.5s ease;
}

.book-3d-card:hover .book-3d-cover-wrap {
  transform: rotateY(-6deg) scale(1.02);
  box-shadow: -10px 16px 26px -4px rgba(15, 23, 42, 0.18), 0 8px 10px -4px rgba(0, 0, 0, 0.06);
}

/* Book Spine Simulation */
.book-spine-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0.25) 40%, rgba(0,0,0,0.15) 100%);
  z-index: 10;
  pointer-events: none;
}

/* Page Stack Edge Effect */
.book-pages-edge {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 0;
  width: 6px;
  background: repeating-linear-gradient(to bottom, #FFFFFF 0px, #F1F5F9 2px, #CBD5E1 3px);
  z-index: 5;
  border-radius: 0 4px 4px 0;
  box-shadow: inset 1px 0 2px rgba(0,0,0,0.1);
}

/* Realistic 3D Flipbook Modal Spread */
.flipbook-modal-viewport {
  perspective: 2000px;
}

.flipbook-sheet {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

.flipbook-page-turning-left {
  transform-origin: left center;
  animation: pageTurnLeft 0.5s forwards;
}

.flipbook-page-turning-right {
  transform-origin: right center;
  animation: pageTurnRight 0.5s forwards;
}

@keyframes pageTurnLeft {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(-90deg) scale(0.96); box-shadow: -10px 10px 20px rgba(0,0,0,0.2); }
  100% { transform: rotateY(0deg); }
}

@keyframes pageTurnRight {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg) scale(0.96); box-shadow: 10px 10px 20px rgba(0,0,0,0.2); }
  100% { transform: rotateY(0deg); }
}

/* Flipbook spine crease in double spread */
.flipbook-crease {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 20px;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.01) 40%, rgba(0,0,0,0.08) 100%);
  z-index: 20;
  pointer-events: none;
}