/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Base Colors from style.css */
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --secondary-color: #ec4899;
    --bg-light: #f3f4f6;
    --text-dark: #1f2937;
    --card-bg: #ffffff;
    
    /* Colors from index3.html mapping to similar vars or kept for compatibility */
    --primary: #4f46e5;      /* Matches style.css primary-color */
    --primary-dark: #4338ca; /* Matches style.css primary-hover */
    --primary-light: #818cf8;
    --secondary: #ec4899;    /* Matches style.css secondary-color */
    --success: #10b981;
    --warning: #f59e0b;
    --dark: #0f172a;
    --light: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    
    /* Layout vars */
    --radius: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}

body {
    font-family: 'Outfit', 'Inter', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    min-height: 100vh;
}

/* =========================================
   HEADER & HERO SECTIONS (From index.html / style.css)
   ========================================= */

.navbar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.navbar-brand img {
    width: 35px;
    height: 35px;
   
    margin-right: 7px;
}

.hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 20px 0 28px 0;
    margin-top: 56px; /* Space for fixed navbar */
    margin-bottom: 30px;
    border-radius: 0 0 30px 30px;
    position: sticky;
    top: 56px; /* Stick below navbar */
    z-index: 1010;
    overflow: hidden;
    transition: all 0.35s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Collapsed state */
.hero-section.collapsed {
    padding: 12px 0 18px 0;
    border-radius: 0 0 15px 15px;
}

.hero-section.collapsed .hero-collapsible {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    overflow: hidden;
}

.hero-section.collapsed .hero-title,
.hero-section.collapsed .hero-subtitle {
    display: none;
}

/* Collapsible content wrapper */
.hero-collapsible {
    max-height: 400px; /* Arbitrary large height for transition */
    opacity: 1;
    margin-top: 15px;
    overflow: visible;
    transition: all 0.35s ease;
}

/* Toggle button */
.hero-toggle {
    position: absolute;
    bottom: -31px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 31px;
    background: white;
    border: none;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1011;
    transition: all 0.25s ease;
}

.hero-toggle:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.hero-toggle i {
    color: var(--primary-color);
    font-size: 12px;
    transition: transform 0.3s ease;
}

.hero-section.collapsed .hero-toggle i {
    transform: rotate(180deg);
}

.hero-section.collapsed .hero-toggle {
    bottom: -7px;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-bg-shape {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =========================================
   COMPONENTS FROM INDEX3.HTML
   ========================================= */

/* Stats Bar - Integrated in Hero */
.stats-bar {
    /* Styles now handled by bootstrap utility classes in index4.html for transparency/integration */
    /* Keeping class for potential JS selection hooks */
    margin-bottom: 1rem;
}
.stat-item {
    text-align: center;
    padding: 0 0.5rem;
}
.stat-item .stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    /* Gradient removed, relying on text-white utility in HTML or override here */
    background: none;
    -webkit-text-fill-color: inherit;
    color: white !important;
}
.stat-item .stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Brand Cards */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0 3rem;
}

.brand-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.brand-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.brand-header {
    background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    background: white;
    padding: 4px;
}
.brand-name {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}
.brand-category {
    color: var(--gray-400);
    font-size: 0.8rem;
    display: block;
}
.offer-badge {
    background: rgba(255,255,255,0.15);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.offer-main {
    padding: 1.25rem;
    flex-grow: 1;
}
.offer-description {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
.offer-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--gray-500);
}
.offer-meta i {
    margin-right: 0.35rem;
    color: var(--primary);
}

/* Code Display */
.code-box {
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    border: 2px dashed var(--primary);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}
.code-box:hover {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}
.code-box .code-text {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2px;
}
.code-box .copy-hint {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.75rem;
}
.code-box.copied {
    border-color: var(--success);
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}
.code-box.copied .code-text {
    color: var(--success);
}

/* Offer Active Style */
.code-box.offer-active {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid var(--success);
}
.code-box.offer-active .code-text {
    color: var(--success);
    letter-spacing: 0;
    font-family: 'Inter', sans-serif;
}

