/* ============================
   Spielglow – Custom Styles
   Playful, bright, sensory-inspired
   ============================ */

/* Custom Color Variables */
:root {
    --sg-green: #16a34a;
    --sg-green-dark: #15803d;
    --sg-blue: #2563eb;
    --sg-fuschia: #d946ef;
    --sg-yellow: #f59e0b;
    --sg-pink: #ec4899;
    --sg-teal: #14b8a6;
    --sg-light: #fef9f0;
    --sg-gradient: linear-gradient(135deg, var(--sg-green), var(--sg-fuschia));
}

/* Override Bootstrap primary to green */
.bg-primary {
    background-color: var(--sg-green) !important;
}

.text-primary {
    color: var(--sg-green) !important;
}

.btn-primary {
    background-color: var(--sg-green);
    border-color: var(--sg-green);
}

.btn-primary:hover {
    background-color: var(--sg-green-dark);
    border-color: var(--sg-green-dark);
}

.btn-outline-primary {
    color: var(--sg-green);
    border-color: var(--sg-green);
}

.btn-outline-primary:hover {
    background-color: var(--sg-green);
    border-color: var(--sg-green);
}

/* Fuschia utility */
.bg-fuschia {
    background-color: var(--sg-fuschia) !important;
}

.text-fuschia {
    color: var(--sg-fuschia) !important;
}

/* General */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    scroll-behavior: smooth;
    color: #1e293b;
}

html {
    scroll-behavior: smooth;
}

/* Navbar */
.navbar {
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.2);
}

.navbar-brand i {
    color: var(--sg-yellow);
}

.navbar-tagline {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-style: italic;
    margin-left: 0.5rem;
}

/* Hero Carousel */
.hero-slide {
    min-height: 520px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.hero-slide > div {
    position: relative;
    z-index: 1;
}

.hero-slide-1 {
    background: linear-gradient(135deg, #16a34a 0%, #2563eb 50%, #d946ef 100%);
}

.hero-slide-1::before {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 1;
}

.hero-slide-2 {
    background: linear-gradient(135deg, #d946ef 0%, #ec4899 50%, #f59e0b 100%);
}

.hero-slide-2::before {
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.08' fill-rule='evenodd'%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 1;
}

.hero-slide-3 {
    background: linear-gradient(135deg, #14b8a6 0%, #16a34a 50%, #2563eb 100%);
}

.hero-slide-3::before {
    background: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 60px;
}

/* About Section */
.about-image {
    border-radius: 1rem;
    width: 100%;
    height: 400px;
    object-fit: cover;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Product Cards */
.product-card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(22, 163, 74, 0.15);
}

.product-card-image {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.08);
}

.product-card .card-body {
    padding: 1.5rem;
}

.product-card .card-title {
    font-weight: 700;
    color: #1e293b;
}

.product-card .product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sg-green);
}

.product-card .btn-add-cart {
    background-color: var(--sg-fuschia);
    border-color: var(--sg-fuschia);
    color: white;
    font-weight: 600;
    border-radius: 2rem;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s;
}

.product-card .btn-add-cart:hover {
    background-color: #c026d3;
    border-color: #c026d3;
    transform: scale(1.05);
}

/* Product Detail Modal */
.product-detail-image {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    overflow: hidden;
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cart Section */
#cart-table-body .cart-product-color {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#cart-table-body .cart-product-color img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-qty {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-qty:hover {
    border-color: var(--sg-green);
    color: var(--sg-green);
}

/* Contact Section */
#contact .form-control,
#contact .form-select {
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
    transition: border-color 0.2s;
}

#contact .form-control:focus,
#contact .form-select:focus {
    border-color: var(--sg-green);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

/* Footer */
footer a {
    text-decoration: none;
    transition: opacity 0.2s;
}

footer a:hover {
    opacity: 0.7;
}

/* Toast */
.toast {
    border-radius: 1rem;
}

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

.product-card {
    animation: fadeInUp 0.5s ease forwards;
}

.product-card:nth-child(1) { animation-delay: 0.05s; }
.product-card:nth-child(2) { animation-delay: 0.1s; }
.product-card:nth-child(3) { animation-delay: 0.15s; }

/* Responsive */
@media (max-width: 768px) {
    .hero-slide {
        min-height: 400px;
    }

    .hero-slide h1 {
        font-size: 2rem;
    }

    .hero-slide .lead {
        font-size: 1.1rem;
    }

    .about-image {
        height: 280px;
    }

    .navbar-tagline {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}