.text-orange {
  color: rgb(252, 116, 74);
}

.bg-orange {
  background: rgb(252, 116, 74);
}

.border-orange {
  border-color: rgb(252, 116, 74);
}

.hover-text-orange:hover {
  color: rgb(252, 116, 74);
}

.text-yellow {
  color: #f8c520;
}

.bg-yellow {
  background: #f8c520;
}

.border-yellow {
  border-color: #f8c520;
}

.hover-text-yellow:hover {
  color: #f8c520;
}

.text-sky-blue {
  color: #66bdd8;
}

.bg-sky-blue {
  background: #66bdd8;
}

.border-sky-blue {
  border-color: #66bdd8;
}

.hover-text-sky-blue:hover {
  color: #66bdd8;
}

.text-body-white {
  color: #f1f1f1;
}

.bg-body-white {
  background: #f1f1f1;
}

.border-body-white {
  border-color: #f1f1f1;
}

.hover-text-body-white:hover {
  color: #f1f1f1;
}

.text-gray {
  color: #8a8a8a;
}

.bg-gray {
  background: #8a8a8a;
}

.border-gray {
  border-color: #8a8a8a;
}

.hover-text-gray:hover {
  color: #8a8a8a;
}

.text-light-gray {
  color: #e6e6e6;
}

.bg-light-gray {
  background: #e6e6e6;
}

.border-light-gray {
  border-color: #e6e6e6;
}

.hover-text-light-gray:hover {
  color: #e6e6e6;
}

.text-smoke {
  color: #cdcdcd;
}

.bg-smoke {
  background: #cdcdcd;
}

.border-smoke {
  border-color: #cdcdcd;
}

.hover-text-smoke:hover {
  color: #cdcdcd;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2, .podcast-card .podcast-info .podcast-name, .author-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3, .product-card .product-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-base, .btn-light-gray, .btn-stroke-orange, .btn-orange {
  width: 100%;
  height: 2.75rem;
  border-radius: 9999px;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  transition: background-color 0.15s;
}

.btn-orange {
  background-color: rgb(252, 116, 74);
  color: #fff;
}
.btn-orange:hover {
  background-color: rgba(235, 59, 4, 0.8);
}

.btn-stroke-orange {
  border: 1px solid rgb(252, 116, 74);
  color: rgb(252, 116, 74);
}
.btn-stroke-orange:hover {
  background-color: rgb(252, 116, 74);
  color: #fff;
}
.btn-stroke-orange:hover img {
  filter: brightness(100);
}

.btn-light-gray {
  background-color: #e6e6e6;
  color: #8a8a8a;
}

.text-link {
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.sm-scrollbar::-webkit-scrollbar {
  width: 6px;
}

nav #mobile-nav-menu-button {
  width: 1.5rem;
  height: 1rem;
  position: relative;
}
nav #mobile-nav-menu-button span {
  position: absolute;
  width: 100%;
  height: 1px;
  background: white;
  left: 0;
  bottom: 0;
  transition: 0.25s;
}
nav #mobile-nav-menu-button::before, nav #mobile-nav-menu-button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: white;
  left: 0;
  transition: 0.25s;
}
nav #mobile-nav-menu-button::before {
  top: 10%;
}
nav #mobile-nav-menu-button::after {
  bottom: 40%;
}
nav #mobile-nav-menu-button.active::before {
  top: 50%;
  transform-origin: center;
  transform: rotate(45deg);
}
nav #mobile-nav-menu-button.active::after {
  top: 50%;
  transform-origin: center;
  transform: rotate(-45deg);
  background: white;
}
nav #mobile-nav-menu-button.active span {
  opacity: 0;
}

