/**
 * Milwaukee Tool Critical CSS
 * This file contains only the essential styles not covered by Tailwind CSS
 * Includes: Slick slider styles, background images, animations, and Bootstrap overrides
 */

/* ============================================
   SLIDER STYLES (Slick Library Dependent)
   ============================================ */

/* Home Slider - Slick Overrides */
.home-slider.slick-dotted.slick-slider { margin-bottom: 0; }

.home-slider .slide {
    align-items: center;
    padding: 0;
    height: 100%;
}

.home-slider .slide .container { align-items: center; }

.home-slider .slick-arrow { z-index: 1; }
.home-slider .slick-prev { left: 25px; }
.home-slider .slick-prev::before {
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='angle-left' class='svg-inline--fa fa-angle-left fa-w-8' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='%23ffffff' d='M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    padding: 10px;
}

.home-slider .slick-next { right: 25px; }
.home-slider .slick-next::before {
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='angle-right' class='svg-inline--fa fa-angle-right fa-w-8' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='%23ffffff' d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    padding: 10px;
}

.home-slider .slick-dots {
    background: #000;
    bottom: 0;
    display: flex;
    height: 15px;
}

.home-slider .slick-dots li {
    height: 15px;
    width: 33.3%;
}

.home-slider .slick-dots li:hover { background: #333334; }
.home-slider .slick-dots li.slick-active { background: #DA0C23; }
.home-slider .slick-dots li.slick-active button:before { content: ''; }

.home-slider .slick-list { height: 100%; }
.home-slider .slick-track { height: 100%; }

/* Slide Background Images */
.home-slider .slide.mx-fuel {
    background: url(../images/home-slider/equipment-redefined-trade-focused-system-wide-milwaukee-tools-bg.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.home-slider .slide.m18-fuel {
    background: url(../images/home-slider/m-18-fuel-milwaukee-tools.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.home-slider .slide.packout {
    background: url(../images/home-slider/packout-modular-storage-system-milwaukee-tools.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade Top Animation for Slider Content */
.slick-current.slick-active .fade-top {
    animation: fade-top 0.5s ease-out forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes fade-top {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* ============================================
   CONTACT US SECTION
   ============================================ */

.contactus-img {
    background-image: url(../images/hand-tools-main-hero-milwaukee.jpg);
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */

.testimonials-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.testimonial-item {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    width: 50%;
}

.testimonial-item .testimonial-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 250px;
    width: 50%;
}

.testimonial-item .testimonial-image-1 {
    background-image: url(../images/testimonial.jpg);
}

.testimonial-item .testimonial-image-2 {
    background-image: url(../images/testimonial2.jpg);
}

.testimonial-item .testimonial-image-3 {
    background-image: url(../images/testimonial3.jpg);
}

.testimonial-item .testimonial-image-4 {
    background-image: url(../images/testimonial4.jpg);
}

.testimonial-item blockquote {
    width: 50%;
    border-left: 0;
    font-size: 1em;
    font-weight: 200;
}

/* ============================================
   SLICK SLIDER LIBRARY (Innovation Section)
   ============================================ */

.slick-slider-library .thumbnail {
    margin: 0 10px;
    width: 300px;
}

/* ============================================
   CARD SUMMARY (Locations)
   ============================================ */

.card-summary .card-summary-title {
    cursor: pointer;
    display: block;
    padding: 10px 0;
    font-weight: 600;
}

.card-summary .card-summary-title::after,
.card-summary .card-summary-title::before {
    display: inline-block;
    transition: all 0.4s ease-in-out;
}

.card-summary > .card-summary-title::-webkit-details-marker { display: none; }

/* ============================================
   PRODUCTS GRID
   ============================================ */

.products-container .products-grid {
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-template-rows: 45% 45% 10%;
    grid-auto-flow: dense;
    grid-gap: 20px 20px;
    height: 500px;
    padding: 20px;
}

.products-container .products-grid .main-product {
    background: url(../images/power-tools-milwaukee-tools.jpg);
    background-position: center center;
    background-size: cover;
    grid-column: 1 / span 1;
    grid-row: 1 / span 3;
}

.products-container .products-grid .sub-product-one {
    background: url(../images/bateries-and-charges-milwaukee-tools.jpg);
    background-position: center center;
    background-size: cover;
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}

.products-container .products-grid .sub-product-two {
    background: url(../images/hand-tools-milwaukee-tools.jpg);
    background-position: center center;
    background-size: cover;
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}

.products-container .products-grid .sub-product-button {
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
}

.products-container .products-grid .product-item {
    align-items: flex-end;
    display: flex;
}

.products-container .products-grid .product-item .product-description {
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    text-align: left;
    width: 100%;
}

/* ============================================
   BOOTSTRAP FORM OVERRIDES
   ============================================ */

.form-control {
    background: #e5e5e5;
    border: none;
    color: #757575;
    font-size: 16px;
    font-family: 'Roboto', Helvetica, sans-serif;
    padding: 15px 10px;
    border-radius: 0;
}

.form-control:focus {
    border-color: #da0c23;
    box-shadow: 0 0 0 0.2rem rgba(218, 12, 35, 0.25);
}

.form-control::placeholder {
    color: #757575;
    font-family: 'Roboto', Helvetica, sans-serif;
}

.help-block.with-errors {
    color: #da0c23;
    font-size: 12px;
    margin-top: 5px;
}

.help-block.with-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 991px) {
    .testimonial-item {
        width: 100%;
    }
    
    .testimonial-item .testimonial-image {
        width: 100%;
        min-height: 200px;
    }
    
    .testimonial-item blockquote {
        width: 100%;
    }
    
    .products-container .products-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }
    
    .products-container .products-grid .main-product,
    .products-container .products-grid .sub-product-one,
    .products-container .products-grid .sub-product-two,
    .products-container .products-grid .sub-product-button {
        grid-column: 1;
        grid-row: auto;
        min-height: 200px;
    }
}

@media (max-width: 767px) {
    .home-slider .slick-prev { left: 10px; }
    .home-slider .slick-next { right: 10px; }
    
    .slick-slider-library .thumbnail {
        width: 250px;
    }
}
/* ============================================
   FORM VALIDATION STYLES (Bootstrap Validator)
   ============================================ */

/* Error state - applied by validator.js */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: #da0c23 !important;
}

.form-group.has-error .help-block.with-errors {
    color: #da0c23;
    font-size: 12px;
    margin-top: 4px;
}

.form-group.has-error .help-block.with-errors .list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Success state */
.form-group.has-success input,
.form-group.has-success select,
.form-group.has-success textarea {
    border-color: #28a745 !important;
}