/* ---- ThumbNail Componenet---- */
.c-game-thumbnail {
  text-align: center;
  cursor: pointer;
  transition: color 0.3s;
  color: white;
  &:hover{
    color: white;
    .c-game-thumbnail__game-img{
      border-color: white;
      img {
        transform: scale(1.06);
      }
    }
    .c-game-thumbnail__game-img{
      color: var(--accent-color);
    }
  }
}

.c-game-thumbnail--dropdown {
  opacity: 0;
  transform: scale(1.15);
  &:nth-child(1) { transition: opacity 0.4s ease-in-out 0.07s, transform 0.4s ease-in-out 0.07s; }
  &:nth-child(2) { transition: opacity 0.4s ease-in-out 0.14s, transform 0.4s ease-in-out 0.14s; }
  &:nth-child(3) { transition: opacity 0.4s ease-in-out 0.21s, transform 0.4s ease-in-out 0.21s; }
  &:nth-child(4) { transition: opacity 0.4s ease-in-out 0.28s, transform 0.4s ease-in-out 0.28s; }
  &:nth-child(5) { transition: opacity 0.4s ease-in-out 0.35s, transform 0.4s ease-in-out 0.35s; }
  &:nth-child(6) { transition: opacity 0.4s ease-in-out 0.42s, transform 0.4s ease-in-out 0.42s; }
  &:nth-child(7) { transition: opacity 0.4s ease-in-out 0.49s, transform 0.4s ease-in-out 0.49s; }
  &:nth-child(8) { transition: opacity 0.4s ease-in-out 0.56s, transform 0.4s ease-in-out 0.56s; }
  &:nth-child(9) { transition: opacity 0.4s ease-in-out 0.63s, transform 0.4s ease-in-out 0.63s; }
  &:nth-child(10) { transition: opacity 0.4s ease-in-out 0.70s, transform 0.4s ease-in-out 0.70s; }
  &:nth-child(11) { transition: opacity 0.4s ease-in-out 0.77s, transform 0.4s ease-in-out 0.77s; }
  &:nth-child(12) { transition: opacity 0.4s ease-in-out 0.84s, transform 0.4s ease-in-out 0.84s; }
  &:nth-child(13) { transition: opacity 0.4s ease-in-out 0.91s, transform 0.4s ease-in-out 0.91s; }
  &:nth-child(14) { transition: opacity 0.4s ease-in-out 0.98s, transform 0.4s ease-in-out 0.98s; }
  &:nth-child(15) { transition: opacity 0.4s ease-in-out 1.05s, transform 0.4s ease-in-out 1.05s; }
}

.c-game-thumbnail__game-img {
  width: 150px;
  height: 150px;
  margin-bottom: 5px;
  background: black;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.5);
  transition: border 0.3s;
  img {
      transition: transform 0.3s;
  }
}
.c-game-thumbnail__game-text {
  font-size: 16px;
  line-height: 1em;
  transition: color 0.3s;
}

/* ---- Submit Button Component ---- */
.c-submit-button {
  display: inline-block; position: relative;
  padding: 10px 30px;
  font-size: 20px; font-weight: bold;
  line-height: 1.1em;
  text-transform: uppercase;
  color: black;
  background: linear-gradient(270deg, rgba(179,225,28,1) 0%, rgba(115,197,149,1) 52%, rgba(11,151,198,1)  100%);
  color: var(--submit-button-v1-text);
  background: var(--submit-button-v1-bg);
  border-radius: 35px;
  cursor: pointer;
  -webkit-transition: background 1s ease-out;  
  -moz-transition: background 1s ease-out;  
  -o-transition: background 1s ease-out;  
  transition: background 1s ease-out;
  overflow: hidden;
  &:hover{
    &:before{ 
        opacity: 1;
    }
  }
  &:before{
    opacity: 0;
    content: '';
    transition: opacity 0.3s;
    background: red;
    width: 100%; height: 100%;
    position: absolute;
    left: 0; top:0;
    background: linear-gradient(270deg, rgba(207,245,41,1) 0%, rgba(143,212,176,1) 52%, rgba(25,185,220,1)   100%);
    background: var(--submit-button-v1-bg-hover);
    z-index: 0;
  }
}
.c-submit-button--v2 {
  background: var(--submit-button-v2-bg);
  color: var(--submit-button-v2-text);
  &:before{ 
      background: var(--submit-button-v2-bg-hover);
  }
}
.c-submit-button__text {
  position: relative;
  z-index:1;
}

