/* Amico Branch Map Styles */
.amico-map-container {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
    /* Animation will be triggered by intersection observer */

    /* Aspect-fit: scale entire container to fit within viewport while maintaining aspect ratio */
    width: min(100%, calc(100vh * var(--map-aspect-ratio, 1.4)));
    max-height: 100vh;
}

/* Fallback: Ensure map is visible if JavaScript fails or is disabled */
.no-js .amico-map-container,
noscript .amico-map-container {
    opacity: 1;
    animation: none;
}

.no-js .middle-east-map,
noscript .middle-east-map,
.no-js .country-labels,
noscript .country-labels,
.no-js .map-pin,
noscript .map-pin {
    opacity: 1;
    animation: none;
}

/* Animation states - only activated when in viewport */
.amico-map-container.animate-in {
    animation: backgroundFadeIn 800ms ease-out forwards;
    /* Default fallback - will be overridden by JS */
}

@keyframes backgroundFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

@keyframes mapFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

.map-wrapper {
    position: relative !important;
    width: 100%;
    padding: 3%;
}

/* SVG Map Styles */
.middle-east-map {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    /* Animation will be triggered by intersection observer */
}

/* Map animation - only when parent container is animating in */
.amico-map-container.animate-in .middle-east-map {
    animation: mapFadeIn 800ms ease-out forwards;
    /* Default fallback - will be overridden by JS */
    animation-delay: 300ms;
    /* Default fallback - will be overridden by JS */
}

@keyframes labelsFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

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

.map-region {
    transition: all 0.3s ease;
    cursor: pointer;
}

.map-region:hover {
    filter: brightness(1.1);
    transform-origin: center;
}

/* Country Labels */
.country-labels {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 20 !important;
    opacity: 0;
    /* Animation will be triggered by intersection observer */
}

/* Country labels animation - only when parent container is animating in */
.amico-map-container.animate-in .country-labels {
    animation: labelsFadeIn 600ms ease-out forwards;
    /* Default fallback - will be overridden by JS */
    animation-delay: 800ms;
    /* Default fallback - will be overridden by JS */
}

.country-label {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    color: #ffffff !important;
    font-size: clamp(10px, 1vw, 14px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    z-index: 21 !important;
    white-space: nowrap !important;
}

/* Branch Pins Container */
.branch-pins {
    position: absolute !important;
    top: 3%;
    left: 3%;
    right: 3%;
    bottom: 3%;
    pointer-events: none;
    z-index: 2100;
}

/* Individual Pin Container */
.map-pin {
    position: absolute !important;
    pointer-events: all;
    cursor: pointer;
    width: 4%;
    min-width: 30px;
    max-width: 50px;
    aspect-ratio: 5/6;
    transform: translate(-50%, -100%);
    /* Center horizontally, position above the point */
    z-index: 10;
    opacity: 0;
    /* Animation will be triggered by intersection observer */
    will-change: transform, opacity;
    /* Optimize for animations */
    backface-visibility: hidden;
    /* Prevent flickering during animations */
}

/* Pin animation - only when parent container is animating in */
.amico-map-container.animate-in .map-pin {
    animation: pinDrop 0.6s ease-out forwards;
    animation-delay: calc(1200ms + (var(--animation-order, 0) * 200ms));
}

/* Base pseudo-element (no offsets on tablet/mobile) */
.map-pin::before {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: all;
}

@media (min-width: 1025px) {

    /* Expand hoverable area to bridge gap to tooltip on desktop */
    .map-pin::before {
        top: -35px;
        /* Extend upward to cover tooltip area */
        left: -35px;
        /* Extend left */
        right: -35px;
        /* Extend right */
        bottom: -20px;
        /* Extend downward */
    }
}

/* Pin SVG States */
.map-pin .pin-normal,
.map-pin .pin-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    z-index: 1;
    /* Ensure pins are below tooltip overlay */
    /* iOS Safari SVG fix - force GPU rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

.map-pin .pin-normal {
    opacity: 1;
}

.map-pin .pin-hover {
    opacity: 0;
}

/* Hover States */
.map-pin:hover .pin-normal {
    opacity: 0;
}

.map-pin:hover .pin-hover {
    opacity: 1;
}

/* Selected pin should mirror hover visuals */
.map-pin.active .pin-normal {
    opacity: 0;
}

.map-pin.active .pin-hover {
    opacity: 1;
}

/* Elevate hovered/active pin stacking so tooltip sits above all pins */
.map-pin:hover,
.map-pin.active {
    z-index: 2000;
}

/* Pin Images and Inline SVGs */
.map-pin img,
.map-pin svg {
    width: 100%;
    height: 100%;
    display: block;
    /* iOS Safari SVG fix - comprehensive approach */
    contain: layout style paint;
    /* Force isolation and hardware acceleration */
    isolation: isolate;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Force GPU rendering on iOS Safari */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent Safari SVG rendering bugs */
    filter: none;
}

/* Inline SVG specific fixes for iOS Safari */
.map-pin svg {
    /* Force SVG to render as block element */
    display: block;
    /* Ensure SVG uses the full container */
    width: 100%;
    height: 100%;
    /* Prevent scaling issues */
    max-width: none;
    max-height: none;
}

/* SVG path elements for inline SVGs */
.map-pin svg path {
    /* Force hardware acceleration on SVG paths */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Prefer high-quality anti-aliased vector rendering on iOS */
    shape-rendering: geometricPrecision;
}

@keyframes pinDrop {
    0% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(0);
    }

    60% {
        transform: translate(-50%, -95%) scale(1.1);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1);
    }
}

