/* ===========================
   BUTTON LAYOUT AND BASICS
   =========================== */

.buttons a {
  display: inline-flex;                 /* icon + text horizontally */
  align-items: center;                 /* vertical centering */
  justify-content: center;             /* center text+icon inside */
  gap: .5rem;                          /* space between icon and text */
  white-space: nowrap;                 /* prevent wrapping */
  line-height: 1;                      /* normalize height */
}

.buttons a .fa {
  display: inline-block;               /* ensure icon doesn’t distort line */
  line-height: 1;
  margin: 0;
}

/* Hide #send button when stop or restart buttons are shown */
.buttons:has(#stop:not(.not_displayed)) #send,
.buttons:has(#restart:not(.not_displayed)) #send {
  display: none;
}

/* ===========================
   DISABLED BUTTON STYLING
   =========================== */

a[role="button"].ui-state-disabled,
a[role="button"].ui-state-disabled:hover {
  background: #a0a0a0 !important;
  color: #e0e0e0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ===========================
   SPECIAL BUTTON SIZES (pause, resume, etc.)
   =========================== */

.buttons a#pause,
.buttons a#resume,
.buttons a#stop,
.buttons a#continue {
  font-size: 1rem;
  padding: .75rem;
  padding-top: .9rem;
}

/* Green hover color for start/restart buttons */
.buttons a.start:hover,
.buttons a.restart:hover {
  background-color: #0d7f0d !important;
}

/* ===========================
   GENERIC BUTTON BASE STYLE
   =========================== */

#btn_logon,
button.ui-button.ui-corner-all.ui-widget:not(.ui-button-icon-only),
.buttons a:not(.not_displayed) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  line-height: 1;
}

/* Reset icon margins */
.buttons a .fa {
  line-height: 1;
  margin: 0;
}

/* File action buttons arranged in grid */
.files_actions a {
  display: grid;
  place-items: center;
}

/* Ensure z-index for the send button overlay */
.buttons a#send {
  position: relative;
  z-index: 1;
}

/* ===========================
   SHARED BUTTON VISUAL STYLE
   =========================== */

a.ui-button.ui-corner-all.ui-widget,
button.ui-button.ui-corner-all.ui-widget:not(.ui-button-icon-only),
a.ui-button:not(.not_displayed) {
  width: 180px !important;
  height: 35px;
  cursor: pointer;
  outline: none;
  transition: background .4s ease-out, border-color .4s ease-out;
  border-radius: .5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  padding: 0;
  margin: .2rem;
  box-sizing: border-box;
  align-items: center;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600 !important;
}

/* ===========================
   SVG BORDER SETUP
   =========================== */

a.ui-button.ui-corner-all.ui-widget svg,
button.ui-button.ui-corner-all.ui-widget:not(.ui-button-icon-only) svg,
.buttons a:not(.not_displayed) svg,
.files_actions a svg {
  position: absolute;
  left: 0;
  top: 0;
  fill: none;
  stroke-width: 4px;
  transform: translate(-1px, -1px);
  width: 180px;
  height: 35px;
  transition: none !important;  /* no default animation */
}

/* ===========================
   GENERIC HOVER BORDER EFFECT
   =========================== */

a.ui-button.ui-corner-all.ui-widget:hover,
button.ui-button.ui-corner-all.ui-widget:not(.ui-button-icon-only):hover,
.buttons a.ui-button:not(.not_displayed):hover,
.files_actions a.ui-button:hover {
  border-color: white !important;
  transition-duration: .5s !important;
  transition-delay: 0.3s !important;
}

/* Stroke animation during hover */
a.ui-button.ui-corner-all.ui-widget:hover svg,
button.ui-button.ui-corner-all.ui-widget:not(.ui-button-icon-only):hover svg,
.buttons a:not(.not_displayed):hover svg,
.files_actions a:hover svg {
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 1s ease-out !important;
}

/* ===========================
   TEXT INSIDE BUTTONS
   =========================== */

a.ui-button.ui-corner-all.ui-widget span,
button.ui-button.ui-corner-all.ui-widget:not(.ui-button-icon-only) span,
.buttons a:not(.not_displayed) span,
.files_actions a span {
  color: #fff !important;
  position: relative;
  font-weight: 600;
}

