@property --dg-ugao { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.dg.dg {
  position: relative; isolation: isolate; z-index: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; height: 48px; min-height: 48px; padding: 0 24px; border-radius: 24px;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: .01em;
  text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease, box-shadow 100ms ease, --dg-ugao 200ms linear;
  --dg-ugao: 0deg;
}
.dg[hidden] { display: none !important; }

.dg.dg-malo { height: 44px; min-height: 44px; border-radius: 22px; padding: 0 22px; font-size: 16px; }
.dg.dg svg { width: 20px; height: 20px; flex: none; }

.dg.dg::after {
  content: ''; position: absolute; inset: -2.5px; z-index: -1; pointer-events: none;
  border-radius: 26.5px;
  background: rgba(44, 33, 24, .06);
  box-shadow: inset 0 1px 3px rgba(44, 33, 24, .20), inset 0 -1px 0 rgba(255, 255, 255, .7);
}
.dg.dg-malo::after { border-radius: 24.5px; }
.dg.dg::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--dg-ugao), rgba(196,144,128,0) 0deg, rgba(196,144,128,.95) 40deg,
    rgba(196,144,128,0) 90deg, rgba(196,144,128,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9;
}
.dg.dg:hover { --dg-ugao: 360deg; }
.dg.dg:active:not(:disabled) { transform: translateY(1px); }
.dg.dg:focus-visible { outline: 2px solid #C49080; outline-offset: 4.5px; }
.dg.dg:disabled, .dg.dg[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; }

.dg.dg-tamno, .dg.dg-tamno:hover, .dg.dg-tamno:hover:not(:disabled) {
  color: #FFFFFF;
  background: linear-gradient(180deg, #54402F 0%, #2C2118 52%, #231A12 100%);
  border: 1px solid #1A120C;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 24px rgba(44,33,24,.28), 0 1px 2px rgba(44,33,24,.25);
}
.dg.dg-braon, .dg.dg-braon:hover, .dg.dg-braon:hover:not(:disabled) {
  color: #FFFFFF;
  background: linear-gradient(180deg, #A67E5E 0%, #8C6647 52%, #7A573B 100%);
  border: 1px solid #6B4C33;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 24px rgba(92,64,40,.28), 0 1px 2px rgba(92,64,40,.25);
}
.dg.dg-svetlo, .dg.dg-svetlo:hover, .dg.dg-svetlo:hover:not(:disabled) {
  color: #2C2118;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F2EB 100%);
  border: 1px solid #8F7C6A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px rgba(44,33,24,.12), 0 1px 2px rgba(44,33,24,.12);
}
.dg.dg:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(44,33,24,.22), 0 1px 1px rgba(44,33,24,.2); }

.dg-vrteska { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #FFFFFF; animation: dg-vrti .7s linear infinite; }
@keyframes dg-vrti { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dg.dg { transition: none; } .dg-vrteska { animation-duration: 2s; } }