/**
 * CruelCRM Configuration Selection Improvements
 * - Fixes bottom border visibility on last selection option
 * - Enlarges preview images
 * - Makes heading more prominent
 * - Increases preview image size
 */

/* Fix the bottom border issue on the last configuration option */
.cruelcrm-configuration-option:last-child {
    border-bottom: 1px solid #e0e0e0 !important; /* Restore bottom border */
    margin-bottom: 15px; /* Add some extra bottom margin for visual separation */
}

/* Make option selection more prominent */
.cruelcrm-configuration-option {
    margin-bottom: 15px; /* Increased bottom margin for better separation */
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 18px 30px 18px 15px; /* Added more padding all around for better spacing */
    border: 1px solid #e0e0e0; /* Full border instead of just bottom */
    border-radius: 6px; /* Slightly rounded corners for modern look */
}

.cruelcrm-configuration-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: #ccc;
}

/* Enhanced selected state */
.cruelcrm-configuration-option.selected {
    background-color: #f9f9f5;
    border: 1px solid #AB8912;
    border-left: 4px solid #AB8912; /* Slightly thicker left border */
    box-shadow: 0 2px 5px rgba(171, 137, 18, 0.15);
}

.cruelcrm-configuration-option.selected {
    box-shadow: 0 3px 8px rgba(171, 137, 18, 0.2);
}

/* Make option images larger */
.cruelcrm-configuration-option-image {
    width: 100px; /* Increased from 60px */
    height: 100px; /* Increased from 60px */
    margin-left: 20px;
}

.cruelcrm-configuration-option-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Make the configuration heading more prominent */
.cruelcrm-configuration-options h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #AB8912 !important;
    color: #333 !important;
    position: relative;
    display: inline-block;
}

/* Highlight that options are clickable with a subtle pointer on hover */
.cruelcrm-configuration-option:hover::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid #AB8912;
    border-right: 2px solid #AB8912;
    z-index: 1;
}

/* Specific styling for options with images */
.cruelcrm-configuration-option.has-option-image {
    padding-right: 15px; /* Reduced right padding since we don't need space for the arrow */
}

/* Don't show the arrow for options with images */
.cruelcrm-configuration-option.has-option-image:hover::after {
    display: none; /* Hide the arrow on options with images */
}

/* Make the image container more prominent */
.cruelcrm-configuration-option-image {
    position: relative;
    z-index: 5; /* Ensure image stays on top */
    margin-left: 30px; /* Space from the label */
    transition: all 0.3s ease;
}

/* Add a subtle zoom effect on hover for images */
.cruelcrm-configuration-option:hover .cruelcrm-configuration-option-image img {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}