/* Opacity-only keyframes so we don't override transform-based positioning */
@keyframes tooltipFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Remove old SVG-specific styles - now using IMG tags */

/* Tooltips - Base positioning (default: top) */
.branch-tooltip {
    --tooltip-gap: 20px;
    /* keeps a constant gap to the pin */
    position: absolute;
    bottom: calc(100% + var(--tooltip-gap));
    left: 50%;
    transform: translateX(-50%) scale(0.92);
    transform-origin: bottom center;
    will-change: transform, opacity;
    width: 298px;
    max-width: 90vw;
    /* Prevent overflow on narrow screens */
    height: auto;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #BACECD;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), visibility 0.3s ease;
    pointer-events: none;
    z-index: 2100;
    /* Above pin visuals */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    /* Updated from 8px to 12px */
    /* isolation removed to fix SVG rendering */
}

/* Smart positioning variants */
.branch-tooltip.tooltip-right {
    bottom: auto;
    top: 50%;
    left: calc(100% + var(--tooltip-gap));
    transform: translateY(-50%) scale(0.92);
    transform-origin: left center;
}

.branch-tooltip.tooltip-bottom {
    bottom: auto;
    top: calc(100% + var(--tooltip-gap));
    left: 50%;
    transform: translateX(-50%) scale(0.92);
    transform-origin: top center;
}

.branch-tooltip.tooltip-left {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + var(--tooltip-gap));
    transform: translateY(-50%) scale(0.92);
    transform-origin: right center;
}

/* Tooltip pointer arrow (diamond), consistent orientation */
.branch-tooltip::before,
.branch-tooltip::after {
    content: '';
    position: absolute;
    width: var(--tooltip-arrow, 12px);
    height: var(--tooltip-arrow, 12px);
    pointer-events: none;
    transform: rotate(45deg);
}

.branch-tooltip::before {
    /* disable border/shadow layer for seamless look */
    display: none;
}

.branch-tooltip::after {
    /* single diamond, same color as card */
    width: var(--tooltip-arrow, 12px);
    height: var(--tooltip-arrow, 12px);
    background: #FFFFFF;
}

