/**
 * Rozhika SVG Icons Styles
 * Custom SVG icon styles for WC User Account Custom plugin
 * 
 * @package WC_User_Account_Custom
 * @version 1.0.0
 */

/* ========================================
   BASE SVG ICON STYLES
   ======================================== */

.rozhika-icon-svg {
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.rozhika-icon-svg:hover {
    transform: scale(1.05);
}

/* ========================================
   STATUS ICONS (Orders & Reviews)
   ======================================== */

/* Completed/Approved Status Icon */
.rozhika-approved-svg,
.rozhika-status-svg {
    width: 1.5em;
    height: 1.5em;
}

.order-status .rozhika-status-svg,
.review-status-icon .rozhika-approved-svg {
    width: 1.3em;
    height: 1.3em;
    margin-left: 0.4em;
}

/* Timeline/Checkmark Icon (Smaller for Reviews) */
.review-status-icon .rozhika-timeline-svg {
    width: 1.15em;
    height: 1.15em;
    margin-left: 0.4em;
}

/* Recent Activity Icon Sizing */
.wc-uac-activity-icon .rozhika-icon-svg {
    width: 26px !important;
    height: 26px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.wc-uac-activity-status .rozhika-icon-svg {
    width: 16px !important;
    height: 16px !important;
    margin-left: 4px;
}

/* Awaiting/Pending Payment Icon */
.rozhika-awaiting-svg {
    width: 1.4em;
    height: 1.4em;
}

.order-status .rozhika-awaiting-svg,
.review-status-icon .rozhika-awaiting-svg {
    width: 1.3em;
    height: 1.3em;
    margin-left: 0.4em;
}

/* Cancelled/Rejected Icon */
.rozhika-cancelled-svg {
    width: 1.3em;
    height: 1.3em;
}

.order-status .rozhika-cancelled-svg {
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.4em;
}

/* Refunded Icon */
.rozhika-refunded-svg {
    width: 1.3em;
    height: 1.3em;
}

.order-status .rozhika-refunded-svg {
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.4em;
}

/* Failed/Warning Icon */
.rozhika-failed-svg,
.rozhika-warning-svg {
    width: 1.3em;
    height: 1.3em;
}

.order-status .rozhika-failed-svg,
.order-status .rozhika-warning-svg {
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.4em;
}

/* ========================================
   Q&A AND STATS ICONS
   ======================================== */

/* Question Icon */
.rozhika-question-svg {
    width: 1.4em;
    height: 1.4em;
}

/* Answer Icon */
.rozhika-answer-svg {
    width: 1.4em;
    height: 1.4em;
}

/* Helpful/Thumbs Up Icon */
.rozhika-helpful-svg {
    width: 1.4em;
    height: 1.4em;
}

/* Star Rating Icon */
.rozhika-star-svg {
    width: 1.4em;
    height: 1.4em;
}

.points-icon .rozhika-star-svg {
    width: 1.6em;
    height: 1.6em;
}

/* Chart/Statistics Icon */
.rozhika-chart-svg {
    width: 1.4em;
    height: 1.4em;
}

/* Badge Icon */
.rozhika-badge-svg {
    width: 2em;
    height: 2em;
}

/* ========================================
   WALLET & POINTS ICONS
   ======================================== */

/* Wallet Icon */
.rozhika-wallet-svg {
    width: 2.5em;
    height: 2.5em;
}

.wallet-icon .rozhika-wallet-svg {
    width: 100%;
    height: 100%;
}

/* ========================================
   RESPONSIVE SIZING
   ======================================== */

/* Mobile Adjustments */
@media (max-width: 768px) {
    .rozhika-icon-svg {
        width: 1.1em;
        height: 1.1em;
    }
    
    .rozhika-status-svg,
    .rozhika-approved-svg {
        width: 1.4em;
        height: 1.4em;
    }
    
    .rozhika-awaiting-svg {
        width: 1.3em;
        height: 1.3em;
    }
    
    .rozhika-wallet-svg {
        width: 2.2em;
        height: 2.2em;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .rozhika-icon-svg {
        width: 1em;
        height: 1em;
    }
    
    .rozhika-status-svg,
    .rozhika-approved-svg {
        width: 1.3em;
        height: 1.3em;
    }
    
    .rozhika-awaiting-svg {
        width: 1.2em;
        height: 1.2em;
    }
}

/* ========================================
   ANIMATION EFFECTS
   ======================================== */

/* Pulse animation for awaiting/pending statuses */
@keyframes pulse-awaiting {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* .order-status.status-pending .rozhika-awaiting-svg,
.order-status.status-on-hold .rozhika-awaiting-svg,
.review-status-icon .rozhika-awaiting-svg {
    animation: pulse-awaiting 2s ease-in-out infinite;
} */

/* Rotate animation for processing status */
@keyframes rotate-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* .order-status.status-processing .rozhika-status-svg {
    animation: rotate-slow 3s linear infinite;
} */

/* Success checkmark animation */
@keyframes checkmark-success {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* .order-status.status-completed .rozhika-status-svg,
.review-status-icon .rozhika-approved-svg {
    animation: checkmark-success 0.5s ease-out;
} */

/* Star sparkle effect */
@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
        filter: brightness(1.2);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
        filter: brightness(1.2);
    }
}

.rozhika-star-svg:hover {
    animation: sparkle 0.6s ease-in-out;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .rozhika-icon-svg {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Ensure icons are accessible */
.rozhika-icon-svg {
    role: img;
    aria-hidden: false;
}

/* Focus states for interactive icons */
button .rozhika-icon-svg:focus-visible,
a .rozhika-icon-svg:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .rozhika-icon-svg,
    .rozhika-icon-svg:hover,
    .order-status .rozhika-awaiting-svg,
    .order-status .rozhika-status-svg,
    .rozhika-star-svg:hover {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================
   LEGACY COMPATIBILITY
   ======================================== */

/* Support for old .rozhika-emoji class */
span.rozhika-emoji {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.2em;
}

/* Ensure proper spacing in status badges */
.order-status .rozhika-icon-svg + .status-text,
.review-status-icon .rozhika-icon-svg + span {
    margin-right: 0.4em;
}

/* ========================================
   END OF STYLES
   ======================================== */