/*
 * Custom CSS for dev.hurtownianozy.pl Theme
 *
 * This file will override default styles and Bootstrap styles
 * to match the look and feel of http://hurtownianozy.pl
 */

/* Theme Variables */
:root {
    /* Base Colors from screenshot analysis */
    --theme-background-color: #FFFFFF; /* Assuming white or very light gray */
    --theme-text-color: #212529;       /* Dark gray / black for general text */
    --theme-font-family: Arial, sans-serif;

    /* Navbar specific colors from screenshot */
    --theme-navbar-background-color: #343A40; /* Dark gray for navbar background */
    --theme-navbar-text-color: #FFFFFF;       /* White text for navbar links */

    /* Accent color */
    --theme-accent-color: #007BFF; /* Blue, as specified */
}

/* Basic Reset / Normalization (optional, as Bootstrap handles much of this) */
body {
    font-family: var(--theme-font-family);
    color: var(--theme-text-color);
    background-color: var(--theme-background-color);
    margin: 0; /* Basic reset for margin */
    padding: 0; /* Basic reset for padding */
    line-height: 1.6; /* Sensible default line height */
}

/* General Theme Styles */
/* Links */
a {
    color: var(--theme-accent-color); /* Links will use the accent color */
    text-decoration: none; /* Common practice to remove underline */
}

a:hover {
    text-decoration: underline; /* Add underline on hover for clarity */
    color: color-mix(in srgb, var(--theme-accent-color) 85%, black); /* Darken accent color on hover */
}

/* Buttons */
/* Assuming .btn-primary is used for main action buttons, common in Bootstrap */
.btn-primary {
    background-color: var(--theme-accent-color) !important;
    border-color: var(--theme-accent-color) !important;
    color: #FFFFFF !important; /* Assuming white text on accent color buttons */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: color-mix(in srgb, var(--theme-accent-color) 85%, black) !important; /* Darken accent color */
    border-color: color-mix(in srgb, var(--theme-accent-color) 80%, black) !important; /* Darken accent color */
    color: #FFFFFF !important;
}

/* Styles for other button types if needed, e.g., .btn-secondary */
/* .btn-secondary { ... } */

/* Header Styles */
/* Assuming .navbar is the main class for the navigation bar based on Bootstrap */
.navbar {
    background-color: var(--theme-navbar-background-color) !important; /* Override Bootstrap */
}

.navbar .nav-link { /* Targeting links within the navbar */
    color: var(--theme-navbar-text-color) !important; /* Override Bootstrap */
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--theme-navbar-text-color) !important; /* Keep text color on hover/focus */
    opacity: 0.85; /* Slight opacity change on hover for visual feedback */
}

/* Style for the brand/logo text if it's part of .navbar-brand */
.navbar-brand {
    color: var(--theme-navbar-text-color) !important;
}
.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--theme-navbar-text-color) !important;
    opacity: 0.85;
}


/* Navigation Styles */
/* Further specific navigation styles can be added here */

/* Product Listing Styles */
/* Styles for sections containing product sliders or grids */
.product-slider-section {
    margin-bottom: 2rem; /* Space below the section */
}

.product-slider-section .section-title, /* Assuming a common class for section titles */
.product-slider-section h2 { /* Or if using h2 for titles like "Bestsellery" */
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.75rem; /* Adjust as needed */
    font-weight: 500;
}

/* Product Card Styles */
.product-card {
    background-color: #FFFFFF;
    border: 1px solid #EAEAEA; /* Light border */
    border-radius: 0.25rem; /* Slightly rounded corners */
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem; /* Space between cards if they wrap */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* For consistent height in a row if using flexbox/grid for layout */
}

.product-card-image {
    margin-bottom: 0.75rem;
    max-height: 180px; /* Or a fixed height, adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-image img {
    max-width: 100%;
    max-height: 100%; /* Ensure image fits within the container */
    object-fit: contain;
}

.product-info {
    /* Container for price, name, meta */
}

.product-price {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: bold;
}

.product-price .old-price {
    font-size: 0.9rem;
    text-decoration: line-through;
    color: #6C757D; /* Bootstrap's secondary text color */
    margin-right: 0.5rem;
}

.product-price .current-price.promo { /* Add .promo class for promotional red price */
    color: #FF0000; /* Red color for promotional price */
}

.product-name {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: var(--theme-text-color);
}

.product-name a {
    color: var(--theme-text-color); /* Product name links should match text color */
    text-decoration: none;
}

.product-name a:hover {
    color: var(--theme-accent-color); /* Accent color on hover for product name */
    text-decoration: underline;
}

.product-meta {
    font-size: 0.85rem;
    color: #6C757D;
    margin-bottom: 0.75rem;
}

/* Styles for slider arrows (generic, assuming some JS slider might be in use) */
.slider-arrow {
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent dark background */
    color: #FFFFFF;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute; /* Positioned by the slider JS */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.slider-arrow-prev {
    left: -20px; /* Adjust as needed */
}

.slider-arrow-next {
    right: -20px; /* Adjust as needed */
}

/* Single Product Page Styles */

/* Footer Styles */

/* Responsive Adjustments */
/* Example:
@media (max-width: 768px) {
    // Mobile specific styles
}
*/