/**
 * YplaY Availability Checker - Styles
 * -----------------------------------
 *
 * This file styles the shortcode form output.
 * Key parts:
 *  - responsive 2-column layout that collapses on small screens
 *  - colored status badges:
 *      A = green (available)
 *      B = orange (rollout area)
 *      C = red (not planned)
 *  - a simple loading spinner on the submit button when JS adds .is-loading
 */

.yplay-avail{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 16px;
  max-width: 720px;
}
.yplay-avail__title{ margin: 0 0 12px 0; }
.yplay-avail__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.yplay-avail label span{
  display:block;
  font-size: 12px;
  opacity:.8;
  margin-bottom: 6px;
}
.yplay-avail input{
  width:100%;
  padding:10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
}
.yplay-avail__actions{ margin-top: 8px; }
.yplay-avail__button{
  padding: 10px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
}
.yplay-avail__button.is-loading{ opacity:.7; cursor: progress; }
.yplay-avail__result{ margin-top: 14px; }
.yplay-avail__badge{
  display:inline-block;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  margin-bottom: 10px;
}
.yplay-avail__badge.is-a{ background:#e7f7ec; border-color:#1e7a34; color:#1e7a34; }
.yplay-avail__badge.is-b{ background:#fff3e0; border-color:#cc6a00; color:#cc6a00; }
.yplay-avail__badge.is-c{ background:#fdecea; border-color:#b00020; color:#b00020; }
.yplay-avail__message{
  white-space: pre-wrap;
  line-height: 1.35;
}
.yplay-avail__result.is-error{
  color: #b00020;
}
@media (max-width: 640px){
  .yplay-avail__row{ grid-template-columns: 1fr; }
}


/* Loading indicator on button */
.yplay-avail__button{ position: relative; }
.yplay-avail__button.is-loading{ padding-left: 38px; }
.yplay-avail__button.is-loading::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.35);
  border-top-color: rgba(0,0,0,.75);
  animation: yplaySpin .8s linear infinite;
}
@keyframes yplaySpin{ to { transform: rotate(360deg); } }

/* Ensure links in result are clickable even if themes add overlays or disable pointer events */
.yplay-avail__result{ position: relative; z-index: 1; }
.yplay-avail__message, .yplay-avail__message a{ position: relative; z-index: 2; pointer-events: auto; }
.yplay-avail__message a{ text-decoration: underline; }


/* ------------------------------------------------------------
 * Button clickability + focus ring fix
 * Some themes/builders place overlays or special focus styles.
 * These rules ensure the submit button is always clickable and
 * remove the red focus/validation frame requested.
 * ------------------------------------------------------------ */
.yplay-avail__actions{ position: relative; z-index: 10; }
.yplay-avail__button{
  position: relative;
  z-index: 11;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

/* Remove unwanted red focus/validation outline (requested) */
.yplay-avail__button:focus,
.yplay-avail__button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Also avoid theme-added outlines on the wrapper */
.yplay-avail__button::-moz-focus-inner{ border: 0; }


/* ------------------------------------------------------------
 * Strong focus/validation border reset (removes red outline/border
 * added by browsers or themes)
 * ------------------------------------------------------------ */
.yplay-avail__button,
.yplay-avail__button:focus,
.yplay-avail__button:focus-visible,
.yplay-avail__button:active,
.yplay-avail__button:hover{
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* Remove browser invalid styles */
.yplay-avail__button:invalid,
.yplay-avail__button:focus:invalid{
  box-shadow: none !important;
  outline: none !important;
}

/* Also neutralize form-level invalid highlighting */
.yplay-avail__form :focus{
  outline: none !important;
}