@import "./styles/base.css";

@layer vocs_preflight {
  @tailwind base;
}

@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-themed-primary {
    @apply dark:text-white text-black-80;
  }
  .text-themed-secondary {
    @apply dark:text-white-50 text-black-50;
  }
  .hover-fade {
    @apply opacity-100 hover:opacity-50 transition-opacity;
  }
  .bg-matrix-dark {
    background: linear-gradient(0deg, #111 0%, transparent 30%, transparent 70%, #111 100%),
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(17, 17, 17, 0.6) 40%,
        rgba(17, 17, 17, 0.6) 60%,
        transparent 100%
      ), url(/img/matrix-bg-dark.svg);
    background-size: cover;
    background-position: center center;
  }
  .bg-matrix-light {
    background: linear-gradient(
        0deg,
        #f0f0f0 0%,
        rgba(240, 240, 240, 0.6) 30%,
        rgba(240, 240, 240, 0.6) 70%,
        #f0f0f0 100%
      ),
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(240, 240, 240, 0.6) 40%,
        rgba(240, 240, 240, 0.6) 60%,
        transparent 100%
      ), url(/img/matrix-bg-light.svg);
    background-size: cover;
    background-position: center center;
  }
  .bg-gradient-dark {
    background: linear-gradient(
        90deg,
        rgba(17, 17, 17, 0) 0%,
        rgba(17, 17, 17, 0.75) 50%,
        rgba(17, 17, 17, 0) 100%
      ),
      linear-gradient(180deg, #111 0%, rgba(17, 17, 17, 0) 40%, rgba(17, 17, 17, 0) 60%, #111 100%),
      linear-gradient(270deg, rgba(11, 106, 249, 0.25) 0%, rgba(29, 146, 255, 0.3) 100%);
  }
  .bg-gradient-light {
    background: linear-gradient(180deg, #f0f0f0 0%, rgba(255, 255, 255, 0) 49.83%, #f0f0f0 100%),
      linear-gradient(
        90deg,
        #d2e4ff 0%,
        rgba(210, 228, 255, 0.5) 25.3%,
        rgba(255, 255, 255, 0) 49.83%,
        rgba(210, 228, 255, 0.5) 75.47%,
        #d2e4ff 100%
      );
  }
}

#home-install .vocs_CodeGroup {
  display: flex;
  height: 100%;
  flex-direction: column;
}

#home-install .vocs_Tabs_content {
  flex: 1;
}

#home-install .vocs_Code {
  font-size: 18px;
}

/* :root.dark {
  --vocs-color_background: black;
} */

.vocs_Anchor {
  /* color: red; */
  /* --vocs-color_link: yellow; */
}

.vocs_MobileTopNav_navigation {
  display: block !important;
}

/* 
.vocs_H1 {
  color: red;
} */

.tabs {
  display: flex;
}

