.woocommerce-notices-wrapper .woocommerce-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    background: #fff;
    color: #333;
    border: none;
    padding: 24px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
    z-index: 9999;
    margin: 0;
}

.atc-message-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.atc-message-actions button {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--contrast-2);;
    font: inherit;
}

.atc-message-close    { background: #fff; color: var(--accent); }
.atc-message-continue { background: var(--contrast-2); color: #fff; }

/* Animated tick at the top of the product-page Added-to-Cart modal
   (same draw-on animation as the phone-verification success tick).
   Close / Continue Shopping actions are unchanged. */
.atc-message-content { text-align: center; }
.atc-message-check {
    color: var(--accent);
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
}
.atc-message-check svg { display: block; margin: 0 auto; }
/* fill:none + explicit stroke are forced (!important) because WooCommerce's
   message-context CSS otherwise sets fill on the <path>, painting the
   checkmark solid black. The Quick View tick isn't in that context, so it
   never needed this. */
.atc-message-check-circle {
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 3;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: atc-draw-circle 500ms 100ms ease-out forwards;
}
.atc-message-check-mark {
    fill: none !important;
    stroke: var(--accent) !important;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: atc-draw-mark 400ms 600ms ease-out forwards;
}
@keyframes atc-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes atc-draw-mark   { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .atc-message-check-circle,
    .atc-message-check-mark { animation: none !important; stroke-dashoffset: 0; }
}