.color-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.color-swatches .swatch {
width:34px; height:34px; border-radius:50%; border:2px solid #eee; box-shadow:0 1px 2px rgba(0,0,0,0.05);
cursor:pointer; padding:0; outline:none; transition:transform .08s ease, box-shadow .12s ease;
}
.color-swatches .swatch:hover { transform:translateY(-2px); }
.color-swatches .swatch.selected { box-shadow:0 0 0 3px rgba(255,126,14,0.15), 0 6px 18px rgba(0,0,0,0.08); border: #ff7e0e solid 2px; }
.color-swatches .swatch[style*="#fff"],
.color-swatches .swatch[style*="#fff"] + .swatch {}


.box-track-order { box-shadow:0 0 0 5px rgba(255,126,14,0.15), 0 6px 18px rgba(0,0,0,0.08); border: #ff7e0e solid 1px; }

.mx-100 {margin-top: 100px; margin-bottom: 100px;}

.card-product-wrapper {
    position: relative;
}

.country-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.country-flag img.country-flag-img {
    width: 30px !important;
    border: #FF7E0E solid 1px;
    border-radius: 50%;
    padding: 1px;
    height: auto;
    display: block;
}

.tf-my-dropdown { position: relative; cursor: pointer; }
.tf-my-dropdown .list {
    display: none; position: absolute; background: #fff; z-index: 999;
    width: 100%; border: 1px solid #ddd; border-radius: 8px; margin-top: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.tf-my-dropdown.open .list { display: block; }
.tf-my-dropdown .option { padding: 8px 12px; cursor: pointer; }
.tf-my-dropdown .option:hover { background-color: #f7f7f7; }


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pulse {
    animation: pulse 0.6s ease-in-out;
}

.pulse.infinite {
    animation: pulse 0.6s ease-in-out infinite;
}