.tabs button {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.tabs button.active {
  border-bottom-color: white;
  font-weight: bold;
}

.tab-panels {
  padding-top: 20px;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust minmax as needed */
  gap: 1rem; /* Adjust the gap as needed */
  padding: 1rem;
  /* background-color: #1a1a1a; Dark background as shown in the image */
}

.card {
  background-color: #3c393f;
  border-radius: 10px;
  height: 240px;
  padding: 1rem;
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-icon {
  /* Add styles for your icon */
  font-size: 2rem; /* Example size */
}

.card-content {
  margin: auto;
  margin-top: 1rem;
}

.card-title {
  margin: 0;
  font-size: 1.25rem;
}

.card-description {
  margin: 0;
  font-size: 1rem;
  opacity: 0.7;
}

.card-link {
  text-decoration: none; /* Removes underline from links */
  color: inherit; /* Inherits text color from parent */
}

.DocSearch-Button {
  align-items: center;
  background-color: var(--vocs-color_backgroundDark) !important;
  border: 1px solid var(--vocs-color_backgroundDark) !important;
  border-radius: var(--vocs-borderRadius_8) !important;
  color: var(--vocs-color_text2) !important;
  display: flex !important;
  font-size: var(--vocs-fontSize_14) !important;
  font-weight: var(--vocs-fontWeight_medium) !important;
  gap: var(--vocs-space_6) !important;
  height: var(--vocs-space_40) !important;
  max-width: 15.5rem !important;
  padding-left: var(--vocs-space_12) !important;
  padding-right: var(--vocs-space_12) !important;
  position: fixed !important;
  width: 100% !important;
  transition: color 0.1s, border-color 0.1s !important;
  top: calc(var(--vocs-topNav_height) / 2);
  transform: translateY(-50%);
  right: calc(var(--vocs-topNav_horizontalPadding) + 53%);
  z-index: 40;
}

@media (max-width: 1400px) {
  .DocSearch-Button {
    right: calc(var(--vocs-topNav_horizontalPadding) + 53%);
  }
}

@media (max-width: 1200px) {
  .DocSearch-Button {
    right: calc(var(--vocs-topNav_horizontalPadding) + 53%);
    max-width: 170px !important;
  }
}

@media (max-width: 1080px) {
  .DocSearch-Button {
    max-width: 170px !important;
    right: calc(var(--vocs-topNav_horizontalPadding));
  }
}

@media (max-width: 900px) {
  .DocSearch-Button {
    max-width: 170px !important;
  }
}

@media (max-width: 780px) {
  .DocSearch-Button {
    right: calc(var(--vocs-topNav_horizontalPadding) - 17%);
    z-index: 1;
    width: 125px !important;
  }
}

.DocSearch-Search-Icon {
  color: var(--vocs-color_text2) !important;
}

.vocs_DesktopSearch_search {
  display: none !important;
}

.vocs_MobileSearch_searchButton {
  display: none !important;
}

.vocs_SearchDialog_overlay {
  display: none !important;
}

.vocs_SearchDialog {
  display: none !important;
}

.docs-table {
  text-align: center;
  width: 100%;
  border-collapse: collapse;
}

.docs-table th,
.docs-table td {
  text-align: left;
  padding: 8px;
  text-align: left;
  border: 1px solid #3e3e3e;
  color: white; /* For readability on the dark background */
}

.network-logos {
  width: 30px; /* Or your preferred size */
  height: auto;
  /* If you need the image to be a circle (often used for logos), uncomment below */
  /* border-radius: 50%; */
}

.cell-content {
  font-size: 14px;
  float: left;
  display: flex;
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
}

.cell-image {
  width: 30px; /* Adjust as needed */
  height: auto;
  float: left;
  margin: 5px;
  /* Aligns the image vertically with the text */
}

.cell-text {
  min-width: 140px;
}

.widget {
  display: flex;
  margin: auto;
  margin-top: 10px;
  border: 1px solid #3e3e3e;
  background-color: #1a1a1a;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 400px; /* Adjust the width as needed */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the content horizontally */
  padding: 20px; /* This adds space around everything inside the widget */
}

.widget-body {
  width: 100%; /* Full width of the parent */
  flex: 1; /* Allows the body to grow and take up available space */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center the image vertically */
  align-items: center; /* Center the image horizontally */
  margin-bottom: 0px; /* Adds space between the image/button and the footer */
}

.widget-footer {
  width: 100%; /* Full width of the parent */
  text-align: center;
  color: grey;
}

.mint-image {
  border: 1px solid #3e3e3e;
  border-radius: 15px;
  max-width: 100%; /* Ensure it fits within the parent */
  max-height: auto; /* Adjust height automatically */
  margin: 0; /* Remove any default margin */
}

.mint-button {
  margin: 5px;
  background-image: linear-gradient(to right, #7537f9, #651fff);
  color: #fff; /* Light text */
  padding: 11px 24px; /* Spacing around the text */
  border-radius: 30px; /* Rounded corners */
  font-size: 16px; /* Adjust as needed */
  font-weight: bold; /* Bold text */
  border: none; /* No border */
  cursor: pointer; /* Pointer cursor on hover */
  text-align: center; /* Center the text */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  transition: background-color 0.3s, box-shadow 0.3s; /* Transition for hover effects */
}

.mint-button:hover {
  background-image: linear-gradient(to right, #612cd2, #541ad1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* More pronounced shadow on hover */
}

.dashed-box {
  margin: 20px;
  padding: 5px;
  border: 2px dashed #541ad1; /* Creates a dashed (broken) purple border */
}

.video-container {
  position: relative;
  width: 560px;
  height: 315px;
}

.preview-image {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 100%; */
  /* height: 100%; */
  cursor: pointer;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}

.network-logo {
  border-radius: 15px;
}

.button-container {
  display: flex;
  gap: 10px; /* This adds space between the buttons */
  align-items: center; /* This centers the buttons vertically */
}

.top-auth-button_position {
  top: calc(var(--vocs-topNav_height) / 2);
  transform: translateY(-50%);
  right: calc(var(--vocs-topNav_horizontalPadding) - 40px);
  position: fixed;
  z-index: 40;
}

@media only screen and (max-width: 1080px) {
  .top-auth-button_position {
    right: calc(var(--vocs-topNav_horizontalPadding) + 200px);
  }
}

@media only screen and (max-width: 900px) {
  .top-auth-button_position {
    display: none;
  }
}

.scalar-app .relative.z-overlay {
  max-height: 25vh;
  overflow-y: auto; /* Enables vertical scrolling */
}

.scalar-container {
  z-index: 1000;
}

.top-nav-button_position {
  top: calc(var(--vocs-topNav_height) / 2);
  transform: translateY(-50%);
  right: calc(var(--vocs-topNav_horizontalPadding) - 20px);
  position: fixed;
  z-index: 40;
  cursor: pointer;
}

@media only screen and (max-width: 1080px) {
  .top-nav-button_position {
    right: calc(var(--vocs-topNav_horizontalPadding) + 250px);
  }
}

@media only screen and (max-width: 900px) {
  .top-nav-button_position {
    display: none;
  }
}
.bot-svg {
  margin-right: calc(100% - 60px);
}

svg #buddy #head-group {
  transform: translate(6px, 10px);
  animation: head-bob 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes head-bob {
  from {
    transform: translate(6px, 4px);
  }
  to {
    transform: translate(6px, 7px);
  }
}

svg #buddy #head-group #face-group {
  animation: face-turn 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear(0 0%, 0 50%, 1 60%, 1 100%);
  animation-direction: alternate;
}

@keyframes face-turn {
  to {
    transform: translate(-6px, 0px);
  }
}

svg #buddy #head-group #face-group #eye-right {
  animation: eye-blink 1.36s;
  animation-iteration-count: infinite;
  animation-timing-function: linear(0 0%, 0 95%, 1 100%);
  animation-direction: alternate;
}

svg #buddy #head-group #face-group #eye-left {
  animation: eye-blink 1.36s;
  animation-iteration-count: infinite;
  animation-timing-function: linear(0 0%, 0 95%, 1 100%);
  animation-direction: alternate;
}

@keyframes eye-blink {
  to {
    height: 2px;
    y: 16px;
  }
}

svg #buddy #arm-left-group {
  animation: arm-wave 2.36s;
  transform-origin: 14px 30px;
  transform: translateX(30px) rotate(-45deg);
  animation-iteration-count: infinite;
  animation-timing-function: linear(0 0%, 0 75%, 1 100%);
  animation-direction: alternate-reverse;
}

@keyframes arm-wave {
  to {
    transform: translateX(26px) rotate(-80deg);
  }
}

.clouds {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url("./public/img/bot/clouds.svg");
  background-repeat: repeat-x;
  background-position: 0px 50px;
  animation: slide 12s linear infinite;
}

@keyframes slide {
  0% {
    background-position: 0px 50px;
  }
  100% {
    background-position: -497px 50px;
  }
}

*::selection {
  background: #c1c1c2 !important;
  color: #101010 !important;
}

.clouds2 {
  position: absolute;
  background-image: url("./public/img/bot/clouds2.svg");
  background-repeat: repeat-x;
  animation: slide 27s linear infinite;
}

@keyframes slide {
  0% {
    background-position: 0px 50px;
  }
  100% {
    background-position: -497px 50px;
  }
}
