@import url('./doona-styles.css');
@import url('./doona-packs.css');
i.text-lg.ti.ti-square-rounded-arrow-left-filled.rtl\:rotate-180 {
  transform: none !important;
}
i.text-lg.ti.ti-square-rounded-arrow-left-filled {
  transform: scaleX(-1) !important;
}
.flex.items-center.justify-center.w-7.h-7.rounded-\[45\%\].text-white.bg-black.from-black.to-black.bg-linear-to-br {
  border-radius: 30px;
}

.max-w-\[140px\].h-6.object-contain.object-left {
  transform: scale(1.3);
  margin-right: 18px;
}

.flex.items-center.justify-center.w-7.h-7.rounded-\[45\%\].text-white.from-black.to-black.bg-linear-to-br {
  color: #f58a06;
}

i.text-2xl.ti.ti-home-filled {
  margin-right: -16px;
  font-size: 18px;
  margin-top: -3px;
}

body.is-ff-or-safari i.text-2xl.ti.ti-home-filled {
  margin-right: 20px;
}

i.text-2xl.ti.ti-archive-filled {
  font-size: 18px;
  margin-left: -2px;
}

.apexcharts-tooltip * {
  direction: rtl;
}

text.apexcharts-text.apexcharts-xaxis-label.text-xs,
text.apexcharts-text.apexcharts-yaxis-label.text-xs {
  direction: rtl;
}

@media (max-width: 768px) {
  .gap-2.items-center.justify-center.links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .flex.gap-2.items-center.justify-center.links>a>svg {
    width: 20px;
    margin-left: 2px;
  }

  .flex.gap-2.items-center.justify-center.links::-webkit-scrollbar {
    display: none;
  }
}

#quick-access+div.flex {
  padding-top: 20px;
}

@media (max-width: 1024px) {
  div#content.flex.flex-col.h-screen.overflow-y-auto.w-full {
    height: calc(var(--vh, 1vh) * 92);
  }

  .sticky.bottom-0.z-40.mt-auto {
    bottom: -3px;
  }
}

.text-justify {
  text-align: justify;
}

@media (max-width: 1024px) {
  main>.fixed.z-10.top-4 {
    position: relative;
    margin-right: 37px;
    margin-bottom: 30px;
    margin-left: 0;
  }
}

.remcredit {
  margin-left: 3px;
  padding-block: 5px;
}

.nocredit {
  margin-left: 3px;
  padding-block: 5px;
  background: rgb(245 138 7 / 30%);
  font-weight: 500;
  border: none;
}
@media (max-width: 1024px) {
  aside#sidebar {
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
  }

  aside#sidebar[data-key="history"] {
    visibility: visible;
    width: 80%;
    z-index: 100;
  }

  aside#sidebar>div {
    background: #202123;
    position: relative;
    /* اسکرول برای محتوای سایدبار */
    overflow-y: auto;
    max-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }
  html[data-mode="light"] aside#sidebar>div {
    background: #f5f5f5;
  }
  html[data-mode="light"] aside .bg-line-dimmed\/50 {
    background: #e9e9e9;
  }
  
  /* Backdrop overlay */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99;
    display: none;
  }
  
  /* نمایش backdrop وقتی سایدبار باز است */
  .sidebar-backdrop:has(+ aside#sidebar[data-key="history"]) {
    display: block;
  }
  
  aside#sidebar div.my-8.flex.justify-center{
    margin-bottom: 0;
    padding-bottom: 25px;
  }
}

@media (min-width: 1024px) {
  .py-3.bg-rose-600~.container>div>main>.fixed.z-10.top-4 {
    padding-top: 60px !important;
  }
}

/* Mobile Bottom Navigation Styles */
.bottom-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(var(--line-dimmed), 0.3);
  box-shadow: 0 -5px 32px rgba(0, 0, 0, 0.12);
}
html[data-mode="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.6);
}
html[data-mode="dark"] .bottom-nav {
  background: rgba(17, 18, 20, 0.6);
}
.bottom-nav-item {
  color: rgb(var(--content-dimmed));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border-radius: 16px;
  padding: 8px 4px;
}