/* ---- Submit Modal Component ---- */
.c-submit-modal {
  opacity: 0;
  transition: opacity 0.3s;
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  background: rgba(0,0,0,0.9);
  &.active{
      opacity: 1;
  }
}
.c-submit-modal__shell {
  width: 1000px;
  position: relative;
  border-radius: 30px;
  background: rgba(255,255,255, 0.2);
  padding: 20px 10px 40px;
  text-align: center;
}
.c-submit-modal__title { 
  font-size: 30px; margin-bottom: 20px;
  font-weight: bold; text-transform: uppercase;
}
.c-submit-modal__games {
  display: flex;
  gap: 20px 10px;
  margin: 0 auto;
  align-content: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.c-submit-modal__close-icon {
  position: absolute;
  right: 25px;
  top: 25px;
  cursor: pointer;
  transition: opacity 0.3s 0.7s;
  width: 31px; height: 31px;
  background: url('https://nxcache.nexon.net/support/2024/global-2025/v-1.1.0/imgs/global/ui/close-icon.png') center center/ 100% auto;
  transition: background 0.3s;
  &:hover, &:after {
    content: '';
    background-image: url('https://nxcache.nexon.net/support/2024/global-2025/v-1.1.0/imgs/global/ui/close-icon-hover.png');
  }
}

@media (max-width: 1050px) {
  /* ---- Submit Modal  ---- */
  /* Hide Submit Modal on Mobile as submit button works as showing game list */
  .c-submit-modal {
    display: none;
  }
}


/* ---- Sub Page Header Component ---- */
.c-sub-page-header {
  padding: 24px 0px;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  margin-bottom: 40px;
  h1 { margin-bottom: 0;}
  .c-sub-page-header__p {
    margin: 0;
  }
  .breadcrumbs {
    margin: 0 0 6px 0;
    padding: 0;
  }
  .breadcrumbs{
    li {
      display: inline;
      font-weight: 300;
      font-size: 18px;
      max-width: 450px;
      overflow: hidden;
      text-overflow: ellipsis;
      a {
        display: inline-block;
        text-decoration: none;
        color: white;
        &:hover {
          color: var(--accent-color) !important;
        }
        &:visited {
          color: rgba(255,255,255,0.5); 
        }
      }
    }
      li + li::before {
      content: ">";
      margin: 0 4px;
    }
  }
}
.c-sub-page-header__title {
  font-size: 36px; line-height: 1.1em;
}


/* ---- Article Page Component ---- */
.c-article {
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  margin-bottom: 26px;
  display: flex;
  gap: 15px;
}

.c-article-side-links {
  width: 100px;
  font-size: 16px;
  flex: 1.5;
  display: none;
}
.c-article-side-links__title {
  font-size: 16px;
}
a.c-article-side-links__link {
  color: white !important;
  text-decoration: none !important;
  display: inline-block;
  line-height: 1.2em;
  margin-bottom: 10px;
  &.current-article {
    color: var(--accent-color) !important;
  }
  &:hover {
    color: var(--accent-color) !important;
  }
}

.c-article-body {
  flex: 7.5;
  font-size: 18px;
  ul {
    margin-bottom: 10px;
  }
  img {
    margin-top: 10px; margin-bottom: 10px;
    max-width: 100%; height: auto;
  }
  a {
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-color: var(--accent-color);
  }
  > p:first-child {
    margin-top: 0;
  }
}

.c-article-vote {
  margin-bottom: 40px;
}
.c-article-vote__question {
  font-size: 18px;
  margin-bottom: 20px;
}
.c-article-vote__shell {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.c-article-vote__controls {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-bottom: 45px;
}
.c-article-vote__control-vote-up, .c-article-vote__control-vote-down {
  line-height: 1em;
  background: none;
  font-size: 18px;
  border-radius: 20px; border: 1px solid var(--accent-color); 
  padding: 4px 20px;
  color: var(--accent-color);
  &:after {
    font-weight: bold;
    font-family: 'Titillium Web', sans-serif;
  }
  &:before{ 
    font-size: 14px;
    margin-right: 10px;
    display: inline-block;  
  }
  &:hover, &[aria-selected="true"]{
    color: white;
    background: var(--accent-color);
  }
}
.c-article-vote__control-vote-up {
  &:after{
    content: "YES";
  }
}
.c-article-vote__control-vote-down {
  &:after{
    content: "NO";
  }
}

.article-relatives {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  a {
    color: var(--accent-color);
  }
  .recent-articles {}
  .related-articles{}
}
.recent-articles-title {
  margin-bottom: 5px; 
}

@media (max-width: 700px) {
  .c-article-side-links { 
    display: none;
  }
}

@media (max-width: 560px) {
  .article-relatives { 
    flex-direction: column;
  }
}


/* ---- Article Form Component ---- */
.c-form {
  form { max-width: 500px; margin: 0 auto;}
  label { font-size: 18px; margin-bottom: 10px;}
  input[type="text"], a.nesty-input, textarea { 
    background: #0a0c0e; border-color: #858586; color: white; font-size: 18px;
    padding-left: 20px; padding-right: 20px;
    &:focus {
        border-color: var(--accent-color);
    }
  }
  p { font-size: 15px; line-height: 1.1em; color: rgba(255,255,255, 0.3)}
  .upload-dropzone {
    font-size: 18px;
    a { color: var(--accent-color); font-size: 18px; }
  }
  footer {
    margin: 20px 0;
    text-align: center;
    input[type="submit"] {
      background: var(--accent-color);
      transition: background 0.3s;
      &:hover {
        background: var(--accent-color-hover);
      }
    }
  }
}

/* ---- Article List ---- */
.c-article-list { }
.c-article-list__section { margin-bottom: 30px; }
.c-article-list__section-title { line-height: 1.1em; margin-bottom: 10px;
  a { color: white; }
}
.c-article-section-title {
  margin-bottom: 10px;
}
.c-article-list__list {}
.c-article-list__item {
  font-size: 18px; display: flex;
  align-items: center;
  margin-bottom: 5px;
  .icon-star { margin-right: 6px; margin-bottom: 4px; }
}
.c-article-list__see-all-articles {
  font-weight: bold;
}


/* ---- Search Results Component ---- */
.c-search-result { }
.c-search-result__title {
  margin-bottom: 8px; line-height: 1.1em;
}
.c-search-result__item-title {
  font-size: 18px;
  color: var(--accent-color);
  margin-bottom: 10px;
}
.c-search-result__item-info {
  display: flex;
  gap: 20px;
  font-size: 14px;
  opacity: 0.4;
}
.c-search-result__item {
  margin-bottom: 20px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}


/* ---- Search Component ---- */
.c-search {
  &:before {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\eaaed";
    color: #000000;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    z-index: 3;
    pointer-events: none;
  }
  &:hover {
    &:before {
      color: var(--accent-color);
    }
  }
  &.focused{
    &:before {
      color: var(--accent-color);
    }
    input[type="submit"] { 
        display: block;	
    }
    input[type="search"] {
      cursor: auto;
      padding: 10px 35px 10px 20px;
      width: 420px;
      &::placeholder {    
        color: #7f7f7f;
      }
    }
  }
  input[type="search"] {
  text-transform: capitalize;
  box-sizing: border-box;
  width: 44px;
  height: 44px; 
  border-radius: 50px;
  border: none;
  transition: width 0.3s, padding 0.3s;
  font-size: 18px;
  cursor: pointer;
  /* background: url('https://nxcache.nexon.net/support/2024/global-2025/v-1.1.0/imgs/global/ui/search-icon.png') #ffffff no-repeat right 12px center;
   */
    &::placeholder {
      transition: color 0.3s 0.1s;
      color: transparent;
    }
  }
  input[type="submit"] {
    display: none;
    position: absolute;
    font-size: 0;
    width: 45px; height: 45px;
    right: 0; top: 0;
    padding: 0;
    min-width: 0;
    background: none;
  }
}
.c-search--mobile {
  position: static;
  flex: 1;
  input[type="search"] {
    padding: 10px 30px 10px 20px;
    width: 100%;
    &::placeholder {
      color: #7f7f7f;
    }
  }
  &:before{
    display: none;
  }
}

/* ---- Request Sign In Button ---- */
.c-signin-button {
  text-align: center;
  a {
    min-width: 190px;
    background: none;
 		border: 1px solid var(--accent-color);
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--accent-color);
    &:hover{
      background: var(--accent-color);
      font-size: 18px;
      text-transform: uppercase;
      font-weight: bold;
    }
  }
}

.c-signin-button__form-requirements-error {
  color: #cc1c21;
  font-weight: bold;
  margin: 16px 0;
  text-align: center;
}