/* =============================================
   TESKO POWER UK LIMITED — Custom Stylesheet
   ============================================= */

/* --- Nav Links --- */
.nav-link {
    @apply text-white/90 hover:text-secondary font-medium text-sm px-4 py-2 rounded-lg transition-all duration-200 hover:bg-white/10;
}
.nav-active {
    @apply text-secondary bg-white/10;
}
.mobile-nav-link {
    @apply block text-white/90 hover:text-secondary py-2.5 px-3 rounded-lg transition-colors font-medium;
}
.dropdown-item {
    @apply block px-4 py-3 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary transition-colors;
}

/* --- Footer --- */
.footer-heading {
    @apply text-white font-semibold text-base mb-4 pb-2 border-b border-white/10;
}
.footer-link {
    @apply text-gray-400 hover:text-secondary text-sm transition-colors duration-200 flex items-center gap-1;
}
.footer-link::before { content: '→'; @apply text-secondary/50 text-xs mr-1; }
.social-icon {
    @apply w-9 h-9 bg-white/10 hover:bg-secondary rounded-lg flex items-center justify-center transition-all duration-300 hover:-translate-y-0.5;
}

/* --- Hero Slider --- */
#hero-slider { position:relative; overflow:hidden; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity 1s ease-in-out; }
.slide.active { opacity:1; position:relative; }
.slide-img { width:100%; height:100%; object-fit:cover; }

/* --- Section Title --- */
.section-title { @apply text-3xl md:text-4xl font-heading font-bold text-primary leading-tight; }
.section-subtitle { @apply text-secondary font-semibold text-sm uppercase tracking-widest mb-3; }
.section-divider { @apply w-16 h-1 bg-secondary rounded-full my-4; }

/* --- Product Card --- */
.product-card {
    @apply bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:-translate-y-1 group;
}
.product-card img {
    @apply w-full h-52 object-cover group-hover:scale-105 transition-transform duration-500;
}

/* --- Service Card --- */
.service-card {
    @apply bg-white rounded-2xl p-7 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1 hover:border-secondary/30 group;
}

/* --- CTA Button --- */
.btn-primary {
    @apply inline-flex items-center gap-2 bg-secondary hover:bg-secondary-dark text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-secondary/30 hover:-translate-y-0.5;
}
.btn-outline {
    @apply inline-flex items-center gap-2 border-2 border-white text-white hover:bg-white hover:text-primary font-semibold px-6 py-3 rounded-xl transition-all duration-300;
}

/* --- Stats --- */
.stat-card {
    @apply text-center p-6;
}

/* --- Admin Flash Messages --- */
.flash-success { @apply bg-green-50 border border-green-300 text-green-800 px-5 py-4 rounded-xl mb-5; }
.flash-error   { @apply bg-red-50 border border-red-300 text-red-800 px-5 py-4 rounded-xl mb-5; }

/* --- Animations --- */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }

/* --- AOS-like scroll reveal (JS-driven) --- */
[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].revealed { opacity:1; transform:translateY(0); }