.swiper, .swiper * { outline: none; }
/* --- Shared Styles for DevBase --- */

/* --- Typography & Color Psychology --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa; /* A very light gray for a soft, clean background */
    color: #343a40; /* Dark gray for text, softer than pure black */
}

.navbar-brand, h1, h2, h3 {
    font-weight: 700; /* Bold headings for clear hierarchy */
}

/* --- Trustworthy Colors --- */
.btn-primary {
    background-color: #0d6efd; /* A confident, standard blue for primary actions */
    border-color: #0d6efd;
    font-weight: 600;
    padding: 12px 30px;
    font-size: 1.1rem;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.text-primary {
    color: #0d6efd !important;
}

/* --- Layout & "Premium" Spacing --- */
.page-header { padding: 4rem 0; background-color: #ffffff; }
.section { padding: 5rem 0; }
.footer { background-color: #343a40; color: #f8f9fa; padding-top: 3rem; padding-bottom: 3rem; }

/* --- Product Detail Styling --- */
.pd-hero { background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%); padding: 2.5rem 0; }
.pd-main { padding-top: 2rem; }
.pd-image-wrap { overflow: hidden; border-radius: .5rem; display: flex; align-items: center; justify-content: center; }
.pd-image-wrap img { max-width: 1600px; width: 100%; height: auto; }
.img-zoom img { transition: transform .6s ease, filter .3s ease; }
.img-zoom img:hover { transform: scale(1.04); }
.sticky-buy { position: sticky; top: 90px; }
.price-pill { color: #0d6efd; }
.pd-includes li { padding: .35rem 0; }
.pd-highlights li { padding: .3rem 0; }
.pd-highlights i { width: 20px; }
.feature-tile { background: #f8f9fb; border: 1px solid #eef1f4; border-radius: .5rem; padding: .9rem; text-align: center; font-weight: 600; color: #334155; }
.feature-tile i { display: block; font-size: 1.2rem; color: #0d6efd; margin-bottom: .35rem; }

/* Price card trust row equal distribution */
.pd-trust { display: flex; justify-content: space-evenly; align-items: center; gap: 0; width: 100%; box-sizing: border-box; }
.pd-trust span { flex: 0 1 auto; text-align: center; min-width: 0; box-sizing: border-box; }
.pd-trust span i { margin-right: 6px; }

/* Image loading shimmer */
img {
    transition: opacity 0.4s ease-in-out;
}
img.loading {
    opacity: 0;
    background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 37%, #eceff3 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
img:not(.loading) { opacity: 1; }

/* Screenshots placeholder */
.shots-placeholder { border: 2px dashed #d1d5db; border-radius: .5rem; }

/* --- Component Styles --- */
.feature-icon { font-size: 2.5rem; color: #0d6efd; }
.testimonial-card { border: none; background-color: #ffffff; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); }
.product-card { 
    border: none; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.07); 
    transition: transform .2s ease-in-out; 
    position: relative; /* Required for positioning the discount tag */
    overflow: hidden; /* Ensures the tag corner looks clean */
}
/* Keep card images stable before load */
.card-img-top { aspect-ratio: 16/9; object-fit: cover; }
.product-card:hover { transform: translateY(-5px); }
.product-card .card-title { font-weight: 600; }

/* --- Subtle Animation --- */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reveal variants */
.reveal-up { opacity: 0; transform: translateY(16px); transition: all .6s ease; }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* Smooth interactions */
html { scroll-behavior: smooth; }
body { opacity: 0; transition: opacity .4s ease; }
body.page-loaded { opacity: 1; }

.product-card { transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }

/* Related products grid cards reuse .product-card styles */

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* --- Admin Page Styles --- */
.admin-header {
    background-color: #343a40;
    color: white;
}

/* --- Discount Tag --- */
.discount-tag {
    position: absolute;
    top: 12px;
    right: -40px;
    background-color: #dc3545; /* A strong red for attention */
    color: white;
    padding: 8px 40px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    text-align: center;
}

/* --- Testimonial Slider --- */
.testimonial-slider .swiper-slide {
    height: auto; /* Allow slides to have natural height */
    padding-bottom: 40px; /* Space for pagination */
}

.testimonial-slider .testimonial-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.testimonial-slider .card-body {
    flex-grow: 1;
}

.testimonial-slider .swiper-pagination-bullet-active {
    background-color: #0d6efd;
}

.testimonial-slider .swiper-button-next, .testimonial-slider .swiper-button-prev {
    color: #0d6efd;
}