/* ===========================
   Button Effects
   =========================== */

.buttons a#send svg path,
#upload_form .files_actions a.ui-button svg path {
  stroke-width: 4px;
  fill: none;
  stroke-dasharray: 1000;    /* total path length */
  stroke-dashoffset: 1000;   /* start hidden */
  opacity: 1;
  transition: none !important; /* no animation when not hovered */
  will-change: stroke-dashoffset, opacity;
}

/* ===========================
   SEND BUTTON CONFIGURATION
   =========================== */

.buttons a#send {
  font-size: 1.2rem;
  width: 250px !important;
  height: 50px !important;
  border-radius: .8rem;
  position: relative;
}

/* --- SVG sizing and base stroke setup --- */
.buttons a#send svg {
  width: 250px;
  height: 50px;
  view-box: 0 0 250 50; /* not applied by CSS but clarifies intent */
  stroke-dasharray: 800 800;
  stroke-dashoffset: 800;
  transform: translate(-1px, -1px);
}

/* reset for #send svg */
.buttons a#send svg {
  stroke-dasharray: 800 800;
  stroke-dashoffset: 800;
  transform: translate(-1px, -1px);
  transition: stroke-dashoffset 1s ease-out;
}

/* full clockwise reveal, no rewind */
.buttons a#send svg {
  position: absolute;
  left: 0;
  top: 0;
  fill: none;
  stroke-width: 4px;
  transform: translate(-1px, -1px);
  stroke-dasharray: 1000 1000 !important;
  stroke-dashoffset: 1000 !important;
  transition: none !important;
}

/* slow reveal for send button */
.buttons a#send:hover svg {
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 1s ease-out !important;
}

/* --- Slowed draw & faster fade (Send + Select Files) --- */
.buttons a#send:hover svg path,
#upload_form .files_actions a.ui-button:hover svg path {
  stroke-dashoffset: 0 !important;                 /* animate full draw */
  opacity: 0 !important;                           /* fade out after draw */
  transition: stroke-dashoffset .8s linear,        /* slower draw */
              opacity .1s linear .5s !important;   /* quick fade right after */
}

/* ensure svg element itself transitions cleanly */
.buttons a#send:hover svg { 
  stroke-dashoffset: 0 !important; 
}

/* ===========================
   ROTATING GREEN BORDER ANIMATION (#send)
   =========================== */

.buttons a#send:not(.ui-button-disabled)::before,
.guests_page a.send.ui-button.ui-corner-all.ui-widget:not(.ui-button-disabled)::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border: 2px solid #00c800;  /* green rotating border */
  border-radius: .8rem;
  box-sizing: border-box;
  pointer-events: none;
  animation: border-rotate 4s linear infinite; /* continuous rotation */
  will-change: clip-path, transform, opacity;
  opacity: 1;
  transition: opacity 1s ease;
}

/* hide rotating green border on hover */
.buttons a#send:not(.ui-button-disabled):hover::before,
.guests_page a.send.ui-button.ui-corner-all.ui-widget:not(.ui-button-disabled):hover::before {
  opacity: 0;
}

/* clockwise rotation keyframes */
@keyframes border-rotate {
  0%   { clip-path: inset(0 100% 0 0 round calc(.8rem + 3px)); }
  25%  { clip-path: inset(0 0 100% 0 round calc(.8rem + 3px)); }
  50%  { clip-path: inset(0 0 0 100% round calc(.8rem + 3px)); }
  75%  { clip-path: inset(100% 0 0 0 round calc(.8rem + 3px)); }
  100% { clip-path: inset(0 100% 0 0 round calc(.8rem + 3px)); }
}

/* ===========================
   FILE BUTTON CONTAINER STYLES
   =========================== */

#upload_form .files_actions a.select_files {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: auto;
}

/* ensure consistent sizing for select_files and clear_all buttons */
#upload_form .files_actions a.select_files, 
#upload_form .files_actions a.clear_all {
  width: 180px !important;
  flex: 0 0 auto;
}