/**
 * Store Rating Badge Styles - Horizontal Gold Badge with Glowing Border
 */

.store-rating-badge {
    float: right;
    margin: -150px 0 10px 20px;
    clear: right;
    text-align: center;
    position: relative;
    top: 10px;
}

.rating-badge-link {
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.rating-badge-link:hover {
    text-decoration: none;
    transform: translateY(-3px);
}

/* Main badge box with glowing gold border */
.rating-badge-box {
    display: flex;
    align-items: stretch;
    border: 4px solid #f5b800;
    /* Thick gold border */
    border-radius: 8px;
    overflow: visible;
    /* Allow trophy to break out */
    box-shadow: 0 0 20px rgba(245, 184, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
    /* Glowing border effect */
    transition: all 0.3s ease;
    background: #ffffff;
}

.rating-badge-link:hover .rating-badge-box {
    box-shadow: 0 0 30px rgba(245, 184, 0, 0.8), 0 6px 20px rgba(0, 0, 0, 0.4);
    /* Enhanced glow on hover */
}

/* Left section - Gold background with rating number */
.rating-number-section {
    background: linear-gradient(135deg, #f5b800 0%, #f9d423 100%);
    /* Golden gradient */
    padding: 20px 22px 12px 22px;
    /* Extra top padding for trophy space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 90px;
    position: relative;
    border-radius: 8px 0 0 8px;
    /* Round left corners */
}

.rating-trophy {
    font-size: 28px;
    line-height: 1;
    position: absolute;
    top: -14px;
    /* Float above the box */
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    z-index: 10;
    animation: floatTrophy 2s ease-in-out infinite;
}

.rating-number {
    font-size: 42px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 3px;
}

.rating-label {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Right section - White/cream background with stars */
.rating-stars-section {
    background: #fffef7;
    /* Slight cream tint */
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    overflow: visible;
    min-height: fit-content;
}

/* Badge-specific star styles - no conflict with global .star class */
.store-rating-badge .rating-stars {
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.store-badge-star {
    display: inline-block;
    margin: 0 2px;
    font-size: 24px;
    line-height: 1;
}

.store-badge-star-filled {
    color: #f5b800;
    /* Gold to match border */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

.store-badge-star-empty {
    color: #e5e5e5;
}

/* Text below the badge */
.rating-verified-text {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 400;
    /* Normal weight */
    color: rgba(255, 255, 255, 0.9);
    /* White text for dark footer */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .store-rating-badge {
        float: none;
        margin: 0 auto 20px;
    }

    .rating-number-section {
        padding: 18px 26px 12px 26px;
        min-width: 100px;
    }

    .rating-trophy {
        font-size: 26px;
        top: -12px;
    }

    .rating-number {
        font-size: 50px;
    }

    .rating-label {
        font-size: 13px;
    }

    .rating-stars-section {
        padding: 10px 20px;
    }

    .store-rating-badge .rating-stars {
        font-size: 22px;
    }

    .store-badge-star {
        font-size: 22px;
    }

    .rating-verified-text {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .rating-badge-box {
        border-width: 3px;
    }

    .rating-number-section {
        padding: 16px 22px 12px 22px;
        min-width: 90px;
    }

    .rating-trophy {
        font-size: 22px;
        top: -11px;
    }

    .rating-number {
        font-size: 44px;
    }

    .rating-label {
        font-size: 12px;
    }

    .rating-stars-section {
        padding: 8px 15px;
    }

    .store-rating-badge .rating-stars {
        font-size: 20px;
    }

    .store-badge-star {
        margin: 0 2px;
        font-size: 20px;
    }

    .rating-verified-text {
        font-size: 11px;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .rating-badge-box {
        border-width: 3px;
    }

    .rating-number-section {
        padding: 14px 18px 10px 18px;
        min-width: 75px;
    }

    .rating-trophy {
        font-size: 18px;
        top: -9px;
    }

    .rating-number {
        font-size: 36px;
    }

    .rating-label {
        font-size: 10px;
    }

    .rating-stars-section {
        padding: 6px 12px;
    }

    .store-rating-badge .rating-stars {
        font-size: 18px;
    }

    .store-badge-star {
        margin: 0 1px;
        font-size: 18px;
    }

    .rating-verified-text {
        font-size: 10px;
        margin-top: 8px;
    }
}

/* Entrance animation */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.store-rating-badge {
    animation: slideInRight 0.6s ease-out;
}

/* Pulse glow animation for the border */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(245, 184, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(245, 184, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.3);
    }
}

.rating-badge-box {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* Floating trophy animation */
@keyframes floatTrophy {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-3px);
    }
}

/* ============================================
   CIRCULAR BADGE STYLES - Gold Glowing Circle Badge
   Can be used in header or footer
   ============================================ */

/* Wrapper for megamenu placement - floats to the right without expanding menu */
.megamenu-rating-badge-wrapper {
    float: right;
    margin: -25px 15px -65px 20px;
    padding: 0;
    position: relative;
    z-index: 100;
}

/* Legacy wrapper for other placements */
.header-rating-badge-wrapper {
    position: absolute;
    right: 20px;
    top: -45px;
    z-index: 1000;
}

/* Main compact badge wrapper - works in both header and footer */
.store-rating-compact-badge {
    display: inline-block;
    margin: 0;
    position: relative;
}

/* When compact badge is in footer, center it and add some spacing */
#footer .store-rating-compact-badge,
.footer-container .store-rating-compact-badge {
    float: right;
    margin: -35px 20px 10px 20px;
    clear: right;
    position: relative;
    top: 10px;
    text-align: center;
}

.compact-badge-link {
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.compact-badge-link:hover {
    text-decoration: none;
    transform: scale(1.08) translateY(-2px);
}

/* Circular badge container with 3D effect */
.compact-badge-circle {
    position: relative;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd700 0%, #f5b800 40%, #e6a800 100%);
    box-shadow: 0 8px 20px rgba(245, 184, 0, 0.5),
                0 4px 10px rgba(0, 0, 0, 0.3),
                inset 0 2px 5px rgba(255, 255, 255, 0.4),
                inset 0 -2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: all 0.3s ease;
    animation: compactGlow 3s ease-in-out infinite;
    border: 3px solid #fff;
}

/* Footer badge is 20% larger */
#footer .compact-badge-circle,
.footer-container .compact-badge-circle {
    width: 102px;
    height: 102px;
    margin: auto;
}

.compact-badge-link:hover .compact-badge-circle {
    box-shadow: 0 10px 30px rgba(245, 184, 0, 0.7),
                0 5px 15px rgba(0, 0, 0, 0.4),
                inset 0 2px 5px rgba(255, 255, 255, 0.5),
                inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

/* Outer glow layer for enhanced 3D depth */
.badge-glow-outer {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 184, 0, 0.3) 0%, transparent 70%);
    z-index: -1;
    animation: pulseGlowOuter 3s ease-in-out infinite;
}

/* Inner glow layer */
.badge-glow-inner {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
}

/* Main content container */
.badge-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 8px;
}

/* Base styles for all circular badges */
.compact-trophy {
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    animation: compactTrophyFloat 2.5s ease-in-out infinite;
    transform-origin: center;
    position: relative;
    z-index: 3;
}

.compact-rating-number {
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
                 0 1px 2px rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.compact-stars {
    display: flex;
    gap: 1px;
    position: relative;
    z-index: 4;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.compact-star {
    line-height: 1;
    display: inline-block;
}

.compact-star-filled {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.compact-star-empty {
    color: rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.compact-rating-label {
    font-weight: 700;
    color: #030000;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    line-height: 1;
    position: relative;
    z-index: 5;
}

/* ============================================
   FOOTER-SPECIFIC CIRCULAR BADGE STYLES
   ============================================ */

/* Footer trophy sizing - 20% larger */
#footer .compact-trophy,
.footer-container .compact-trophy {
    font-size: 34px;
    margin: -35px 0 4px 0;
}

/* Footer rating number sizing - 20% larger */
#footer .compact-rating-number,
.footer-container .compact-rating-number {
    font-size: 29px;
    margin: 2px 0;
}

/* Footer stars sizing - 20% larger */
#footer .compact-stars,
.footer-container .compact-stars {
    margin: 2px 0 2px 0;
}

#footer .compact-star,
.footer-container .compact-star {
    font-size: 13px;
}

/* Footer label sizing - 20% larger */
#footer .compact-rating-label,
.footer-container .compact-rating-label {
    font-size: 9px;
    margin-top: 1px;
    margin-bottom: -7px;
}

/* ============================================
   HEADER-SPECIFIC CIRCULAR BADGE STYLES
   ============================================ */

/* Header trophy sizing */
.header-rating-badge-wrapper .compact-trophy,
.megamenu-rating-badge-wrapper .compact-trophy {
    font-size: 32px;
    margin: -25px 0 4px 0;
}

/* Header rating number sizing */
.header-rating-badge-wrapper .compact-rating-number,
.megamenu-rating-badge-wrapper .compact-rating-number {
    font-size: 22px;
    /* margin-top: -20px; */
}

/* Header stars sizing */
.header-rating-badge-wrapper .compact-stars,
.megamenu-rating-badge-wrapper .compact-stars {
    margin-bottom: 2px;
}

.header-rating-badge-wrapper .compact-star,
.megamenu-rating-badge-wrapper .compact-star {
    font-size: 11px;
}

/* Header label sizing */
.header-rating-badge-wrapper .compact-rating-label,
.megamenu-rating-badge-wrapper .compact-rating-label {
    font-size: 7px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;    
}

/* Review count text below circular badge - footer only */
.compact-verified-text {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
    text-align: center;
    display: block;
    width: 100%;
}

/* Make the review count number bold */
.review-count-number {
    font-weight: 700;
}

/* Animations for compact badge */
@keyframes compactGlow {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(245, 184, 0, 0.5),
                    0 4px 10px rgba(0, 0, 0, 0.3),
                    inset 0 2px 5px rgba(255, 255, 255, 0.4),
                    inset 0 -2px 5px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 10px 25px rgba(245, 184, 0, 0.6),
                    0 5px 12px rgba(0, 0, 0, 0.35),
                    inset 0 2px 6px rgba(255, 255, 255, 0.5),
                    inset 0 -2px 6px rgba(0, 0, 0, 0.25);
    }
}

@keyframes pulseGlowOuter {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes compactTrophyFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-2px) scale(1.05);
    }
}

/* Responsive adjustments for circular badge */
@media (max-width: 991px) {
    /* Footer positioning */
    #footer .store-rating-compact-badge,
    .footer-container .store-rating-compact-badge {
        float: none;
        margin: -35px auto 20px;
    }

    /* Badge circle size - applies to both */
    .compact-badge-circle {
        width: 75px;
        height: 75px;
    }

    /* Footer badge circle - 20% larger */
    #footer .compact-badge-circle,
    .footer-container .compact-badge-circle {
        width: 90px;
        height: 90px;
    }

    /* Footer badge sizing - 20% larger */
    #footer .compact-trophy,
    .footer-container .compact-trophy {
        font-size: 33px;
        margin: -30px 0 2px 0;
    }

    #footer .compact-rating-number,
    .footer-container .compact-rating-number {
        font-size: 25px;
    }

    #footer .compact-star,
    .footer-container .compact-star {
        font-size: 12px;
    }

    #footer .compact-rating-label,
    .footer-container .compact-rating-label {
        font-size: 8px;
        margin-bottom: -6px;
    }

    #footer .compact-verified-text,
    .footer-container .compact-verified-text {
        font-size: 10px;
    }

    /* Header badge sizing */
    .header-rating-badge-wrapper .compact-trophy,
    .megamenu-rating-badge-wrapper .compact-trophy {
        font-size: 28px;
        top: -12px;
    }

    .header-rating-badge-wrapper .compact-rating-number,
    .megamenu-rating-badge-wrapper .compact-rating-number {
        font-size: 20px;
    }

    .header-rating-badge-wrapper .compact-star,
    .megamenu-rating-badge-wrapper .compact-star {
        font-size: 10px;
    }

    .header-rating-badge-wrapper .compact-rating-label,
    .megamenu-rating-badge-wrapper .compact-rating-label {
        font-size: 6px;
    }
}

@media (max-width: 767px) {
    /* Badge circle size - applies to both */
    .compact-badge-circle {
        width: 65px;
        height: 65px;
    }

    /* Footer badge circle - 20% larger */
    #footer .compact-badge-circle,
    .footer-container .compact-badge-circle {
        width: 78px;
        height: 78px;
    }

    /* Footer badge sizing - 20% larger */
    #footer .store-rating-compact-badge,
    .footer-container .store-rating-compact-badge {
        margin: 0 10px;
    }

    #footer .compact-trophy,
    .footer-container .compact-trophy {
        font-size: 24px;
        margin: -6px 0 2px 0;
    }

    #footer .compact-rating-number,
    .footer-container .compact-rating-number {
        font-size: 22px;
    }

    #footer .compact-stars,
    .footer-container .compact-stars {
        margin: 2px 0;
    }

    #footer .compact-star,
    .footer-container .compact-star {
        font-size: 11px;
    }

    #footer .compact-rating-label,
    .footer-container .compact-rating-label {
        font-size: 7px;
        margin-bottom: -7px;
    }

    #footer .compact-verified-text,
    .footer-container .compact-verified-text {
        font-size: 13px;
        margin-top: 10px;
    }

    /* Header badge sizing */
    .header-rating-badge-wrapper .compact-trophy,
    .megamenu-rating-badge-wrapper .compact-trophy {
        font-size: 24px;
        margin: -3px 0 -5px 0;
    }

    .header-rating-badge-wrapper .compact-rating-number,
    .megamenu-rating-badge-wrapper .compact-rating-number {
        font-size: 18px;
    }

    .header-rating-badge-wrapper .compact-stars,
    .megamenu-rating-badge-wrapper .compact-stars {
        margin-bottom: 2px;
    }

    .header-rating-badge-wrapper .compact-star,
    .megamenu-rating-badge-wrapper .compact-star {
        font-size: 9px;
    }

    .header-rating-badge-wrapper .compact-rating-label,
    .megamenu-rating-badge-wrapper .compact-rating-label {
        font-size: 6px;
        margin-bottom: -10px;
    }
}

@media (max-width: 480px) {
    /* Badge circle size - applies to both */
    .compact-badge-circle {
        width: 75px;
        height: 75px;
    }

    /* Footer badge circle - 20% larger */
    #footer .compact-badge-circle,
    .footer-container .compact-badge-circle {
        width: 66px;
        height: 66px;
    }

    .compact-stars {
        gap: 0px;
    }

    /* Footer badge sizing - 20% larger */
    #footer .store-rating-compact-badge,
    .footer-container .store-rating-compact-badge {
        margin: -35px 8px 50px 8px;
        left: 25%;
    }

    #footer .compact-trophy,
    .footer-container .compact-trophy {
        font-size: 26px;
        margin: -25px 0 1px 0;
    }

    #footer .compact-rating-number,
    .footer-container .compact-rating-number {
        font-size: 19px;
    }

    #footer .compact-stars,
    .footer-container .compact-stars {
        margin: 1px 0;
    }

    #footer .compact-star,
    .footer-container .compact-star {
        font-size: 10px;
    }

    #footer .compact-rating-label,
    .footer-container .compact-rating-label {
        font-size: 6px;
        margin-bottom: -6px;
        letter-spacing: 0.3px;
    }

    #footer .compact-verified-text,
    .footer-container .compact-verified-text {
        font-size: 12px;
        margin-top: 8px;
    }

    /* Header badge sizing */
    .header-rating-badge-wrapper .compact-trophy,
    .megamenu-rating-badge-wrapper .compact-trophy {
        font-size: 20px;
        margin: -2px 0 -4px 0;
    }

    .header-rating-badge-wrapper .compact-rating-number,
    .megamenu-rating-badge-wrapper .compact-rating-number {
        font-size: 16px;
    }

    .header-rating-badge-wrapper .compact-stars,
    .megamenu-rating-badge-wrapper .compact-stars {
        margin-bottom: 2px;
    }

    .header-rating-badge-wrapper .compact-star,
    .megamenu-rating-badge-wrapper .compact-star {
        font-size: 8px;
    }

    .header-rating-badge-wrapper .compact-rating-label,
    .megamenu-rating-badge-wrapper .compact-rating-label {
        font-size: 5px;
        margin-bottom: -8px;
        letter-spacing: 0.3px;
    }
}