body.saa-theme {
  background-color: #000000;
  background-image: radial-gradient(ellipse at 50% 45%, rgba(194, 2, 0, 0.55) 0%, rgba(194, 2, 0, 0.18) 35%, #000000 70%);
  background-size: 100% 100vh;
  background-repeat: no-repeat;
}

.elementor *,
.elementor *::before,
.elementor *::after {
  box-sizing: border-box;
}

.elementor ol,
.elementor ul {
  list-style: revert;
  padding: revert;
}

.elementor a {
  color: revert;
  text-decoration: revert;
}

.elementor img {
  display: revert;
  max-width: 100%;
  height: auto;
}

.elementor svg {
  display: revert;
}

.elementor button,
.elementor input,
.elementor select,
.elementor textarea {
  font: revert;
  color: revert;
  padding: revert;
}

.elementor hr {
  border: revert;
}

.admin-bar nav.fixed {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar nav.fixed {
    top: 46px;
  }
}

.content-box {
  position: relative;
}

.content-box-bg {
  background: #0a0a0a;
}

.content-box-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mic-container {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
}

.mic-image {
  height: 100%;
  width: auto;
  display: block;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .mic-container {
    height: 85%;
    left: -4%;
  }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .mic-container {
    height: 90%;
    left: -3%;
  }
}

@media (min-width: 1440px) and (max-width: 1535px) {
  .mic-container {
    height: 92%;
    left: -2%;
  }
}

@media (min-width: 1536px) and (max-width: 1679px) {
  .mic-container {
    height: 95%;
    left: -1%;
  }
}

@media (min-width: 1680px) and (max-width: 1919px) {
  .mic-container {
    height: 97%;
    left: 0;
  }
}

@media (min-width: 1920px) {
  .mic-container {
    height: 100%;
    left: 1%;
  }
}

.mobile-mic-bg {
  position: absolute;
  right: -40%;
  bottom: -10%;
  z-index: 2;
  pointer-events: none;
  height: 95%;
}

@media (min-width: 640px) and (max-width: 767px) {
  .mobile-mic-bg {
    right: -25%;
    bottom: -8%;
    height: 85%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-mic-bg {
    right: -15%;
    bottom: -5%;
    height: 80%;
  }
}

.mobile-mic-bg img {
  height: 100%;
  width: auto;
  filter: drop-shadow(0 0 40px rgba(204, 0, 0, 0.25));
}

.record-ring {
  background: rgba(255, 255, 255, 0.006);
  box-shadow:
    inset 0 0 20px rgba(204, 0, 0, 0.15),
    0 0 40px rgba(204, 0, 0, 0.1),
    0 0 80px rgba(204, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.control-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.submit-btn {
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.submit-btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

@keyframes pulse-record {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(204, 0, 0, 0);
  }
}

.recording-pulse {
  animation: pulse-record 1.5s ease-in-out infinite;
}

.record-btn-glow {
  box-shadow:
    0 0 30px rgba(204, 0, 0, 0.3),
    0 0 60px rgba(204, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.record-btn-glow:hover {
  box-shadow:
    0 0 40px rgba(204, 0, 0, 0.5),
    0 0 80px rgba(204, 0, 0, 0.15);
}

.timer-recording {
  text-shadow: 0 0 10px rgba(204, 0, 0, 0.8);
}

.done-state {
  background: rgba(204, 0, 0, 0.25);
  box-shadow:
    0 0 20px rgba(204, 0, 0, 0.15),
    0 0 40px rgba(204, 0, 0, 0.05);
}

.timer-done {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

@keyframes pulse-paused {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.paused-glow {
  box-shadow:
    0 0 20px rgba(204, 0, 0, 0.2),
    0 0 40px rgba(204, 0, 0, 0.05);
}

.timer-paused {
  animation: pulse-paused 2s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(204, 0, 0, 0.4);
}

.mic-glow {
  filter: drop-shadow(0 0 40px rgba(204, 0, 0, 0.25));
}

.upload-progress-bar {
  background: linear-gradient(90deg, #cc0000, #ff1a1a);
  transition: width 0.3s ease;
}

.control-btn {
  transition: all 0.2s ease;
}

.control-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.control-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fade-in 0.3s ease-out;
}

body.saa-theme::-webkit-scrollbar {
  width: 8px;
}

body.saa-theme::-webkit-scrollbar-track {
  background: #0a0a0a;
}

body.saa-theme::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

body.saa-theme::-webkit-scrollbar-thumb:hover {
  background: #555;
}