/* ==========================================================================
   ICON SYSTEM STYLES
   Orchestrated By Heaven Wedding Website
   ========================================================================== */

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

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Icon using external SVG sprite */
.icon use {
    fill: inherit;
    stroke: inherit;
}

/* ==========================================================================
   ICON SIZES
   ========================================================================== */

.icon-xs {
    width: 0.75rem;
    height: 0.75rem;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.icon-xl {
    width: 2.5rem;
    height: 2.5rem;
}

.icon-2xl {
    width: 3rem;
    height: 3rem;
}

.icon-3xl {
    width: 4rem;
    height: 4rem;
}

/* ==========================================================================
   ICON COLORS
   ========================================================================== */

.icon-gold {
    color: var(--color-gold);
}

.icon-gold-deep {
    color: var(--color-gold-deep);
}

.icon-navy {
    color: var(--color-navy);
}

.icon-white {
    color: var(--color-white);
}

.icon-charcoal {
    color: var(--color-charcoal);
}

.icon-muted {
    color: var(--color-gray);
    opacity: 0.7;
}

.icon-success {
    color: var(--color-success);
}

.icon-error {
    color: var(--color-error);
}

/* ==========================================================================
   ICON ANIMATIONS
   ========================================================================== */

/* Spin animation (for loading states) */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Pulse animation (for attention) */
.icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* Beat animation (heart icon) */
.icon-beat {
    animation: icon-beat 1s ease-in-out infinite;
}

@keyframes icon-beat {
    0%, 100% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

/* Bounce animation */
.icon-bounce {
    animation: icon-bounce 2s ease infinite;
}

@keyframes icon-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

/* Fade-in animation */
.icon-fade-in {
    animation: icon-fade-in 0.5s ease forwards;
}

@keyframes icon-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   ICON MODIFIERS
   ========================================================================== */

/* Stroke-only icons (outline style) */
.icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Filled icons */
.icon-filled {
    fill: currentColor;
    stroke: none;
}

/* Hover effects */
.icon-hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.icon-hover-rotate:hover {
    transform: rotate(15deg);
    transition: transform 0.2s ease;
}

.icon-hover-lift:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* ==========================================================================
   ICON BUTTON STYLES
   ========================================================================== */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-charcoal);
}

.icon-btn:hover {
    background-color: var(--color-beige-soft);
    color: var(--color-gold);
}

.icon-btn:focus {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.icon-btn .icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Icon button sizes */
.icon-btn-sm .icon {
    width: 1rem;
    height: 1rem;
}

.icon-btn-lg .icon {
    width: 2rem;
    height: 2rem;
}

/* ==========================================================================
   ICON WITH TEXT
   ========================================================================== */

.icon-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.icon-text .icon {
    flex-shrink: 0;
}

.icon-text-left .icon {
    order: -1;
}

.icon-text-right .icon {
    order: 1;
}

/* ==========================================================================
   DECORATIVE ICON ELEMENTS
   ========================================================================== */

/* Icon divider / separator */
.icon-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin: var(--space-xl) 0;
}

.icon-divider::before,
.icon-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.icon-divider .icon {
    color: var(--color-gold);
}

/* Icon badge / indicator */
.icon-badge {
    position: relative;
    display: inline-block;
}

.icon-badge::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background-color: var(--color-gold);
    border-radius: 50%;
    border: 2px solid var(--color-white);
}

/* Icon circle container */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-gold-lighter);
    color: var(--color-gold);
}

.icon-circle-gold {
    background-color: var(--color-gold);
    color: var(--color-white);
}

.icon-circle-navy {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.icon-circle-outline {
    background: transparent;
    border: 2px solid var(--color-gold);
}

/* Icon sizes in circles */
.icon-circle-sm {
    width: 2rem;
    height: 2rem;
}

.icon-circle-lg {
    width: 4rem;
    height: 4rem;
}

.icon-circle-xl {
    width: 5rem;
    height: 5rem;
}

/* ==========================================================================
   FEATURE ICONS (for feature cards)
   ========================================================================== */

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-gold-lighter) 0%, var(--color-cream-light) 100%);
    color: var(--color-gold);
    transition: all 0.3s ease;
}

.feature-icon .icon {
    width: 2rem;
    height: 2rem;
}

.feature-icon:hover,
.card:hover .feature-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-deep) 100%);
    color: var(--color-white);
}

/* ==========================================================================
   INLINE SVG HELPER CLASSES
   ========================================================================== */

/* For inline SVGs that need styling */
svg.icon-inline {
    display: inline-block;
    vertical-align: middle;
    width: 1.25em;
    height: 1.25em;
}

/* Loading animation for loader */
.logo-animation {
    animation: logo-pulse 2s ease-in-out infinite;
}

@keyframes logo-pulse {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

.logo-animation text {
    font-family: var(--font-heading);
    font-size: 48px;
    fill: var(--color-gold);
}

/* Couple initials text styling */
.couple-initials {
    font-family: var(--font-heading);
    font-size: 36px;
    fill: var(--color-gold);
    font-weight: 600;
}