:root {
    /* Font Data */
    --bs-body-font-family: 'Roboto', sans-serif !important;

    /* Common Wire3 Colors */
    --color-wire3-green: #8DC63F;
    --color-wire3-green-rgb: 141, 198, 63;
    --color-wire3-green-dark: #7BBF2A;
    --color-wire3-blue: #012E6F;
    --color-wire3-navy-light: #1D3F70;
    --color-wire3-navy: #193661;
    --color-wire3-navy-dark: #132A49;

    /* Tailwind colors, I like them. */
    --color-neutral-950: oklch(14.5% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-300: oklch(87.0% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-100: oklch(97.0% 0 0);
    --color-neutral-50: oklch(98.5% 0 0);

    /* Text Colors */
    --textarea-color: black;
    --bs-heading-color: var(--color-text-primary);
    --bs-body-color: var(--color-text-secondary);
    --bs-body-color-rgb: var(--color-text-secondary) !important;

    /* Background Colors */
    --bs-body-bg: var(--bg-color-primary);
    --bs-body-secondary-bg: var(--color-neutral-300);
    --bs-body-tertiary-bg: var(--color-neutral-200);
    --bg-color-primary: var(--color-neutral-100);
    --textarea-bg: white;
}

body {
    /* Text Colors */
    --color-text-primary: rgb(0, 0, 0);
    background-color: rgb(255, 248, 247);
    --color-text-secondary: var(--color-neutral-800);
    --bs-heading-color: var(--color-text-primary);
    --bs-body-color: var(--color-text-secondary);
    --bs-body-bg: rgb(255, 248, 247);
}

body.dark {
    --bs-body-bg: #3d3d41;
    --bs-body-secondary-bg: var(--color-wire3-navy);
    --bs-body-tertiary-bg: var(--color-wire3-navy-light);
    --textarea-color: white;
    --textarea-bg: black;

    /* Text Colors */
    --color-text-primary: var(--color-neutral-100);
    --color-text-secondary: var(--color-neutral-300);
    --bs-heading-color: var(--color-text-primary);
    --bs-success-rgb: var(--color-wire3-green-rgb);
    --bs-primary-bg-subtle: var(--color-wire3-navy);
}

.dark .accordion {
    --bs-body-bg: var(--color-wire3-navy-light);
    --bs-accordion-color: white;
    --bs-accordion-active-color: white;
}

button.btn-wire3 {
    --bs-body-color: var(--color-neutral-900);
    color: black;
    --bs-btn-bg: var(--color-wire3-green);
    --bs-background-color: var(--color-wire3-green);
    --bs-btn-hover-color: var(--color-neutral-200);
    --bs-btn-hover-bg: #56861b;
    --bs-btn-hover-border-color: #56861b;
    transition: all 0.2s ease-in-out;
}

button.btn-wire3.btn-disabled {
    --bs-background-color: rgb(172, 172, 172);
    background-color: rgb(172, 172, 172);
    color: rgb(0, 0, 0);
    --bs-btn-hover-color: rgb(0, 0, 0);
    --bs-btn-hover-bg: rgb(172, 172, 172);
    --bs-btn-hover-border-color: rgb(172, 172, 172);
    pointer-events: none;
}

button.btn-wire3.btn-disabled.dark {
    --bs-background-color: rgb(84, 84, 84);
    background-color: rgb(84, 84, 84);
    color: rgb(255, 255, 255);
    --bs-btn-hover-color: rgb(255, 255, 255);
    --bs-btn-hover-bg: rgb(84, 84, 84);
    --bs-btn-hover-border-color: rgb(84, 84, 84);
    pointer-events: none;
}

button.btn-wire3.btn-red {
    --bs-btn-bg: rgb(245, 0, 0);
    --bs-background-color: rgb(245, 0, 0);
    --bs-btn-hover-color: rgb(51, 51, 51);
    --bs-btn-hover-bg: rgb(173, 0, 0);
    --bs-btn-hover-border-color: rgb(173, 0, 0);
}

button.btn-wire3.btn-red.dark {
    --bs-btn-bg: rgb(176, 0, 0);
    --bs-background-color: rgb(176, 0, 0);
    --bs-btn-hover-color: rgb(106, 106, 106);
    --bs-btn-hover-bg: rgb(120, 0, 0);
    --bs-btn-hover-border-color: rgb(120, 0, 0);
}

.tooltip > .tooltip-inner {
  color: white !important;
}


.form-check .form-check-input:checked {
    background-color: var(--color-wire3-green-dark);
    border-color: var(--color-wire3-green-dark);
}

.text-area, textarea {
    background-color: var(--textarea-bg);
    border: 1px solid rgb(219, 219, 219);
    border-radius: 5px;
    color: var(--textarea-color);
    padding: 0.25rem;
    text-align: left;
    /* height: 100%; */
}

.navbar{
    background: linear-gradient(#cccccc, #ababab);
}

.dark .navbar{
    background: linear-gradient(#323236, #1a1a1d);
}

.dark .navbar-brand{
    color: white;
}

.dark .navbar-toggler{
    background-color: rgb(255, 248, 247);
}

.dark .text-area{
    background-color: #5e5e64;
}

.dark textarea, .dark input{
    background-color: #3d3d41;
}

.text-area:focus, textarea:focus {
    outline: 1px solid var(--color-wire3-green);
    border: 1px solid var(--color-wire3-green);
    /* box-shadow: 0 0 0 0.2rem var(--color-wire3-green-dark) */
}

[contenteditable=true]:empty:not(:focus):before{
    color: grey;
    font-style: italic;
    content: attr(placeholder);
    pointer-events: none;
    display: block; /* For Firefox */
}

.container{
    display: flex;
    margin: 25px;
    flex-direction: row;
    column-gap: 5%;
    justify-content:center;
}

.item{
    width: 50%;
}

.form-label{
    margin-top:3rem;
    padding: 1rem;
    width: 100%;
    height: 20%;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    background: linear-gradient(#cccccc, #ababab);
    border-radius: 1rem;
    align-content: center;
}

.convert-label{
    height:auto;
}

 .dark .form-label{
    margin-top:3rem;
    padding: 1rem;
    background-color: #144D49;
    color:rgb(218, 218, 218)
}

.tool-description{
    width: 30%;
    margin: 0 auto;
}
.tool-label h4{
    text-align: center;
}

.control-container{
    display:flex;
    flex-direction: column;
    justify-content: space-around;
}

#fileNameText{
    margin-bottom: 20px;
}

.control{
    margin-bottom:40px;
}

.Title{
    display:flex;
    margin: 5px auto;
    padding: 5px;
    background-color:rgb(180, 253, 170);
    justify-content: space-between;
    align-items: center;
    border: 3px inset var(--color-wire3-green-dark);
    border-radius: 5px;
}

.home{
    margin: 5px auto;
    padding: 25px;
    background-color:rgb(180, 253, 170);
    border: 3px inset var(--color-wire3-green-dark);
    border-radius: 5px;
}

.dark .home{
    background-color: #103d3a;
}

.content{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin:25px;
    gap: 5%;
    justify-content: center;
}

.content > .control-container{
    display: flex;
    flex-direction: column;
    width:35rem;
    text-align: center;
    margin-top: 3rem;
    align-items: center;
    justify-content: flex-start;
}

.tool-label{
    width:100%;
    margin:2rem auto;
    padding: 1rem;
    background-color:#cccccc;
    border: 2px outset #ababab;
    border-radius: 1rem;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

/* .navbar{
    display:flex;
    flex-direction: column;
} */

.dark .tool-label{
    background-color: #6e6e78;
    color:rgb(218, 218, 218)
}

.bigger-text{
    font-size: 110%;
}

.home > h1{
    text-align: center;
}

#download-button{
  height: 3rem;
}

.dark .Title{
    background-color: #103d3a;
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(197, 197, 197) !important;
  opacity: 1; /* Firefox adds a lower opacity by default, so set to 1 for full color */
}

.download-control{
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2rem;
}

nav{
    margin-bottom: 3rem;
}

#file-gen{
    margin-top: 7px;
}


/*Tried to implement a cool background effect but I think some of the other code relating to the body is blocking it*/
.page-background {
  background-image: url('../../../media/wire3Logo.png');
  background-size: cover;
  background-repeat: repeat;
  background-attachment:fixed; /* Optional: for a fixed background on scroll */
  min-height: 100vh; /* Ensures the background covers the full vertical height */
}

.dropzone{
    margin-top: 25px;
}

.dark .dropzone{
    background-color: #5e5e64;
}

.textBtn-container{
    display: flex;
    flex-direction:row;
    justify-content: center;
    column-gap: 5%;
    margin:10px;
}

.center-label{
    display:flex;
    flex-direction: row;
    justify-content: center;
    width: 35%;
    margin: 0 auto;
}

.tool-link{
    width: 15rem;
    height: 10rem;
    transition: all 0.4s;
}

.home-link{
    width: 3rem;
    height: 2rem;
}

.tool-link:hover{
    transform: scale(1.1);
}

.dz-image-preview:hover *{
    cursor: move !important;
}

.dz-image-preview:active *{
    cursor: grabbing !important;
}

.dropzone .dz-preview.dz-image-preview {
    background: transparent !important;
}

.center-carousel .carousel-inner {
  display: flex;
  align-items: center;
}

.center-carousel .slide-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  height: 320px;
}

.center-carousel .carousel-card {
  height: 300px;
  background: var(--bs-body-bg);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.carousel-card{
    max-width: 20rem;
}


/* Center card bigger */
.center-carousel .carousel-item.active .carousel-card:nth-child(2) {
  transform: scale(1.15);
  /* opacity: 1; */
  z-index: 2;
}


/* ================================
   TOOL CAROUSEL (3 visible, smooth)
   ================================ */

.tool-carousel {
  width: 100%;
}

/* viewport shows exactly 3 cards */
.tool-carousel .tool-carousel-viewport {
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
  position: relative;
}

/* track holds 5 cards, each 33.333% of viewport => total track width = 166.666% */
.tool-carousel .tool-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  width: 166.666%;
  transform: translateX(-20%);
}

/* Each card is 1/3 of the viewport */
.tool-carousel .tool-carousel-card {
  flex: 0 0 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 450ms ease;
}

.carousel-card{
    background-color: #615b5b;
}

@media (max-width: 576px) {
  .tool-carousel .tool-carousel-track {
    width: 500%;
    transform: translateX(-40%);
  }

  .tool-carousel .tool-carousel-card {
    flex: 0 0 20%;
  }

  /* Hide the side cards so only center shows */
  .tool-carousel .tool-carousel-card.side {
    opacity: 0;
    transform: scale(0.9);
  }

  /* Make center card full focus */
  .tool-carousel .tool-carousel-card.center {
    transform: scale(1.0);
    opacity: 1;
  }
}

/* Inner box (this is where the shadow is) */
.tool-carousel .tool-carousel-card .carousel-card {
  width: 100% !important;
  max-width: none !important;
  height: 300px;
  border-radius: 16px;
  padding: 12px;
  background: var(--bs-body-bg);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Button fills */
.tool-carousel .tool-carousel-card .tool-link {
  width: 100% !important;
  height: 100% !important;
}

/* Center card bigger */
.tool-carousel .tool-carousel-card.center {
  opacity: 1;
  z-index: 2;
}

/* Side cards smaller */
.tool-carousel .tool-carousel-card.side {
  transform: scale(0.9);
  opacity: 0.65;
}

@media (min-width: 1200px) {
  #base64-raw-text {
    height: 6.4em; 
  }
}

@media (max-width: 1200px) {
  #base64-raw-text {
    height: 8em; 
  }
}

@media (max-width: 992px) {
  #base64-raw-text {
    height: 9.6em; 
  }
}

@media (max-width: 768px) {
  #base64-raw-text {
    height: 12.8em; 
  }
}

@media (max-width: 1200px) {
  .form-label{
    height:auto;
  }
}

@media (max-width: 576px){

}