/* CO Koffie — USP-balk. Namespaces .coup-light / .coup-dark. */

/* ============================================================
   LICHTE VARIANT (.coup-light) — verbatim uit bron.
   ============================================================ */
.coup-light,
.coup-light *{
box-sizing:border-box;
}

.coup-light{
display:flex;
flex-wrap:wrap;
gap:0.909em;
align-items:center;
margin:0;
padding:0;
font-size:11px;
font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

.coup-light-pill{
display:inline-flex;
align-items:center;
gap:0.727em;
padding:0.727em 1.455em;
background:rgba(214,198,191,0.1);
border:1px solid rgba(214,198,191,0.3);
border-radius:100px;
transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
margin:0;
list-style:none;
text-decoration:none;
cursor:default;
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
}

.coup-light-pill:hover{
border-color:rgba(214,198,191,0.55);
background:rgba(214,198,191,0.18);
box-shadow:0 0 20px rgba(214,198,191,0.15),0 2px 12px rgba(214,198,191,0.1);
transform:translateY(-1px);
}

.coup-light-icon{
width:1.091em;
height:1.091em;
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
color:#D6C6BF;
filter:drop-shadow(0 0 4px rgba(214,198,191,0.5));
transition:filter 0.3s ease,transform 0.3s ease;
}

.coup-light-icon svg{
width:100%;
height:100%;
fill:currentColor;
}

.coup-light-pill:hover .coup-light-icon{
filter:drop-shadow(0 0 7px rgba(214,198,191,0.85));
transform:rotate(15deg) scale(1.1);
}

.coup-light-pill span{
font-family:'Montserrat',sans-serif;
font-size:1em;
font-weight:600;
color:#FFFFFF;
white-space:nowrap;
letter-spacing:0.2px;
}

@media (max-width:480px){
.coup-light{gap:0.727em;}
.coup-light-pill{padding:0.636em 1.273em;}
}

/* ============================================================
   DONKERE VARIANT (.coup-dark) — verbatim uit bron.
   ============================================================ */
.coup-dark,
.coup-dark *{
box-sizing:border-box;
}

.coup-dark{
display:flex;
flex-wrap:wrap;
gap:0.909em;
align-items:center;
margin:0;
padding:0;
font-size:11px;
font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

.coup-dark-pill{
display:inline-flex;
align-items:center;
gap:0.727em;
padding:0.727em 1.455em;
background:rgba(105,63,25,0.08);
border:1px solid rgba(105,63,25,0.25);
border-radius:100px;
transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
margin:0;
list-style:none;
text-decoration:none;
cursor:default;
}

.coup-dark-pill:hover{
border-color:rgba(105,63,25,0.45);
background:rgba(105,63,25,0.12);
box-shadow:0 0 20px rgba(105,63,25,0.1),0 2px 12px rgba(105,63,25,0.08);
transform:translateY(-1px);
}

.coup-dark-icon{
width:1.091em;
height:1.091em;
flex-shrink:0;
display:inline-flex;
align-items:center;
justify-content:center;
color:#693F19;
filter:drop-shadow(0 0 3px rgba(105,63,25,0.35));
transition:filter 0.3s ease,transform 0.3s ease;
}

.coup-dark-icon svg{
width:100%;
height:100%;
fill:currentColor;
}

.coup-dark-pill:hover .coup-dark-icon{
filter:drop-shadow(0 0 6px rgba(105,63,25,0.6));
transform:rotate(15deg) scale(1.1);
}

.coup-dark-pill span{
font-family:'Montserrat',sans-serif;
font-size:1em;
font-weight:600;
color:#4B2D15;
white-space:nowrap;
letter-spacing:0.2px;
}

@media (max-width:480px){
.coup-dark{gap:0.727em;}
.coup-dark-pill{padding:0.636em 1.273em;}
}