:root{
  --outline-color: #f5a623; /* warm accent (change to match your theme) */
  --outline-strong: rgba(245,166,35,0.95);
  --focus-ring: 3px;
}

/* Make interactive elements show a clear outline for keyboard users */
/* Card highlight when any inner control is focused (focus-within) */
.gt-room-box-items:focus-within {
  outline: var(--focus-ring) solid var(--outline-color);
  outline-offset: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* Optionally allow the whole card to be keyboard-focusable if you add tabindex="0" to the element */
.gt-room-box-items[tabindex]:focus {
  outline: var(--focus-ring) solid var(--outline-color);
  outline-offset: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Buttons and links - visible focus */
.gt-link-btn:focus,
.gt-link-btn:focus-visible,
.btn-reserve:focus,
.btn-reserve:focus-visible,
.btn:focus,
.btn:focus-visible,
.res-modal-close:focus,
.res-modal-close:focus-visible,
.res-field input:focus,
.res-field input:focus-visible {
  outline: none; /* remove default */
  box-shadow: 0 0 0 var(--focus-ring) rgba(245,166,35,0.14), 0 0 0 calc(var(--focus-ring) * 2) rgba(245,166,35,0.06);
  border-radius: 6px;
  border-color: var(--outline-strong);
}

/* Stronger solid outline on keyboard focus for high contrast */
.gt-link-btn:focus-visible,
.btn-reserve:focus-visible,
.btn:focus-visible,
.res-modal-close:focus-visible {
  box-shadow: none;
  outline: var(--focus-ring) solid var(--outline-color);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Inputs and date pickers */
.res-field input[type="number"],
.res-field input[type="date"],
input[type="text"],
input[type="email"],
textarea {
  transition: box-shadow .12s ease, border-color .12s ease;
}
.res-field input[type="number"]:focus,
.res-field input[type="date"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--outline-strong);
  box-shadow: 0 6px 18px rgba(20,20,20,0.05), 0 0 0 4px rgba(245,166,35,0.08);
  outline: none;
}

/* Modal panel keyboard focus ring */
.reservation-modal-panel:focus {
  outline: var(--focus-ring) solid rgba(245,166,35,0.14);
  outline-offset: 4px;
}

/* Make addressable links (mailto/tel) obvious on focus */
.booking .contact a:focus,
.booking .contact a:focus-visible {
  outline: var(--focus-ring) solid var(--outline-color);
  outline-offset: 3px;
  border-radius: 4px;
  background: rgba(245,166,35,0.06);
}

/* Hover emphasis (visual, not replace focus) */
.gt-room-box-items:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.09);
}

/* Accessibility: ensure large outline for keyboard users on small screens too */
@media (max-width: 600px) {
  :root { --focus-ring: 4px; }
  .gt-room-box-items:focus-within,
  .gt-room-box-items[tabindex]:focus {
    outline-offset: 8px;
  }
}

/* Utility: visible focus for elements that may not show default focus (links with reset styles) */
a:focus, button:focus {
  outline: none;
}
a:focus-visible, button:focus-visible {
  outline: var(--focus-ring) solid var(--outline-color);
  outline-offset: 3px;
}

/* Small tweak to ensure focus rings don't clip on rounded corners */
.gt-room-box-items,
.reservation-modal-panel,
.btn,
.gt-link-btn {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}