/* Fringe Metals — Landing Page Custom Styles */

/* Hero background — copper ore image with dark gradient overlay */
.fm-hero {
    background: linear-gradient(135deg, rgba(26,26,46,0.92) 0%, rgba(22,33,62,0.88) 50%, rgba(15,52,96,0.85) 100%),
                url('../img/maky_orel-copper-ore.jpg') center center / cover no-repeat !important;
}

/* Brand color override — use a steel/industrial blue */
:root {
    --fm-primary: #0d6efd;
    --fm-primary-dark: #0a58ca;
}

/* Smooth scrolling for hash links */
html {
    scroll-behavior: smooth;
}

/* Make the header logo text not wrap */
.header-logo a {
    white-space: nowrap;
}

/* Card hover effect on feature cards */
.card.box-shadow-4 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card.box-shadow-4:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.25) !important;
}

/* Rounded circle icon containers — consistent sizing */
.icon-box .rounded-circle {
    box-shadow: 0 10px 30px -10px rgba(13, 110, 253, 0.4);
}

/* Stats numbers — tabular for alignment */
.text-14 {
    font-variant-numeric: tabular-nums;
}

/* Footer links hover */
footer a:hover {
    color: var(--fm-primary) !important;
}

/* Mobile: reduce hero heading size */
@media (max-width: 767px) {
    .fm-hero h1 {
        font-size: 2.2rem !important;
    }
    .fm-hero .card .bg-dark {
        padding: 2rem !important;
    }
}

/* Ensure appear animations don't hide content if JS fails */

/* ===== Section Background Images ===== */

/* Features section — subtle minerals background */
.fm-features-bg {
    background: linear-gradient(180deg, rgba(248,249,250,0.95) 0%, rgba(248,249,250,0.92) 100%),
                url('../img/minerals.png') center center / cover no-repeat !important;
}

/* How It Works section — mineral texture background */
.fm-howitworks-bg {
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,249,250,0.94) 100%),
                url('../img/1.jpg') center center / cover no-repeat fixed !important;
}

/* Marketplace section — subtle mineral background */
.fm-marketplace-bg {
    background: linear-gradient(180deg, rgba(248,249,250,0.94) 0%, rgba(248,249,250,0.97) 100%),
                url('../img/varga-opal.jpg') center center / cover no-repeat !important;
}

/* Payment Verification section — dark mineral with blue overlay */
.fm-payment-bg {
    background: linear-gradient(135deg, rgba(13,110,253,0.92) 0%, rgba(10,88,202,0.88) 100%),
                url('../img/zajcsik-mineral.jpg') center center / cover no-repeat !important;
}

/* Stats section — opal mineral background */
.fm-stats-bg {
    background: linear-gradient(180deg, rgba(248,249,250,0.9) 0%, rgba(255,255,255,0.85) 100%),
                url('../img/8.png') center center / cover no-repeat !important;
}

/* CTA section — dark fool's gold background */
.fm-cta-bg {
    background: linear-gradient(180deg, rgba(34,38,41,0.92) 0%, rgba(34,38,41,0.88) 100%),
                url('../img/pollydot-fools-gold.jpg') center center / cover no-repeat !important;
}

/* Roles section — subtle mineral background */
.fm-roles-bg {
    background: linear-gradient(180deg, rgba(233,236,239,0.95) 0%, rgba(233,236,239,0.92) 100%),
                url('../img/5.jpg') center center / cover no-repeat !important;
}

/* Make angled layers transparent so background images show through */
.fm-features-bg .section-angled-layer-bottom,
.fm-marketplace-bg .section-angled-layer-top,
.fm-roles-bg .section-angled-layer-top,
.fm-payment-bg .section-angled-layer-top,
.fm-stats-bg .section-funnel-layer {
    background: transparent !important;
}

/* Feature cards — same hover-reveal as marketplace cards */
.fm-feature-card {
    position: relative;
}
.fm-feature-card .fm-card-details {
    position: relative;
    z-index: 1;
    transition: opacity 0.35s ease;
}
.fm-feature-card:hover .fm-card-details {
    opacity: 0;
}

