/**
 * Anniversary badge styles for Keptone website
 * Controls the appearance and positioning of the 20 years celebration badge
 */

/* Container for the anniversary badge */
.anniversary-badge-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 14px;
    position: static;
    pointer-events: auto;
}

/* Special header context: keep badge close to logo, vertically centered */
.header-badge {
    margin-left: 14px;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
    position: relative;
    top: 2px;
}

/* Badge image styling */
.anniversary-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    transition: transform 0.2s;
    cursor: pointer;
    object-fit: contain;
}

/* Hover effect for the badge */
.anniversary-badge:hover {
    transform: scale(1.08) rotate(-4deg);
}

/* Header logo area uses flexbox for horizontal alignment */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* Anniversary badge container next to logo */
/* Header badge container positioned 50px left and 40px down from original position */
.anniversary-badge-container.header-badge {
    display: flex !important;
    align-items: center !important;
    margin-left: -38px !important; /* 12px original - 50px left shift */
    margin-top: 40px !important; /* Moving down by 40px */
    position: relative !important;
    z-index: 1002 !important;
    opacity: 1 !important;
    background: none !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
}

.anniversary-badge {
    width: 48px !important;
    height: 48px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    border-radius: 50% !important;
    background: transparent !important; /* No background */
    box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
    transition: transform 0.2s;
    cursor: pointer;
    object-fit: contain;
    opacity: 1 !important;
    z-index: 2000 !important;
    display: block !important;
}

.anniversary-badge:hover {
    transform: scale(1.08) rotate(-4deg);
}

/* Responsive: smaller badge on mobile */
@media (max-width: 768px) {
    .anniversary-badge {
        width: 36px;
        height: 36px;
    }
    .anniversary-badge-container.header-badge {
        margin-left: 6px;
    }
}

/* Responsive: smaller badge on mobile */
@media (max-width: 768px) {
    .anniversary-badge {
        width: 36px !important;
        height: 36px !important;
    }
    .header-badge {
        margin-left: 8px !important;
        top: 1px !important;
    }
}

@media (max-width: 480px) {
    .anniversary-badge-container {
        top: 70px;
        right: 10px;
    }
}