/* Custom accessibility & performance fixes on top of style.css */

/* Contrast fix: topbar text (phone number, hours) was rgba(255,255,255,.5)
   on a near-black background (~3.5:1) - fails WCAG AA. */
.top .topper,
.top .topper .text,
.top .topper a,
.top .register-link,
.top .register-link span {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* Touch targets: owl-carousel dot buttons are ~10x10px, below the 24x24
   minimum. Pad the button itself instead of resizing the visual dot. */
.owl-theme .owl-dots .owl-dot {
  padding: 8px !important;
  margin: -8px;
}

.owl-theme .owl-nav [class*="owl-"] {
  min-width: 24px;
  min-height: 24px;
}

/* Perf: the SVG loader spinner animates stroke-dasharray/offset, which
   cannot run on the compositor. The loader is only ever visible for a
   few ms (see js/main.js), so drop the animation rather than repaint it. */
#ftco-loader .path {
  animation: none !important;
}

/* AJAX form feedback (js/main.js) - readable on both light and dark/image
   section backgrounds used by the reservation and contact forms. */
.ajax-form-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ajax-form-feedback:empty {
  display: none;
}
.ajax-form-feedback.is-success .ajax-feedback-text {
  color: #4ade80;
}
.ajax-form-feedback.is-error .ajax-feedback-text {
  color: #f87171;
}

/* Success/error badge: only transform + opacity are animated, so this
   stays on the compositor (see the loader-animation note above). */
.ajax-icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  animation: ajaxIconPop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
.ajax-icon-success {
  background: #22c55e;
}
.ajax-icon-success::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 44%;
  width: 11px;
  height: 6px;
  margin: -3px 0 0 -6px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
}
.ajax-icon-error {
  background: #ef4444;
}
.ajax-icon-error::before,
.ajax-icon-error::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 3px;
  background: #fff;
  margin: -1.5px 0 0 -6px;
}
.ajax-icon-error::before {
  transform: rotate(45deg);
}
.ajax-icon-error::after {
  transform: rotate(-45deg);
}
@keyframes ajaxIconPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}