/* Default placement: top (arrow points down from bottom edge) */
.branch-tooltip:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left)::before,
.branch-tooltip:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left)::after {
    bottom: calc((var(--tooltip-arrow, 12px) / -2) + 1px);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

/* Right placement: arrow on left edge pointing left */
.branch-tooltip.tooltip-right::before,
.branch-tooltip.tooltip-right::after {
    left: calc((var(--tooltip-arrow, 12px) / -2) + 1px);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

/* Bottom placement: arrow on top edge pointing up */
.branch-tooltip.tooltip-bottom::before,
.branch-tooltip.tooltip-bottom::after {
    top: calc((var(--tooltip-arrow, 12px) / -2) + 1px);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

/* Left placement: arrow on right edge pointing right */
.branch-tooltip.tooltip-left::before,
.branch-tooltip.tooltip-left::after {
    right: calc((var(--tooltip-arrow, 12px) / -2) + 1px);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

/* Arrow nudge adjustments to keep arrow aligned when tooltip is repositioned */
/* Default/top placement with horizontal nudge */
.branch-tooltip.arrow-nudged-x:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left)::before,
.branch-tooltip.arrow-nudged-x:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left)::after {
    transform: translateX(calc(-50% + var(--arrow-nudge-x, 0px))) rotate(45deg);
}

/* Default/top placement with vertical nudge */
.branch-tooltip.arrow-nudged-y:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left)::before,
.branch-tooltip.arrow-nudged-y:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left)::after {
    bottom: calc((var(--tooltip-arrow, 12px) / -2) + 1px + var(--arrow-nudge-y, 0px));
}

/* Right placement with horizontal nudge */
.branch-tooltip.tooltip-right.arrow-nudged-x::before,
.branch-tooltip.tooltip-right.arrow-nudged-x::after {
    left: calc((var(--tooltip-arrow, 12px) / -2) + 1px + var(--arrow-nudge-x, 0px));
}

/* Right placement with vertical nudge */
.branch-tooltip.tooltip-right.arrow-nudged-y::before,
.branch-tooltip.tooltip-right.arrow-nudged-y::after {
    transform: translateY(calc(-50% + var(--arrow-nudge-y, 0px))) rotate(45deg);
}

/* Bottom placement with horizontal nudge */
.branch-tooltip.tooltip-bottom.arrow-nudged-x::before,
.branch-tooltip.tooltip-bottom.arrow-nudged-x::after {
    transform: translateX(calc(-50% + var(--arrow-nudge-x, 0px))) rotate(45deg);
}

/* Bottom placement with vertical nudge */
.branch-tooltip.tooltip-bottom.arrow-nudged-y::before,
.branch-tooltip.tooltip-bottom.arrow-nudged-y::after {
    top: calc((var(--tooltip-arrow, 12px) / -2) + 1px + var(--arrow-nudge-y, 0px));
}

/* Left placement with horizontal nudge */
.branch-tooltip.tooltip-left.arrow-nudged-x::before,
.branch-tooltip.tooltip-left.arrow-nudged-x::after {
    right: calc((var(--tooltip-arrow, 12px) / -2) + 1px + var(--arrow-nudge-x, 0px));
}

/* Left placement with vertical nudge */
.branch-tooltip.tooltip-left.arrow-nudged-y::before,
.branch-tooltip.tooltip-left.arrow-nudged-y::after {
    transform: translateY(calc(-50% + var(--arrow-nudge-y, 0px))) rotate(45deg);
}

.map-pin:hover .branch-tooltip:not(.as-panel),
.map-pin.active .branch-tooltip,
.branch-tooltip.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    /* Fade only; transform transitions handle the pop/slide */
    animation: tooltipFade var(--tooltip-pop-duration, 480ms) ease-out both;
}

/* Position-specific hover transforms */
.map-pin:hover .branch-tooltip:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left):not(.as-panel),
.map-pin.active .branch-tooltip:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left),
.branch-tooltip.visible:not(.tooltip-right):not(.tooltip-bottom):not(.tooltip-left) {
    transform: translateX(-50%) scale(1);
}

.map-pin:hover .branch-tooltip.tooltip-right:not(.as-panel),
.map-pin.active .branch-tooltip.tooltip-right,
.branch-tooltip.visible.tooltip-right {
    transform: translateY(-50%) scale(1);
}

.map-pin:hover .branch-tooltip.tooltip-bottom:not(.as-panel),
.map-pin.active .branch-tooltip.tooltip-bottom,
.branch-tooltip.visible.tooltip-bottom {
    transform: translateX(-50%) scale(1);
}

.map-pin:hover .branch-tooltip.tooltip-left:not(.as-panel),
.map-pin.active .branch-tooltip.tooltip-left,
.branch-tooltip.visible.tooltip-left {
    transform: translateY(-50%) scale(1);
}

