@import "tailwindcss";
@import "../styles/swiper.css";

@theme {
  --color-primary: #1790d7;
  --color-primary-dark: #0d6fa8;
  --color-primary-light: #4db3e8;
  --color-secondary: linear-gradient(to right, #1790d7, #4db3e8);
}

button {
  cursor: pointer !important;
}

.category-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-scroll::-webkit-scrollbar {
  display: none;
}

@keyframes snackbar-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.snackbar-enter {
  animation: snackbar-in 0.2s ease-out;
}

.menu-panel-enter {
  animation: menu-panel-in 0.2s ease-out;
}

@keyframes menu-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.animate-slide-in-right {
  animation: slide-in-right 0.25s ease-out;
}

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

@keyframes flash-deal-products-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-flash-deal-products-scroll {
  animation: flash-deal-products-scroll 12s linear infinite;
}

/* Flash deals carousel pagination */
.deals-pagination .swiper-pagination-bullet,
.flash-deals-pagination .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
  width: 8px;
  height: 8px;
  transition: background 0.2s, transform 0.2s;
}
.deals-pagination .swiper-pagination-bullet-active,
.flash-deals-pagination .swiper-pagination-bullet-active {
  background: #fff;
  transform: scale(1.2);
}
.flash-deals-pagination .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.2);
}
.flash-deals-pagination .swiper-pagination-bullet-active {
  background: #1790d7;
}

/* Consistent logo container: avoids white-background logo looking inconsistent across header, footer, auth */
.site-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.site-logo-wrap img {
  display: block;
  object-fit: contain;
}
.site-logo-wrap--header {
  width: 140px;
  height: 36px;
  min-width: 140px;
  min-height: 36px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.site-logo-wrap--header img {
  width: 140px;
  height: 36px;
  max-width: 140px;
  max-height: 36px;
}
.site-logo-wrap--footer {
  width: 140px;
  height: 44px;
  min-width: 140px;
  min-height: 44px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.site-logo-wrap--footer img {
  width: 140px;
  height: 44px;
  max-width: 140px;
  max-height: 44px;
}
.site-logo-wrap--auth {
  background: transparent;
  box-shadow: none;
  padding: 8px 14px;
}
.site-logo-wrap--auth img { height: 3rem; width: 140px; max-width: 180px; object-fit: contain; }

.text-shine {
  background: linear-gradient(
    180deg,
    #0d6fa8 0%,
    #1790d7 50%,
    #0d6fa8 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.swiper-initialized {
  padding: 1rem !important;
}

.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

.swiper-pagination {
  display: none !important;
}

/* Product photos carousel inside each flash deal card: no dots, smooth slide */
.flash-deal-product-photos .swiper-pagination {
  display: none !important;
}
.flash-deal-product-photos .swiper-wrapper {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.flash-deal-product-strip .flash-deal-product-photos .swiper-slide {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Product card swipers: equal-height slides so cards align */
.product-card-swiper .swiper-wrapper {
  align-items: stretch;
}
.product-card-swiper .swiper-slide {
  display: flex;
  height: auto;
}
.product-card-swiper .swiper-slide > div {
  width: 100%;
  min-height: 100%;
}

/* Premium skeleton shimmer */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgb(243 244 246) 0%,
    rgb(229 231 235) 20%,
    rgb(243 244 246) 40%,
    rgb(243 244 246) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* Rich text (Quill/CKEditor) — links match site default link color */
.rich-text-content a,
.rich-text-content a:link,
.rich-text-content a:visited {
  color: #1790d7 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.rich-text-content a:hover,
.rich-text-content a:focus {
  color: #0d6fa8 !important;
  text-decoration: underline;
}

/* CMS / blog rich text — font sizes from admin settings (CSS vars set by TypographyStyles) */
:root {
  --font-size-h1: 1.875rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 1rem;
  --font-size-h6: 0.875rem;
  --font-size-p: 1rem;
  --font-size-body: 1.125rem;
}

.rich-text-content,
.cms-content {
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: #4b5563;
}

.rich-text-content > *:first-child,
.cms-content > *:first-child {
  margin-top: 0 !important;
}

.rich-text-content h1,
.rich-text-content .ql-header-1,
.cms-content h1,
.cms-content .ql-header-1 {
  font-size: var(--font-size-h1) !important;
  font-weight: 700;
  color: #111827;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.rich-text-content h2,
.rich-text-content .ql-header-2,
.cms-content h2,
.cms-content .ql-header-2 {
  font-size: var(--font-size-h2) !important;
  font-weight: 700;
  color: #111827;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.rich-text-content h3,
.rich-text-content .ql-header-3,
.cms-content h3,
.cms-content .ql-header-3 {
  font-size: var(--font-size-h3) !important;
  font-weight: 700;
  color: #111827;
  margin-top: 1rem;
  margin-bottom: 0.375rem;
  line-height: 1.35;
}

.rich-text-content h4,
.cms-content h4 {
  font-size: var(--font-size-h4) !important;
  font-weight: 700;
  color: #111827;
  margin-top: 0.875rem;
  margin-bottom: 0.375rem;
}

.rich-text-content h5,
.cms-content h5 {
  font-size: var(--font-size-h5) !important;
  font-weight: 600;
  color: #111827;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

.rich-text-content h6,
.cms-content h6 {
  font-size: var(--font-size-h6) !important;
  font-weight: 600;
  color: #374151;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.rich-text-content p,
.cms-content p {
  font-size: var(--font-size-p);
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.rich-text-content p:last-child,
.cms-content p:last-child {
  margin-bottom: 0;
}

/* Quill/CKEditor empty lines — hide if any slip through */
.rich-text-content p:empty,
.cms-content p:empty {
  display: none;
  margin: 0;
  padding: 0;
}

@supports selector(:has(*)) {
  .rich-text-content p:has(> br:only-child),
  .cms-content p:has(> br:only-child),
  .rich-text-content p:has(> span:only-child > br:only-child),
  .cms-content p:has(> span:only-child > br:only-child) {
    display: none;
    margin: 0;
    padding: 0;
  }
}

.rich-text-content ul,
.rich-text-content ol,
.cms-content ul,
.cms-content ol {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.5rem;
}

.rich-text-content li,
.cms-content li {
  margin-bottom: 0.25rem;
}

.cms-content img {
  border-radius: 0.75rem;
}

.rich-text-content img,
.cms-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}