/* =============================================================================
   index-consolidated.css
   Styles for the consolidated homepage layout
   ============================================================================= */

/* ---- Hero Section ---- */
.hero-section { position: relative; overflow: hidden; }
.hero-slide { position: relative; min-height: 75vh; display: flex; align-items: center; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); z-index: 1; }
.hero-slide .container { position: relative; z-index: 2; }
.hero-content h1 { line-height: 1.15; }
.hero-main-image { max-height: 420px; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,.25)); }
.min-vh-75 { min-height: 75vh; }

.gradient-bg-1 { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }
.gradient-bg-2 { background: linear-gradient(135deg, #0d7377 0%, #14a3a8 50%, #32e0c4 100%); }
.gradient-bg-3 { background: linear-gradient(135deg, #e94560 0%, #c23616 50%, #e55d87 100%); }
.text-gradient { background: linear-gradient(135deg, #e94560, #f39c12); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.btn-hover-scale { transition: transform .2s ease, box-shadow .2s ease; }
.btn-hover-scale:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,.2); }

.floating-elements { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.floating-icon { position: absolute; width: 50px; height: 50px; background: rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; animation: float 4s ease-in-out infinite; }
.floating-icon-1 { top: 10%; left: 20%; animation-delay: 0s; }
.floating-icon-2 { top: 60%; right: 10%; animation-delay: 1.5s; }
.floating-icon-3 { bottom: 20%; left: 50%; animation-delay: 3s; }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.stat-item { text-align: center; }
.stat-item h4 { font-size: 1.5rem; }

.carousel-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.2); z-index: 15; }
.carousel-progress-bar { height: 100%; background: #fff; width: 0; transition: width 6s linear; }

/* ---- Search Section ---- */
.search-form-enhanced { position: relative; box-shadow: 0 4px 15px rgba(0,0,0,.08); border-radius: .5rem; overflow: hidden; }
.search-form-enhanced .search-input { border: none; border-radius: .5rem 0 0 .5rem; padding: .75rem 1.25rem; font-size: 1rem; }
.search-form-enhanced .search-input:focus { box-shadow: none; }
.search-form-enhanced .search-btn { border-radius: 0 .5rem .5rem 0; padding: .75rem 1.5rem; }
.search-suggestions { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 .5rem .5rem; box-shadow: 0 4px 15px rgba(0,0,0,.1); z-index: 20; max-height: 300px; overflow-y: auto; }
.suggestion-item { cursor: pointer; transition: background .15s; }
.suggestion-item:hover { background: #f8f9fa; }

/* ---- Promotions Banner ---- */
.promotion-banner { border-radius: .5rem; border-left: 4px solid #0d6efd; }

/* ---- Categories Strip ---- */
.categories-strip { position: relative; }
.categories-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.categories-scroll::-webkit-scrollbar { display: none; }
.category-chip { font-size: .85rem; border-color: #dee2e6; color: #495057; transition: all .2s; }
.category-chip:hover { background-color: #0d6efd; border-color: #0d6efd; color: #fff; transform: translateY(-1px); }

/* ---- Discover Section (tabbed products) ---- */
.discover-section { }

.discover-tabs { gap: .5rem; }
.discover-tabs .nav-link {
    border-radius: 2rem;
    padding: .5rem 1.25rem;
    font-weight: 500;
    font-size: .9rem;
    color: #495057;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    white-space: nowrap;
    transition: all .2s;
}
.discover-tabs .nav-link:hover { color: #0d6efd; border-color: #0d6efd; }
.discover-tabs .nav-link.active {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(13,110,253,.3);
}

.tab-loader { min-height: 200px; display: flex; align-items: center; justify-content: center; }

/* ---- Shop by Origin ---- */
.origin-section { }
.origin-card { border-radius: .75rem; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.origin-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,.1); }
.origin-img { height: 130px; object-fit: cover; }

/* ---- Recommended ---- */
.recommended-section { }

/* ---- Feature Cards (Why Choose Us) ---- */
.feature-card {
    padding: 2rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0,0,0,.05);
    transition: transform .3s, box-shadow .3s;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,.1); }
.feature-icon { width: 80px; height: 80px; border-radius: 50%; background: #f0f6ff; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Testimonials ---- */
.testimonial-card {
    padding: 2rem;
    border-radius: 1rem;
    background: #f8f9fa;
}
.testimonial-card blockquote p { font-size: 1.1rem; font-style: italic; color: #555; }

/* ---- Newsletter ---- */
.newsletter-section { background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%); }
.newsletter-form .form-control { border: none; border-radius: .5rem; }
.newsletter-form .btn { border-radius: .5rem; }

/* ---- Trust Indicators ---- */
.trust-indicator {
    padding: 1rem;
    transition: transform .2s;
}
.trust-indicator:hover { transform: translateY(-3px); }
.trust-indicator h5 { color: #0d6efd; }

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
    .hero-slide { min-height: 60vh; }
    .hero-content h1 { font-size: 1.75rem; }
    .hero-main-image { max-height: 250px; }
    .origin-img { height: 100px; }
    .discover-tabs { padding-bottom: .5rem; }
}

@media (max-width: 575.98px) {
    .hero-content h1 { font-size: 1.5rem; }
    .hero-stats .stat-item h4 { font-size: 1.1rem; }
    .feature-card { padding: 1.25rem; }
}