/*
 * Nightfall Dominion UI Kit — v1.0
 * Shared interactive components for the NFD ecosystem.
 */
:root{
  --nfd-ui-ink:#070710;
  --nfd-ui-panel:#101426;
  --nfd-ui-purple:#9a63ff;
  --nfd-ui-purple-soft:#c8a9ff;
  --nfd-ui-violet:#5e2eb7;
  --nfd-ui-line:rgba(173,128,255,.58);
  --nfd-ui-text:#f8f3ff;
}

/* Button foundation: supports links, buttons and submit controls. */
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button){
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  min-height:48px;
  padding:.78rem 1.35rem;
  border:1px solid var(--nfd-ui-line);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(34,28,62,.98),rgba(9,10,22,.99));
  color:var(--nfd-ui-text)!important;
  font-family:"Cinzel",serif;
  font-size:.79rem;
  font-weight:700;
  letter-spacing:.075em;
  line-height:1.15;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none!important;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -10px 24px rgba(72,31,128,.16),
    0 0 0 1px rgba(132,72,232,.06),
    0 10px 26px rgba(0,0,0,.32);
  transform:translateZ(0);
  transition:transform .2s ease,border-color .24s ease,box-shadow .28s ease,filter .24s ease;
}
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button)::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-110% -32%;
  opacity:.08;
  pointer-events:none;
  filter:blur(15px);
  background:
    radial-gradient(circle at 16% 55%,rgba(211,164,255,.94),transparent 17%),
    radial-gradient(circle at 50% 28%,rgba(119,62,244,.9),transparent 24%),
    radial-gradient(circle at 83% 67%,rgba(178,63,226,.75),transparent 20%);
  transform:translate3d(-16%,18%,0) rotate(-8deg) scale(.9);
  transition:opacity .25s ease,transform .62s cubic-bezier(.2,.8,.2,1);
}
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button)::after{
  content:"›";
  display:inline-grid;
  place-items:center;
  width:1.1rem;
  height:1.1rem;
  flex:0 0 auto;
  color:#dcc8ff;
  font-family:Georgia,serif;
  font-size:1.45rem;
  font-weight:400;
  line-height:1;
  text-shadow:0 0 12px rgba(182,116,255,.9);
  transition:transform .22s ease,color .22s ease,text-shadow .22s ease;
}
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button):hover,
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button):focus-visible{
  transform:translateY(-2px);
  border-color:rgba(211,174,255,.95);
  outline:none;
  filter:saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -12px 30px rgba(104,48,180,.23),
    0 0 0 1px rgba(160,99,255,.22),
    0 0 25px rgba(119,54,230,.48),
    0 14px 30px rgba(0,0,0,.42);
}
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button):hover::before,
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button):focus-visible::before{
  opacity:.9;
  transform:translate3d(8%,-4%,0) rotate(6deg) scale(1.12);
  animation:nfd-ui-mist 2.8s ease-in-out infinite alternate;
}
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button):hover::after,
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button):focus-visible::after{
  color:#fff;
  transform:translateX(3px);
  text-shadow:0 0 16px #c89bff,0 0 28px #8a40ec;
}
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button):active,
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button).is-veil-click{
  transform:translateY(0) scale(.97);
  border-color:#e1c9ff;
  box-shadow:
    0 0 0 2px rgba(183,116,255,.24),
    0 0 40px rgba(136,63,255,.75),
    inset 0 0 30px rgba(161,88,255,.32);
}
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button).is-loading{
  pointer-events:none;
  opacity:.82;
}
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button).is-loading::after{
  content:"";
  width:.9rem;height:.9rem;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:50%;
  animation:nfd-ui-spin .72s linear infinite;
}
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button):disabled,
:is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button)[aria-disabled="true"]{
  pointer-events:none;
  cursor:not-allowed;
  opacity:.42;
  filter:grayscale(.5);
  box-shadow:none;
}

/* Secondary/quiet actions still remain in-world. */
.nfd-secondary-button,
.nfd-ui-button--secondary{
  background:rgba(10,11,22,.78);
  border-color:rgba(144,112,194,.38);
  color:#ddd3eb!important;
}
.nfd-secondary-button::after,
.nfd-ui-button--secondary::after{opacity:.7}

/* Store-specific controls */
.nfd-add-form{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:1rem;
  margin-top:1.6rem;
}
.nfd-add-form label{
  display:grid;
  gap:.45rem;
  color:#d9d0e7;
  font-family:"Cinzel",serif;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.nfd-add-form input[type="number"],
.nfd-add-form select,
.nfd-checkout-form input,
.nfd-checkout-form textarea{
  min-height:48px;
  border:1px solid rgba(157,91,218,.5);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(11,9,18,.98),rgba(8,8,15,.98));
  color:#fff;
  padding:.72rem .9rem;
  box-shadow:inset 0 0 20px rgba(83,36,128,.12);
  transition:border-color .22s ease,box-shadow .22s ease;
}
.nfd-add-form input[type="number"]{width:90px}
.nfd-add-form input:focus,
.nfd-add-form select:focus,
.nfd-checkout-form input:focus,
.nfd-checkout-form textarea:focus{
  outline:none;
  border-color:#bd8cff;
  box-shadow:0 0 0 3px rgba(145,82,239,.13),inset 0 0 24px rgba(109,47,180,.14);
}

/* Product/card interaction polish */
.nfd-product-card .nfd-veil-button{align-self:flex-start;margin-top:auto}
.nfd-product-details .nfd-veil-button{min-width:220px}
.nfd-product-details .nfd-price-large strong{
  text-shadow:0 0 18px rgba(179,105,255,.38);
}

@keyframes nfd-ui-mist{
  from{filter:blur(12px);transform:translate3d(-2%,6%,0) rotate(-4deg) scale(1.04)}
  to{filter:blur(17px);transform:translate3d(10%,-7%,0) rotate(7deg) scale(1.2)}
}
@keyframes nfd-ui-spin{to{transform:rotate(360deg)}}

@media (max-width:620px){
  :is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button){width:100%;white-space:normal}
  .nfd-add-form{display:grid;grid-template-columns:1fr}
  .nfd-add-form input[type="number"],.nfd-add-form select{width:100%}
}
@media (prefers-reduced-motion:reduce){
  :is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button),
  :is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button)::before,
  :is(.nfd-ui-button,.nfd-veil-button,.nfd-secondary-button)::after{animation:none!important;transition:none!important}
}