/* Interactive states for every interactive element.
   Source: hover / active-text / error variants on the "ui kit" page of Dine-website.fig (buttons, links, social icons,
   fields, photos, logo). Everything not drawn there (focus ring, pressed, disabled, success message, dropdown items,
   current page, support chat) is an IMPLEMENTATION DECISION — NOT FROM FIGMA, built from the same tokens. */

/* ---------- Motion ---------- */
.dn-button, .dn-nav__link, .dn-nav__caret, .dn-lang__toggle, .dn-header__phone, .dn-header__logo,
.dn-dropdown a, .dn-field, .dn-newsletter__field, .dn-newsletter__input, .dn-newsletter__submit,
.dn-footer__legal-text a, .dn-footer__contact a, .dn-social__link, .dn-support, .dn-cookie__text a,
.dn-gallery__open img {
  transition: color var(--transition), background-color var(--transition), border-color var(--transition),
              opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Buttons (filled and outlined) ---------- */
.dn-button:hover,
.dn-button:focus-visible { background: var(--button-hover); border-color: var(--button-hover); color: var(--typography-primary); }
.dn-button:active { transform: translateY(1px); }
.dn-button:disabled, .dn-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ---------- Links on dark surfaces: colour + 1px underline (kit link hover) ---------- */
.dn-nav__link:hover, .dn-lang__toggle:hover, .dn-header__phone:hover, .dn-footer__contact a:hover,
.dn-nav__caret:hover { color: var(--button-hover); }
.dn-nav__link:hover, .dn-header__phone:hover, .dn-footer__contact a:hover, .dn-lang__toggle:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.dn-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* SCROLL: colour only (kit) */

/* Dropdown items */
.dn-dropdown a:hover, .dn-dropdown a:focus-visible { color: var(--typography-secondary); background: rgba(255, 255, 255, 0.08); }
.dn-dropdown a[aria-current="true"] { color: var(--typography-secondary); }

/* Logo: subtle dim on hover (the kit has a hover variant but its visual difference is not recoverable) */
.dn-header__logo:hover { opacity: 0.85; }

/* ---------- Light-surface text links: colour #676c79 + underline (kit "Forgotten password?" hover) ---------- */
.dn-cookie__text a:hover { color: var(--elements-hover); }

/* Footer legal link on dark: kit hover is #676c79, which is too dim on #191919, so white is used instead */
.dn-footer__legal-text a:hover { color: var(--typography-secondary); text-decoration-thickness: 1px; }

/* ---------- Social icons: mask-based so the colour can change (kit: #ffcc00 -> #ffae00) ---------- */
.dn-social__link {
  display: block;
  width: 24px;
  height: 24px;
  background: var(--typography-tertiary);
  -webkit-mask: var(--dn-icon) center / contain no-repeat;
          mask: var(--dn-icon) center / contain no-repeat;
}
.dn-social__link:hover { background: var(--button-hover); }
.dn-social__link--facebook { --dn-icon: url("../svg/social-s2.svg"); }
.dn-social__link--instagram { --dn-icon: url("../svg/social-s1.svg"); }

/* ---------- Fields: default #bcc1c5, hover/active #676c79 (kit), error #2b2e35 + message ---------- */
.dn-field-wrap { position: relative; }
.dn-field:hover { border-color: var(--elements-hover); }
.dn-field:focus { border-color: var(--elements-hover); }
.dn-field:disabled { opacity: 0.5; cursor: not-allowed; }

.dn-field__icon {
  display: none;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--typography-primary);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.dn-field-wrap:has(.dn-field.is-invalid) .dn-field__icon { display: block; }
.dn-field-wrap:has(textarea.is-invalid) .dn-field__icon { display: none; }

.dn-field.is-invalid { border-color: var(--typography-primary); padding-right: 48px; }

.dn-field__error {
  margin-top: 6px;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--typography-primary);
}
.dn-field__error[hidden] { display: none; }