#search-popup .nav-search-category button {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.5rem 2.25rem;
}
#search-popup .nav-search-category button.active {
  background: rgb(252, 116, 74);
  color: #fff;
}
#search-popup .nav-search-category button.active::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='11' viewBox='0 0 18 11' %3E%3Cpath d='M12.7046 10.2328L17.4375 5.49996L12.7046 0.76709L11.9091 1.56261L15.284 4.9375L0.589359 4.9375L0.589359 6.0625L15.2839 6.0625L11.9091 9.43732L12.7046 10.2328Z' fill='%23fff' /%3E%3C/svg%3E");
}

* {
  touch-action: manipulation;
  font-family: "IBM Plex Sans Thai", sans-serif;
  box-sizing: border-box;
  outline: none;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  font-smooth: always;
  text-rendering: optimizeLegibility;
}

html {
  font-size: clamp(14px, 1vw, 16px);
  scroll-padding-top: 6rem;
}

body {
  background: #f1f1f1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.075s;
}
body:has(main.dark-mode) {
  background: #222;
}
body:has(main.dark-mode) footer {
  color: white;
}

.main-container, .filter-options .filter-options-content {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  position: relative;
  padding-right: 1rem;
}
@media (max-width: 1366px) {
  .main-container, .filter-options .filter-options-content {
    max-width: 1182px;
  }
}

.main-container-sm {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  position: relative;
  padding-right: 1rem;
}
@media (max-width: 980px) {
  .main-container-sm {
    max-width: 768px;
  }
}

.main-container-xs {
  width: 100%;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  position: relative;
  padding-right: 1rem;
}
@media (max-width: 0px) {
  .main-container-xs {
    max-width: 768px;
  }
}

button:disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(1);
}

::-webkit-scrollbar {
  width: 14px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.hide-scroll-bar::-webkit-scrollbar {
  height: 0;
  width: 0;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-out {
  animation: fade-out 0.6s forwards !important;
}

main#main-content {
  flex: 1 1 0;
  padding-top: 6rem;
  padding-bottom: 3rem;
  animation: fade-in 0.35s forwards;
}
@media (max-width: 1023px) {
  main#main-content {
    padding-top: 5rem;
  }
}
main#main-content.dark-mode {
  color: #fff;
}
main#main-content.dark-mode .reader-menu .icon-img {
  filter: invert(1);
}
main#main-content.dark-mode .reader-menu, main#main-content.dark-mode #text-adjust {
  background: #000;
}
main#main-content.dark-mode #text-adjust button div {
  background: #fff;
}

ul {
  padding-left: 1.75rem;
}
ul li {
  list-style-type: disc;
}

ol {
  padding-left: 1.15rem;
}
ol li {
  list-style-type: decimal;
}

input[type=checkbox] {
  accent-color: black;
  width: 0.875rem;
  height: 0.875rem;
  margin-bottom: 1px;
}

.heading-text {
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-weight: bold;
  margin-top: 2.875rem;
  margin-bottom: 2.5rem;
  text-align: center;
  text-transform: uppercase;
}
.heading-text span {
  letter-spacing: -0.4ch;
}

#filter-section {
  position: relative;
  margin-bottom: 5rem;
}
#filter-section #clear-filters {
  text-decoration: underline;
}
@media (min-width: 768px) {
  #filter-section #clear-filters {
    position: absolute;
    top: 0;
    right: 1rem;
  }
}

.filter-toggle {
  display: flex;
  align-items: center;
  font-size: 1rem;
  -moz-column-gap: 4px;
       column-gap: 4px;
  position: relative;
  text-transform: uppercase;
  animation: 0.25s ease-in-out 0.1s fade-in forwards;
  opacity: 0;
}
.filter-toggle::after {
  position: relative;
  top: 2.5px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 17 17'%3E%3Cpath d='M4.29303 11.793L8.50003 16L12.707 11.793L11.9999 11.0859L9 14.0858L9 1.02387L8 1.02387L8 14.0857L5.00016 11.0859L4.29303 11.793Z' /%3E%3C/svg%3E");
}
.filter-toggle.active {
  font-weight: 600;
  color: rgb(252, 116, 74);
}
.filter-toggle.active::after {
  top: -5px;
  transform: rotate(180deg);
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 17 17'%3E%3Cpath d='M4.29303 11.793L8.50003 16L12.707 11.793L11.9999 11.0859L9 14.0858L9 1.02387L8 1.02387L8 14.0857L5.00016 11.0859L4.29303 11.793Z' fill='%23fc744a' /%3E%3C/svg%3E");
}

