/**
 * The base layout for .granpai-modal-media / .granpai-modal-contacts
 * already lives in the free plugin's frontend CSS (it owns the modal's
 * design system). This file only adds the polish Pro itself is
 * responsible for: image load transition and icon focus states.
 */
.granpai-modal-media img {
    opacity: 0;
    animation: granpai-pro-fade-in 0.25s ease forwards;
}
@keyframes granpai-pro-fade-in {
    to { opacity: 1; }
}

.granpai-modal-contacts a:focus-visible {
    outline: 2px solid var(--gp-accent, #00ffcc);
    outline-offset: 2px;
}

.granpai-modal-directions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 16px;
    border-radius: 999px;
    /* Plain accent as a fallback for browsers without color-mix()
       support - browsers that don't understand the color-mix() line
       below simply ignore it and keep this one. */
    background: var(--gp-accent, #00ffcc);
    /* Blends in some dark regardless of how bright/neon the site's own
       accent color is, so white text stays reliably readable either
       way - a raw neon background can wash out white just as easily as
       it washed out the black text this replaced. */
    background: color-mix(in srgb, var(--gp-accent, #00ffcc) 70%, #04121a 30%);
    /* White (not black) - a solid background this bright/saturated needs
       a light foreground to stay readable; black text here was the
       previous version of this button and was hard to read against it. */
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    transition: filter 0.15s ease;
}
.granpai-modal-directions:hover,
.granpai-modal-directions:focus-visible {
    filter: brightness(0.94);
}
.granpai-modal-directions svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}