/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Logo Custom Font: Jost Medium */
@font-face {
  font-family: 'Jost';
  src: url('../../public/fonts/jost.medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.font-logo {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

:root {
  /* Harmonious Art Studio Palette */
  --bg-primary: #FAFAFA;
  --bg-card: #FFFFFF;
  --bg-warm-tint: #FEF9EE;

  /* Artisan Amber / Gold (Warm pencil craftsmanship) */
  --amber-primary: #F59E0B;
  --amber-light: #FEF3C7;
  --amber-accent: #FDE68A;
  --amber-border: #D97706;
  --yellow-sunshine: #FCD34D;

  /* Sophisticated Rose (Balanced contrast, replaces neon pink) */
  --rose-primary: #E11D48;
  --rose-light: #FFE4E6;
  --pink-neon: #FB7185;
  --orange-sunset: #F97316;

  /* Botanical Forest / Trust Green (High readability & trust) */
  --green-whatsapp: #10B981;
  --green-whatsapp-dark: #059669;
  --green-whatsapp-light: #D1FAE5;
  --green-whatsapp-deep: #064E3B;

  /* Sky Indigo (Replaces electric cyan) */
  --cyan-electric: #38BDF8;
  --cyan-light: #E0F2FE;
  --purple-accent: #8B5CF6;

  /* Deep Charcoal Ink (Sophisticated high-contrast borders & text) */
  --black-charcoal: #18181B;
  --ink-border: #18181B;
  --ink-muted: #52525B;
  --white-clean: #FFFFFF;

  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Refined Brutalist Borders */
  --border-brutal: 2.5px solid var(--ink-border);
  --border-brutal-thick: 3.5px solid var(--ink-border);
  --border-brutal-sm: 2px solid var(--ink-border);

  /* Modern Tactile Shadows */
  --shadow-brutal-xs: 2px 2px 0px var(--ink-border);
  --shadow-brutal-sm: 2.5px 2.5px 0px var(--ink-border);
  --shadow-brutal: 4px 4px 0px var(--ink-border);
  --shadow-brutal-lg: 6px 6px 0px var(--ink-border);
  --shadow-brutal-xl: 8px 8px 0px var(--ink-border);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--black-charcoal);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* Archival Studio Canvas with Clean Architectural Lite Grid */
.bg-white-pattern {
  background-color: #FAFAFA;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(24, 24, 27, 0.06), rgba(63, 63, 70, 0.03), transparent 70%),
    linear-gradient(to right, rgba(24, 24, 27, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24, 24, 27, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px;
}

/* Typography Hierarchy */
.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.font-body {
  font-family: var(--font-body);
}

/* Creative Animated Monochrome Graphite & Silver Sheen (Seamless Mathematical Loop) */
.gradient-anim-chrome {
  background: linear-gradient(
    115deg,
    #18181B 0%,
    #27272A 10%,
    #3F3F46 18%,
    #71717A 24%,
    #F4F4F5 28%,
    #71717A 32%,
    #3F3F46 38%,
    #27272A 44%,
    #18181B 50%,
    #27272A 60%,
    #3F3F46 68%,
    #71717A 74%,
    #F4F4F5 78%,
    #71717A 82%,
    #3F3F46 88%,
    #27272A 94%,
    #18181B 100%
  );
  background-size: 200% 100%;
  animation: chromeSeamlessFlow 5s linear infinite;
  color: #FFFFFF;
}

@keyframes chromeSeamlessFlow {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.gradient-anim-graphite {
  background: linear-gradient(135deg, #09090B 0%, #18181B 25%, #3F3F46 50%, #18181B 75%, #09090B 100%);
  background-size: 250% 250%;
  animation: graphiteFlow 6s ease-in-out infinite;
  color: #FFFFFF;
}

@keyframes graphiteFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.shimmer-badge {
  position: relative;
  overflow: hidden;
}

/* Modern Tactile Buttons */
.btn-brutal {
  font-family: var(--font-display);
  font-weight: 800;
  border: var(--border-brutal);
  box-shadow: var(--shadow-brutal);
  border-radius: 14px;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  user-select: none;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.btn-brutal:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal-lg);
}

.btn-brutal:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--ink-border);
}

.btn-pink {
  background: linear-gradient(135deg, #F472B6 0%, #EC4899 50%, #DB2777 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-pink:hover {
  background: linear-gradient(135deg, #FBCFE8 0%, #F472B6 50%, #EC4899 100%);
  color: #FFFFFF;
}

.btn-yellow {
  background: linear-gradient(135deg, #FDE047 0%, #FACC15 50%, #EAB308 100%);
  color: #18181B;
  text-shadow: none;
}
.btn-yellow:hover {
  background: linear-gradient(135deg, #FEF08A 0%, #FDE047 50%, #FACC15 100%);
  color: #18181B;
}

.btn-graphite {
  background: linear-gradient(135deg, #7A7C88 0%, #61636F 50%, #4B4D58 100%);
  background-size: 200% 200%;
  animation: graphiteFlow 5s ease infinite;
  color: #FFFFFF;
}
.btn-graphite:hover {
  background: linear-gradient(135deg, #8B8D9A 0%, #6F717F 50%, #595B67 100%);
  color: #FFFFFF;
}

.btn-cyan {
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F4F5 50%, #E4E4E7 100%);
  color: #09090B;
}
.btn-cyan:hover {
  background: linear-gradient(135deg, #F4F4F5 0%, #E4E4E7 50%, #D4D4D8 100%);
}

.btn-green,
.btn-whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #1EBE5D 50%, #128C7E 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-green:hover,
.btn-whatsapp:hover {
  background: linear-gradient(135deg, #2EE872 0%, #22C55E 50%, #15803D 100%);
  color: #FFFFFF;
}

.btn-orange {
  background: linear-gradient(135deg, #FB923C 0%, #F97316 50%, #EA580C 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-orange:hover {
  background: linear-gradient(135deg, #FDBA74 0%, #FB923C 50%, #EA580C 100%);
  color: #FFFFFF;
}

.btn-white {
  background: #FFFFFF;
  color: var(--black-charcoal);
}
.btn-white:hover {
  background: #F4F4F5;
}

/* Refined Cards */
.card-brutal {
  background: var(--white-clean);
  border: var(--border-brutal);
  box-shadow: var(--shadow-brutal-sm);
  border-radius: 20px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-brutal:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brutal);
}

/* Modern Monochromatic Badge Stickers */
.badge-sticker {
  font-family: var(--font-display);
  font-weight: 800;
  border: var(--border-brutal-sm);
  box-shadow: 2px 2px 0px var(--ink-border);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  line-height: 1.25;
}

.badge-yellow {
  background: linear-gradient(135deg, #6B6D7A 0%, #525460 100%);
  color: #FFFFFF;
}

.badge-pink {
  background: linear-gradient(135deg, #F4F4F5 0%, #E4E4E7 100%);
  color: #09090B;
}

.badge-green {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #FFFFFF;
}

.badge-orange {
  background: linear-gradient(135deg, #FB923C 0%, #EA580C 100%);
  color: #FFFFFF;
}

/* Micro-Animations & Physics */
.float-bob {
  animation: floatBob 3.5s ease-in-out infinite;
}

@keyframes floatBob {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Radiant Monochrome Gradient Marquee */
.marquee-wrapper {
  background: linear-gradient(90deg, #09090B 0%, #18181B 25%, #27272A 50%, #18181B 75%, #09090B 100%);
  background-size: 200% auto;
  animation: graphiteFlow 10s ease infinite;
  border-top: var(--border-brutal);
  border-bottom: var(--border-brutal);
  box-shadow: 0px 4px 0px var(--ink-border);
  transform: rotate(-2deg) scale(1.02);
  margin: 36px -16px;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  z-index: 10;
  position: relative;
}

.marquee-content {
  display: inline-block;
  animation: marqueeScroll 26s linear infinite;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  padding: 10px 0;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F4EFE6;
}
::-webkit-scrollbar-thumb {
  background: var(--amber-accent);
  border: 2px solid var(--black-charcoal);
  border-radius: 8px;
}

@media (max-width: 640px) {
  ::-webkit-scrollbar {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
  }
  html, body {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
}

/* Glassmorphism Backdrop for Modals */
.modal-backdrop {
  background: rgba(24, 24, 27, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Fine-Art Canvas Paper Simulation Texture with Subtle Artist Grid */
.canvas-paper-texture {
  background-color: #FFFFFF;
  background-image: 
    linear-gradient(to right, rgba(24, 24, 27, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24, 24, 27, 0.035) 1px, transparent 1px);
  background-size: 14px 14px, 14px 14px;
  box-sizing: border-box;
}

/* Specific compact styling for paper internal badges to prevent clipping */
#canvas-paper-frame .badge-sticker {
  padding: 2px 7px !important;
  font-size: 10px !important;
  box-shadow: 1.5px 1.5px 0px var(--ink-border) !important;
  border-radius: 9999px !important;
  border-width: 1.5px !important;
  letter-spacing: 0 !important;
}

/* Studio Drafting Mat Grid */
.canvas-stage-desk {
  background-color: #ECECF0;
  background-image: 
    linear-gradient(to right, rgba(24, 24, 27, 0.065) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24, 24, 27, 0.065) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
  height: 260px;
}

@media (min-width: 640px) {
  .canvas-stage-desk {
    height: 300px;
  }
}

/* Mobile Carousel for Recent Commissions */
.carousel-mobile-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}
.carousel-mobile-track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .carousel-mobile-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}

.carousel-dot {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.carousel-dot.active {
  width: 26px;
  background-color: var(--amber-accent) !important;
  box-shadow: 1.5px 1.5px 0px var(--black-charcoal);
}

/* Interactive Animations & Physics */
@keyframes pricePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); color: var(--rose-primary); }
  100% { transform: scale(1); }
}

@keyframes pricePop {
  0% { transform: scale(0.9); opacity: 0.7; }
  55% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

.price-pop {
  animation: pricePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

@keyframes btnSelectPop {
  0% { transform: scale(0.96) translateY(1px); }
  50% { transform: scale(1.025) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}

.btn-select-pop {
  animation: btnSelectPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconPop {
  0% { transform: scale(0.7) rotate(-5deg); opacity: 0.6; }
  60% { transform: scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

.icon-pop {
  animation: iconPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

@keyframes paperWobble {
  0% { transform: scale(0.96) rotate(-0.8deg); }
  45% { transform: scale(1.02) rotate(0.6deg); }
  75% { transform: scale(0.995) rotate(-0.2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.paper-wobble {
  animation: paperWobble 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pencilFloat {
  0%, 100% { transform: translateY(0px) rotate(-10deg); }
  50% { transform: translateY(-4px) rotate(-4deg); }
}

.pencil-float {
  display: inline-block;
  animation: pencilFloat 2.2s ease-in-out infinite;
}

.deposit-shimmer {
  background-color: #FEF3C7 !important;
  color: #92400E !important;
  font-weight: 800 !important;
}

.cta-pulse {
  animation: ctaPulse 3.5s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow-brutal); }
  50% { transform: scale(1.015); box-shadow: var(--shadow-brutal-lg); }
}

/* Form Validation Shake & Error Styles */
@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.shake-error {
  animation: shakeError 0.35s ease-in-out !important;
  border-color: #EF4444 !important;
}

/* Smooth Touch & Spring Physics for Customizer Buttons */
.btn-brutal, button[data-action] {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), 
              background 0.25s ease, 
              color 0.2s ease, 
              border-color 0.2s ease !important;
}

.btn-brutal:hover, button[data-action]:hover {
  transform: translate(-2px, -2px) scale(1.015);
  box-shadow: var(--shadow-brutal-lg);
}

.btn-brutal:active, button[data-action]:active {
  transform: scale(0.97) translate(1px, 1px) !important;
  box-shadow: 1.5px 1.5px 0px var(--ink-border) !important;
}

/* Customizer Panel Smooth Transition */
#customizer {
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.canvas-stage-desk {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.canvas-paper-texture {
  transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), 
              height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), 
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease !important;
}

/* Mobile Responsive Utility Rules */
@media (max-width: 640px) {
  .btn-brutal {
    padding: 9px 16px;
    font-size: 0.82rem;
    gap: 6px;
    border-width: 2px;
    border-radius: 12px;
  }
  .badge-sticker {
    padding: 3.5px 9px;
    font-size: 0.72rem;
    border-width: 1.5px;
  }
  .marquee-wrapper {
    margin: 18px -12px;
    transform: rotate(-1.5deg) scale(1.02);
  }
  .marquee-content {
    font-size: 0.92rem;
    padding: 8px 0;
  }
  .card-brutal {
    border-width: 2px;
    box-shadow: 3px 3px 0px var(--ink-border);
    border-radius: 16px;
  }
}