/*
 * Sakura Kawaii — full custom theme
 * Soft pastel kawaii redesign: bubble shapes, blobs, sparkles, bouncy hovers.
*/

/* ---------- Base ---------- */
body {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 182, 217, 0.35), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(186, 230, 253, 0.3), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(255, 214, 165, 0.25), transparent 50%),
    rgb(var(--cl-background)) !important;
  background-attachment: fixed;
  animation: kawaii-fade-in 0.45s ease;
}

@keyframes kawaii-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Generic rounding bump ---------- */
.rounded-lg {
  border-radius: 1.25rem !important;
}

/* ---------- Cards ---------- */
.bg-card {
  background-color: rgba(var(--cl-card), 0.85) !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 6px 20px -6px rgba(255, 105, 180, 0.25);
}

/* ---------- Product card hover ---------- */
.kawaii-card {
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.kawaii-card:hover {
  transform: translateY(-6px) rotate(-0.5deg) scale(1.015);
  box-shadow: 0 14px 30px -8px rgba(255, 105, 180, 0.4);
  border-color: rgba(255, 105, 180, 0.5) !important;
}
.kawaii-card img {
  transition: transform 0.4s ease;
}
.kawaii-card:hover img {
  transform: scale(1.06) rotate(0.5deg);
}

/* ---------- Badge bounce ---------- */
.kawaii-badge {
  animation: kawaii-pop 2.4s ease-in-out infinite;
}
@keyframes kawaii-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ---------- Header ---------- */
.kawaii-header {
  border-width: 2px !important;
}
.kawaii-sparkle {
  display: inline-block;
  animation: kawaii-spin 4s linear infinite;
}
@keyframes kawaii-spin {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  to { transform: rotate(360deg) scale(1); }
}

/* ---------- Blobs (decorative background shapes) ---------- */
.kawaii-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.kawaii-blob-1 {
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, #ffd1e8, transparent 70%);
  top: -40px;
  right: -30px;
}
.kawaii-blob-2 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #baf0ff, transparent 70%);
  bottom: -30px;
  left: -20px;
}
.kawaii-blob-3 {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, #ffe3b3, transparent 70%);
  top: -50px;
  left: 30%;
}

/* ---------- Hero ---------- */
.kawaii-hero {
  border-width: 2px !important;
  background: linear-gradient(135deg, rgba(var(--cl-card), 0.9), rgba(255, 209, 232, 0.45)) !important;
}
.kawaii-hero h2 {
  background: linear-gradient(90deg, #ff7eb6, #ffa6c9, #ffd6a5, #ff7eb6);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kawaii-gradient-move 6s ease infinite;
}
@keyframes kawaii-gradient-move {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.kawaii-stars {
  position: absolute;
  inset: 0;
  font-size: 1.5rem;
  pointer-events: none;
  z-index: 1;
}
.kawaii-stars span {
  position: absolute;
  opacity: 0.55;
  animation: kawaii-float 5s ease-in-out infinite;
}
.kawaii-stars span:nth-child(1) { top: 12%; left: 6%; animation-delay: 0s; }
.kawaii-stars span:nth-child(2) { top: 70%; left: 90%; animation-delay: 0.6s; font-size: 1.25rem; }
.kawaii-stars span:nth-child(3) { top: 20%; left: 92%; animation-delay: 1.2s; }
.kawaii-stars span:nth-child(4) { top: 80%; left: 12%; animation-delay: 1.8s; font-size: 1.1rem; }
.kawaii-stars span:nth-child(5) { top: 45%; left: 50%; animation-delay: 2.4s; font-size: 1.75rem; opacity: 0.3; }

@keyframes kawaii-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(12deg); }
}

/* ---------- Buttons / Pills ---------- */
.kawaii-pill {
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, filter 0.2s ease;
}
.kawaii-pill:hover {
  transform: translateY(-2px) scale(1.04);
}
.kawaii-btn {
  box-shadow: 0 4px 14px -4px rgba(255, 105, 180, 0.45);
}
.kawaii-btn:hover {
  box-shadow: 0 6px 18px -4px rgba(255, 105, 180, 0.6);
}

.bg-accent-500 {
  background: linear-gradient(135deg, rgb(var(--cl-accent)) 0%, #ffb6d9 100%) !important;
}

/* ---------- Footer ---------- */
.kawaii-footer {
  border-width: 2px !important;
}
.kawaii-social {
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.kawaii-social:hover {
  transform: translateY(-3px) rotate(8deg) scale(1.1);
}

/* ---------- Headings ---------- */
h1, h2, h3 {
  letter-spacing: -0.01em;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: rgb(var(--cl-background));
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffb6d9, #baf0ff);
  border-radius: 10px;
}

/* ---------- Selection ---------- */
::selection {
  background: rgba(255, 182, 217, 0.5);
  color: rgb(var(--cl-t-primary));
}

/* ---------- Inputs ---------- */
input, select, textarea {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border: 2px solid rgba(255, 182, 217, 0.4) !important;
  border-radius: 1rem !important;
}
input:focus, select:focus, textarea:focus {
  border-color: rgb(var(--cl-accent)) !important;
  box-shadow: 0 0 0 3px rgba(var(--cl-accent), 0.2) !important;
}

/* ---------- Choices.js currency selector polish ---------- */
.currency-selector .choices__inner {
  border-radius: 9999px !important;
}
.currency-selector .choices__list--dropdown {
  border-radius: 1rem !important;
}