/**
 * Interaction Button Container Styles for Hunter Fashion Commission
 * Interaction button containers and layout (button styles are in buttons.css)
 */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
    /* Interaction spacing */
    --interaction-gap: 0.5rem;
    --interaction-gap-small: 0.25rem;
    
    /* Z-index management */
    --interaction-z-index-base: 2;
    --interaction-z-index-button: 10;
    
    /* Transition timing */
    --interaction-transition-duration: 0.2s;
    --interaction-transition-timing: ease;
    
    /* Detail view opacity (intentional UX for liked/bookmarked state) */
    --interaction-detail-opacity: 0.6;
    --interaction-detail-opacity-hover: 1;
}

/* ============================================
   INTERACTION BAR (Detail Pages)
   ============================================ */

.interaction-bar {
    display: flex;
    align-items: center;
    gap: var(--interaction-gap);
}

.interaction-bar .btn-like,
.interaction-bar .btn-bookmark {
    font-size: 1.2rem;
    padding: 0.5rem 0.75rem;
}

.interaction-bar .btn-like .like-count {
    font-size: 1rem;
    font-weight: 500;
    margin-left: var(--interaction-gap);
}

/* ============================================
   INTERACTION BUTTONS CONTAINER
   ============================================ */

/* Base interaction buttons container */
.interaction-buttons {
    display: flex;
    gap: var(--interaction-gap);
    z-index: var(--interaction-z-index-base);
    position: relative;
}

.interaction-buttons button {
    position: relative;
    z-index: var(--interaction-z-index-button);
    pointer-events: auto;
}

.interaction-button-wrapper {
    position: relative;
    z-index: var(--interaction-z-index-button);
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */

/* Card hover effect for interaction buttons */
.card:hover .interaction-buttons {
    opacity: 1;
}

/* ============================================
   CARD FOOTER/BODY PLACEMENT
   ============================================ */

/* Remove top margin from interaction buttons in card footers/body */
/* Using more specific selector to avoid !important */
.card-footer .interaction-buttons,
.card-body .interaction-buttons,
.d-flex.justify-content-between .interaction-buttons {
    margin-top: 0;
    margin-bottom: 0;
}

/* Ensure interaction buttons container doesn't cause wrapping and aligns to the right */
.card-footer .interaction-buttons,
.card-body .interaction-buttons {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    margin-left: auto;
    margin-right: 0;
}

/* Note: Last button margin removal is handled generically in responsive.css lines 300-303 */

/* ============================================
   CARD HEADER PLACEMENT
   ============================================ */

.card-header .interaction-buttons {
    display: flex;
    gap: var(--interaction-gap);
    margin-top: 0;
    opacity: 1;
}

.card-header .interaction-buttons .btn {
    background-color: transparent;
}

.card-header .btn-like, 
.card-header .btn-outline-like, 
.card-header .btn-bookmark, 
.card-header .btn-outline-bookmark {
    margin-left: var(--interaction-gap-small);
}

/* ============================================
   DETAIL VIEW POSITIONING
   ============================================ */

/* For detail views, maintain absolute positioning */
/* Opacity behavior is intentional - shows liked/bookmarked state */
.photo-container .interaction-buttons,
.fashion-detail-container .interaction-buttons {
    position: absolute;
    top: var(--interaction-gap);
    right: var(--interaction-gap);
    opacity: var(--interaction-detail-opacity);
    transition: opacity var(--interaction-transition-duration) var(--interaction-transition-timing);
}

.photo-container .interaction-buttons:hover,
.fashion-detail-container .interaction-buttons:hover,
.photo-container .interaction-buttons:focus-within,
.fashion-detail-container .interaction-buttons:focus-within {
    opacity: var(--interaction-detail-opacity-hover);
}

/* ============================================
   ACCESSIBILITY: FOCUS STATES
   ============================================ */

/* Enhanced focus-visible states for keyboard navigation */
.interaction-buttons button:focus-visible,
.interaction-bar button:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--metallic-gold-rgb), 0.25);
}

/* Ensure focus indicators meet WCAG contrast requirements (3:1 minimum) */
.interaction-buttons .btn-like:focus-visible,
.interaction-buttons .btn-outline-like:focus-visible {
    outline-color: var(--wyvern-crimson);
    box-shadow: 0 0 0 4px rgba(var(--wyvern-crimson-rgb), 0.25);
}

.interaction-buttons .btn-bookmark:focus-visible,
.interaction-buttons .btn-outline-bookmark:focus-visible {
    outline-color: var(--metallic-gold);
    box-shadow: 0 0 0 4px rgba(var(--metallic-gold-rgb), 0.25);
}

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .interaction-buttons,
    .interaction-bar,
    .photo-container .interaction-buttons,
    .fashion-detail-container .interaction-buttons {
        transition: none;
    }
    
    .card:hover .interaction-buttons {
        transition: none;
    }
}

/* ============================================
   ACTIVE STATES
   ============================================ */

/* Active state feedback for button press */
.interaction-buttons button:active,
.interaction-bar button:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

@media (prefers-reduced-motion: reduce) {
    .interaction-buttons button:active,
    .interaction-bar button:active {
        transform: none;
        transition: none;
    }
}

/* ============================================
   ARIA PRESSED STATE SUPPORT
   ============================================ */

/* Support for aria-pressed attribute */
.interaction-buttons button[aria-pressed="true"],
.interaction-bar button[aria-pressed="true"] {
    /* Active state styling is handled by button classes in buttons.css */
    /* This ensures proper semantic state indication */
}