body, html {
height: 100%;
margin: 0;
padding: 0;
color: #DDE2E6 !important;
}

.font-family-setter-wrapper * {
font-family: 'Roboto', sans-serif !important;
font-weight: 400 !important;
font-style: normal !important;
color: #DDE2E6;
}

.footer {
margin-top: 10px !important;
}

#content-wrapper {
display: flex;
flex-direction: column;
padding: 20px;
}

.ib-setter{
margin: 35px 0px 20px 0px;
}

.information-builder {
font-size: 20px;
color: #DDE2E6;
}

#main-content {
    flex: 1;
    text-align: center;
}

#item-container {
    position: relative; /* Autocomplete için referans noktası */
}

.delete-item {
    position: absolute;
    bottom: 10px;
    width: 92%;
}

.ui-autocomplete {
  background-color: #27293D;
  color: #DDE2E6;
  border: 2px solid #424649;
  border-radius: 10px;
  font-size: 16px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1050; /* Bootstrap modal z-index'in biraz altı */
  position: absolute;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); /* Bootstrap dropdown gölgesi */
  max-width: 35%;
  margin-top: 10px;
}


/* Liste satırları */
.ui-autocomplete .ui-menu-item {
  border-bottom: 1px solid #f1f1f1 !important;
}

/* Son öğeye çizgi koyma */
.ui-autocomplete .ui-menu-item:last-child {
  border-bottom: none !important;
}

/* Bağlantı elemanı */
.ui-autocomplete .ui-menu-item a {
  display: block !important;
  padding: 0.5rem 1rem !important;
  color: #212529 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease-in-out !important;
  cursor: pointer !important;
  background-color: transparent !important;
}

/* Hover stili */
.ui-autocomplete .ui-menu-item a:hover,
.ui-autocomplete .ui-menu-item a.ui-state-hover {
  background-color: #e9ecef !important;
  color: #000 !important;
}

.ui-helper-hidden-accessible {
    display: none;
}

.price-container {
    position: relative;
    display: inline-block;
}

.card-down-blocker {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #27293D; /* Siyah arka plan */
    padding: 5px 10px; /* İçerik çevresindeki boşluk */
    display: flex; /* Flex düzen */
    justify-content: space-between; /* Fiyat ve kategori bilgisini ayır */
    align-items: center; /* Dikey ortalama */
    box-sizing: border-box;
    height: 60px;
}

.price-suffix {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    font-size: 24px; /* Büyük formatta */
    line-height: 55px; /* input alanının yüksekliğine göre ayarlandı */
    color: #000; /* Renk ayarlandı */
    pointer-events: none; /* Tıklanamaz hale getirildi */
    font-weight: bold; /* Kalın font */
}

#item-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#item-form {
    width: 60%; /* Formun genişliği */
}

.main-background {
  border-radius: 1rem; /* Bootstrap'teki rounded-4 */
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); /* Bootstrap shadow */
  border: 2px solid #424649;
  margin-bottom: 20px;
}

.registration-background {
  border-radius: 1rem; /* Bootstrap'teki rounded-4 */
  margin-bottom: 20px;
}

.navi-main-background {
  padding: 1.5rem 0rem 0rem 0rem; /* Bootstrap'teki p-5 */
  margin-bottom: 20px;
}

.nocontent-background {
    min-height: 700px;
}

.exchange-container {
  max-width: 600px;
  margin: auto;
}

.exchange-container h2 {
  text-align: center;
  font-size: 1.5em;
}

.form-group {
  margin-bottom: 20px;
}

.info-text {
  font-size: 0.9em;
  color: #777;
}

.info-text a {
  color: #4A00E0;
  text-decoration: none;
}

.info-text a:hover {
  text-decoration: underline;
}

.confirmation-text {
  font-size: 0.9em;
  color: #777;
  text-align: center;
  margin: 15px 0;
}

.alert-danger {
  --bs-alert-color: #ea868f !important;
  --bs-alert-bg: #2c0b0e !important;
  --bs-alert-border-color: #842029 !important;
  --bs-alert-link-color: #ea868f !important;
}

.alert-warning {
  --bs-alert-color: #ffda6a !important;
  --bs-alert-bg: #332701 !important;
  --bs-alert-border-color: #997404 !important;
  --bs-alert-link-color: #ffda6a !important;
}

.alert-success {
  --bs-alert-color: #75b798 !important;
  --bs-alert-bg: #051b11 !important;
  --bs-alert-border-color: #0f5132 !important;
  --bs-alert-link-color: #75b798 !important;
}

/* Sadece belirli bir butona genişlik eklemek için */
.button-ekle {
  width: 470px;
  height: 50px;
}


