/* ============================================================
   Atlantis CTA Button
   Variabili CSS guidate dai controlli Elementor (responsive):
   --cta-h       altezza pillola
   --cta-icon    diametro cerchio icona
   --cta-ring    spessore anello bianco intorno al cerchio
   --cta-offset  distanza del cerchio dal bordo destro
   --cta-px      padding orizzontale del testo
   ============================================================ */

.atlantis-cta-wrap {
    display: flex;
    width: 100%;
}

.atlantis-cta {
    /* defaults (sovrascritti dai controlli) */
    --cta-h: 56px;
    --cta-icon: 44px;
    --cta-ring: 3px;
    --cta-offset: 4px;
    --cta-px: 32px;

    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
}

.atlantis-cta:hover,
.atlantis-cta:focus,
.atlantis-cta:active {
    text-decoration: none;
}

.atlantis-cta__label {
    height: var(--cta-h);
    padding-left: var(--cta-px);
    padding-right: calc(var(--cta-icon) + (var(--cta-ring) * 2) + var(--cta-offset) + 8px);
    border-radius: 999px;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #1a3a5c;
    transition: background-color 0.25s ease, color 0.25s ease;
    /* mask radiale che "scava" un foro circolare nella pillola */
    -webkit-mask:
        radial-gradient(circle calc(var(--cta-icon) / 2)
            at calc(100% - var(--cta-icon) / 2 - var(--cta-ring) - var(--cta-offset)) 50%,
            transparent 99%, #000 100%);
    mask:
        radial-gradient(circle calc(var(--cta-icon) / 2)
            at calc(100% - var(--cta-icon) / 2 - var(--cta-ring) - var(--cta-offset)) 50%,
            transparent 99%, #000 100%);
}

.atlantis-cta__icon {
    width: var(--cta-icon);
    height: var(--cta-icon);
    border-radius: 50%;
    background-color: transparent;
    color: #fff;
    display: grid;
    place-items: center;
    margin-left: calc(-1 * (var(--cta-icon) + var(--cta-ring)));
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    flex-shrink: 0;
}

.atlantis-cta__icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.atlantis-cta__icon i {
    line-height: 1;
}