/**
 * Ham Project Planner - Frontend Styles
 */

/* ============================================================
   Archive product-card heart button
   The button is injected before the <a> link (priority 9 hook)
   and positioned absolute over the thumbnail's top-right corner.
   The parent <li.product> needs position:relative — added here.
   ============================================================ */

/* Project Cards */
.project-card {
    transition: transform 0.3s ease;
}

.project-card .delete-project-btn {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card:hover .delete-project-btn,
.project-card .delete-project-btn:focus {
    opacity: 1;
}

@media (max-width: 768px) {
    .project-card .delete-project-btn {
        opacity: 1;
    }
}

.project-card .card-image {
    overflow: hidden;
    background: #f8f8f8;
}

.project-card .card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* Project Items */
/* Move/Duplicate + Remove controls: reveal on hover (desktop), always shown on touch.
   The drag handle is intentionally excluded so it stays visible at all times. */
.project-item .ham-item-actions {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-item:hover .ham-item-actions,
.project-item .ham-item-actions:focus-within {
    opacity: 1;
}

@media (max-width: 768px) {
    .project-item .ham-item-actions {
        opacity: 1;
    }
}

.project-item .card-image {
    text-align: center;
    overflow: hidden;
    background: #f8f8f8;
}

.project-item .card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* Delete button opacity on project items */
.project-item .item-action-btn {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-item:hover .item-action-btn,
.project-item .item-action-btn:focus {
    opacity: 1;
}

@media (max-width: 768px) {
    .project-item .item-action-btn {
        opacity: 1;
    }
}

/* Fixture Items */
.fixture-item .card-image {
    overflow: hidden;
    background: #f8f8f8;
}

.fixture-item .card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .fixture-item .card-image img,
    .project-card .card-image img,
    .project-item .card-image img {
        height: 200px;
    }
}

/* Loading spinner */
.ham-pp-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #A35D00;
    border-radius: 50%;
    animation: ham-pp-spin 0.7s linear infinite;
}

@keyframes ham-pp-spin {
    to { transform: rotate(360deg); }
}

/* Toast notifications */
.ham-pp-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    padding: 0.75rem 1.25rem;
    background: #333;
    color: #fff;
    font-size: 0.9rem;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    max-width: 320px;
    animation: ham-pp-toast-in 0.2s ease;
}

@keyframes ham-pp-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ham-pp-toast-success { background: #2d6a4f; }
.ham-pp-toast-danger  { background: #c0392b; }
.ham-pp-toast-warning { background: #7d5a00; }
.ham-pp-toast-primary { background: #A35D00; }

/* Sorting dropdown */
#project-sort {
    max-width: 200px;
}

/* Login form */
#hpp-login-submit .login-spinner {
    display: inline-block;
    margin-left: 5px;
}

#hpp-login-error {
    margin-top: 10px;
}