/* Actions */
.offer-actions {
    display: flex;
    gap: 0.75rem;
}
.btn-get-offer {
    flex: 1;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: white;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
}
.btn-get-offer:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
    color: white;
}
.btn-store {
    background: var(--gray-100);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: var(--gray-600);
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-store:hover {
    background: var(--gray-200);
    color: var(--dark);
}
.btn-terms {
    background: var(--gray-100);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: var(--gray-600);
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-terms:hover {
    background: var(--warning);
    color: white;
}

/* More Offers */
.more-offers-btn {
    background: var(--gray-100);
    border: none;
    border-top: 1px solid var(--gray-200);
    width: 100%;
    padding: 0.75rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.more-offers-btn:hover {
    background: var(--gray-200);
    color: var(--primary);
}
.more-offers-btn i {
    transition: transform 0.3s ease;
}
.more-offers-btn.open i {
    transform: rotate(180deg);
}

.more-offers-list {
    background: var(--gray-100);
    padding: 1rem;
    display: none;
}
.more-offers-list.show {
    display: block;
}

.mini-offer {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}
.mini-offer:last-child {
    margin-bottom: 0;
}
.mini-offer:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow);
}
.mini-offer-info {
    flex: 1;
}
.mini-offer-info h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.mini-offer-info small {
    color: var(--gray-500);
}
.mini-offer-code {
    background: var(--gray-100);
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-weight: 700;
    color: var(--primary);
    font-size: 0.8rem;
    white-space: nowrap;
}
.mini-offer-code.is-offer {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: var(--success);
}
.mini-offer-link {
    background: var(--primary);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    text-decoration: none;
}
.mini-offer-link:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
    color: white;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-500);
    grid-column: 1 / -1;
}
.no-results i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--gray-300);
}

/* Loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.loading-overlay.show {
    opacity: 1;
    visibility: visible;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Footer (basic) */
footer {
    background: var(--dark);
    color: white;
    padding: 3rem 0 2rem;
    margin-top: 3rem;
}
footer a {
    color: var(--gray-400);
    text-decoration: none;
    transition: color 0.2s ease;
}
footer a:hover {
    color: white;
}

/* Simple animation utility delays */
.brand-card:nth-child(1) { animation-delay: 0.05s; }
.brand-card:nth-child(2) { animation-delay: 0.1s; }
.brand-card:nth-child(3) { animation-delay: 0.15s; }
.brand-card:nth-child(4) { animation-delay: 0.2s; }
.brand-card:nth-child(5) { animation-delay: 0.25s; }
.brand-card:nth-child(6) { animation-delay: 0.3s; }
.brand-card:nth-child(7) { animation-delay: 0.35s; }
.brand-card:nth-child(8) { animation-delay: 0.4s; }
.brand-card:nth-child(9) { animation-delay: 0.45s; }
.brand-card:nth-child(10) { animation-delay: 0.5s; }

/* Filter Pills */
.filter-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}
.filter-pill {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 50px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.filter-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.filter-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .brands-grid {
        grid-template-columns: 1fr;
    }
    .stat-item .stat-number {
        font-size: 1.5rem;
    }
    .hero-section {
        margin-bottom: 20px;
    }
}

/* =========================================
   STORE LIST STYLES (negozi.html)
   ========================================= */

.store-card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
}

.store-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(79, 70, 229, 0.2); /* Primary color low opacity */
}

/* Logo Area */
.store-logo-wrapper {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
    padding: 1.5rem;
    position: relative;
    border-bottom: 1px solid var(--gray-100);
}

.store-logo-wrapper img {
    max-height: 80px;
    max-width: 80%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.store-card:hover .store-logo-wrapper img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Card Body */
.store-card-body {
    background: white;
}

.store-name {
    font-size: 1.1rem;
    letter-spacing: -0.025em;
}

/* Overlay Button Effect on Hover */
.store-overlay {
    margin-top: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.store-card:hover .store-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Hide badges on hover to show button cleanly? Or keep both?
   Let's keep badges but maybe fade them out slightly or move them upp?
   Actually, the design in JS puts badges separate.
   Let's make the button visible only on hover for desktop, always on mobile?
   For simplicity, opacity change is good.
*/

@media (hover: none) {
    .store-overlay {
        opacity: 1;
        transform: none;
    }
}