/* =========================================
    1. Shared Control Focus
========================================= */

body:not(.wp-admin) :is(
  input, select, textarea, button, summary, [role="button"],
  .btn-primary, .btn-secondary, .btn-primary-full, .btn-dark,
  .travel-header__bookmarks, .travel-reviews__button
):focus {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  transition-property: color, background-color, border-color, box-shadow, transform, filter, opacity !important;
}

/* =========================================
    2. Form Fields
========================================= */

body:not(.wp-admin) :is(
  input:not([type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
  select, textarea
):focus {
  border-color: var(--secondary-color, #d8006d) !important;
  box-shadow: none !important;
}

body:not(.wp-admin) select:not(:disabled):focus {
  outline: none !important;
}

body:not(.wp-admin) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--secondary-color, #d8006d);
}

body:not(.wp-admin) :is(
  input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"], input[type="color"]
):focus-visible {
  outline: 2px solid var(--secondary-color, #d8006d) !important;
  outline-offset: -2px !important;
}

body:not(.wp-admin) :is(input[type="checkbox"], input[type="radio"]):checked:focus-visible {
  outline-color: #fff !important;
  outline-offset: -3px !important;
}

/* =========================================
    3. Button Focus Policy
========================================= */

body:not(.wp-admin) :is(
  button, summary, [role="button"], input[type="button"], input[type="submit"], input[type="reset"],
  input[type="image"], .btn-primary, .btn-secondary, .btn-primary-full, .btn-dark,
  .btn-primary-default, .button-field, .travel-home__benefits-cta,
  .travel-header__bookmarks, .travel-header__social a, .travel-reviews__button
):focus {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body:not(.wp-admin) :is(.btn-primary, .btn-secondary, .btn-primary-full, .btn-dark):focus::after {
  box-shadow: none !important;
}

@media (forced-colors: active) {
  body:not(.wp-admin) :is(
    input:not([type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
    select, textarea
  ):focus {
    border-color: Highlight !important;
  }

  body:not(.wp-admin) :is(
    input:not([type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"]),
    select, textarea
  ):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: -2px !important;
  }

  body:not(.wp-admin) select:not(:disabled):focus {
    outline: 1px solid Highlight !important;
    outline-offset: -1px !important;
  }

  body:not(.wp-admin) :is(input[type="checkbox"], input[type="radio"]):checked:focus-visible {
    outline-color: Highlight !important;
    outline-offset: -2px !important;
  }
}