/**
 * Haven Icons CSS
 *
 * Styles for SVG icons throughout the theme.
 *
 * @package Haven_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Icon Base Styles
   ========================================================================== */

.haven-icon {
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Icon Sizes */
.haven-icon--xs {
    width: 12px;
    height: 12px;
}

.haven-icon--sm {
    width: 16px;
    height: 16px;
}

.haven-icon--md {
    width: 24px;
    height: 24px;
}

.haven-icon--lg {
    width: 32px;
    height: 32px;
}

.haven-icon--xl {
    width: 48px;
    height: 48px;
}

/* ==========================================================================
   Property Meta Icons
   ========================================================================== */

.haven-property-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--haven-spacing-md, 16px);
    font-size: var(--haven-font-size-sm, 14px);
    color: var(--haven-color-text-muted, #6b7280);
}

.haven-property-meta__item {
    display: inline-flex;
    align-items: center;
    gap: var(--haven-spacing-xs, 4px);
}

.haven-property-meta__item .haven-icon {
    color: var(--haven-color-primary, #0d9488);
}

/* ==========================================================================
   Social Share Icons
   ========================================================================== */

.haven-social-share {
    display: flex;
    align-items: center;
    gap: var(--haven-spacing-sm, 8px);
}

.haven-social-share__label {
    font-size: var(--haven-font-size-sm, 14px);
    color: var(--haven-color-text-muted, #6b7280);
    margin-right: var(--haven-spacing-xs, 4px);
}

.haven-social-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--haven-color-gray-100, #f3f4f6);
    color: var(--haven-color-text, #1f2937);
    transition: var(--haven-transition-all, all 0.3s ease);
}

.haven-social-share__link:hover {
    transform: translateY(-2px);
}

.haven-social-share__link--facebook:hover {
    background-color: #1877f2;
    color: white;
}

.haven-social-share__link--twitter:hover {
    background-color: #1da1f2;
    color: white;
}

.haven-social-share__link--linkedin:hover {
    background-color: #0a66c2;
    color: white;
}

.haven-social-share__link--pinterest:hover {
    background-color: #e60023;
    color: white;
}

.haven-social-share__link--instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: white;
}

.haven-social-share__link--youtube:hover {
    background-color: #ff0000;
    color: white;
}

/* ==========================================================================
   Amenity Icons List
   ========================================================================== */

.haven-amenities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--haven-spacing-sm, 12px);
}

.haven-amenity {
    display: flex;
    align-items: center;
    gap: var(--haven-spacing-sm, 8px);
    padding: var(--haven-spacing-sm, 8px);
    font-size: var(--haven-font-size-sm, 14px);
    color: var(--haven-color-text, #1f2937);
}

.haven-amenity .haven-icon {
    color: var(--haven-color-primary, #0d9488);
    flex-shrink: 0;
}

.haven-amenity--unavailable {
    color: var(--haven-color-text-muted, #9ca3af);
    text-decoration: line-through;
}

.haven-amenity--unavailable .haven-icon {
    color: var(--haven-color-text-muted, #9ca3af);
}

/* ==========================================================================
   Icon Buttons
   ========================================================================== */

.haven-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--haven-radius-full, 9999px);
    background-color: transparent;
    color: var(--haven-color-text, #1f2937);
    cursor: pointer;
    transition: var(--haven-transition-all, all 0.3s ease);
}

.haven-icon-btn:hover {
    background-color: var(--haven-color-gray-100, #f3f4f6);
}

.haven-icon-btn:focus-visible {
    outline: 2px solid var(--haven-color-primary, #0d9488);
    outline-offset: 2px;
}

.haven-icon-btn--primary {
    background-color: var(--haven-color-primary, #0d9488);
    color: white;
}

.haven-icon-btn--primary:hover {
    background-color: var(--haven-color-primary-dark, #0f766e);
}

/* Favorite Button */
.haven-icon-btn--favorite .haven-icon {
    transition: transform 0.2s ease;
}

.haven-icon-btn--favorite:hover .haven-icon {
    transform: scale(1.1);
}

.haven-icon-btn--favorite.is-active {
    color: var(--haven-color-danger, #ef4444);
}

.haven-icon-btn--favorite.is-active .haven-icon {
    fill: currentColor;
}

/* ==========================================================================
   Rating Stars
   ========================================================================== */

.haven-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.haven-rating__star {
    color: var(--haven-color-gray-300, #d1d5db);
}

.haven-rating__star--filled {
    color: var(--haven-color-warning, #f59e0b);
    fill: currentColor;
}

.haven-rating__star--half {
    color: var(--haven-color-warning, #f59e0b);
}

.haven-rating__value {
    margin-left: var(--haven-spacing-xs, 4px);
    font-size: var(--haven-font-size-sm, 14px);
    font-weight: var(--haven-font-weight-semibold, 600);
    color: var(--haven-color-text, #1f2937);
}

.haven-rating__count {
    color: var(--haven-color-text-muted, #6b7280);
    font-size: var(--haven-font-size-sm, 14px);
}

/* ==========================================================================
   Navigation Icons
   ========================================================================== */

.haven-nav-icon {
    display: flex;
    align-items: center;
    gap: var(--haven-spacing-xs, 4px);
}

/* Mobile Menu Toggle */
.haven-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--haven-color-text, #1f2937);
    cursor: pointer;
}

@media (max-width: 768px) {
    .haven-menu-toggle {
        display: flex;
    }
}

/* View Toggle */
.haven-view-toggle {
    display: inline-flex;
    border: 1px solid var(--haven-color-gray-200, #e5e7eb);
    border-radius: var(--haven-radius-md, 8px);
    overflow: hidden;
}

.haven-view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background-color: white;
    color: var(--haven-color-text-muted, #6b7280);
    cursor: pointer;
    transition: var(--haven-transition-colors, background-color 0.2s ease, color 0.2s ease);
}

.haven-view-toggle__btn:hover {
    background-color: var(--haven-color-gray-50, #f9fafb);
}

.haven-view-toggle__btn.is-active {
    background-color: var(--haven-color-primary, #0d9488);
    color: white;
}

.haven-view-toggle__btn + .haven-view-toggle__btn {
    border-left: 1px solid var(--haven-color-gray-200, #e5e7eb);
}

/* ==========================================================================
   Icon Loading States
   ========================================================================== */

.haven-icon--loading {
    animation: haven-icon-spin 1s linear infinite;
}

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

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .haven-icon {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .haven-social-share,
    .haven-icon-btn {
        display: none !important;
    }
}