.filter-options {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 1rem;
  box-shadow: 0px 24px 24px 0px rgba(0, 0, 0, 0.06);
  background: #f1f1f1;
  display: flex;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
  opacity: 0;
  visibility: hidden;
}
.filter-options .filter-options-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-content: start;
  overflow-y: auto;
  gap: 2rem;
  max-height: 20rem;
  min-height: 5rem;
  flex: 1 1 fit-content;
  padding: 1rem;
  position: relative;
}
.filter-options .filter-options-content > *:hover {
  color: rgb(252, 116, 74);
}
.filter-options .filter-options-content .active {
  color: rgb(252, 116, 74);
  font-weight: bold;
}
.filter-options .filter-options-content * {
  text-align: left;
}
@media (max-width: 640px) {
  .filter-options .filter-options-content {
    grid-template-columns: 1fr 1fr;
  }
}

.product-card {
  width: 100%;
  max-width: 15rem;
  text-align: center;
}
.product-card * {
  pointer-events: none;
}
.product-card:has(.hover-image):hover img {
  display: none;
}
.product-card:has(.hover-image):hover .hover-image {
  display: block;
}
.product-card:hover .product-name {
  color: rgb(252, 116, 74);
}
.product-card figure {
  width: 100%;
  max-width: 14.5rem;
  margin-bottom: 1rem;
}
.product-card figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 0.7;
  -o-object-fit: cover;
     object-fit: cover;
}
.product-card figure .hover-image {
  display: none;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.product-card .product-name {
  font-size: 1.125rem;
  font-weight: bold;
  margin-top: 0.5rem;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.author-card {
  width: 100%;
  max-width: 15rem;
  text-align: center;
  opacity: 0;
}
.author-card * {
  pointer-events: none;
}
.author-card figure {
  background: #e0e0e0;
  width: 100%;
  max-width: 14.5rem;
  aspect-ratio: 1;
  border-radius: 9999px;
  overflow: hidden;
}
.author-card figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.5s;
}
.author-card p {
  font-size: 1.125rem;
  margin-top: 1.5rem;
  line-height: 1.25;
}

.infinite-scroll-loader {
  position: absolute;
  bottom: 0;
  width: 2.5rem;
  height: 2.5rem;
  animation: loaderAnim 1.25s linear infinite;
  transform-origin: center;
}
@keyframes loaderAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.infinite-scroll-loader::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 2 38 38'%3E%3Cpath d='M18.4999 0.599609C19.0304 0.599609 19.5391 0.810323 19.9141 1.1854C20.2892 1.56047 20.4999 2.06918 20.4999 2.59961V8.59961C20.4999 9.13004 20.2892 9.63875 19.9141 10.0138C19.5391 10.3889 19.0304 10.5996 18.4999 10.5996C17.9695 10.5996 17.4608 10.3889 17.0857 10.0138C16.7106 9.63875 16.4999 9.13004 16.4999 8.59961V2.59961C16.4999 2.06918 16.7106 1.56047 17.0857 1.1854C17.4608 0.810323 17.9695 0.599609 18.4999 0.599609ZM18.4999 30.5996C19.0304 30.5996 19.5391 30.8103 19.9141 31.1854C20.2892 31.5605 20.4999 32.0692 20.4999 32.5996V38.5996C20.4999 39.13 20.2892 39.6388 19.9141 40.0138C19.5391 40.3889 19.0304 40.5996 18.4999 40.5996C17.9695 40.5996 17.4608 40.3889 17.0857 40.0138C16.7106 39.6388 16.4999 39.13 16.4999 38.5996V32.5996C16.4999 32.0692 16.7106 31.5605 17.0857 31.1854C17.4608 30.8103 17.9695 30.5996 18.4999 30.5996ZM35.8199 10.5996C36.0851 11.059 36.157 11.6049 36.0197 12.1172C35.8825 12.6296 35.5473 13.0664 35.0879 13.3316L29.8919 16.3316C29.6644 16.465 29.4127 16.5521 29.1514 16.5878C28.89 16.6235 28.6242 16.6072 28.3692 16.5398C28.1142 16.4724 27.8751 16.3552 27.6656 16.195C27.456 16.0348 27.2803 15.8347 27.1484 15.6063C27.0165 15.3778 26.9311 15.1256 26.8971 14.864C26.8631 14.6025 26.8812 14.3368 26.9503 14.0822C27.0194 13.8277 27.1382 13.5893 27.2998 13.3809C27.4614 13.1724 27.6626 12.998 27.8919 12.8676L33.0879 9.86761C33.5473 9.6024 34.0932 9.53054 34.6055 9.66781C35.1179 9.80509 35.5547 10.1403 35.8199 10.5996ZM9.83993 25.5996C9.97116 25.8272 10.0563 26.0784 10.0904 26.3388C10.1245 26.5993 10.107 26.864 10.0389 27.1177C9.97071 27.3714 9.85324 27.6091 9.69316 27.8174C9.53308 28.0257 9.33354 28.2004 9.10593 28.3316L3.90993 31.3316C3.68238 31.465 3.43071 31.5521 3.16938 31.5878C2.90805 31.6235 2.64223 31.6072 2.38723 31.5398C2.13224 31.4724 1.89309 31.3552 1.68357 31.195C1.47404 31.0348 1.29828 30.8347 1.1664 30.6063C1.03452 30.3778 0.949118 30.1256 0.915121 29.864C0.881124 29.6025 0.899199 29.3368 0.968306 29.0822C1.03741 28.8277 1.15619 28.5893 1.31779 28.3809C1.4794 28.1724 1.68064 27.998 1.90993 27.8676L7.10593 24.8676C7.56528 24.6024 8.11118 24.5305 8.62352 24.6678C9.13587 24.8051 9.5747 25.1403 9.83993 25.5996ZM35.8199 30.5996C35.5547 31.059 35.1179 31.3941 34.6055 31.5314C34.0932 31.6687 33.5473 31.5968 33.0879 31.3316L27.8919 28.3316C27.4363 28.0645 27.1048 27.628 26.9699 27.1174C26.8349 26.6069 26.9073 26.0636 27.1714 25.6062C27.4354 25.1488 27.8697 24.8145 28.3794 24.6761C28.8891 24.5377 29.4328 24.6066 29.8919 24.8676L35.0879 27.8676C35.5473 28.1328 35.8825 28.5697 36.0197 29.082C36.157 29.5944 36.0851 30.1403 35.8199 30.5996ZM9.83993 15.5996C9.7086 15.8273 9.53367 16.0269 9.32515 16.187C9.11662 16.347 8.87859 16.4644 8.62467 16.5324C8.37075 16.6004 8.10591 16.6176 7.84531 16.5832C7.58472 16.5487 7.33346 16.4632 7.10593 16.3316L1.90993 13.3316C1.68064 13.2012 1.4794 13.0268 1.31779 12.8184C1.15619 12.6099 1.03741 12.3715 0.968306 12.117C0.899199 11.8624 0.881124 11.5967 0.915121 11.3352C0.949118 11.0736 1.03452 10.8214 1.1664 10.593C1.29828 10.3645 1.47404 10.1645 1.68357 10.0042C1.89309 9.84402 2.13224 9.72683 2.38723 9.65941C2.64223 9.59199 2.90805 9.57568 3.16938 9.61141C3.43071 9.64714 3.68238 9.73421 3.90993 9.86761L9.10593 12.8676C9.33354 12.9988 9.53308 13.1735 9.69316 13.3818C9.85324 13.5901 9.97071 13.8279 10.0389 14.0816C10.107 14.3353 10.1245 14.5999 10.0904 14.8604C10.0563 15.1208 9.97116 15.372 9.83993 15.5996Z' fill='%23fc744a' /%3E%3C/svg%3E");
  position: absolute;
  left: 0%;
  top: 0;
  width: 100%;
  height: 100%;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 0 1rem;
  margin-top: 2.5rem;
  margin-bottom: 3.5rem;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  text-transform: uppercase;
}
.breadcrumb a:first-of-type {
  color: rgb(252, 116, 74);
}
@media (max-width: 1024px) {
  .breadcrumb {
    margin-bottom: 2.5rem;
  }
}

