/**
 * Backwards Compatibility Styles
 * Ensures the new component structure works with existing map widget styles
 */

/* Ensure tooltip content from reusable component inherits tooltip styles */
.branch-tooltip .branch-card-component.branch-card-tooltip {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    min-width: auto;
    max-width: none;
}

/* Ensure tooltip title and content styles are preserved */
.branch-tooltip .branch-title {
    font-family: "Gotham Book", 'Gotham', sans-serif;
    font-weight: 600;
    color: #2D3748;
    margin: 0 0 8px 0;
}

.branch-tooltip .title-separator {
    height: 2px;
    background: #357A96;
    margin-bottom: 12px;
    width: 40px;
}

.branch-tooltip .branch-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Match the gap used in grid cards */
}

.branch-tooltip .info-row {
    display: flex;
    align-items: flex-start;
    color: #4A5568;
    font-family: "Gotham Book", 'Gotham', sans-serif;
    /* No fixed gap/font-size/line-height so responsive rules apply */
}

.branch-tooltip .info-icon {
    flex-shrink: 0;
    /* Remove fixed sizing to allow responsive styles */
}

.branch-tooltip .info-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Icons should remain black as originally designed */
}

.branch-tooltip .maps-link {
    color: #357A96;
    text-decoration: none;
    font-weight: 500;
    margin-top: 4px;
    display: inline-block;
    transition: opacity 0.2s ease;
    font-family: "Gotham Book", 'Gotham', sans-serif;
}

.branch-tooltip .maps-link:hover {
    opacity: 0.8;
}

/* Mobile panel compatibility */
.mobile-branch-panel .branch-card-component.branch-card-mobile {
    background: transparent;
    padding: 0;
}