/* Container som holder ring og hull sammen */
.ring-pair {
    position: relative;
    display: flex;
    align-items: center;
    width: 65px; /* Økt litt for å gi plass til rundere ring */
    height: 35px;
    margin-bottom: 15px;
}

/* DIN ORIGINALE RING - NÅ HELT RUND PÅ HØYRE SIDE */
.ring-custom { 
    width: 50px; 
    height: 18px; 
    background: linear-gradient(180deg, 
        #555 0%, 
        #eee 15%, 
        #fff 30%, 
        #999 60%, 
        #444 85%, 
        #111 100%
    ); 
    /* ENDRET: 50% gjør begge endene helt sirkulære */
    border-radius: 50%; 
    
    position: absolute;
    left: 5px; 
    z-index: 2; 
    box-shadow: 
        0 4px 6px rgba(0,0,0,0.4), 
        inset 0 1px 1px rgba(255,255,255,0.8);
    transform: rotate(-2deg);
}

/* DET SORTE HULLET (Ligger nå perfekt bak den runde enden) */
.hole-right {
    width: 22px; /* Gjort litt bredere for å matche den runde ringen */
    height: 24px; 
    background: #000; 
    border-radius: 50%;
    position: absolute;
    /* Justert for at den runde ring-enden skal ligge sentrert i hullet */
    right: 3px; 
    z-index: 1; 
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.8), 
        0 1px 0px rgba(255,255,255,0.9);
}

.binder-rings-left {
    width: 22px;
    padding-top: 120px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    /* ENDRET: Bruker variabelen i stedet for fast farge */
    background: var(--main-bg) !important;
}