/* Ortak tuş durumları */
.btn-primary {
  --btn-bg: #F74A66;
  --btn-hover: #c1364b;
  --btn-active: #d42a46;
  background-color: var(--btn-bg);
  border-color: var(--btn-bg);
  color: white;
  padding: .375rem .75rem;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  height: 50px;
  line-height: 0px;
}

.set-caep-btn-pos {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  font-size: 1.2rem;
  transition: all 0.2s;
  width: 435px;
  height: 58px;
}

/* Hover */
.btn-primary:hover {
  background-color: var(--btn-hover);
  border-color: var(--btn-hover);
}

/* Active, Focus, Active Class */
.btn-primary:active,
.btn-primary:focus,
.btn-primary.active {
  background-color: var(--btn-active) !important;
  border-color: var(--btn-active) !important;
  box-shadow: 0 0 0 0.25rem rgba(247, 74, 102, 0.3) !important;
}

/* Disabled */
.btn-primary:disabled {
  background-color: #9b2638;
  border-color: #9b2638;
  color: white;
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-secondary {
  --color: #F74A66;
  --hover-bg: rgba(247, 74, 102, 0.2);
  --active-bg: rgba(247, 74, 102, 0.2);
  color: var(--color);
  background-color: transparent;
  border: 2px solid var(--color);
  display: inline-block;
  padding: .375rem .75rem;
  font-size: 1.2rem;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  border-radius: 5px;
  height: 50px;
}

.btn-secondary:hover {
    background-color: var(--hover-bg);
    color: var(--color);
    border: 2px solid var(--color);
    padding: .375rem .75rem;
    height: 50px;
}

.btn-secondary:active {
    background-color: #F74A66; /* Active state */
    border: 2px solid var(--color);
    color: #DDE2E6;
}

/* Aktif durumda özel tasarım */
.btn-secondary.filter-button.active {
  background-color: var(--color);
  color: #DDE2E6;
  border-color: var(--color);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.swal2-styled.swal2-confirm {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    display: inline-block !important;
    font-weight: 400 !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    border-radius: .25rem !important;
    height: 40px !important;
}

.swal2-styled.swal2-confirm:hover {
    background-color: #0056b3 !important; /* Hover arka plan rengi */
    border-color: #0d6efd !important; /* Hover kenarlık rengi */
}

.swal2-styled.swal2-cancel {
    color: #306cf4 !important;
    background-color: transparent !important;
    border-color: #306cf4 !important;
    display: inline-block !important;
    font-weight: 400 !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: 1px solid !important;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    border-radius: .25rem !important;
    height: 40px !important;
}

.swal2-styled.swal2-cancel:hover {
    background-color: #0d6efd !important;
    color: #fff !important; /* Text color becomes white on hover */
}

/* Sosyal Paylaşım kutusu */

/* "Paylaş" metni */
.share-label {
    color: #DDE2E6; /* Yazı rengi */
    font-size: 16px;
    font-weight: bold;
    margin-left: 15px;
}

/* Sosyal Bağlantılar Ana Kapsayıcı */
.social-links {
    display: flex;
    gap: 15px; /* Simgeler arası boşluk */
    justify-content: center; /* Ortalamak için */
    align-items: center;
    margin-left: 25px;
}

/* Her bir bağlantı */
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333 !important; /* Arka plan rengi */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Geçiş efektleri */
}

/* Bağlantı üzerine gelindiğinde efekt */
.social-link:hover {
    background-color: #0073e6; /* Hover arka plan rengi */
    transform: scale(1.1); /* Büyüme efekti */
}

/* Sosyal Medya İkonları */
.social-icon {
    width: 24px; /* İkon genişliği */
    height: 24px; /* İkon yüksekliği */
    filter: invert(70%); /* Beyaz renk efekti */
    transition: filter 0.3s ease; /* Geçiş efekti */
}

.icon {
    width: 24px; /* İkon genişliği */
    height: 24px; /* İkon yüksekliği */
    transition: filter 0.3s ease; /* Geçiş efekti */
    filter: invert(40%);
    margin-bottom: 6px;
    margin-right: 10px;
}

/* Hover durumunda ikon rengi */
.social-link:hover .social-icon {
    filter: invert(100%); /* Siyah renk efekti */
}

.no-copy {

}

.no-buttons-alert .swal2-confirm,
.no-buttons-alert .swal2-cancel {
    display: none !important;
}

.cancel-buttons-alert .swal2-cancel {
    display: none !important;
}

/*Pagination*/
.pagination {
  width: 100%;
  margin-top: 10px;
  font-size: 20px;
  margin-right: 10px;
}

.pagination a {
  display: inline-block;
  padding: 10px 15px;
  margin: 0 5px;
  color: #DDE2E6;
  border: 2px solid #F74A66;
  text-decoration: none;
  border-radius: 5px;
}

.pagination a:hover {
  background-color: rgba(247, 74, 102, 0.2);
}

.pagination .current, /* Aktif sayfa */
.pagination a.active {
  display: inline-block;
  padding: 10px 15px;
  margin: 0 5px;
  background-color: #f74a66;
  color: #DDE2E6;
  text-decoration: none;
  border-radius: .25rem;
}

.cp-add-item-note {
  display: flex;
  justify-content: flex-start;  /* yatayda sola hizalama */
  align-items: flex-start;      /* dikeyde yukarıdan hizalama */
  color: #007bff;
  margin-top: 10px;
  margin-left: 3px;
  gap: 10px;
}


ul {
list-style-type: none;
}

li {
margin: 5px 0;
list-style: none;
}

label {
    cursor: pointer;
    font-size: 22px!important;
}

#slug-display {
    margin-top: 20px;
}