.product-increment {
  height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid #cdcdcd;
  width: -moz-fit-content;
  width: fit-content;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.product-increment input, .product-increment button {
  font-weight: 700;
}
.product-increment input {
  width: 5ch;
  text-align: center;
  background: transparent;
}
.product-increment input::-webkit-outer-spin-button, .product-increment input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.article-card {
  width: 100%;
  max-width: 30rem;
}
.article-card * {
  pointer-events: none;
}
.article-card:hover img {
  transform: scale(1.15);
}
.article-card:hover .article-name {
  color: rgb(252, 116, 74);
}
.article-card figure {
  width: 100%;
  aspect-ratio: 16/9;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.article-card figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  transition: transform 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.article-card .article-name, .article-card .article-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card .article-name {
  font-size: 1.25rem;
  font-weight: bold;
  height: 3.25rem;
  margin-bottom: 0.7rem;
  line-height: 1.4;
}
@media (max-width: 1023px) {
  .article-card .article-name {
    height: -moz-fit-content;
    height: fit-content;
  }
}

.media-card {
  width: 100%;
  max-width: 25rem;
}
.media-card * {
  pointer-events: none;
}
.media-card:hover img {
  transform: scale(1.1) rotate(-5deg);
}
.media-card:hover .media-name {
  color: rgb(252, 116, 74);
}
.media-card figure {
  width: 100%;
  aspect-ratio: 1/1;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.media-card figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  transition: transform 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.media-card .media-name, .media-card .media-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-card .media-desc {
  -webkit-line-clamp: 2;
}
.media-card .media-name {
  font-size: 1.25rem;
  font-weight: bold;
  -webkit-line-clamp: 1;
  margin-bottom: 0.7rem;
  line-height: 1.4;
}
@media (max-width: 1023px) {
  .media-card .media-name {
    height: -moz-fit-content;
    height: fit-content;
  }
}

.pagination-dot {
  width: 1.625rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #d9d9d9;
  position: relative;
  overflow: hidden;
}
.pagination-dot.active .active-interval {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 9999px;
  background: rgb(252, 116, 74);
}

.pagination-container {
  text-align: center;
}
.pagination-container .pagination {
  display: flex;
  justify-content: center;
  -moz-column-gap: 0.4rem;
       column-gap: 0.4rem;
  padding: 0;
  margin: 0;
}
.pagination-container .pagination button,
.pagination-container .pagination a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  cursor: pointer;
  color: #a6a6a6;
  font-weight: 400;
  margin-top: 2.5px;
}
.pagination-container .pagination button.active,
.pagination-container .pagination a.active {
  background-color: rgb(252, 116, 74);
  color: #fff;
}
.pagination-container .pagination button img,
.pagination-container .pagination a img {
  margin-bottom: 2.5px;
}

.theme-input {
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0.25rem;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.theme-input:hover {
  border-color: rgb(252, 116, 74);
}
.theme-input:is(select) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z' /><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 99.75%;
  background-position-y: 50%;
}
.theme-input:focus {
  border-color: rgb(252, 116, 74);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.theme-input[type=text] ~ .show-password-button {
  opacity: 0.25;
}
.theme-input::-webkit-outer-spin-button, .theme-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  row-gap: 0.25rem;
}
.input-wrapper label {
  font-size: 0.875rem;
}
.input-wrapper .show-password-button {
  position: absolute;
  bottom: 0.75rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.input-wrapper .show-password-button::after {
  position: absolute;
  content: url('data:image/svg+xml;utf8,<svg stroke="black" fill="black" stroke-width="0" viewBox="0 0 16 16" height="1.5rem" width="1.25rem" xmlns="http://www.w3.org/2000/svg"><path d="M7.99993 6.00316C9.47266 6.00316 10.6666 7.19708 10.6666 8.66981C10.6666 10.1426 9.47266 11.3365 7.99993 11.3365C6.52715 11.3365 5.33324 10.1426 5.33324 8.66981C5.33324 7.19708 6.52715 6.00316 7.99993 6.00316ZM7.99993 7.00315C7.07946 7.00315 6.33324 7.74935 6.33324 8.66981C6.33324 9.59028 7.07946 10.3365 7.99993 10.3365C8.9204 10.3365 9.6666 9.59028 9.6666 8.66981C9.6666 7.74935 8.9204 7.00315 7.99993 7.00315ZM7.99993 3.66675C11.0756 3.66675 13.7307 5.76675 14.4673 8.70968C14.5344 8.97755 14.3716 9.24908 14.1037 9.31615C13.8358 9.38315 13.5643 9.22041 13.4973 8.95248C12.8713 6.45205 10.6141 4.66675 7.99993 4.66675C5.38454 4.66675 3.12664 6.45359 2.50182 8.95555C2.43491 9.22341 2.16348 9.38635 1.89557 9.31948C1.62766 9.25255 1.46471 8.98115 1.53162 8.71321C2.26701 5.76856 4.9229 3.66675 7.99993 3.66675Z"></path></svg>');
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.input-wrapper:has(input:required, select:required) label {
  position: relative;
}
.input-wrapper:has(input:required, select:required) label::after {
  content: " *";
}

.podcast-card {
  display: flex;
  gap: 1.5rem;
  padding: 2.75rem 0;
  border-color: #ddd;
}
@media (max-width: 767px) {
  .podcast-card {
    margin: 0 auto;
    flex-direction: column;
  }
}
.podcast-card figure {
  flex: 0.5;
  aspect-ratio: 16/9;
}
.podcast-card figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.podcast-card .podcast-info {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  flex: 1;
}
@media (max-width: 767px) {
  .podcast-card .podcast-info {
    text-align: center;
    align-items: center;
  }
}
.podcast-card .podcast-info .podcast-detail {
  font-size: 0.875rem;
}
.podcast-card .podcast-info .podcast-name {
  font-weight: bold;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
}
.podcast-card .podcast-info .podcast-actions {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 767px) {
  .podcast-card .podcast-info .podcast-actions {
    flex-direction: column;
    align-items: center;
  }
}
.podcast-card .podcast-info .podcast-actions .playby-list {
  display: flex;
  gap: 1rem;
}
.podcast-card .podcast-info .podcast-actions .playby-list a {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 999px;
  background: #fff;
}
.podcast-card .podcast-info .podcast-actions .playby-list a:hover {
  background: rgba(255, 255, 255, 0.6);
}

.gravity-hover {
  animation: gravity-hover-anim 1.25s forwards;
}

@keyframes gravity-hover-anim {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(var(--gravity-x, 0), var(--gravity-y, 0));
  }
  75% {
    transform: translate(calc(var(--gravity-x, 0) * -1 / 2), calc(var(--gravity-y, 0) * -1 / 2));
  }
  100% {
    transform: translate(0, 0);
  }
}/*# sourceMappingURL=global.css.map */