.eje-map,
.eje-map-block { --eje-canvas: var(--vulcano-color-canvas, var(--wp--preset--color--canvas));
--eje-surface: var(--vulcano-color-surface, var(--wp--preset--color--surface));
--eje-text: var(--vulcano-color-text, var(--wp--preset--color--text));
--eje-text-soft: var(--vulcano-color-text-soft, var(--wp--preset--color--text-soft));
--eje-brand: var(--vulcano-color-brand, var(--wp--preset--color--brand));
--eje-brand-strong: var(--vulcano-color-brand-strong, var(--wp--preset--color--brand-strong));
--eje-accent: var(--vulcano-color-accent, var(--wp--preset--color--accent));
--eje-accent-2: var(--vulcano-color-accent-2, var(--wp--preset--color--accent-2));
--eje-inverse: var(--vulcano-color-inverse, var(--wp--preset--color--inverse));
--eje-border: var(--vulcano-color-border, var(--wp--preset--color--border)); --eje-sp-2xs: var(--vulcano-space-2xs, 0.25rem);
--eje-sp-xs: var(--vulcano-space-xs, 0.5rem);
--eje-sp-s: var(--vulcano-space-s, 0.75rem);
--eje-sp-m: var(--vulcano-space-m, 1rem);
--eje-sp-l: var(--vulcano-space-l, 1.5rem);
--eje-sp-xl: var(--vulcano-space-xl, 2rem);
--eje-r-sm: var(--vulcano-radius-sm, 0.25rem);
--eje-r-md: var(--vulcano-radius-md, 0.375rem);
--eje-r-lg: var(--vulcano-radius-lg, 0.75rem);
--eje-focus: var(--vulcano-focus-color, var(--wp--preset--color--accent, var(--eje-accent)));
} .eje-map__canvas {
width: 100%;
min-height: var(--eje-map-h, 24rem);
border: 1px solid var(--eje-border);
border-radius: var(--eje-r-lg);
overflow: hidden;
}
.eje-map__canvas:focus-visible {
outline: 3px solid var(--eje-focus);
outline-offset: 2px;
} .eje-map__status {
color: var(--eje-text-soft);
margin: var(--eje-sp-s) 0 0;
}
.eje-map__status:empty {
margin: 0;
} .eje-map__note {
color: var(--eje-text);
font-weight: 600;
max-width: 34rem;
margin: 0 auto;
} .eje-map__error {
margin: var(--eje-sp-s) auto 0;
max-width: 34rem;
padding: var(--eje-sp-s) var(--eje-sp-m);
border: 1px solid var(--eje-accent);
border-left-width: 4px;
border-radius: var(--eje-r-md);
background: var(--eje-surface);
color: var(--eje-text);
} .eje-map__revoke {
display: inline-block;
margin-top: var(--eje-sp-s);
min-height: 44px;
padding: var(--eje-sp-xs) var(--eje-sp-m);
border: 1px solid var(--eje-border);
border-radius: var(--eje-r-md);
background: var(--eje-surface);
color: var(--eje-text-soft);
font: inherit;
font-size: 0.875rem;
cursor: pointer;
}
.eje-map__revoke:hover {
color: var(--eje-text);
border-color: var(--eje-text-soft);
}
.eje-map__revoke:focus-visible {
outline: 3px solid var(--eje-focus);
outline-offset: 2px;
} .eje-map-block__gate {
border: 1px solid var(--eje-border);
border-radius: var(--eje-r-lg);
background: repeating-linear-gradient(45deg, var(--eje-canvas) 0 22px, var(--eje-surface) 22px 44px);
padding: var(--eje-sp-xl);
text-align: center; min-height: var(--eje-map-h, 28rem);
display: grid;
place-content: center;
} .eje-map-block__gate[data-eje-map='loaded'] {
display: block;
padding: 0;
min-height: 0;
border: 0;
background: none;
text-align: left;
} .eje-map-block__gate[data-eje-map='loaded'] .eje-map__status {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.eje-map-block__icon {
width: 3rem;
height: 3rem;
margin: 0 auto var(--eje-sp-s);
border-radius: var(--eje-r-md);
background: linear-gradient(135deg, var(--eje-accent-2), var(--eje-brand));
display: grid;
place-items: center;
color: var(--eje-inverse);
font-size: 1.4rem;
}
.eje-map-block__title {
margin: 0 0 var(--eje-sp-s);
font-size: 1.25rem;
}
.eje-map-block__gate p {
color: var(--eje-text-soft);
max-width: 34rem;
margin: 0 auto var(--eje-sp-m);
}
.eje-map-block__btn {
justify-self: center;
min-height: 44px;
padding: var(--eje-sp-xs) var(--eje-sp-l);
border: 1px solid var(--eje-brand);
border-radius: var(--eje-r-md);
background: var(--eje-brand);
color: var(--eje-inverse);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.eje-map-block__btn:hover {
background: var(--eje-brand-strong);
border-color: var(--eje-brand-strong);
}
.eje-map-block__btn:focus-visible {
outline: 3px solid var(--eje-focus);
outline-offset: 2px;
}
.eje-map-block__policy {
margin-top: var(--eje-sp-s);
font-size: 0.875rem;
}
.eje-map-block__policy a {
color: var(--eje-brand-strong);
} .eje-map-active {
outline: 3px solid var(--vulcano-color-accent, var(--wp--preset--color--accent));
outline-offset: 2px;
border-radius: var(--vulcano-radius-lg, 0.75rem);
}