/* ===============================
   FULLSCREEN LOADER
=============================== */
#vt-loader {
    position: fixed;
    inset: 0;
    background: rgba(245, 245, 245, 0.15);  /* Soft off-white with 15% opacity */
    backdrop-filter: blur(2px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ===============================
   CENTER CONTAINER
=============================== */
.vt-circle {
    position: relative;
    width: 86px;
    height: 86px;
}

/* ===============================
   ROTATING RING (Base styles)
   Colors are added dynamically from settings
=============================== */
.vt-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid #e5e5e5;
    animation: vt-spin 1.5s linear infinite;
    box-sizing: border-box;
}

/* ===============================
   LOGO
=============================== */
.vt-circle img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: auto;
    z-index: 2;
}

@keyframes vt-spin {
    to { transform: rotate(360deg); }
}

/* ===============================
   HIDE LOADER AFTER PAGE LOADS
=============================== */
body.loaded #vt-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ===============================
   ORDER PROCESSING LOADER
=============================== */
body.vt-checkout-page #vt-loader {
     background: rgba(245, 245, 245, 0.15);  /* Soft off-white with 15% opacity */
    backdrop-filter: blur(1px);
}

body.vt-checkout-page .vt-circle::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 4px solid transparent;
    animation: vt-spin 0.9s linear reverse infinite;
    box-sizing: border-box;
}

/* ===============================
   PAGE LOADED STATE
=============================== */
body.loaded.vt-checkout-page #vt-loader {
    opacity: 1;
    visibility: visible;
}