/* 
 * OSSAH Theme CSS
 * This file contains the theme variables and base styling for the OSSAH e-commerce site.
 */

:root {
    /* Theme Colors */
    --ossah-dark: #232d36;
    --ossah-teal: #4992a5;
    --ossah-white: #fffffc;
    /* Tints and Shades - for creating variety in the UI */
    --ossah-dark-lighter: #344049;
    --ossah-dark-darker: #192129;
    --ossah-teal-lighter: #6baabB;
    --ossah-teal-darker: #357a8d;
    /* Functional Colors */
    --ossah-primary: var(--ossah-teal);
    --ossah-secondary: var(--ossah-dark);
    --ossah-background: var(--ossah-white);
    --ossah-text: var(--ossah-dark);
    --ossah-light-text: var(--ossah-white);
    /* Feedback Colors */
    --ossah-success: #2e8540;
    --ossah-warning: #ffc107;
    --ossah-danger: #d63d42;
    /* Spacing */
    --ossah-spacing-xs: 0.25rem;
    --ossah-spacing-sm: 0.5rem;
    --ossah-spacing-md: 1rem;
    --ossah-spacing-lg: 1.5rem;
    --ossah-spacing-xl: 2.5rem;
    /* Typography */
    --ossah-font-family-brand: 'ArtBrush Medium Regular', 'Arial', sans-serif;
    --ossah-font-family-body: 'Roboto', 'Arial', sans-serif;
    --ossah-font-size-xs: 0.75rem;
    --ossah-font-size-sm: 0.875rem;
    --ossah-font-size-md: 1rem;
    --ossah-font-size-lg: 1.25rem;
    --ossah-font-size-xl: 1.75rem;
    --ossah-font-size-xxl: 2.5rem;
    /* Borders */
    --ossah-border-radius-sm: 0.25rem;
    --ossah-border-radius-md: 0.5rem;
    --ossah-border-radius-lg: 0.75rem;
    --ossah-border-width: 1px;
    /* Shadows */
    --ossah-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --ossah-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
    --ossah-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
    /* Animation */
    --ossah-transition-fast: 150ms ease-in-out;
    --ossah-transition-normal: 300ms ease-in-out;
    --ossah-transition-slow: 500ms ease-in-out;
    /* Z-index layers */
    --ossah-z-index-dropdown: 1000;
    --ossah-z-index-sticky: 1020;
    --ossah-z-index-modal-backdrop: 1040;
    --ossah-z-index-modal: 1050;
    --ossah-z-index-tooltip: 1070;
}

/* Base HTML Override */
html, body {
    font-family: var(--ossah-font-family-body);
    color: var(--ossah-text);
    background-color: var(--ossah-background);
    line-height: 1.5;
}

/* Typography Classes */
.brand-font {
    font-family: var(--ossah-font-family-brand);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ossah-dark);
}

/* Bootstrap Overrides */
.btn-primary {
    background-color: var(--ossah-primary);
    border-color: var(--ossah-primary);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--ossah-teal-darker);
        border-color: var(--ossah-teal-darker);
    }

.btn-secondary {
    background-color: var(--ossah-secondary);
    border-color: var(--ossah-secondary);
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: var(--ossah-dark-lighter);
        border-color: var(--ossah-dark-lighter);
    }

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

.text-secondary {
    color: var(--ossah-secondary) !important;
}

.bg-primary {
    background-color: var(--ossah-primary) !important;
}

.bg-secondary {
    background-color: var(--ossah-secondary) !important;
}

.bg-dark {
    background-color: var(--ossah-dark) !important;
}

/* Hover effects */
.hover-shadow {
    transition: box-shadow var(--ossah-transition-normal);
}

    .hover-shadow:hover {
        box-shadow: var(--ossah-shadow-md);
    }

.hover-scale {
    transition: transform var(--ossah-transition-normal);
}

    .hover-scale:hover {
        transform: scale(1.05);
    }

/* Navbar styles */
.navbar-ossah {
    background-color: var(--ossah-dark);
}

    .navbar-ossah .navbar-brand {
        color: var(--ossah-white);
    }

    .navbar-ossah .nav-link {
        color: rgba(255, 255, 252, 0.8);
        transition: color var(--ossah-transition-fast);
    }

        .navbar-ossah .nav-link:hover,
        .navbar-ossah .nav-link:focus {
            color: var(--ossah-white);
        }

        .navbar-ossah .nav-link.active {
            color: var(--ossah-white);
            font-weight: 500;
        }

/* Cards */
.card-ossah {
    border-radius: var(--ossah-border-radius-md);
    box-shadow: var(--ossah-shadow-sm);
    transition: all var(--ossah-transition-normal);
    overflow: hidden;
}

    .card-ossah:hover {
        box-shadow: var(--ossah-shadow-md);
        transform: translateY(-5px);
    }

/* Footer */
.footer-ossah {
    background-color: var(--ossah-dark);
    color: var(--ossah-white);
    padding: var(--ossah-spacing-xl) 0;
}

/* Social Media Icons */
.social-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ossah-teal);
    color: var(--ossah-white);
    border-radius: 50%;
    margin-right: var(--ossah-spacing-sm);
    transition: transform var(--ossah-transition-fast), background-color var(--ossah-transition-fast);
}

    .social-icon:hover {
        transform: scale(1.1);
        background-color: var(--ossah-teal-darker);
    }

/* Product Card */
.product-card {
    border: none;
    box-shadow: var(--ossah-shadow-md);
    border-radius: var(--ossah-border-radius-md);
    overflow: hidden;
    transition: all var(--ossah-transition-normal);
}

    .product-card:hover {
        box-shadow: var(--ossah-shadow-md);
    }

.product-title {
    font-family: var(--ossah-font-family-brand);
    color: var(--ossah-dark);
}

.product-price {
    color: var(--ossah-teal);
    font-weight: bold;
}

/* Favorite Button */
.btn-favorite {
    background-color: transparent;
    border: none;
    color: #cccccc;
    transition: color var(--ossah-transition-fast);
}

    .btn-favorite:hover {
        color: #ffaa00;
    }

    .btn-favorite.active {
        color: #ffaa00;
    }

/* Category Pills */
.category-pill {
    background-color: var(--ossah-teal-lighter);
    color: var(--ossah-white);
    border-radius: 50px;
    padding: 0.35rem 1rem;
    transition: background-color var(--ossah-transition-fast);
}

    .category-pill:hover {
        background-color: var(--ossah-teal);
        text-decoration: none;
    }

/* Search Bar */
.search-bar {
    border-radius: var(--ossah-border-radius-lg);
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    box-shadow: var(--ossah-shadow-sm);
}

    .search-bar:focus-within {
        box-shadow: 0 0 0 3px rgba(73, 146, 165, 0.25);
    }

    .search-bar .form-control {
        border: none;
    }

    .search-bar .btn {
        background-color: var(--ossah-teal);
        color: white;
    }

/* Banner/Hero Section */
.hero-banner {
    background-color: var(--ossah-dark);
    color: var(--ossah-white);
    padding: 4rem 0;
}

/* Product Color Variants */
.color-variant {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color var(--ossah-transition-fast);
}

    .color-variant.active {
        border-color: var(--ossah-teal);
    }

/* WhatsApp Button */
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    box-shadow: var(--ossah-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    z-index: 1000;
    transition: transform var(--ossah-transition-fast);
}

    .whatsapp-btn:hover {
        transform: scale(1.1);
    }

/* Animation Helper Classes */
.fade-in {
    animation: fadeIn var(--ossah-transition-normal);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.slide-up {
    animation: slideUp var(--ossah-transition-normal);
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}