/* ===================================================================
   Goud Verkopen Afbeeldingen - Desktop & Mobiel met tekst
   =================================================================== */

/* Desktop versie - op witte sticky nav balk */
.gold-sell-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.gold-sell-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.gold-sell-img-desktop {
    height: auto;
    max-height: 50px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.4));
}

.gold-sell-text {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Hover effect voor desktop */
.gold-sell-link:hover .gold-sell-img-desktop {
    transform: scale(1.05) translateY(-2px);
    filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.6))
            drop-shadow(0 0 20px rgba(255, 165, 0, 0.4));
}

.gold-sell-link:hover .gold-sell-text {
    color: #FFA500;
    text-shadow: 0 2px 5px rgba(255, 215, 0, 0.6);
    transform: translateY(-1px);
}

/* Active/Click effect */
.gold-sell-link:active .gold-sell-img-desktop {
    transform: scale(0.98);
    filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.3));
}

.gold-sell-link:active .gold-sell-text {
    transform: translateY(0);
}

/* Mobiel versie - in oranje header rechtsboven
   De theme positioneert het handjes-icoon via:
   header .main_header a.phone_top { position:absolute; right:15px; top:-10px; }
   We matchen dit patroon zodat goud + handjes exact op 1 lijn staan. */
@media (max-width: 991px) {
    /* Mobiele goud-link - absoluut gepositioneerd in main_header 
       Staat nu BUITEN de Bootstrap row, dus geen hoogte impact */
    .main_header > a.gold-sell-link-mobile {
        position: absolute !important;
        right: 55px !important;   /* links van de handjes (phone_top op right:15px) */
        top: 12px !important;     /* paar pixels hoger */
        z-index: 10;
        display: flex !important; /* override Bootstrap d-lg-none */
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-decoration: none;
    }

    .main_header > a.gold-sell-link-mobile .gold-sell-img-mobile {
        width: auto;
        height: auto;
        max-height: 45px;  /* groter */
        max-width: 60px;
        object-fit: contain;
        filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.4));
    }

    .main_header > a.gold-sell-link-mobile .gold-sell-text-mobile {
        font-family: 'Poppins', sans-serif;
        font-size: 8px;
        font-weight: 700;
        color: #FFFFFF;  /* wit */
        text-transform: uppercase;
        letter-spacing: 0.2px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        white-space: nowrap;
        line-height: 1;
    }
}

@media (min-width: 992px) {
    .gold-sell-link-mobile,
    .main_header > a.gold-sell-link-mobile {
        display: none !important;
    }
}

/* Hover effect voor mobiel (touch devices) */
.gold-sell-link-mobile:active .gold-sell-img-mobile {
    transform: scale(0.95);
    filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.5));
}

.gold-sell-link-mobile:active .gold-sell-text-mobile {
    color: #FFA500;
}

/* Focus state voor accessibility */
.gold-sell-link:focus,
.gold-sell-link-mobile:focus {
    outline: 3px solid rgba(255, 215, 0, 0.6);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Positionering op witte nav balk */
.main_nav .gold-sell-link {
    margin: 0 15px;
}

/* Voorkom dat header uitrekt - alleen desktop */
@media (min-width: 992px) {
    .main_header .row {
        align-items: center;
        min-height: 75px;
    }
}

/* Responsive aanpassingen */
@media (max-width: 1199px) {
    .gold-sell-img-desktop {
        max-height: 45px;
        max-width: 180px;
    }
    
    .gold-sell-text {
        font-size: 12px;
    }
}

@media (max-width: 991px) {
    /* Desktop versie verbergen op tablet/mobiel */
    .main_nav .gold-sell-link {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .header-right-icons {
        gap: 10px;
    }
    .gold-sell-img-mobile {
        max-height: 38px;
    }
}

@media (max-width: 480px) {
    .header-right-icons {
        gap: 8px;
    }
    .gold-sell-img-mobile {
        max-height: 35px;
    }
    .gold-sell-text-mobile {
        font-size: 7px;
    }
}

/* Zorg dat afbeeldingen niet pixelig worden */
.gold-sell-img-desktop,
.gold-sell-img-mobile {
    image-rendering: -webkit-optimize-contrast;
}

/* Animaties */
@keyframes gentlePulse {
    0%, 100% {
        filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.4));
    }
    50% {
        filter: drop-shadow(0 3px 12px rgba(255, 215, 0, 0.6))
                drop-shadow(0 0 15px rgba(255, 165, 0, 0.3));
    }
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
                     0 0 10px rgba(255, 215, 0, 0.5);
    }
}

.gold-sell-img-desktop,
.gold-sell-img-mobile {
    animation: gentlePulse 3s ease-in-out infinite;
}

.gold-sell-text,
.gold-sell-text-mobile {
    animation: textGlow 3s ease-in-out infinite;
}

.gold-sell-link:hover .gold-sell-img-desktop,
.gold-sell-link:hover .gold-sell-text {
    animation: none;
}