/* =========================
   Tailwind Component Layer
========================= */
@layer components {

  .btn {
    @apply inline-flex items-center gap-2 rounded-2xl px-5 py-3 font-bold transition active:scale-95 focus:outline-none focus:ring-4;
  }

  /* Primary */
  .btn-primary {
    @apply bg-white text-brand-700 border border-brand-300 hover:bg-off focus:ring-brand-200;
  }

  /* Secondary */
  .btn-secondary {
    @apply bg-off text-brand-700 border border-brand-200 hover:bg-white focus:ring-brand-200;
  }

  /* Filter chip */
  .btn-chip {
    @apply rounded-full border border-brand-200 bg-white px-4 py-2 text-sm font-bold text-slate-700 hover:bg-off;
  }

  .tag {
    @apply rounded-md px-2 py-1 text-xs bg-brand-50 text-brand-700 border border-brand-200;
  }

  .icon-ring {
    @apply mx-auto grid h-12 w-12 place-items-center rounded-full bg-brand-50 text-brand-700 border border-brand-200;
  }

  /* =========================
     Apply Button
  ========================= */

  .btn-apply {
    @apply inline-flex items-center justify-center
           rounded-lg
           bg-brand-600
           px-4 py-2
           text-sm font-medium text-white
           shadow
           hover:bg-brand-700
           focus:outline-none focus:ring-2 focus:ring-brand-500
           transition
           w-1/3 md:w-auto
           text-center;
  }

  /* =========================
     Lamar Button
  ========================= */

.btn-lamar {
  @apply relative overflow-hidden
         inline-flex items-center justify-center gap-2
         px-5 py-2.5
         rounded-full
         font-semibold
         bg-brand-600 text-white border border-brand-600
         hover:bg-brand-700 hover:shadow-md
         focus:outline-none focus:ring-4 focus:ring-brand-300
         transition-all duration-200 ease-in-out;
}

.btn-lamar:active {
  transform: scale(.97);
}

/* icon inside */
.btn-lamar .btn-icon {
  @apply inline-block ml-1;

  transform: translateX(-6px);
  opacity: 0;

  transition:
    transform .28s cubic-bezier(.2,.9,.25,1),
    opacity .18s ease;
}

/* icon muncul saat hover */
.btn-lamar:hover .btn-icon {
  transform: translateX(0);
  opacity: 1;
}

/* show arrow when card hover */
.role-card:hover .btn-lamar .btn-icon {
  transform: translateX(0);
  opacity: 1;
}


/* =========================
   Roles Section Animation
========================= */

#roles-empty-message.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.role-card {
  opacity: 0;
  transform: translateY(16px);

  transition:
    transform .48s cubic-bezier(.2,.9,.25,1),
    opacity .48s ease,
    box-shadow .2s ease;

  will-change: transform, opacity;
}

.role-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.role-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}


/* =========================
   Anchor / Focus Cleanup
========================= */

:target {
  outline: none;
  box-shadow: none;
  border: none;
}

:target:focus-visible,
section:focus-visible,
#roles:focus-visible,
#perks:focus-visible,
#process:focus-visible {
  outline: none;
  box-shadow: none !important;
  border-radius: 6px;
}


/* =========================
   Role Tag Pulse
========================= */

.role-tag {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .75rem;

  background: linear-gradient(
    90deg,
    rgba(14,165,233,.12),
    rgba(99,102,241,.06)
  );

  color: #0ea5e9;
  border: 1px solid rgba(14,165,233,.12);
  position: relative;
}

.role-tag::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);

  width: 8px;
  height: 8px;
  border-radius: 999px;

  background: rgba(14,165,233,.95);
  box-shadow: 0 0 0 0 rgba(14,165,233,.25);

  animation: tagPulse 2.8s infinite;
}

@keyframes tagPulse {

  0% {
    box-shadow: 0 0 0 0 rgba(14,165,233,.25);
    transform: translateY(-50%) scale(1);
  }

  60% {
    box-shadow: 0 0 0 8px rgba(14,165,233,.06);
    transform: translateY(-50%) scale(1.05);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(14,165,233,0);
    transform: translateY(-50%) scale(1);
  }

}


/* =========================
   Chip Interaction
========================= */

.btn-chip {

  --chip-bg: transparent;
  --chip-border: rgba(148,163,184,.16);

  display: inline-flex;
  align-items: center;
  gap: .5rem;

  padding: .38rem .7rem;

  border-radius: 999px;

  border: 1px solid var(--chip-border);
  background: var(--chip-bg);

  cursor: pointer;

  transition:
    transform .16s cubic-bezier(.2,.9,.25,1),
    box-shadow .16s ease,
    background-color .16s ease;

  user-select: none;

}

.btn-chip:active {
  transform: translateY(1px) scale(.996);
}

.btn-chip.active {

  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.18);
  color: rgb(30,64,175);

  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(59,130,246,.08);

}

.btn-chip.pulse {
  animation: chipPulse 700ms ease;
}

@keyframes chipPulse {

  0% {
    transform: translateY(-2px) scale(.995);
    box-shadow: 0 6px 18px rgba(59,130,246,.06);
  }

  60% {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 36px rgba(59,130,246,.08);
  }

  100% {
    transform: translateY(-3px) scale(1);
    box-shadow: 0 10px 30px rgba(59,130,246,.08);
  }

}


/* =========================
   Filtering Animations
========================= */

#roles-grid article {

  transition:
    transform .42s cubic-bezier(.2,.9,.25,1),
    opacity .32s ease,
    filter .25s ease;

  transform-origin: 50% 0%;
  will-change: transform, opacity;

}

#roles-grid article.hidden-by-filter {

  pointer-events: none;
  opacity: 0;

  transform: translateY(10px) scale(.98);
  filter: blur(1px) saturate(.9);

}

#roles-grid article.visible-by-filter {

  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;

}

#roles-grid {
  transition: height .36s ease;
}


/* =========================
   Responsive
========================= */

@media (max-width:640px) {

  .role-tag::after {
    right: -6px;
    width: 6px;
    height: 6px;
  }

}


/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion: reduce) {

  .btn-chip,
  #roles-grid article,
  .btn-lamar {
    transition: none !important;
    animation: none !important;
  }

}


/* =========================
   Urgent Ribbon
========================= */

.ribbon-urgent {

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  background: #3f78f5ff;
  color: #ffffff;

  font-size: 11px;
  font-weight: 600;

  text-align: center;

  padding: 0.5px 0;
  letter-spacing: 0.08em;

  z-index: 20;
  pointer-events: none;

}

}

.xg-input-group{
    display:flex;
    align-items:center;
    gap:10px;
}

.xg-inline-check{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:13px;
    white-space:nowrap;
    color:#555;
}