/* Keep tooltip visible when hovering over the pin or tooltip (desktop only) */
.map-pin:hover .branch-tooltip:hover:not(.as-panel) {
    opacity: 1;
    visibility: visible;
}


.branch-title {
    margin: 0;
    padding: 0;
    width: 258px;
    height: 28px;
    font-family: "Gotham Book", 'Gotham', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    display: flex;
    align-items: center;
    color: #18191A;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.title-separator {
    width: 64px;
    height: 0px;
    border: 1px solid #1CAEA7;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 16px 0 0 0;
}

.branch-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
    width: 258px;
    height: auto;
    /* Changed from 240px to auto */
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

.info-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* Changed from center */
    padding: 0px;
    gap: 12px;
    width: 258px;
    min-height: 24px;
    /* Added min-height */
    font-family: "Gotham Book", 'Gotham', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #18191A;
}

.info-row span:last-child {
    flex-grow: 1;
    /* Allow text to wrap */
    min-width: 0;
    /* Allow flex item to shrink inside tooltip */
    white-space: pre-line;
    /* Respect newlines if present */
    overflow-wrap: anywhere;
    /* Break long tokens to prevent overflow */
    word-break: break-word;
    /* Fallback for older browsers */
}

/* Tighter line-height for multiline address row */
.branch-tooltip .branch-info .info-row:first-child span:last-child {
    line-height: 20px;
    /* reduce default 24px for compact multi-line addresses */
}

.info-icon {
    flex: none;
    order: 0;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Ensure stacking context */
    z-index: 10;
    /* Draw above background */
}

.info-icon img,
.info-icon svg {
    display: block;
}

/* Inline SVG styling (fallback if any remain) - removed stroke to avoid conflicts */
.info-icon svg {
    fill: none;
    pointer-events: none;
}

/* External SVG files rendered via <img> */
.info-icon img {
    pointer-events: none;
    /* don't block text selection/links */
    transform: translateZ(0);
    /* ensure proper rendering during tooltip transitions */
}

/* Responsive Typography and Icon Sizing */
@media (max-width: 767px) {
    .info-row {
        font-size: 14px;
        line-height: 20px;
    }

    .info-icon {
        width: 20px;
        height: 20px;
    }

    .info-icon img,
    .info-icon svg {
        width: 20px;
        height: 20px;
    }
}

@media (min-width: 768px) {
    .info-row {
        font-size: 16px;
        line-height: 24px;
    }

    .info-icon {
        width: 24px;
        height: 24px;
    }

    .info-icon img,
    .info-icon svg {
        width: 24px;
        height: 24px;
    }
}

.maps-link {
    display: inline;
    text-decoration: underline;
    color: #18191A;
    margin-top: auto;
    /* Pushes link to the bottom */
    font-family: "Gotham Book", 'Gotham', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: inherit;
}

.maps-link:hover {
    color: #357A96;
    text-decoration-line: underline;
}

/* Mobile panel container (hidden by default) */
.branch-mobile-panel {
    display: none;
}

/* Tooltip staged content reveal: fade/slide in sequentially */
.branch-tooltip .branch-title,
.branch-tooltip .title-separator,
.branch-tooltip .branch-info .info-row,
.branch-tooltip .maps-link {
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity var(--tooltip-content-duration, 300ms) ease,
        transform var(--tooltip-content-duration, 300ms) ease;
}

.map-pin:hover .branch-tooltip:not(.as-panel) .branch-title,
.map-pin.active .branch-tooltip .branch-title,
.branch-tooltip.visible .branch-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--tooltip-content-delay, 120ms) + 0 * var(--tooltip-stagger, 80ms));
}

.map-pin:hover .branch-tooltip:not(.as-panel) .title-separator,
.map-pin.active .branch-tooltip .title-separator,
.branch-tooltip.visible .title-separator {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--tooltip-content-delay, 120ms) + 1 * var(--tooltip-stagger, 80ms));
}

