/**
 * SVG Icon System
 *
 * Base styles for SVG sprite icons
 * Replaces Font Awesome icons with custom SVG sprites
 *
 * Usage: <svg class="icon icon-sm"><use href="...#icon-name"/></svg>
 */

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

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* Align with text baseline */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* ==========================================================================
   Icon Sizes
   ========================================================================== */

/* Extra Small - 12px */
.icon-xs {
    width: 0.75rem;
    height: 0.75rem;
}

/* Small - 22px (default for nav) */
.icon-sm {
    width: 1.4rem;
    height: 1.4rem;
}

/* Medium - 24px (default) */
.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

/* Large - 24px */
.icon-lg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Extra Large - 24px */
.icon-xl {
    width: 1.5rem;
    height: 1.5rem;
}

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

/* Icon spacing in buttons with text */
.btn .icon,
button .icon,
a .icon {
    margin-right: 0;
}

/* Icon-only buttons */
.btn-icon .icon,
.action-icon-btn .icon {
    margin-right: 0;
}

/* Action icon button - icon sizing */
.action-icon-btn .icon-sm {
    width: 1.2rem;
    height: 1.2rem;
}

/* Text spacing in action icon buttons (exclude like count) */
.action-icon-btn span:not(.like-count):not(.action-count) {
    margin-left: 5px;
}

/* ==========================================================================
   Icon Colors (inherits from parent by default via currentColor)
   ========================================================================== */

.icon-muted {
    stroke: var(--text-muted, #6b7280);
}

.icon-primary {
    stroke: var(--primary, #0066cc);
}

.icon-danger {
    stroke: var(--danger, #dc3545);
}

.icon-success {
    stroke: var(--success, #28a745);
}

/* ==========================================================================
   Like Button - Background Toggle Approach (Pexels Style)
   ========================================================================== */

/*
 * Like button uses background color toggle instead of heart fill.
 * Heart stays white always, button background toggles pink when liked.
 * This approach works reliably with SVG sprites.
 *
 * Supported elements:
 * - .like-section (homepage cards in card-overlay)
 * - .action-icon-btn (prompt detail page)
 */

/* ==========================================================================
   Homepage Cards - Like Section in Card Overlay
   ========================================================================== */

/* Like section - default (heart outline, no background) */
.card-overlay .like-section {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

/* Like section - hover state */
.card-overlay .like-section:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Like section - liked state (pink background) */
.card-overlay .like-section.liked {
    background-color: #ff3a78;
}

/* Like section - liked hover (darker pink) */
.card-overlay .like-section.liked:hover {
    background-color: #e0245e;
}

/* Heart icon in card overlay - always white */
.card-overlay .heart-icon {
    stroke: white;
    fill: none;
    transition: none;
}

/* ==========================================================================
   Generic Like Button (Future Use)
   ========================================================================== */

/* Like button container - base styles */
.like-btn {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 8px;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Like button - hover state */
.like-btn:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Like button - liked state (pink background) */
.like-btn.liked {
    background-color: #ff3a78;
}

/* Like button - liked hover (slightly darker pink) */
.like-btn.liked:hover {
    background-color: #e0245e;
}

/* Heart icon inside like button - always white outline */
.like-btn .heart-icon,
.like-btn .icon {
    stroke: white;
    fill: none;
}

/* Like count text - always white */
.like-btn .like-count,
.like-section .like-count {
    color: white;
    margin-right: 5px;
}

/* ==========================================================================
   Like Button - Processing/Disabled State
   ========================================================================== */

/*
 * Like button processing state - prevents double-clicks during AJAX request.
 * No visual change (no opacity/cursor) for instant-feeling UI.
 * The optimistic UI update already shows the change immediately.
 */

/* Disabled state for button elements - just prevent clicks */
.like-btn:disabled,
.action-icon-btn:disabled {
    pointer-events: none;
}

/* Processing state for non-button elements (like-section uses data attribute) */
.like-section[data-processing="true"] {
    pointer-events: none;
}

/* ==========================================================================
   Detail Page Like Button - Clean Implementation
   ========================================================================== */

/* Heart icon toggle - outline vs filled */
.like-btn-detail .heart-outline {
    display: inline-block;
}
.like-btn-detail .heart-filled {
    display: none;
}
.like-btn-detail.liked .heart-outline {
    display: none;
}
.like-btn-detail.liked .heart-filled {
    display: inline-block;
}

/* Solid heart must have fill (override base .icon fill:none) */
.heart-filled {
    fill: #ff3a78 !important;
    stroke: none !important;
}

/* Hover hint on unliked - outline turns pink */
.like-btn-detail:not(.liked):hover .heart-outline {
    color: #ff3a78;
}

/* Liked state - match hover styling (gray, not pink) */
.like-btn-detail.liked {
    background-color: var(--gray-50, #fafafa) !important;
    border-color: var(--gray-400, #a3a3a3) !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
}

/* Hover on liked - slightly darker */
.like-btn-detail.liked:hover {
    background-color: var(--gray-100, #f0f0f0) !important;
}