/*
 * TE Theme - Custom CSS
 * Styles that Tailwind can't handle (pseudo-elements, complex selectors)
 */

/* ── Font smoothing ──────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

/* ── Selection ───────────────────────────────────────── */
::selection { background: rgba(139, 26, 26, 0.15); color: #8B1A1A; }

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f8f8f8; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }

/* ── Marquee ─────────────────────────────────────────── */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { animation: marquee 30s linear infinite; }
.te-topbar:hover .animate-marquee { animation-play-state: paused; }

/* ── Gradient animation ──────────────────────────────── */
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.animate-gradient { animation: gradient 6s ease infinite; }

/* ── Float animation ─────────────────────────────────── */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.te-float-animation { animation: float 4s ease-in-out infinite; }

/* ── Shimmer (skeleton) ──────────────────────────────── */
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.te-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

/* ── Nav link underline ──────────────────────────────── */
.te-nav-link.is-active::after,
.te-nav-link:hover::after { transform: scaleX(1); }
.te-nav-link::after { content: ''; position: absolute; bottom: 0; left: 1rem; right: 1rem; height: 2px; background: #8B1A1A; border-radius: 1px; transform: scaleX(0); transition: transform 0.3s ease; transform-origin: left; }

/* ── Dropdown menu animation ─────────────────────────── */
.te-dropdown { pointer-events: none; }
.te-menu-item.has-children:hover > .te-dropdown { pointer-events: auto; }

/* ── Footer links ────────────────────────────────────── */
.te-footer-links a { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.875rem; color: rgba(255,255,255,0.6); transition: all 0.3s ease; }
.te-footer-links a:hover { color: #F48FB1; padding-left: 0.25rem; }
.te-footer-links a::before { content: ''; width: 0; height: 1px; background: #F48FB1; transition: width 0.3s ease; }
.te-footer-links a:hover::before { width: 12px; }

/* ── Product card hover ──────────────────────────────── */
.te-product-card:hover .te-product-image img:first-child { transform: scale(1.1); }

/* ── Line clamp ──────────────────────────────────────── */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Border width 3 ──────────────────────────────────── */
.border-3 { border-width: 3px; }

/* ── Height 13 (52px) ────────────────────────────────── */
.h-13 { height: 3.25rem; }

/* ── Visibility transition ───────────────────────────── */
.transition-visibility { transition: visibility 0s, opacity 0.3s ease; }

/* ── Star rating ─────────────────────────────────────── */
.te-star-rating { display: inline-flex; gap: 2px; }
.te-star-rating .fas.fa-star { color: #f59e0b; }
.te-star-rating .fas.fa-star-half-stroke { color: #f59e0b; }
.te-star-rating .far.fa-star { color: #d1d5db; }

/* ── Category card corner animations ─────────────────── */
.te-category-card:hover::before { opacity: 1; }

/* ── Newsletter input focus glow ─────────────────────── */
.te-newsletter-form input:focus { box-shadow: 0 0 0 3px rgba(244, 143, 177, 0.2); }

/* ── Instagram grid equal aspect ─────────────────────── */
.te-insta-item { transition: transform 0.5s ease; }
.te-insta-item:hover { transform: scale(0.96); border-radius: 1rem; }

/* ── Accordion transition ────────────────────────────── */
.te-accordion-content { transition: all 0.3s ease; }
.te-accordion-item.bg-white { box-shadow: 0 2px 15px -3px rgba(0,0,0,0.07); }

/* ── Page loader border ──────────────────────────────── */
#te-page-loader .border-3 { border-width: 3px; }

/* ── Swiper pagination custom ────────────────────────── */
.swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(255,255,255,0.5); opacity: 1; transition: all 0.3s ease; }
.swiper-pagination-bullet-active { width: 32px; border-radius: 999px; background: white; }
.te-testimonials-pagination .swiper-pagination-bullet { background: #d4d4d4; }
.te-testimonials-pagination .swiper-pagination-bullet-active { background: #8B1A1A; width: 32px; }

/* ── Responsive adjustments ──────────────────────────── */
@media (max-width: 639px) {
    .te-hero-swiper { min-height: 450px; }
    .te-hero-title { font-size: 1.75rem; }
}

/* ── Print styles ────────────────────────────────────── */
@media print {
    .te-header, .te-footer, #te-back-to-top, #te-toast-container,
    .te-topbar, .swiper-button-prev, .swiper-button-next { display: none !important; }
    body { font-size: 12pt; color: #000; }
}