/* ================================================================= */
/* 🛠️ EQUIPMENT CARD REDESIGN STYLES 🛠️ */
/* ================================================================= */

/* Base Card Styles */
.equipment-card {
    /* Modern, lifted card effect */
    border: none; 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); 
    border-radius: 12px; 
    background-color: #ffffff;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; 
    height: 100%; /* Important for equal height in the grid context */
}

.equipment-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* Image Wrapper and Discount Fix */
.equipment-card__image-wrapper {
    position: relative;
    height: 100%; 
    min-height: 200px; 
    overflow: hidden;
}

.equipment-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.equipment-card:hover .equipment-card__image {
    transform: scale(1.05); /* Zoom effect on hover */
}

/* Discount Badge Alignment Fix */
.equipment-card__discount {
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background-color: var(--danger, #dc3545); /* Using Bootstrap danger color or your custom variable */
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    z-index: 10;
}

/* Content Details */
.equipment-card__details-col {
    /* Ensures content section utilizes flex properties from its wrapper */
    display: flex;
}

.equipment-card__info-content {
    /* Ensures internal content pushes footer to the bottom */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.equipment-card__title a {
    font-size: 1.35rem;
    font-weight: 700;
    color: #343a40; /* Darker title for readability */
    transition: color 0.2s;
    line-height: 1.2;
}

.equipment-card__title a:hover {
    color: var(--primary-color, #007bff); 
}

/* Price Box */
.equipment-card__price-box {
    /* Ensures price is visually distinct */
    line-height: 1.2;
}

.equipment-card__price-tag {
    color: var(--primary-color, #007bff);
    font-size: 1.8rem;
}

/* Rental Options (Modern Chips/Tags) */
.equipment-card__option-tag {
    /* Chip-like appearance */
    background-color: #e9ecef;
    color: #555;
    padding: 4px 10px;
    border-radius: 20px; /* Pill shape */
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.equipment-card__option-tag.tag-day { border: 1px solid var(--primary-color); background-color: var(--white); border-radius: 10px; margin-right: 10px;}
.equipment-card__option-tag.tag-week { border: 1px solid var(--secondary-color); background-color: var(--white); border-radius: 10px; margin-right: 10px; }
.equipment-card__option-tag.tag-month { border: 1px solid var(--heading-color); background-color: var(--white); border-radius: 10px; margin-right: 10px; }

/* Features List */
.equipment-card__info-item {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555;
}
.equipment-card__info-item i {
    color: var(--success-color, #28a745); /* Ensure checkmark is prominent */
    min-width: 20px;
}

/* Rating Stars (Placeholder - adjust paths to your star images) */
.equipment-card__rating {
    overflow: hidden;
    display: inline-block;
    height: 16px;
    width: 80px; 
    /* Use actual outline star background image here */
    background: url('path/to/star-outline.png') repeat-x; 
}
.equipment-card__rating-stars {
    height: 16px;
    /* Use actual filled star background image here */
    background: url('path/to/star-filled.png') repeat-x; 
}

/* 4. Mobile Adjustments */
@media (max-width: 767.98px) {
    .equipment-card__image-wrapper {
        border-bottom-left-radius: 0;
        border-top-right-radius: 12px; 
    }
    
    .equipment-card__details-col {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    
    .equipment-card__header {
        /* Stack the title and price vertically on small screens */
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .equipment-card__price-box {
        text-align: left !important;
        margin-top: 5px;
    }
    
    .equipment-card__view-btn {
        width: 100%; 
    }
}

/* Add this to your custom CSS */

/* Extra Small button size for placement next to price */
.main-btn.btn-xs {
    padding: 4px 10px; /* Smaller padding */
    font-size: 0.8rem; /* Smaller font */
    line-height: 1.5;
    border-radius: 5px;
    /* Ensure it has enough top margin if needed, but mb-2 handles that in Blade */
}


/* end of equipment card*/