/**
 * Branch Grid Widget Styles
 */

.amico-branch-grid-wrapper {
    width: 100%;
}

.branch-grid-container {
    display: grid;
    width: 100%;
}

.branch-grid-item {
    opacity: 0;
    will-change: transform, opacity;
    position: relative;
    width: 100%;
    min-width: 0;
}

.branch-grid-item.animated {
    opacity: 1;
}

/* Entrance Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes flipIn {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(-90deg);
    }

    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0);
    }
}

/* Hover Animations */
.branch-grid-item[data-hover="lift"] .branch-card-grid {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.branch-grid-item[data-hover="lift"]:hover .branch-card-grid {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.branch-grid-item[data-hover="scale"] .branch-card-grid {
    transition: transform 0.3s ease;
}

.branch-grid-item[data-hover="scale"]:hover .branch-card-grid {
    transform: scale(1.05);
}

.branch-grid-item[data-hover="rotate"] .branch-card-grid {
    transition: transform 0.3s ease;
}

.branch-grid-item[data-hover="rotate"]:hover .branch-card-grid {
    transform: rotate(2deg) scale(1.02);
}

.branch-grid-item[data-hover="glow"] .branch-card-grid {
    transition: box-shadow 0.3s ease;
}

.branch-grid-item[data-hover="glow"]:hover .branch-card-grid {
    box-shadow: 0 0 30px rgba(53, 122, 150, 0.3);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .branch-grid-container {
        grid-template-columns: 1fr !important;
    }

    /* Disable hover animations on mobile */
    .branch-grid-item[data-hover] {
        transition: none !important;
    }

    .branch-grid-item[data-hover]:hover .branch-card-grid,
    .branch-grid-item[data-hover]:active .branch-card-grid,
    .branch-grid-item[data-hover]:focus .branch-card-grid {
        transform: none !important;
        box-shadow: inherit !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .branch-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Disable hover animations on touch devices */
@media (hover: none) and (pointer: coarse) {
    .branch-grid-item[data-hover] {
        transition: none !important;
    }

    .branch-grid-item[data-hover] .branch-card-grid {
        transform: none !important;
        box-shadow: inherit !important;
    }
}

/* Elementor Editor Specific Fixes */
.elementor-editor-active .branch-grid-item {
    opacity: 1 !important;
}

.elementor-editor-active .branch-grid-item[data-hover] {
    /* Disable hover animations in editor */
    transition: none !important;
}

.elementor-editor-active .branch-grid-item[data-hover]:hover .branch-card-grid {
    transform: none !important;
    box-shadow: inherit !important;
}

/* Ensure proper layout in editor */
.elementor-editor-active .amico-branch-grid-wrapper {
    width: 100%;
}

.elementor-editor-active .branch-grid-container {
    display: grid !important;
    width: 100% !important;
}

/* Fix for empty state visibility */
.elementor-editor-active .branch-grid-container:empty {
    min-height: 100px;
    display: grid !important;
    align-items: center;
    justify-items: center;
}

/* Last row alignment support */
.last-row-item { display: inline; }

/* Card Elevation Levels */
.amico-branch-grid-wrapper.elevation-none .branch-card-grid {
    box-shadow: none !important;
}

.amico-branch-grid-wrapper.elevation-low .branch-card-grid {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.amico-branch-grid-wrapper.elevation-medium .branch-card-grid {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
}

.amico-branch-grid-wrapper.elevation-high .branch-card-grid {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

.amico-branch-grid-wrapper.elevation-very_high .branch-card-grid {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
}

/* For custom elevation, don't override */
.amico-branch-grid-wrapper.elevation-custom .branch-card-grid { box-shadow: inherit; }

/* Icon color support - ensure SVGs and images can be recolored */
.branch-card-grid .info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --icon-color: #357A96;
    /* Default icon color */
}

.branch-card-grid .info-icon img {
    transition: filter 0.3s ease;
    /* Use CSS filters to colorize images based on custom property */
    filter:
        brightness(0) saturate(100%) hue-rotate(var(--icon-hue, 200deg)) brightness(var(--icon-brightness, 1));
}

.branch-card-grid .info-icon svg {
    transition: fill 0.3s ease;
    fill: var(--icon-color);
}

.branch-card-grid .info-icon svg path {
    fill: inherit;
}

/* Color-specific icon filters for common colors */
.elementor-widget-amico-branch-grid[style*="--icon-color: #357A96"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: #357a96"] .info-icon img {
    filter: brightness(0) saturate(100%) invert(0.3) sepia(0.8) hue-rotate(180deg) brightness(1.2);
}

.elementor-widget-amico-branch-grid[style*="--icon-color: #000"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: #000000"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: black"] .info-icon img {
    filter: brightness(0) saturate(100%);
}

.elementor-widget-amico-branch-grid[style*="--icon-color: #fff"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: #ffffff"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: white"] .info-icon img {
    filter: brightness(0) saturate(100%) invert(1);
}

/* Red tones */
.elementor-widget-amico-branch-grid[style*="--icon-color: red"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: #ff"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: #f"] .info-icon img {
    filter: brightness(0) saturate(100%) invert(0.2) sepia(1) hue-rotate(-10deg) brightness(1.3);
}

/* Blue tones */
.elementor-widget-amico-branch-grid[style*="--icon-color: blue"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: #00"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: #0"] .info-icon img {
    filter: brightness(0) saturate(100%) invert(0.3) sepia(1) hue-rotate(200deg) brightness(1.2);
}

/* Green tones */
.elementor-widget-amico-branch-grid[style*="--icon-color: green"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: #0f"] .info-icon img,
.elementor-widget-amico-branch-grid[style*="--icon-color: #4"] .info-icon img {
    filter: brightness(0) saturate(100%) invert(0.4) sepia(1) hue-rotate(80deg) brightness(1.1);
}

/* Removed link-specific styles to avoid any visual changes */