/* =============================================
   Map Feature Showcase Widget Styles
   ============================================= */

.cmf-showcase-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 50px;
    box-sizing: border-box;
}

/* ── Left Content Column ── */
.cmf-content-col {
    flex: 1 1 45%;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cmf-icon-wrap {
    font-size: 32px;
    color: var(--cmf-icon-color, #111111);
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cmf-icon-wrap svg,
.cmf-icon-wrap i {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.cmf-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--cmf-heading-color, #111111);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cmf-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cmf-desc-color, #666666);
    margin: 0 0 30px 0;
}

/* ── Features List with Continuous Left Line ── */
.cmf-features-list {
    border-left: 2px solid var(--cmf-line-color, #eeeeee);
    padding-left: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: stretch;
}

.cmf-feature-item {
    position: relative;
}

.cmf-feature-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--cmf-feature-title-color, #111111);
    margin: 0 0 6px 0;
}

.cmf-feature-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cmf-feature-desc-color, #777777);
    margin: 0;
}

/* ── Right Image Column ── */
.cmf-image-col {
    flex: 1 1 55%;
    max-width: 55%;
}

.cmf-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--cmf-image-radius, 8px);
    box-shadow: var(--cmf-image-shadow, 0 15px 40px rgba(0,0,0,0.06));
    background-color: #000000;
    line-height: 0;
    display: block;
}

.cmf-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover overlay element */
.cmf-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cmf-hover-overlay-color, rgba(255, 255, 255, 0.15));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

/* Hover behaviors */
.cmf-image-wrapper:hover .cmf-image {
    transform: scale(var(--cmf-hover-zoom, 1.03));
    filter: brightness(var(--cmf-hover-brightness, 1.05)) contrast(var(--cmf-hover-contrast, 1.02));
}

.cmf-image-wrapper:hover .cmf-hover-overlay {
    opacity: 1;
}

/* ── Floating Badge/Tag ── */
.cmf-badge {
    position: absolute;
    top: var(--cmf-badge-top, 20px);
    right: var(--cmf-badge-right, 20px);
    background-color: var(--cmf-badge-bg, rgba(255, 255, 255, 0.92));
    border: 1px solid var(--cmf-badge-border-color, rgba(0, 0, 0, 0.06));
    padding: 6px 12px;
    border-radius: var(--cmf-badge-radius, 4px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    pointer-events: none;
}

.cmf-badge-text {
    font-family: 'Space Mono', 'Courier New', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cmf-badge-text-color, #111111);
    text-transform: uppercase;
}

.cmf-badge-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--cmf-badge-dot-color, #00e5ff);
    box-shadow: 0 0 8px var(--cmf-badge-dot-color, #00e5ff);
}

/* =============================================
   Responsive Layouts
   ============================================= */

@media (max-width: 1024px) {
    .cmf-showcase-container {
        gap: 30px;
    }
    .cmf-heading {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .cmf-showcase-container {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }
    .cmf-content-col,
    .cmf-image-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .cmf-heading {
        font-size: 28px;
    }
    .cmf-badge {
        top: 15px;
        right: 15px;
        padding: 5px 10px;
    }
}