/* ─── Exchange-Tile Styling ─────────────────────────────────────────────────── */

/* make the container flow exactly as your form sections do */
.exchange-container {
  display: flex;
  flex-direction: column;
  gap: 0.5em;          /* same vertical spacing your radio list uses */
}

/* style each tile just like your radio-label blocks */
.exchange-tile {
  display: flex;
  align-items: center;
  padding: 0.5em 1em;  /* match the padding on your labels */
  background-color: #2d2d2d;  /* same dark-grey panel background */
  color: #e0e0e0;       /* same light-grey text your labels use */
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.6rem;    /* match the radio-label font-size */
  border-radius: 2px;
  cursor: grab;
  user-select: none;
}

/* drag handle styling, matching your icon/text color for secondary controls */
.exchange-tile .drag-handle {
  margin-right: 0.75em;
  font-size: 0.5rem;
  color: #aaa;         /* same “dim” color your icons/buttons use */
}

/* visual cue while dragging */
.exchange-tile.dragging {
  opacity: 0.6;
}

/* ─── Subtitle under the heading ───────────────────────────────────────────── */

.exchange-subtitle {
  margin: 0.2em 0 0.75em;     /* small vertical spacing */
  font-size: 0.6rem;          /* a bit smaller than body text */
  color: #bbb;                 /* a muted light-grey hint color */
  line-height: 0.5;            /* keep it compact but readable */
}


#dateTimeDisplay {
    font-size: 0.75em; /* Half the base font size */
    margin-bottom: 2em; /* Spacing equivalent to two line feeds */
}

.styled-button {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #333;
    color: #39ff14;
    border: none;
    border-radius: 5px;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.2s;
    display: none; /* Initially invisible */
}

.styled-button:hover {
  background-color: #2bff00; /* Slightly lighter neon green on hover */
  color: #333; /* Slightly lighter neon green on hover */
}

.styled-button:active {
  transform: scale(0.98); /* Slightly shrink on click */
}

#drop-zone {
    border: 2px dashed #ccc;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: #666;
    margin: 50px auto;
    width: 50%;
    transition: background-color 0.3s;
}
#drop-zone.dragover {
    background-color: #f0f8ff;
}
/*
#download-link {
    display: none;
    color: #39ff14;
    font-weight: bold;
    font-size: 1.5rem;
}
*/
/*    margin: 2px 0 15px;*/

#download-link {
    color: #39ff14;
    font-weight: bold;
    font-size: 1.5rem;
    display: block;              /* allows centering and wrapping */
    max-width: 90%;              /* optional, limits line length */
    margin: 0 auto;              /* centers horizontally */
    text-align: center;          /* centers the text inside */
    word-wrap: break-word;       /* allows wrapping long text */
    white-space: normal;         /* ensures wrapping works */
}


body {
  background-color: #1c1c1c;
  font-family: 'Arial', sans-serif;
  color: #d9d9d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.main-container {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    width: 100%; /* Ensure it spans the full width of the page */
    position: relative; /* Allow children to flow naturally */
}


.textarea-container {
    width: 80%;
    max-width: 650px; /* Adjust width as needed */
    margin: 0 auto; /* Center horizontally */
}

.styled-textarea {
    width: 100%; /* Expand width to nearly fill the styled box */
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #444;
    background-color: #333;
    color: #d9d9d9;
    outline: none;
    font-size: 0.7rem;
    resize: none;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    text-align: left;
    height: calc(1.2em * 13); /* Add three lines to the default 10 lines */
}

.container {
    background-color: #2a2a2a;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    padding: 20px 40px;

    width: 90%; /* Adjust width to scale with the window */
    max-width: 1200px; /* Add a reasonable maximum width */
    margin: 0 auto; /* Center the container horizontally */

    text-align: center;
}

.container h1,
.container h2 {
    color: #39ff14; /* Bright neon green */
    margin-bottom: 15px;
}

.container h3 {
    color: #39ff14; /* Bright neon green */
    margin-bottom: 10px;
    font-size: 0.9em;
}

