/* guides.css - small overrides and helpers for Guides pages */

/* Keep cards consistent with home styles but allow slightly wider images */
.guides-grid .class-icon-img {
    max-width: 220px;
    height: 140px;
}

.guide-card {
    cursor: default;
}

/* Search bar spacing and gold styling */
#guidesSearch, .guides-search-input {
    background: rgba(255,215,0,0.04); /* faint gold tint */
    color: #fff;
    border: 1px solid rgba(255,215,0,0.45); /* gold border */
    box-shadow: 0 0 0 0 rgba(255,215,0,0.04);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    max-width: 680px;
    width: 100%;
    font-weight: 600;
}

/* Center text and make placeholder slightly warm */
#guidesSearch::placeholder, .guides-search-input::placeholder {
    color: rgba(255,255,255,0.75);
}

/* On focus add subtle glow */
#guidesSearch:focus, .guides-search-input:focus {
    outline: none;
    box-shadow: 0 0 12px rgba(255,193,7,0.12);
    border-color: #ffd700;
    background: rgba(255,215,0,0.05);
    color: #fff;
}

/* Ensure guide cards preserve the same hover effect as class cards */
.guide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    border-color: #ffd700;
}

/* Guide step styling for FirstGameLogin */
.guide-step {
    position: relative;
    padding: 1rem;
    border-radius: 10px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.6rem;
}

.guide-card img {
    width: 100%;
    max-height: 250px; /* allow larger preview height */
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.04);
}

/* Make images look clickable inside guide-step: pointer cursor and subtle hover */
.guide-step img {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.guide-step img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}

.guide-step .feature-description a,
.guide-step ul li a {
    color: #ffffff;
}

.guide-step .feature-description a:visited,
.guide-step ul li a:visited {
    color: #ffffff;
}

.guide-step .feature-description a:hover,
.guide-step ul li a:hover {
    color: #ffd700;
}

.step-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    background: #ffd700;
    color: #1a1a1a;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

/* Ensure badge sits correctly when inside .class-card */
.class-card .step-badge {
    left: -8px;
    top: -8px;
}

/* Image popup overlay for viewing full-size screenshots */
.img-popup-overlay {
    position: fixed;
    inset: 0;
    display: none; /* toggled by JS */
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.85);
    z-index: 1050;
    cursor: zoom-out;
}
.img-popup-overlay.show {
    display: flex;
}
.img-popup-overlay img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* On small screens reduce the step badge size and avoid using too much space */
@media (max-width: 576px) {
    .class-card .step-badge {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        left: 10px;
        top: 10px;
    }
    .guide-step img {
        max-height: 220px;
    }
}

.feature-title { /* ensure step titles remain readable */
    color: #fff;
    margin-top: 0; /* prevent overlap with absolute-positioned badge */
}

.feature-description { /* slightly brighter description for readability */
    color: #dcdcdc;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .guides-grid {
        grid-template-columns: 1fr;
    }
}