.appear-animation:not(.appear-animation-visible) {
    opacity: 1 !important;
}

/* Marketplace Tabs */
.fm-market-tabs {
    border-bottom: 2px solid #e0e0e0;
    gap: 0.5rem;
}
.fm-market-tabs .nav-link {
    border: none;
    border-radius: 0;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #6c757d;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.fm-market-tabs .nav-link:hover {
    color: var(--fm-primary);
}
.fm-market-tabs .nav-link.active {
    color: var(--fm-primary);
    border-bottom-color: var(--fm-primary);
    background: transparent;
}
.fm-market-tabs .nav-link .badge {
    font-size: 0.7rem;
    vertical-align: middle;
}

/* Marketplace Listing Cards */
.fm-listing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fm-listing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.2) !important;
}

/* Empty state icons in marketplace tabs */
.fm-listing-card .card-footer {
    transition: background-color 0.2s;
}
.fm-listing-card:hover .card-footer {
    background-color: #f0f4ff !important;
}

/* ===== Card Image Hover-Reveal Layer ===== */
.fm-listing-card {
    position: relative;
}

.fm-card-image-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 2;
    cursor: pointer;
    background: #1a1a2e;
}

.fm-listing-card:hover .fm-card-image-layer,
.fm-feature-card:hover .fm-card-image-layer {
    opacity: 1;
    visibility: visible;
}

.fm-card-image-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.fm-listing-card:hover .fm-card-image-layer img,
.fm-feature-card:hover .fm-card-image-layer img {
    transform: scale(1.05);
}

.fm-card-image-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.fm-card-image-badge i {
    vertical-align: middle;
    margin-right: 2px;
}

.fm-card-no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
}

.fm-card-no-image i {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
}

.fm-card-no-image span {
    font-size: 0.9rem;
}

/* Hide footer on hover so image is clean */
.fm-listing-card:hover .fm-card-footer {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ===== Full-Screen Image Viewer Modal ===== */
.fm-viewer-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.fm-viewer-modal.fm-viewer-open {
    display: flex;
}

.fm-viewer-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(6px);
}

.fm-viewer-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-viewer-stage {
    max-width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-viewer-stage img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    transition: transform 0.15s ease;
    user-select: none;
    pointer-events: auto;
}

.fm-viewer-stage img[src=""] {
    opacity: 0;
}

/* Navigation arrows */
.fm-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-viewer-nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.fm-viewer-prev { left: 24px; }
.fm-viewer-next { right: 24px; }

/* Close button */
.fm-viewer-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-viewer-close:hover {
    background: rgba(255, 80, 80, 0.5);
}

/* Controls bar */
.fm-viewer-controls {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 16px;
    border-radius: 40px;
    backdrop-filter: blur(8px);
    z-index: 3;
}

.fm-viewer-btn {
    background: none;
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-viewer-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.fm-viewer-counter {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
}

/* Title */
.fm-viewer-title {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 3;
    max-width: 70%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .fm-viewer-nav { width: 44px; height: 44px; font-size: 1.2rem; }
    .fm-viewer-prev { left: 8px; }
    .fm-viewer-next { right: 8px; }
    .fm-viewer-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 1.6rem; }
    .fm-viewer-controls { bottom: 12px; padding: 6px 12px; gap: 4px; }
    .fm-viewer-btn { width: 34px; height: 34px; font-size: 0.95rem; }
    .fm-viewer-title { font-size: 0.95rem; top: 12px; max-width: 60%; }
}

/* Touch devices: tap to toggle image layer */
@media (hover: none) {
    .fm-card-image-layer {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .fm-card-details {
        background: rgba(255, 255, 255, 0.95);
        position: relative;
        z-index: 3;
    }
    .fm-listing-card .fm-card-footer {
        position: relative;
        z-index: 3;
        opacity: 1;
    }
    .fm-feature-card .fm-card-details {
        background: rgba(255, 255, 255, 0.95);
        z-index: 3;
        opacity: 1;
    }
}