/* 
 * Featured Cars Shortcode Styles
 */

/* Wrapper and Variables */
.alwp-featured-wrapper {
    padding: 0 var(--alwp-padding-container);
    margin-bottom: 30px;
    box-sizing: border-box;
}

.alwp-featured-wrapper * {
    box-sizing: border-box;
}

/* Slider Style (Horizontal with Scroll Snap) */
.alwp-style-slider .alwp-featured-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--alwp-padding-gap);
    padding-bottom: 20px; /* Space for scrollbar */
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for cleaner look (optional, but generally desired) */
.alwp-style-slider .alwp-featured-track::-webkit-scrollbar {
    height: 8px;
}
.alwp-style-slider .alwp-featured-track::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.alwp-style-slider .alwp-featured-track::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
.alwp-style-slider .alwp-featured-track::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.alwp-style-slider .alwp-featured-item {
    scroll-snap-align: start;
    flex: 0 0 300px; /* Fixed width for slider items or use percentages like 80% on mobile */
    min-width: 280px;
}

/* Stack Style (Grid) - Force 1 Column per user request */
.alwp-style-stack .alwp-featured-track {
    display: grid;
    grid-template-columns: 1fr; /* Changed from repeat(3, 1fr) to 1fr */
    gap: var(--alwp-padding-gap);
}

/* Item Styles */
.alwp-featured-item {
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 8px; 
    overflow: hidden;
}

.alwp-featured-link-wrap {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.alwp-featured-image {
    position: relative;
    padding-top: 70%;
    overflow: hidden;
    background-color: #1e1e1e; /* Match dark theme just in case */
}

.alwp-featured-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.alwp-featured-link-wrap:hover .alwp-featured-image img {
    transform: scale(1.05);
}

/* Dark Theme Card Details */
.alwp-featured-details {
    padding: 24px;
    background-color: #1c1c1e; /* Dark background */
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.alwp-featured-text-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start; /* Ensure left alignment */
    text-align: left;
}

.alwp-featured-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
    color: #ffffff;
}

.alwp-featured-price {
    margin: 0;
    font-weight: 400;
    color: #fdc725; /* Gold/Orange color */
    font-size: 1.1rem;
}

.alwp-featured-button {
    margin-top: 0; /* Reset margin */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background-color: #fdc725;
    color: #000000;
    text-align: center;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
    white-space: nowrap; /* Ensure button text doesn't wrap awkwardly */
}

/* Add Arrow to Button */
.alwp-featured-button::after {
    content: " \2192"; /* Right arrow */
    margin-left: 8px;
    font-size: 1.1em;
}

.alwp-featured-link-wrap:hover .alwp-featured-button {
    background-color: #eebb4d; /* Slightly lighter gold on hover */
}

/* Template: Card */
.alwp-template-card .alwp-featured-item {
    border: 1px solid #333; /* Darker border for dark theme */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Deeper shadow for dark theme */
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.alwp-template-card .alwp-featured-item:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* Template: Clean (Override defaults if chosen, but keep structure) */
.alwp-template-clean .alwp-featured-item {
    border: none;
    box-shadow: none;
    background: transparent;
}
.alwp-template-clean .alwp-featured-details {
    padding: 15px 0;
    background-color: transparent; /* Transparent for clean look */
    color: inherit; /* Inherit text color */
}
/* Adjust title/price color for clean template if it sits on white bg? 
   Actually, let's keep the dark card look as the primary request, 
   but 'clean' usually implies blending in. 
   If user selects 'clean', they probably want less chrome. 
   I'll let 'clean' reset backgrounds if needed, but for now assuming 
   the requested design is for the 'card' template which is default. */

/* Reset for clean template to avoid dark box if user wants clean */
.alwp-template-clean .alwp-featured-details {
    background: transparent;
    color: #fff; /* Assume dark background */
    display: flex;
    flex-direction: row;
    align-items: center; /* align button with text center vertically */
    justify-content: space-between;
    gap: 15px;
}
.alwp-template-clean .alwp-featured-text-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.alwp-template-clean .alwp-featured-title { color: #ffffff; }
.alwp-template-clean .alwp-featured-price { color: #fdc725; }
.alwp-template-clean .alwp-featured-button { 
    margin-top: 0;
    align-self: center;
}

/* Responsive Grid (Stack) */
@media (max-width: 992px) {
    .alwp-style-stack .alwp-featured-track {
        grid-template-columns: 1fr; /* Already 1fr but keeping for safety */
    }
}

@media (max-width: 600px) {
    .alwp-style-stack .alwp-featured-track {
        grid-template-columns: 1fr;
    }

    .alwp-style-slider .alwp-featured-item {
        flex: 0 0 85%; /* Show part of next slide on mobile */
    }

    /* Stack button below text on mobile for card template */
    .alwp-featured-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .alwp-featured-button {
        align-self: flex-start;
        width: auto; /* Button width fits content on mobile */
    }
}

/* Carousel (Slider) Specific Overrides - Always Stack Button Below Price */
.alwp-style-slider .alwp-featured-details,
.alwp-style-slider.alwp-template-clean .alwp-featured-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.alwp-style-slider .alwp-featured-button,
.alwp-style-slider.alwp-template-clean .alwp-featured-button {
    margin-top: auto; /* Push button to bottom to align across cards */
    width: auto; /* Button width fits content on mobile */
    align-self: flex-start;
}

/* Ensure Equal Height for Clean Template in Slider */
.alwp-style-slider.alwp-template-clean .alwp-featured-item {
    height: 100%;
}

.alwp-style-slider.alwp-template-clean .alwp-featured-link-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.alwp-style-slider.alwp-template-clean .alwp-featured-details {
    flex-grow: 1;
}