/* Prevent theme button image from flipping */
@import "tailwindcss";


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
  animation: shake 0.5s ease !important;
}


.no-flip {
    filter: none !important;
  }
  
  /* Dark mode for body */
  .dark {
    background: #252525;
    color: white;
    /* Remove filter: invert(1) to avoid over-inverting */
  }
  
  .dark-nav {
    background-color: #252525;
  }
  /* Flip class for other images */
  .flip {
    filter: invert(1);
  }
  
  /* Ensure theme button visibility in dark mode */
  .theme-switch img {
    transition: all 0.3s ease;
  }
  
  /* Rest of your existing CSS remains unchanged */
  @media(max-width:1520px) {
    .left-svg {
      display: none;
    }
  }
  
  /* Chat Box Animation */
  #chat-box {
    animation: fadeIn 0.5s ease-in-out;
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 1000;
    width: 250px;
    height: 350px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 15px;
    background-color: white;
    color: black;
  }
  
  /* Dark Mode - Chatbox */
  .dark #chat-box {
    background-color: #2d2d2d;
    color: white;
  }
  
  /* Chat Messages Area */
  #chat-messages {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 5px;
  }
  
  /* Button Styling */
  #close-chat {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  
  #close-chat:hover {
    color: #333;
  }
  
  .dark #close-chat {
    color: #aaa;
  }
  
  .dark #close-chat:hover {
    color: #fff;
  }
  
  /* Input and Send Button */
  #chat-input {
    transition: all 0.3s ease;
  }
  
  #send-message {
    transition: all 0.3s ease;
  }
  
  /* Animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Ensure chat toggle icon doesn't invert */
  #chat-toggle svg {
    filter: none !important;
  }
  
  /* RTL Adjustments */
  html[dir="rtl"] #chat-toggle,
  html[dir="rtl"] #chat-box {
    left: auto;
    right: 20px;
  }
  
  /* Mobile nav close */
  #nav-mobile-btn.close span:first-child {
    transform: rotate(45deg);
    top: 4px;
    position: relative;
    background: #a0aec0;
  }
  
  #nav-mobile-btn.close span:nth-child(2) {
    transform: rotate(-45deg);
    margin-top: 0px;
    background: #a0aec0;
  }
  
  .theme-switch {
    cursor: pointer;
  }
  .no-dark-mode {
    filter: none !important;
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #374151 inset !important; /* bg-gray-700 */
  -webkit-text-fill-color: #d1d5db !important;         /* text-gray-300 */
  caret-color: #d1d5db !important;
}

.load-container {
--uib-size: 40px;
--uib-color: black;
--uib-speed: 1s;
--uib-stroke: 3px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
height: var(--uib-size);
width: var(--uib-size);
}

.load-line {
position: absolute;
top: 0;
left: calc(50% - var(--uib-stroke) / 2);
display: flex;
align-items: flex-start;
height: 100%;
width: var(--uib-stroke);
}

.load-line::before {
content: '';
height: 22%;
width: 100%;
border-radius: calc(var(--uib-stroke) / 2);
background-color: var(--uib-color);
animation: pulse calc(var(--uib-speed)) ease-in-out infinite;
transition: background-color 0.3s ease;
transform-origin: center bottom;
}

.load-line:nth-child(1) {
transform: rotate(calc(360deg / -12 * 1));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 1);
}
}
.load-line:nth-child(2) {
transform: rotate(calc(360deg / -12 * 2));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 2);
}
}
.load-line:nth-child(3) {
transform: rotate(calc(360deg / -12 * 3));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 3);
}
}
.load-line:nth-child(4) {
transform: rotate(calc(360deg / -12 * 4));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 4);
}
}
.load-line:nth-child(5) {
transform: rotate(calc(360deg / -12 * 5));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 5);
}
}
.load-line:nth-child(6) {
transform: rotate(calc(360deg / -12 * 6));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 6);
}
}
.load-line:nth-child(7) {
transform: rotate(calc(360deg / -12 * 7));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 7);
}
}
.load-line:nth-child(8) {
transform: rotate(calc(360deg / -12 * 8));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 8);
}
}
.load-line:nth-child(9) {
transform: rotate(calc(360deg / -12 * 9));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 9);
}
}
.load-line:nth-child(10) {
transform: rotate(calc(360deg / -12 * 10));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 10);
}
}
.load-line:nth-child(11) {
transform: rotate(calc(360deg / -12 * 11));

&::before {
  animation-delay: calc(var(--uib-speed) / -12 * 11);
}
}

@keyframes pulse {
0%,
80%,
100% {
  transform: scaleY(0.75);
  opacity: 0;
}
20% {
  transform: scaleY(1);
  opacity: 1;
}
}

  @font-face {
    font-family: 'irsans';
    src: url('./fonts/irsans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .font-irsans {
    font-family: 'irsans', sans-serif;
  }

  #nav {
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: white;
  }
  .dark #nav {
    background-color: #252525;
  }
  @media (min-width: 1024px) {
    #nav {
      background-color: transparent;
    }
    .dark #nav {
      background-color: transparent;
    }
  }
  #body {
    transition: background-color 0.7s ease, color 0.7s ease;
  }