/*
 * Mirrors pm-frontend-display's pm-special-coupon.css .specials-item styling
 * so this widget matches the look of the existing Specials widget (and
 * inherits any dealer theme overrides already targeting these classes).
 * Kept as a self-contained copy rather than depending on the sibling
 * plugin's stylesheet being enqueued.
 */
.specials-item { border: 1px solid #ddd; padding: 35px; margin-bottom: 20px; min-width: 30%; }
.specials-item .specials-title { color: #222; padding-bottom: 10px; border-bottom: 1px solid #ddd; font-weight: 700; font-size: 18px; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.specials-item .specials-image { text-align: center; padding-bottom: 10px; }
.specials-item .specials-image img { display: inline; }
.specials-item .specials-details { margin-bottom: 20px; }
.specials-item .specials-details h3 { font-size: 18px; font-weight: 700; line-height: 120%; padding-bottom: 10px; text-transform: uppercase; }
.specials-item .specials-details p { padding-bottom: 0; margin-bottom: 4px; text-transform: uppercase; }
.specials-item .smads-call-us { font-size: 13px; margin-top: 10px; margin-bottom: 0; }
.specials-item .specials-disclaimers { font-size: 11px; color: #222; padding-bottom: 0; padding-top: 5px; }
.specials-item .specials-expiration { font-size: 11px; color: #222; padding-top: 5px; }

.smads-empty { text-align: center; color: #777; width: 100%; }

/*
 * Once Slick takes over (js/front.js strips .col-md-6, which is what was
 * providing Bootstrap's gutter padding), give slides their own spacing and
 * make every card the same height regardless of how much content it has.
 */
.smads-section.slick-slider .slick-track {
    display: flex;
}

.smads-section .slick-slide {
    height: auto;
    margin: 0 10px;
}

.smads-section .slick-list {
    margin: 0 -10px;
}

.smads-section .slick-slide > div {
    height: 100%;
}

.smads-section .slick-slide .specials-item {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