#slug-display label {
    display: inline-block;
    width: 200px;
}

#slug-display input {
    margin-bottom: 10px;
}

.user-info {
    font-size: 16px;
    color: #333;
    margin: 10px 0;
}

.bremb-title-field{
    margin-top: -10px;
    border: 1px solid #ccc;
}

.header-style-1{
    margin-bottom: 25px !important;
}

.py-custom-10 {
  padding-top: 10rem !important;
  padding-bottom: 10rem !important;
}

.background-new-formatter {
  width: 98%;
  margin-left: 13px;
}

.status-publish {
    color: #000;
    background-color: #198754;
    padding: 5px 9px;
    border-radius: 50rem;
    margin-bottom: 1px;
}

.status-pending {
    color: #000;
    background-color: #ffc107;
    padding: 5px 9px;
    border-radius: 50rem;
    margin-bottom: 1px;
}

.status-draft {
    color: #000;
    background-color: #6c757d;
    padding: 5px 9px;
    border-radius: 50rem;
    margin-bottom: 1px;
}

.status-purchasing {
  color: #000;
  background-color: red;
  padding: 5px 9px;
  border-radius: 50rem;
  margin-bottom: 1px;
}

/* Mysales ve Myorders sayfalarının cssleri başlangıcı */
.my-orders-inner-wrapper {
  margin: 0;
  padding: 20px 30px 5px 30px;
}

.my-orders-title{
min-width: 370px;
}

.icon-size {

}

.set-button-size {
  width: 48px;
  height: 35px;
}

.product-image-size {
  width: 48px;
  height: 48px;
}

.set-item-box {
  width: 120px;
}

.status-update-date-info{
  margin-top: -10px;
}

.toggle-icon.rotate {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
  margin-top: 10px;
}

.my-product-status-info {
  color: #DDE2E6;
  margin: 0px auto 0 auto; /* Üstten -30px, ortalamak için auto */
  padding: 5px;
  text-align: center;
  width: fit-content; /* İçeriğe göre genişlik */
  max-width: 100%;    /* Taşmayı önlemek için */
}

.product-status {
  margin-top: -10px;
  margin-right: -10px;
}
/* Mysales ve Myorders sayfalarının cssleri sonu */

/* Zıt renk tuşunun cssleri başlangıcı */
/* Varsayılan tema açık (açık arka plan) olduğu için zıt (koyu) temayı dark-mode class'ı ile tanımlarız */
body.dark-mode {
  background-color: #121212 !important;
  color: #DDE2E6 !important;
}

body.dark-mode .card {
  background-color: #1e1e1e !important;
  color: #DDE2E6 !important;
}

body.dark-mode .btn,
body.dark-mode .badge,
body.dark-mode .text-white,
body.dark-mode .text-white-50,
body.dark-mode .toggle-label {
  color: #DDE2E6 !important;
}

body.dark-mode .border,
body.dark-mode .border-secondary,
body.dark-mode .set-item-box {
  border-color: #444 !important;
}

body.dark-mode .set-item-box {
  background-color: #1e1e1e !important;
}

body.dark-mode .bg-white {
  background-color: #1e1e1e !important;
  color: #fff !important;
}
/* Zıt renk tuşunun cssleri sonu */

.textarea {
  font-size: 18px;
}

/* Yeni Site Rengi */
.bg-dark-blue {
  background-color: #1D1D2E !important;
}

.first-border {
  border: 2px solid #424649 !important;
}

.selection-color {
  background-color: #f74a66;
}

.min-vh-50 {
  min-height: 50vh;
}

.price-container {
    padding-right: 50px; /* Sağda boşluk bırakın */
    font-size: 16px; /* Yazı boyutu */
}

/* Custom dropdown arrow rengi için stil */
#server_selection {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666666' d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}