.bottom-nav-item:hover:not(.active) {
  transform: translateY(-2px) scale(1.02);
  color: rgb(var(--content));
  background: rgba(var(--intermediate), 0.4);
}

.bottom-nav-item.active {
  color: #f58a06 !important;
}

.bottom-nav-item.active>div {
  background: linear-gradient(135deg, rgba(245, 138, 6, 0.2), rgba(245, 138, 6, 0.35));
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin: 0 2px;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(245, 138, 6, 0.25);
  border: 1px solid rgba(245, 138, 6, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bottom-nav-item.active i {
  color: #f58a06;
  transform: scale(1);
  text-shadow: 0 0 4px rgba(245, 138, 6, 0.3);
  font-size: 18px;
  margin-bottom: 1px;
}

.bottom-nav-item:hover:not(.active) i {
  transform: scale(1.1);
}

.bottom-nav-item i {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 20px;
  margin-bottom: 2px;
}

.bottom-nav-item.active span {
  opacity: 1;
  font-weight: 700;
  color: #f58a06;
  text-shadow: 0 0 4px rgba(245, 138, 6, 0.3);
  font-size: 9px;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.bottom-nav-item:not(.active) span {
  opacity: 0.75;
  font-size: 10px;
  font-weight: 500;
}

.bottom-nav-item span {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bottom-nav-item:active:not(.active) {
  transform: scale(0.95);
  background: rgba(var(--intermediate), 0.6);
}

/* Glassmorphism effect for better modern look */
.bottom-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(var(--main), 0.9) 0%, rgba(var(--main), 0.95) 100%);
  z-index: -1;
}

.bottom-nav-item.active:nth-of-type(3)>div {
  width: 60px;
  height: 60px;
}

.bottom-nav-item.active:nth-of-type(3)>div>span {
  font-size: 8px;
}

/* Mobile Bottom Navigation Styles */

[data-mode="dark"] .badge[class="badge"] {
  background: #383a42;
}

#content>.container main.gap-5.pb-20 {
  padding-bottom: 0 !important;
}

.to-\[\#006ABF\],
.to-\[\#984CF8\],
.to-\[\#F38383\],
.to-\[\#00A6FB\],
.to-\[\#F77F00\],
.to-\[\#E03339\],
.to-\[\#30C862\],
.to-\[\#27AE60\] {
  --tw-gradient-to: #f58a06;
}

.gap-2.items-center.justify-center.links {
  flex-direction: row-reverse;
}

.gap-2.items-center.justify-center.links>a {
  width: min-content;
}

.gap-2.items-center.justify-center.links>a>svg {
  width: 20px;
}
i.ms-auto.text-2xl.ti.ti-chevron-right {
  transform: scaleX(-1)
}
.h-8.to-transparent.bg-linear-to-t.from-main {
  margin-bottom: -10px;
}
modal-element[name="options"] > form{
  top: 50%;
  bottom: unset;
  transform: translateY(-50%);
   @media (max-width: 1024px){
        top: unset;
        bottom: 0;
        transform: unset;
    }
}
@media (min-width: 768px) {
  body[x-data^="imagine"] modal-element[name="options"]>form {
      max-height: 90%;
      overflow: auto;  
  }
}
form .relative.p-1.rounded-3xl>.flex.gap-2.items-end {
  flex-direction: row-reverse;
}

form .flex.items-center.gap-2 .flex.gap-1.items-center>i {
  font-size: 20px;
}

@media (max-width: 426px) {
  .gap-2.items-center.justify-center.links>a {
      &:nth-child(1) {
          order: 2;
      }

      &:nth-child(2) {
          order: 0;
      }

      &:nth-child(3) {
          order: 1;
      }
  }
}
main > div > .grid.gap-1 > .flex > .flex.w-10.bg-linear-to-br{
  color: #f58a06;
}
aside.sticky + .sticky.top-0{
  height: 64px;
}
main form > .relative.p-1 > input[type="text"].w-full.h-14.p-4{
  padding-left: 60px;
}
main form > .relative.p-1 > button[type="submit"].absolute > .ti-arrow-right{
  transform: rotateZ(180deg);
}
html[data-mode="light"] div[x-show="!offlinePayment"] button {
  background: #0e0e0e !important;
}

html[data-mode="light"] div[x-show="!offlinePayment"] button svg {
  filter: invert(1) brightness(2);
}
nav[x-ref="menu"] div.border-b.border-line-dimmed{
  background: var(--color-main);
}
html[data-mode="light"] template[x-ref="sidebarTooltip"] + button.absolute  {
  background-color: #cbcbcb;
}
nav[x-ref="menu"] > div.hidden.py-4{
  background: var(--color-main);
}
select.mt-2.input.border-line-dimmed.hover\:border-line {
  direction: ltr;
}
#quick-access {
  height: calc(calc(var(--vh, 1vh) * 92) - 8.3rem);
}
@media (min-width: 64rem) {
  #quick-access {
      height: calc(100vh - 4.5rem) !important;
  }
}
body[x-data="dashboard"] div#content{
  position: relative;

  > .py-3.bg-rose-600 {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
  }
}
.start-0.top-auto.end-auto.bottom-full.mb-1.w-60.text-base.menu.max-h-max.peer,
.start-0.top-auto.end-auto.bottom-full.mb-1.w-60.text-base.menu.max-h-max.peer hr {
  border-color: #242424;
}
html[data-mode="light"] .start-0.top-auto.end-auto.bottom-full.mb-1.w-60.text-base.menu.max-h-max.peer,
html[data-mode="light"] .start-0.top-auto.end-auto.bottom-full.mb-1.w-60.text-base.menu.max-h-max.peer hr {
  border-color: rgb(227 228 228 / 53%);
}
div.flex.gap-4.items-center div.menu.menu-tr{
  right: 50%;
  transform: translateX(50%);
}
code{
  float: left;
  direction: ltr;
}
div.flex.flex-col.gap-4 > div > h1 + p{
  margin-top: 13px;
}
x-wave > button.avatar {
  background: #383a42;
}
[data-mode="light"] .flex.gap-2.items-center > span.badge {
  background-color: #e4e2e2;
}
[data-mode="dark"] .flex.gap-2.items-center > span.badge {
  background: #383a42;
}
modal-element[name="voice-list-modal"] x-wave + div.grow > div.text-sm.capitalize{
  display: inline-block;
  max-width: 8ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-mode='light'] x-wave > button.avatar {
    background: #c4c4c4;
}
main.flex.flex-col.gap-5.pb-20.grow{
  > div[class="hidden md:block"]{
    display: block !important;

    >div.flex.gap-3.items-center{
      flex-wrap: wrap;
    }
  }
}
main.flex.flex-col.gap-5 div.grid.grid-cols-2 div.flex-col.gap-6.box {
  transition: 0.3s;

  &:hover {
    transform: scale(1.02);
  }
}
html[data-mode='light'] main div.grid.grid-cols-2.gap-1 > div.flex a.w-full.button.button-dimmed {
  background-color: #333333;
  color: #ffffff;
  outline-color: #333333;
}
modal-element[name="voice-list-modal"] x-wave div[wave]{
  width: 180px;
  position: absolute;
  right: 55%;
  top: 50%;
  transform: translateX(-55%) translateY(-50%) scaleY(0.3);
}
main.flex.flex-col.gap-5.pb-20 > div > div > div[class="my-10 text-center md:my-0"] > h1.mt-6{
  margin-bottom: 18px;
}
main.flex.flex-col.gap-5.pb-20 > div > p.text-content-dimmed{
  margin-top: 13px;
}
main.flex.flex-col.gap-5.pb-20 div[class="group/grid"] div.grid.gap-1.grid-cols-2{
  gap: 16px;
}
.button-accent{
  outline-color: transparent;
  transition: 0.3s;

  &:hover{
    outline-color: var(--color-button-accent);
  }
}
.button:not(.button-accent){
  outline-color: transparent;
  transition: 0.3s;

  &:hover{
    outline-color: var(--color-button);
  }
}
.quickInput{
  resize: none;
  padding-left: 60px;
}
x-avatar[icon="sparkles"] i.ti-sparkles {
	display: none;
}
button x-avatar[icon="box"] i.ti-box {
	display: none;
}
span.flex.invisible.ms-auto.whitespace-nowrap.badge.group-hover\:visible.shrink-0 {
  background: #383a42;
}
html[data-mode='light'] span.flex.invisible.ms-auto.whitespace-nowrap.badge.group-hover\:visible.shrink-0 {
  background: #e4e2e2;
}
x-markdown img {
  max-width: 298px;
  border-radius: 25px;
  margin-top: 15px;
}
@media (max-width: 1024px) {
  .copyImage {
    display: none !important;
  }
}
html[data-mode="light"] .remcredit-.remcredit {
  border-color: #eeeeee;;
}

button.capitalize.button.button-xs.button-dimmed {
  background-color: #f58a0659;
}
#quick-access {
  justify-content: center;
}
.dark\:bg-gray-800:where([data-mode=dark],[data-mode=dark] *) {
  background: #111214;
}

/* Phone validation error styles */
.text-red-500 {
  color: #ef4444;
}

.border-red-500 {
  border-color: #ef4444 !important;
}

/* Hide elements with x-cloak until Alpine loads */
[x-cloak] {
  display: none !important;
}
:is(x-avatar,.avatar)>.mask {
  mask-repeat: no-repeat !important;
  mask-size: 90% !important;
  mask-position: center !important;
}
@media (max-width: 1024px) {
  toast-message {
    margin-bottom: 70px;
  }  
}
button.text-content-dimmed.group-data-\[mobile-menu\=nav\]\/html\:text-content.ms-2 {
  @media (max-width: 1024px) {
    display: none;
  } 
}
p.text-xs.text-content-dimmed.line-clamp-4 {
  text-align: justify;
}
html[data-mode="light"] .text-content-dimmed {
  color: rgb(155 155 155);
}

html[data-mode="light"] .text-content-dimmed:hover {
  color: rgb(128, 128, 128);
}

html[data-mode="light"] .button-dimmed {
  background: rgb(226 226 226);
}

html[data-mode="light"] .button:disabled {
  background-color: rgb(219 219 219);
}
html[data-mode="light"] .border-line-dimmed {
  border-color: rgb(227 227 227);
}
html[data-mode="light"] .text-line-dimmed {
  color: rgb(209 209 209);
}
.after\:transition-all:after {
  margin-left: 2px;
}
html[data-mode="light"] .bg-intermediate {
  background: rgb(245 245 245);
}
html[data-mode="light"] .bottom-nav {
  box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.12);
}
span.ms-auto.badge.badge-success {
  margin-bottom: 10px;
}
main div.grid.grid-cols-2.gap-1 > div.flex a.w-full.button.button-dimmed {
  border-radius: 22px;
}
button.button.button-xs.button-outline {
  background: #f58a0659;
}
form .flex button.text-base.text-content-dimmed[x-tooltip\.raw] {
  margin: 0 5px;
  font-size: 18px;
}
form .flex button.text-base.text-content-dimmed.relative[x-tooltip\.raw] {
  margin-right: 8px;
}

/* Grouped Options Styles */
.space-y-4 > * + * {
  margin-top: 1rem;
}

html[data-mode="light"] .box.box-selected {
  --tw-gradient-to: rgb(230 151 53 / 11%)
}

html[data-mode="light"] .text-content-super-dimmed {
  color: rgb(168 168 168)
}
html[data-mode="light"] .text-content-super-dimmed:hover {
  color: rgb(94 94 94)
}
.h-4.to-transparent.bg-linear-to-t.from-main {
  margin-bottom: -10px;
}
@media (min-width: 768px) {
  body[x-data^="video"] modal-element[name="options"]>form {
      max-height: 90%;
      overflow: auto;
  }
}
body[x-data^="dashboard"] footer {
display: none
}