@import url('../../../casual/assets/css/theme.css');

/*
 * Custom code for Fratelli Hermanos
 */

/* ==========================================================================
   1. Define the flashing animation
   ========================================================================== */

@keyframes flash-warning {
  /* The animation starts and ends with our original light yellow */
  0%, 100% {
    background-color: #fffacd; /* Light Yellow */
    border-color: #ffdd00;
  }
  
  /* At the halfway point, it flashes to a light red to grab attention */
  50% {
    background-color: #ffe5e5; /* Light Red */
    border-color: #ff5050;
  }
}

/* ==========================================================================
   2. Apply the styles and animation to the Terms & Conditions box
   ========================================================================== */

/* We use the .js-conditions-to-approve selector because it's more specific */
.js-conditions-to-approve {
  /* --- The original styling from before --- */
  border: 2px solid #ffdd00;
  background-color: #fffacd;
  padding: 15px;
  margin-top: 30px !important;
  margin-bottom: 20px;
  border-radius: 5px;

  /* --- The NEW animation code --- */
  animation-name: flash-warning;          /* The name of our @keyframes animation */
  animation-duration: 2.5s;               /* The animation will take 2.5 seconds */
  animation-iteration-count: 3;           /* It will flash 3 times */
  animation-timing-function: ease-in-out; /* Makes the transition smooth */
}

/* Make the label text bigger and bolder */
.js-conditions-to-approve label {
  font-size: 1.1em !important;
  font-weight: bold;
}