/* ---------- Newsletter field on dark: hover = full-opacity placeholder, error = white border + #ff2f2f message ---------- */
.dn-newsletter__field:hover .dn-newsletter__input::placeholder { opacity: 1; }
.dn-newsletter__submit:hover, .dn-newsletter__submit:focus-visible { color: var(--button-hover); }
.dn-newsletter__field.is-invalid { border-color: var(--typography-secondary); }
.dn-newsletter__field.is-invalid .dn-newsletter__submit { color: var(--typography-secondary); }
.dn-field__error--dark { color: var(--alerts-error); margin-top: -6px; }

/* ---------- Form status (success), decision ---------- */
.dn-form-status { font-size: 16px; line-height: 1.3; color: var(--typography-primary); }
.dn-form-status--dark { color: var(--typography-tertiary); }
.dn-form-status[hidden] { display: none; }

/* ---------- Gallery: image zooms 1.1 inside its box on hover (kit: 349x460 -> 385x506) ---------- */
.dn-gallery__open { overflow: hidden; }
.dn-gallery__open:hover img { transform: scale(1.1); }

/* ---------- Floating support button ---------- */
.dn-support:hover { transform: scale(1.06); }
.dn-support:active { transform: scale(0.98); }

/* ---------- Focus (decision): global ring from base.css, light on dark surfaces; fields keep their own border colour ---------- */
.dn-field:focus-visible, .dn-newsletter__input:focus-visible { outline-offset: 2px; }
.dn-newsletter__input:focus-visible { outline: 0; }  /* the whole field shows the ring through :focus-within */

/* ---------- Badges: "nervous" jitter on hover (decision, not in Figma) ----------
   Uses the independent translate/rotate properties, so the badge keeps its own tilt and scale. */
.dn-sticker, .dn-hero__bubble { cursor: default; }
.dn-hero__bubble { pointer-events: auto; }
/* --dn-bx: the badge's own horizontal offset (the hero bubbles are centred with translate: -50%); the jitter is added to it, so the badge does not jump */
@keyframes dn-nervous {
  0% { translate: calc(var(--dn-bx, 0px) + 0px) 0px; rotate: 0deg; }
  12% { translate: calc(var(--dn-bx, 0px) + -2px) 1px; rotate: -1.6deg; }
  24% { translate: calc(var(--dn-bx, 0px) + 2px) -1.5px; rotate: 1.8deg; }
  36% { translate: calc(var(--dn-bx, 0px) + -1.5px) -1px; rotate: -1deg; }
  48% { translate: calc(var(--dn-bx, 0px) + 2.5px) 1px; rotate: 1.4deg; }
  60% { translate: calc(var(--dn-bx, 0px) + -2px) 0.5px; rotate: -1.8deg; }
  72% { translate: calc(var(--dn-bx, 0px) + 1px) -2px; rotate: 1deg; }
  84% { translate: calc(var(--dn-bx, 0px) + -1px) 1.5px; rotate: -0.8deg; }
  100% { translate: calc(var(--dn-bx, 0px) + 0px) 0px; rotate: 0deg; }
}
.dn-sticker.is-nudged, .dn-hero__bubble.is-nudged { animation: dn-nervous 0.5s linear 2; }  /* one hint when the badge first comes into view (js/badges.js) */
.dn-sticker:hover, .dn-hero__bubble:hover,
.dn-service:hover .dn-sticker {
  animation: dn-nervous 0.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .dn-sticker.is-nudged, .dn-hero__bubble.is-nudged,
  .dn-sticker:hover, .dn-hero__bubble:hover, .dn-service:hover .dn-sticker { animation: none; }
}

.dn-form-status--error { color: var(--typography-primary); padding: 12px 16px; border-radius: var(--radius); background: #fdeaea; border: 1px solid var(--alerts-error); }

/* ---------- Tags: hover / focus = darker border (as the fields), the chosen tag is yellow (decision, not in Figma) ---------- */
.dn-tag { transition: border-color var(--transition), background-color var(--transition); }
.dn-tag:hover, .dn-tag:focus-visible { border-color: var(--elements-hover); }
.dn-tag.is-active { background: var(--button-primary); border-color: var(--button-primary); }