.map-pin:hover .branch-tooltip:not(.as-panel) .branch-info .info-row:nth-of-type(1),
.map-pin.active .branch-tooltip .branch-info .info-row:nth-of-type(1),
.branch-tooltip.visible .branch-info .info-row:nth-of-type(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--tooltip-content-delay, 120ms) + 2 * var(--tooltip-stagger, 80ms));
}

.map-pin:hover .branch-tooltip:not(.as-panel) .branch-info .info-row:nth-of-type(2),
.map-pin.active .branch-tooltip .branch-info .info-row:nth-of-type(2),
.branch-tooltip.visible .branch-info .info-row:nth-of-type(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--tooltip-content-delay, 120ms) + 3 * var(--tooltip-stagger, 80ms));
}

.map-pin:hover .branch-tooltip:not(.as-panel) .branch-info .info-row:nth-of-type(3),
.map-pin.active .branch-tooltip .branch-info .info-row:nth-of-type(3),
.branch-tooltip.visible .branch-info .info-row:nth-of-type(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--tooltip-content-delay, 120ms) + 4 * var(--tooltip-stagger, 80ms));
}

.map-pin:hover .branch-tooltip:not(.as-panel) .branch-info .info-row:nth-of-type(4),
.map-pin.active .branch-tooltip .branch-info .info-row:nth-of-type(4),
.branch-tooltip.visible .branch-info .info-row:nth-of-type(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--tooltip-content-delay, 120ms) + 5 * var(--tooltip-stagger, 80ms));
}

.map-pin:hover .branch-tooltip:not(.as-panel) .branch-info .info-row:nth-of-type(5),
.map-pin.active .branch-tooltip .branch-info .info-row:nth-of-type(5),
.branch-tooltip.visible .branch-info .info-row:nth-of-type(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--tooltip-content-delay, 120ms) + 6 * var(--tooltip-stagger, 80ms));
}

.map-pin:hover .branch-tooltip:not(.as-panel) .maps-link,
.map-pin.active .branch-tooltip .maps-link,
.branch-tooltip.visible .maps-link {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--tooltip-content-delay, 120ms) + 7 * var(--tooltip-stagger, 80ms));
}

