/* ============================================================
   ATC Button — [bestel_nu] shortcode styles
   ============================================================ */

.atc-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative; /* anker voor de absolute icons */
}

@media(max-width: 767px) {
	.atc-btn {
		font-size: 14px !important;
	}
}

/* Verwijder focus-ring na muisklik, behoud bij toetsenbord */
.atc-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Label */
.atc-label {
    white-space: nowrap;
    transition: opacity .2s ease, transform .2s ease;
}

/* Icons: volledig uit de flow, gecentreerd over de knop */
.atc-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.atc-icon .atc-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Loading-state */
.atc-btn.is-loading {
    pointer-events: none;
}

.atc-btn.is-loading .atc-label {
    opacity: 0;
}

.atc-btn.is-loading .atc-icon--spinner {
    opacity: 1;
    animation: atc-spin .7s linear infinite;
}

/* Success-state */
.atc-btn.is-success {
    pointer-events: none;
}

.atc-btn.is-success .atc-label {
    opacity: 0;
}

.atc-btn.is-success .atc-icon--check {
    opacity: 1;
    animation: atc-pop .3s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* Animaties */
@keyframes atc-spin {
    to { transform: rotate(360deg); }
}

@keyframes atc-pop {
    from { transform: scale(.3); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}