.ffxiv-button {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1rem;
  padding: 12px 24px;
  color: #fff;
  background: linear-gradient(145deg, #e0c17a, #b88f35);
  border: 1px solid #f5e1aa;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4),
              0 2px 6px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.ffxiv-button-icon {
height: calc(1rem + 24px); 
  vertical-align: middle;
}

.ffxiv-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: all 0.5s ease;
}

.ffxiv-button:hover::before {
  left: 130%;
  transition: left 0.75s ease-in-out;
}

.ffxiv-button:hover {
  background: linear-gradient(145deg, #f3dc94, #c0963e);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
              0 4px 10px rgba(0, 0, 0, 0.4);
/*  transform: translateY(-1px);*/
}

.ffxiv-button-blue {
  background: linear-gradient(145deg, #3458a3, #1f355e);
  border: 1px solid #d7c27c; /* Gouden rand */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),
              0 2px 6px rgba(0, 0, 0, 0.35);
}

.ffxiv-button-red {
    background: linear-gradient(145deg, #6a2a2a, #3f1414);
    border: 1px solid #f1a0a0;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.4);
    color: #FFD6D6;
}

.ffxiv-button-red:hover {
    background: linear-gradient(145deg, #7a3030, #4a1a1a);
    border-color: #ffb3b3;
}

.ffxiv-button-blue:hover {
  background: linear-gradient(145deg, #4f6fd1, #2a406e);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
              0 4px 10px rgba(0, 0, 0, 0.4);
}

.ffxiv-button-pink {
  background: linear-gradient(145deg, #FF97A1, #D86A7A);
  border: 1px solid #ffd1d5;
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4),
              0 2px 6px rgba(0, 0, 0, 0.3);
}

.ffxiv-button-pink:hover {
  background: linear-gradient(145deg, #FFA6AF, #E17C8A);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
              0 4px 10px rgba(0, 0, 0, 0.4);
}

.ffxiv-button-green {
  background: linear-gradient(145deg, #2e5f41, #1b3c28); /* donkergroen verloop */
  border: 1px solid #b3e9a4; /* subtiel mintgroen/goud randje */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2),
              0 2px 6px rgba(0, 0, 0, 0.35);
  color: #FFDFBF; /* jungle accentkleur */
}

.ffxiv-button-green:hover {
  background: linear-gradient(145deg, #3d7c58, #25513a);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4),
              0 4px 10px rgba(0, 0, 0, 0.4);
}

.ffxiv-input-blue {
  background: rgba(0, 30, 60, 0.7);
  border: 2px solid #4ab1ff;
  color: #ffffff;
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  outline: none;
  width: 70%;
  min-width: 150px;
  max-width: 500px;
  box-shadow: 0 0 8px rgba(74, 177, 255, 0.3);
  transition: border 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.ffxiv-input-blue::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.ffxiv-input-blue:focus {
  border-color: #82cfff;
  box-shadow: 0 0 12px rgba(130, 207, 255, 0.5);
  background: rgba(0, 45, 90, 0.9);
}

.ffxiv-input-green {
  background: rgba(10, 40, 20, 0.7);
  border: 2px solid #70cc70; /* frisgroen randje */
  color: #FFDFBF; /* warme jungle-tekstkleur */
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  outline: none;
  width: 70%;
  min-width: 150px;
  max-width: 500px;
  box-shadow: 0 0 8px rgba(112, 204, 112, 0.3);
  transition: border 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.ffxiv-input-green::placeholder {
  color: rgba(255, 223, 191, 0.5); /* subtiel warmgeel */
}

.ffxiv-input-green:focus {
  border-color: #9ff09f;
  box-shadow: 0 0 12px rgba(112, 204, 112, 0.5);
  background: rgba(20, 60, 30, 0.9);
}

.ffxiv-input-pink {
  background: rgba(255, 210, 220, 0.7);
  border: 2px solid #FF97A1;
  color: #4D0F1A; /* diepe rood/berry tekstkleur voor leesbaarheid */
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  outline: none;
  width: 70%;
  min-width: 150px;
  max-width: 500px;
  box-shadow: 0 0 8px rgba(255, 151, 161, 0.3);
  transition: border 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.ffxiv-input-pink::placeholder {
  color: rgba(77, 15, 26, 0.5); /* zachtere berry tint */
}

.ffxiv-input-pink:focus {
  border-color: #FFB5BD;
  box-shadow: 0 0 12px rgba(255, 182, 194, 0.5);
  background: rgba(255, 230, 235, 0.95);
}

.timer-display {
  font-size: 1.6rem;
  /*color: #fff8e1;*/
  padding: 10px 20px;
  background: linear-gradient(145deg, rgba(255, 223, 125, 0.08), rgba(255, 200, 80, 0.05));
  border: 1px solid rgba(255, 224, 140, 0.3);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
               0 0 6px rgba(255, 215, 100, 0.4);
  display: inline-block;
  min-width: 150px;
  text-align: center;
  user-select: none;
  letter-spacing: 0.1em;
}

.ffxiv-link {
  color: #e0c17a !important; /* goudkleurig */
  text-decoration: none;

  text-shadow: 0 0 2px rgba(255, 235, 150, 0.4);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.ffxiv-link:hover {
  color: #fffbe8; /* witgoud / lichter */
  text-shadow: 0 0 6px rgba(255, 255, 220, 0.9),
               0 0 12px rgba(255, 240, 180, 0.6);
}

.ffxiv-link-blue {
  color: #2C4375 !important; /* zachte glanzende blauw */
  text-decoration: none;
  text-shadow: 0 0 2px rgba(100, 190, 255, 0.3);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.ffxiv-link-blue:hover {
  color: #d6f0ff; /* lichtere blauw/witglans */
  text-shadow: 0 0 6px rgba(180, 235, 255, 0.9),
               0 0 12px rgba(130, 200, 255, 0.6);
}

.ffxiv-link-green {
  color: #A8E6A3 !important; /* zachte helder groene tint */
  text-decoration: none;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.ffxiv-link-green:hover {
  color: #FFDFBF; /* warme zandkleurige glow */
  text-shadow: 0 0 6px rgba(255, 245, 200, 0.9),
               0 0 12px rgba(255, 245, 200, 0.6);
}

.ffxiv-link-red {
  color: #E05C5C !important; /* warme roodtint */
  text-decoration: none;
  text-shadow: 0 0 2px rgba(255, 0, 0, 0.15);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.ffxiv-link-red:hover {
  color: #FFBDBD; /* lichtere rood/roze tint bij hover */
  text-shadow: 0 0 6px rgba(255, 100, 100, 0.6),
               0 0 12px rgba(255, 180, 180, 0.5);
}

.ffxiv-link-pink {
  color: #852945 !important; /* diepe berry voor contrast */
  text-decoration: none;
  text-shadow: 0 0 2px rgba(255, 200, 220, 0.3);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.ffxiv-link-pink:hover {
  color: #FFDFE4;
  text-shadow: 0 0 6px rgba(255, 160, 180, 0.8),
               0 0 12px rgba(255, 220, 230, 0.6);
}

.ffxiv-link-brown {
  color: #854805 !important;
  text-decoration: none;

  text-shadow: 0 0 2px rgba(255, 235, 150, 0.4);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.ffxiv-link-brown:hover {
  color: #F9BA75; 
  text-shadow: 0 0 6px rgba(255, 255, 220, 0.9),
               0 0 12px rgba(255, 240, 180, 0.6);
}

.inline-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: 140%;         /* klein beetje zoom effect */
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;             /* zachte hoeken */
  margin: 0 px;                  /* kleine ruimte rond het icoon */
  vertical-align: middle;        /* netjes met de tekstlijnen */
}

.small-icon {
  font-size: 1rem;       /* kleiner dan h3 zelf */
  margin-right: 8px;     /* ruimte tussen icoon en tekst */
  vertical-align: middle;
}