#item_description {
padding: 10px;
font-size: 18px;
height: 250px;
}

.focus-glow:focus {
  border-color: #F74A66 !important;
  outline: none;
}

/* Yeni swal renkleri */
.swal-dark-background {
  background-color: #1D1D2E !important;
  color: #fff !important;
  border: 2px solid #424649 !important; /* Başlangıç border rengi */
}

.swal-dark-background-tussuz {
  background-color: #1D1D2E !important;
  color: #fff !important;
  border: 2px solid #424649 !important; /* Başlangıç border rengi */
  max-width: 300px !important;
}

.swal-dark-background .swal2-input,
.swal-dark-background .swal2-select {
  background-color: #27293D;
  color: #717477;
   /* Başlangıç border rengi */
}

.swal-dark-background label {
  color: #ccc;
}

div:where(.swal2-container) div:where(.swal2-actions) {
  margin: 0;
}

.button-break {
  margin-left: 10px;
}

.alert-info {
--bs-alert-color: #6edff6 !important;
--bs-alert-bg: #032830 !important;
--bs-alert-border-color: #087990 !important;
--bs-alert-link-color: #6edff6 !important;
}

.seperate-line {
  border: 2px solid #424649;
  margin: 10px 0px 24px 0px;
}

.grey-line {
border-bottom: 2px
solid #424649;
margin-bottom: 20px;
}

.alert-secondary {
  --bs-alert-color: #a7acb1 !important;
  --bs-alert-bg: #161719 !important;
  --bs-alert-border-color: #41464b !important;
  --bs-alert-link-color: #a7acb1 !important;
}

.page-explain-title {
  font-size: 25px !important;
  color: #DDE2E6;
  margin-bottom: 10px;
}

.page-explain-text {
  font-size: 16px !important;
  color: #DDE2E6;
  margin-bottom: 20px;
}

#item_price,
#selected_item,
#server_selection,
#exchange_name,
#login-email,
#login-password,
#field_first_name,
#field_last_name,
#field_user_email,
#field_tc_kimlik,
#field_phone,
#field_address,
#first_name,
#last_name,
#email,
#phone_country_code,
#phone_number,
#password,
#confirm_password {
padding: 10px;
font-size: 20px;
height: 55px;
}

.swal2-validation-message {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-top: 1rem;
  color: #ffda6a !important;
  background-color: #332701 !important;
  border: 2px solid #997404 !important;
  border-radius: 0.375rem;
  font-size: 1rem;
}

.item-card-global,
.style-dark-card,
.bg-card-dark-blue {
  background-color: #27293D !important;
  color: #717477 !important;
  border: 2px solid #424649 !important;
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
}


.custom-input-dark {
  background-color: #27293D !important;
  color: #717477 !important;
  border: 2px solid #424649 !important; /* Başlangıç border rengi */
}

.custom-input-dark::placeholder {
  color: #717477 !important;
  opacity: 1;
}

.custom-input-dark:focus::placeholder {
  color: #717477 !important; /* Focus durumunda da açık ve görünür kalsın */
  opacity: 1 !important;
}

.custom-input-dark:focus {
  background-color: #27293D;
  color: #DDE2E6 !important;
  border-color: #DDE2E6; /* Focus olduğunda border rengi */
}

.custom-input-dark-swal {
  background-color: #27293D;
  color: #717477;
  border: 2px solid #424649 !important; /* Başlangıç border rengi */
  font-size: 18px !important;
  height: 55px !important;
}

.custom-input-dark-swal::placeholder {
  color: #717477 !important;
  opacity: 1;
}

.custom-input-dark-swal:focus::placeholder {
  color: #717477 !important; /* Focus durumunda da açık ve görünür kalsın */
  opacity: 1 !important;
}

.custom-input-dark-swal:focus {
  background-color: #27293D;
  color: #DDE2E6 !important;
  border-color: #DDE2E6; /* Focus olduğunda border rengi */
}

input.custom-input-dark:-webkit-autofill {
  -webkit-text-fill-color: #717477 !important;
  -webkit-box-shadow: 0 0 0 30px #27293D inset !important;
  color: #717477 !important;
  background-color: #27293D !important;
  caret-color: #717477;
  transition: background-color 9999s ease-in-out 0s; /* Bazı eski tarayıcı hileleri */
}

input.custom-input-dark:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #27293D inset !important;
  -webkit-text-fill-color: #717477 !important;
}

/*Headerdaki arama barı*/
#search-input {
padding: 10px;
font-size: 20px;
height: 45px;
margin-top: 7px;
}

#search-input::placeholder {
  color: #DDE2E6;
  opacity: 1; /* Bazı tarayıcılarda şeffaf olabilir, bu yüzden tam opaklık veriyoruz */
}