/*
Theme Name: Fictioneer Child
Template: fictioneer
Author: Tetrakern
Author URI: https://github.com/Tetrakern
Donate link: https://ko-fi.com/tetrakern
Contributors: tetrakern

License: GNU General Public License v3.0 or later
License URI: http://www.gnu.org/licenses/gpl.html

Requires at least: 5.5
Tested up to: 6.5.0
Requires PHP: 7.4
Version: 1.0.2

Description: A blank child theme for Fictioneer.

Fictioneer Child WordPress Theme, (C) 2023 Tetrakern
Fictioneer Child is distributed under the terms of the GNU GPL.
*/

/* ===================== CUSTOM CSS ======================= */
.chapter__translate {
    display: none;
    position: absolute;
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
    top: 40px;
    right: 10px;
    border-radius: 5px;
}
.chapter__translate.show {
    display: block;
}
.skiptranslate iframe {
    display: none !important;
}

#translate-button {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
@media (max-width: 768px) {
    #translate-button span {
        display: none;
    }
}
/* Menambahkan padding dan margin agar dropdown berada di atas dan tidak menutupi elemen lain */
                .fictioneer-meta-field__wrapper {
                    margin-top: 5px !important;  /* Memberikan jarak atas */
                    margin-bottom: 10px !important;  /* Memberikan jarak bawah */
                    padding-bottom: 10px !important;  /* Memberikan padding bawah */
                    clear: both;  /* Menghindari elemen tumpang tindih */
                }

                /* Menambahkan styling dropdown */
                .fictioneer-meta-field__wrapper select {
                    padding: 2px;
                    border-radius: 5px;
                    border: 1px solid #ccc;  /* Sesuaikan dengan warna tema */
                    width: 100%;  /* Menyesuaikan lebar dropdown */
                    box-sizing: border-box;  /* Agar padding tidak mengubah ukuran dropdown */
                }
/* Container untuk tag dan peringatan */
.story__tags-and-warnings {
  width: 100%;
  overflow-x: auto; /* Menampilkan scrollbar horizontal */
  white-space: normal; /* Membolehkan tag untuk berpindah baris jika perlu */
  max-height: 4em; /* Batasi tinggi container jika tag lebih banyak */
}

/* Container untuk tag-pill */
.story__tags-and-warnings .tags-container {
  display: flex;
  flex-wrap: wrap; /* Membungkus tag jika diperlukan */
  gap: 10px; /* Jarak antar tag */
  justify-content: flex-start; /* Mengatur tag untuk tampil di kiri */
}

.story__tags-and-warnings .tags-container .tag-pill {
  margin-right: -7px;
  padding: 6px 10px;
  background-color: #1e1e1e; /* Warna gelap untuk pill */
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  color: #00ffc3; /* Hijau untuk teks */
}


/* Custom scrollbar untuk Webkit browsers */
.story__tags-and-warnings::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 101px;
}

.story__tags-and-warnings::-webkit-scrollbar-track {
  background-color: transparent;
}
 
  .story__tags-and-warnings {
    overflow-x: auto; /* Scrollbar tetap muncul di mobile */
  } 

.fictioneer-login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 18px auto 3px;
  padding: 20px;
  background-color: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 0 10px #00ffc3;
  max-width: 100%;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fictioneer-login-label {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #00ffc3;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

.fictioneer-login-link {
  display: inline-block;
  padding: 12px 24px;
  margin: 10px;
  background-color: #333;
  color: #00ffc3;
  border-radius: 6px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.fictioneer-login-link:hover {
  background-color: #555;
}

.fictioneer-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  width: 100%;
}

.fictioneer-login-button i {
  margin-right: 8px;
}

.fictioneer-login-button span {
  display: inline-block;
  vertical-align: middle;
}