.video-text {
    font-size: 1.25em;
    margin-top: 5px;
    background: linear-gradient(90deg, #00FF00, #FFFFFF, #00FF00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 3s infinite;
    background-size: 200%;
}

label {
    display: block;
    color: #b3b3b3;
    margin: 10px 0 5px;
    font-weight: bold;
}

select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #444;
    background-color: #333;
    color: #d9d9d9;
    outline: none;
    margin-bottom: 10px;
    appearance: none; /* Removes default browser arrow for better styling */
    -webkit-appearance: none; /* Ensures compatibility with WebKit browsers */
    -moz-appearance: none; /* Ensures compatibility with Firefox */
}

/* Optional: Custom arrow for the dropdown */
select::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #d9d9d9;
}

input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #444;
    background-color: #333;
    color: #d9d9d9;
    outline: none;
    margin-bottom: 10px;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder {
    color: #999;
}

button {
    background-color: #39ff14;
    color: #1c1c1c;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 15px;
    font-weight: bold;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #33cc12;
}

.form-row {
    display: flex; /* Enables side-by-side alignment for first two items */
    flex-wrap: wrap; /* Allows wrapping for responsive design */
    gap: 20px; /* Adds space between the two main elements */
    justify-content: center; /* Centers items horizontally */
    align-items: flex-start; /* Aligns items to the top */
    margin-bottom: 20px; /* Adds spacing below the row */
    position: relative; /* Keeps namedField positioned within this container */
}


.radio-container {
    background-color: #333;
    padding: 15px;
    border: 1px solid #444;
    border-radius: 5px;
    width: 45%;
    max-width: 300px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    margin: 0 auto;

    text-align: left;
    display: flex;
    flex-direction: column;
/*
    align-items: center;
    justify-content: center;
*/
    gap: 10px;

}

.radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.radio-group label {
    margin-bottom: 10px;
    color: #d9d9d9;
    font-size: 0.7rem;
}

input[type="radio"] {
    margin-right: 10px;
}

.hidden-text-field {
    display: none; /* Hidden by default */
}

.styled-box {
    background-color: #333;
    padding: 15px;
    border: 1px solid #444;
    border-radius: 5px;
    width: 45%;
    max-width: 300px; /* Adjust the max-width proportionally */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.file-container.hidden {
    display: none;
}


.download-container.hidden {
    display: none;
}


/* Responsive rule: switch to stacking layout on smaller screens */
@media (max-width: 768px) {
    .radio-container,
    .styled-box {
        width: 100%; /* Stack elements by making them full width */
        max-width: none; /* Remove the max-width constraint */
    }
}


.footer-container {
    background-color: #2a2a2a;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    padding: 20px 40px;
    max-width: 400px;
    width: 70%;
    text-align: center;
    margin-top: 20px;

    /* Centering adjustments */
    margin-left: auto; /* Add auto margin for centering */
    margin-right: auto; /* Add auto margin for centering */
}


.footer-links {
    margin-top: 20px;
}

.footer-links a {
    display: block;
    color: #39ff14;
    text-decoration: none;
    margin: 10px 0;
    font-weight: bold;
}

.footer-links a:hover {
    text-decoration: underline;
}


.icon {
    width: 50px;
    height: auto;
    margin-bottom: 10px;
}

.tiny-icon {
    width: 25px;
    height: auto;
/*    margin-bottom: 10px;*/
}

.vtiny-icon {
    width: 15px;
    height: auto;
    margin-bottom: 2px;
}

.x-icon {
    width: 10px; /* Adjust size as needed */
    height: 10px;
}


/*   slideshow stuff */
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/* Floating note handlers */

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 450px;
    background-color: #333; /* Match the textarea background */
    color: #d9d9d9; /* Match the textarea text color */
    font-size: 0.8rem; /* Match the textarea font size */
    font-weight: normal; /* Ensure regular weight */
    font-family: 'Arial', sans-serif; /* Match the textarea font family */
    text-align: left; /* Align text to the left like the textarea */
    border: 2px solid #39ff14; /* Add a border like the textarea */
    border-radius: 6px;
    padding: 20px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -130px; /* Center the popup */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

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