/*!
 * Theme Name: Default
 * Package : Whats Order
 * Author: Whats Order
 * Author URI: http://whatsorder.ch
 * Version	 :	1.0.0
 * Updated	 :	07.23.2020
**/
/* Emoji Picker Stilleri */


.emoji-picker {
  position: absolute;
  bottom: 60px; /* Butona göre ayarlayın */
  right: 10px; /* Butona göre ayarlayın */
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  max-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.emoji-picker .emoji {
  cursor: pointer;
  font-size: 24px;
  margin: 5px;
  display: inline-block;
}

.emoji-picker .emoji:hover {
  transform: scale(1.2);
}


.dark-mode .emoji-picker {
  position: absolute;
  bottom: 60px; /* Butona göre ayarlayın */
  right: 10px; /* Butona göre ayarlayın */
  background: #101924;
  border: 1px solid #1d2d40;
  padding: 10px;
  border-radius: 5px;
  max-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.dark-mode .emoji-picker .emoji {
  cursor: pointer;
  font-size: 24px;
  margin: 5px;
  display: inline-block;
}

.dark-mode .emoji-picker .emoji:hover {
  transform: scale(1.2);
}

#monthlyView, #yearlyView {
transition: opacity 0.5s ease;
}

/* Hide text on devices larger than 768px (non-mobile) */
@media screen and (min-width: 768px) {
.tb-ftr-body .plan-name {
    display: none;
}
}

.tb-ftr-plan .icon {
color: #0fac81;
}

/* Logo Hide */
.nk-sidebar.is-compact:not(:hover) .logo-img-small {

width: 39px;
}
/* Form Cutomer Down Icon Büyük ekranlarda gizle */
@media only screen and (min-width: 768px) {
.customer-form {
  display: none;
}
}

.customer-form,
.customer-form .ni-arrow-down-c {
font-size: 40px;
margin: 20px 0;
cursor: pointer;
animation: bounce 1.5s infinite ease-in-out;
}

@keyframes bounce {
0%, 100% {
  transform: translateY(0); /* Başlangıç ve bitiş pozisyonu */
}
50% {
  transform: translateY(10px); /* Aşağıya hafif kayma */
}
}


/* nk-split-content-bg kaybolma efekti */
.nk-split-content-bg {
transition: opacity 0.1s ease, visibility 0.1s ease;
}

.nk-split-content-bg.hide {
opacity: 0;
visibility: hidden;
}

/* nk-split-content-bg-white başlangıçta görünür */
.nk-split-content-bg-white {
display: block;
opacity: 1;
}
.centered-logo {
display: none;

}
/* Mobil uyumluluk için stiller */
.working-hours .table-responsive {
  overflow-x: auto;
}

.working-hours .form-control {
  width: 100%;
}

@media (max-width: 768px) {
  .working-hours table {
      font-size: 0.9rem;
  }

  /* Mobilde kolon başlıklarını dikey düzenle */
  .working-hours td,
  .working-hours th {
      white-space: nowrap;
  }

  /* Mobilde "Closed" anahtarı daha iyi yerleştirilsin */
  .custom-control.custom-switch {
      display: flex;
      justify-content: center;
  }

  /* Yatay kaydırma görünümü */
  .table-responsive::-webkit-scrollbar {
      height: 6px;
  }
  
  .table-responsive::-webkit-scrollbar-track {
      background: #f1f1f1;
  }

  .table-responsive::-webkit-scrollbar-thumb {
      background: #888;
  }

  .table-responsive::-webkit-scrollbar-thumb:hover {
      background: #555;
  }
}

/* Customer editable fields */
.editable-container {
  transition: all 0.3s ease;
}
.editable-container:focus {
  outline: none;
  background-color: #f0f0f0;
  box-shadow: 0 0 5px #007bff;
  padding: 4px;
  border-radius: 4px;
}



.time-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.time-slot input {
  flex: 1;
}
.time-slot button {
  flex: 0 0 auto;
}
.remove-time-slot {
  display: none;
}


.table th:nth-child(4), 
.table td:nth-child(4) {
    width: 100px; /* QTY kolonunun genişliğini belirliyoruz */
    text-align: center; /* Eğer içeriği ortalamak istiyorsanız */
}

@media (max-width: 768px) { /* Mobil cihazlar için */
  .btn.qty-decrease,
  .btn.qty-increase,
  .user-card .user-avatar{
      display: none; /* Butonları gizler */
  }
}

.custom-control-label {
  display: flex; /* Elemanları yatay hizalar */
  align-items: center; /* Yükseklik hizasını ortalar */
  gap: 2px; /* Elemanlar arasında boşluk */
}

.custom-control-label .badge {
  flex-shrink: 0; /* Küçülmeyi önler */
}

/* Flexbox ile switch ve etiketlerini hizalama */
.custom-control.custom-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Etiketin genişliğini ayarlayarak düzgün hizalama */
.custom-control-label {
  flex: 1;
  margin-left: 0.5rem;
  line-height: 1.5;
}

/* Switch butonlarının aynı yükseklikte olmasını sağlar */
.custom-control-input {
  height: 1.25rem;
  width: 2.5rem;
}

/* Switch ve etiket arasındaki boşluğu artırmak */
.custom-control.custom-switch {
  margin-bottom: 1rem;
}

/* Responsive düzenlemeler */
@media (max-width: 767.98px) {
  .custom-control.custom-switch {
      flex-direction: column;
      align-items: flex-start;
  }

  .custom-control-label {
      margin-left: 0;
      margin-top: 0.5rem;
  }
}

/* QR code */



.logo-wrapper-unique {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-wrapper-unique img {
  max-width: 170px;
  margin: 10px;
}

.substitute-container-unique {
  width: 100%;
  height: 15em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.substitute-container-unique img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 5%;
}

.text-container-unique p {
  font-family: 'Outfit', sans-serif;
  text-align: center;
  color: hsl(220, 15%, 55%);
  margin-left: 0.5em;
  margin-right: 0.5em;
  font-size: 15px;
  margin: 10px;;
}

.highlight-text-unique {
  color: rgb(19 172 129);
  font-size: 1.2rem;
  font-weight: 700;
}


@keyframes bounce {
  0% {
      transform: scale(1);
  }
  25% {
      transform: scale(1.1);
  }
  50% {
      transform: scale(1);
  }
  75% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}

#printButton {
  animation: bounce 1s infinite; /* Apply bounce animation */
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}

#printButton:hover {
  text-decoration: underline;
}

#printButton:after {
  content: '\00a0(Click me!)'; /* Adds a non-breaking space before 'Click me!' */
  color: red;
  font-size: 8px;
  font-weight: normal;
}


.dark-mode .highlight-text-unique {
  color: white!important;
  font-size: 1.2rem;
  font-weight: 700;
}

/* Dark mode aktif olduğunda logo değişir */
.dark-mode .logo-wrapper-unique img {
  content: url('../images/logo-light.svg');
}

.card-unique-border-qr {
  border: 1px dashed #ccc;
}

.dark-mode .card-unique-border-qr {
  border: 1px dashed #525252;
}