/* ========================================
   LOADING SYSTEM STYLES
   ======================================== */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-content {
  text-align: center;
  /* background: white; */
  /* padding: 2rem; */
  /* border-radius: 0.5rem; */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

turbo-frame.booking-overview-frame {
  position: relative;
  display: block;
}

turbo-frame.booking-overview-frame > .booking-overview-frame-loader {
  display: none;
}

turbo-frame.booking-overview-frame[busy] > .booking-overview-frame-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
}

.dark turbo-frame.booking-overview-frame[busy] > .booking-overview-frame-loader {
  background: rgba(15, 23, 42, 0.72);
}

.booking-overview-frame-loader::after {
  width: 28px;
  height: 28px;
  content: "";
  border: 3px solid #d97706;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: spin 0.8s linear infinite;
}

/* ========================================
   BUTTON LOADING STATES
   ======================================== */
/* Use with any button by adding 'loading' class: class="ds-btn-outline-primary loading" */

.loading {
  position: relative;
  color: transparent !important;
}

.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   CUSTOM COMPONENT STYLES
   ======================================== */
/* Note: Login form styles have been converted to Tailwind classes */



/* Image sizes  */

.img-32x32 {
  width: 32px !important;
  height: 32px !important;
  object-fit: cover;
}

.img-100x100 {
  width: 100px !important;
  object-fit: cover;
  height: 100px !important;
}

/* 3d btn */

.btn-3d {
  width: 9.7rem; 
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); 
  /* box-shadow:  0 1rem 3rem rgba(0, 0, 0, 0.175); */
  /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); */
  /* box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); */

  margin-top: 34px; 
  margin-bottom: 34px; 
}

.btn-3d-imgbox {
  width: 9rem;
  height: 9rem;
  overflow: hidden;
  margin: 0 0.3rem;  
  transform: translateY(-30px); 
  transition: all 0.4s ease-out; 
  box-shadow: 0 1px 4px 0 #999;  
  z-index: 1000;
}

.btn-3d-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or contain/fill/scale-down/none */
}

.btn-3d:hover .btn-3d-imgbox {
  transform: translateY(-40px);

} 

/* horimgcard-3d */
.horimgcard-3d {
  /* height: 7rem; */
  width: 100%;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  /* box-shadow:  0 1rem 3rem rgba(0, 0, 0, 0.175); */
  /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); */
  /* box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); */
  margin-left: 15px;
  margin-right: 15px;
}

.horimgcard-3d-imgbox {
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  margin: 0.3rem 0;
  transform: translateX(-15px);
  transition: all 0.4s ease-out;
  /* box-shadow: 0 1px 4px 0 #999; */
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  z-index: 1000;
}


.horimgcard-3d-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or contain/fill/scale-down/none */
}


/* icone sizes */
.icon-xss {
  width: 1rem;
  height: 1rem;
}

.icon-xs {
  width: 1.25rem;
  height: 1.25rem;
}


.icon-s {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-s1 {
  width: 1.75rem;
  height: 1.75rem;
}


.icon-m {
  width: 2rem;
  height: 2rem;
}

.icon-l {
  width: 2.5rem;
  height: 2.5rem;
}

.icon-xl {
  width: 3rem;
  height: 3rem;
}

/* ========================================
   TAB NAVIGATION STYLES
   ======================================== */

.text-body {
  @apply text-gray-700 dark:text-gray-300;
}

.border-default {
  @apply border-gray-300 dark:border-slate-600;
}

.text-fg-brand {
  @apply text-amber-600 dark:text-amber-400;
}

.bg-neutral-secondary-soft {
  @apply bg-amber-50 dark:bg-amber-900/20;
}

.rounded-t-base {
  @apply rounded-t-lg;
}

.text-heading {
  @apply text-gray-900 dark:text-gray-100;
}

.text-fg-disabled {
  @apply text-gray-400 dark:text-gray-500;
}