/* Responsive */
@media (max-width: 1024px) {

    /* Hide floating tooltips on mobile/tablet */
    .branch-tooltip:not(.as-panel),
    .map-pin:hover .branch-tooltip:not(.as-panel),
    .map-pin.active .branch-tooltip:not(.as-panel),
    .branch-tooltip.visible:not(.as-panel),
    .branch-tooltip:hover:not(.as-panel) {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Show below-map panel when JS adds .visible */
    .branch-mobile-panel {
        display: none;
        /* until .visible */
        margin-top: 16px;
        padding: 20px;
        background: #FFFFFF;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .branch-mobile-panel.visible {
        display: block;
        animation: tooltipFade 300ms ease-out both;
    }

    /* Cloned tooltip rendered as an inline panel */
    .branch-mobile-panel .branch-tooltip.as-panel {
        position: static;
        transform: none;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        opacity: 1;
        /* always visible inside panel */
        visibility: visible;
        pointer-events: auto;
        animation: none;
        border-radius: 0;
        box-shadow: none;
        border: 0;
        /* avoid double border (panel provides it) */
        padding: 0;
        /* avoid double padding (panel provides it) */
        background: transparent;
    }

    /* Remove shadow from card component within mobile panel */
    .branch-mobile-panel .branch-tooltip.as-panel .branch-card-tooltip {
        box-shadow: none !important;
    }

    .branch-mobile-panel .branch-tooltip.as-panel::before,
    .branch-mobile-panel .branch-tooltip.as-panel::after {
        display: none;
        /* no arrow in panel mode */
    }

    /* Ensure staged elements are visible in panel (no reveal animation needed) */
    .branch-mobile-panel .branch-tooltip.as-panel .branch-title,
    .branch-mobile-panel .branch-tooltip.as-panel .title-separator,
    .branch-mobile-panel .branch-tooltip.as-panel .branch-info .info-row,
    .branch-mobile-panel .branch-tooltip.as-panel .maps-link {
        opacity: 1;
        transform: translateY(0);
        transition: none;
    }

    /* Expand content to full width inside the panel */
    .branch-mobile-panel .branch-title,
    .branch-mobile-panel .branch-info,
    .branch-mobile-panel .info-row {
        width: 100%;
    }

    .branch-mobile-panel .maps-link {
        display: inline-block;
    }
}

@media (max-width: 768px) {
    .amico-map-container {
        /* On mobile, prioritize width over height constraint */
        width: 100%;
        max-height: calc(100vh - 4em);
        /* Leave some space for other content */
    }

    .map-wrapper {
        padding: 2%;
    }

    .branch-pins {
        top: 2%;
        left: 2%;
        right: 2%;
        bottom: 2%;
    }

    .map-pin {
        width: 20px;
        height: 24px;
        min-width: 20px;
        max-width: 20px;
        /* Match the new 5:6 aspect ratio from the updated viewBox */
        aspect-ratio: 5/6;
    }

    /* Mobile-specific SVG optimizations */
    .map-pin img,
    .map-pin svg,
    .map-pin svg path {
        /* iOS Safari SVG fix - force crisp rendering */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Prevent rendering artifacts during animations */
        /* Force Safari to render SVGs as block elements */
        display: block;
        /* Ensure consistent rendering on iOS */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* iOS Safari specific fix */
    @supports (-webkit-touch-callout: none) {
        .map-pin img,
        .map-pin svg,
        .map-pin svg path {
            /* Force iOS Safari to use GPU rendering for SVGs */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            will-change: transform;
            /* Prefer anti-aliased vector rendering on iOS */
            shape-rendering: geometricPrecision;
            /* Force block display to prevent inline rendering issues */
            display: block !important;
        }
    }

    /* Additional iOS Safari fix for older versions */
    @media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
        .map-pin img,
        .map-pin svg,
        .map-pin svg path {
            /* Force hardware acceleration on high DPI iOS devices */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            /* Ensure consistent sizing with correct aspect ratio */
            width: 20px !important;
            height: 24px !important;
            /* Prevent subpixel rendering issues */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .amico-map-container {
        /* In landscape, use aspect-fit approach */
        width: min(100%, calc(100vh * var(--map-aspect-ratio, 1.4)));
        max-height: 90vh;
        /* Leave room for browser UI */
    }
}

/* Animation timing for pins */
.map-pin:nth-child(1) {
    --animation-order: 1;
}

.map-pin:nth-child(2) {
    --animation-order: 2;
}

.map-pin:nth-child(3) {
    --animation-order: 3;
}

.map-pin:nth-child(4) {
    --animation-order: 4;
}

.map-pin:nth-child(5) {
    --animation-order: 5;
}

.map-pin:nth-child(6) {
    --animation-order: 6;
}

.map-pin:nth-child(7) {
    --animation-order: 7;
}

.map-pin:nth-child(8) {
    --animation-order: 8;
}

.map-pin:nth-child(9) {
    --animation-order: 9;
}

.map-pin:nth-child(10) {
    --animation-order: 10;
}

/* Debug: Aspect-fit container visualization (only when debug enabled) */
body[data-debug-aspect="true"] .amico-map-container {
    outline: 2px solid red;
    outline-offset: -2px;
}

body[data-debug-aspect="true"] .map-wrapper {
    outline: 2px solid blue;
    outline-offset: -2px;
    position: relative;
}

body[data-debug-aspect="true"] .amico-map-container::before {
    content: 'AR: ' attr(data-aspect-ratio);
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 8px;
    font-size: 12px;
    z-index: 9999;
    border-radius: 3px;
}

/* Elementor Editor Support */
.elementor-editor-active .amico-map-container {
    opacity: 1 !important;
    animation: none !important;
}

.elementor-editor-active .middle-east-map {
    opacity: 1 !important;
    animation: none !important;
}

.elementor-editor-active .country-labels {
    opacity: 1 !important;
    animation: none !important;
}

.elementor-editor-active .map-pin {
    opacity: 1 !important;
    animation: none !important;
}

.elementor-editor-active .branch-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.elementor-editor-active .map-pin:hover .branch-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

/* Fix positioning consistency between editor and frontend */
.elementor-editor-active .branch-pins {
    top: 3% !important;
    left: 3% !important;
    right: 3% !important;
    bottom: 3% !important;
}

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