/* Общие стили для таблиц */
.table-base {
  @apply min-w-full border border-gray-200 dark:border-darkblack-400 rounded-lg overflow-hidden;
}

.table-base thead {
  @apply bg-gray-100 dark:bg-darkblack-600;
}

.table-base th {
  @apply px-4 py-2 text-left text-sm font-semibold text-bgray-700 dark:text-bgray-200;
}

.table-base td {
  @apply px-4 py-2 text-sm text-bgray-900 dark:text-bgray-50;
}

.table-base tbody tr {
  @apply border-t border-gray-200 dark:border-darkblack-400;
}

.table-base tbody tr:hover {
  @apply bg-gray-50 dark:bg-darkblack-600;
}

/* DataTables элементы */
.dataTables_wrapper .dataTables_filter input {
  @apply border border-gray-300 rounded-lg px-3 py-1 text-sm focus:ring-2 focus:ring-cyan-400;
}

.dataTables_wrapper .dataTables_length select {
  @apply border border-gray-300 rounded-lg px-2 py-1 text-sm;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  @apply border border-gray-300 rounded-md px-2 py-1 mx-1 text-sm text-bgray-700 bg-white;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  @apply bg-cyan-500 text-white border-cyan-500;
}

.aspect-4-3 {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 3/4 = 0.75 → 75% */
  overflow: hidden;
  border-radius: 8px; /* как rounded-md */
}

.aspect-4-3 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* обрезает лишнее, не растягивает */
  border-radius: 8px;
}
.aspect-16-9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9/16 */
  overflow: hidden;
  border-radius: 8px;
}

.aspect-16-9 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}




.support-ticket-main {
padding: 40px 0 0px 24px;
background-color: #fff;
border-radius: 8px;
}

    .from {
        .mt-24px {
            margin-top: 24px;
        }

        .form-label {
            margin-bottom: 12px;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 150%;
            /* 24px */
            letter-spacing: 0.2px;
            color: var(--paragraph-color);
        }

        .form-control {
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 150%;
            /* 24px */
            letter-spacing: 0.2px;
            color: var(   --headding-color);
            border-radius: 8px;
            padding: 10px 16px;
            background-color: var(--bg-color);
            border: 1px solid #ccc;
        }
    }


.alert {
  padding: 1rem 1.5rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.alert-success {
  background-color: #d1e7dd;
  border-left: 5px solid #198754;
  color: #0f5132;
}

.alert-danger {
  background-color: #f8d7da;
  border-left: 5px solid #dc3545;
  color: #842029;
}

.alert-warning {
  background-color: #fff3cd;
  border-left: 5px solid #ffc107;
  color: #664d03;
}

.alert-info {
  background-color: #cff4fc;
  border-left: 5px solid #0dcaf0;
  color: #055160;
}

.btn-close {
  float: right;
  background: none;
  border: none;
  font-size: 1.2rem;
  opacity: 0.6;
}


.integrations-item {
    padding: 24px;
    border-radius: 8px;
    background-color: var(--bg-color);


    .integrations-item-inner {
        display: flex;
        justify-content: space-between;

        .integrations-item-inner-img {
            display: flex;
            align-items: center;
            gap: 20px;

            .integrations-item-inner-text {
                h2 {
                    font-size: var(--text-24px);
                    font-weight: var(--font-bold);
                    line-height: 150%;
                    color: var(  --headding-color);
                }

                span {
                    font-size: var(--text-18px);
                    font-weight: var(--font-medium);
                    line-height: 120%;
                    /* 21.6px */
                    text-transform: capitalize;
                    color: var(  --headding-color);
                }
            }
        }
    }

    .integrations-item-text {
        padding-top: 24px;

        p {
            font-size: var(--text-18px);
            font-weight: var(--font-medium);
            line-height: 148%;
            color: var(--paragraph-color);
        }
    }

    .integrations-item-btn {
        margin-top: 32px;

        a {
            padding: 10px 126px;
            border-radius: 6px;
            border: 1px solid var(--primary-color);
            background: var(--bg-color-white);
            font-size: var(--text-16px);
            font-weight: var(--font-medium);
            line-height: 175%;
            color: var( --primary-color);
            transition: all 0.3s;


            &:hover {
                border: 1px solid var(--primary-color);
                color: var(--primary-color);
            }
        }
    }

    .integrations-item-btn-two {
        a {
            border: 1px solid var(--paragraph-color);
            color: var(  --paragraph-color);
            transition: all 0.3s;


            &:hover {
                border: 1px solid var(--primary-color);
                color: var(--primary-color);
            }
        }
    }


}

.btn-green-outline {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-weight: 600;
  color: #22C55E;               /* зелёный текст #22C55E*/
  border: 1px solid #22C55E;    /* зелёная рамка */
  border-radius: 6px;
  background-color: transparent;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-green-outline:hover {
  background-color: #22C55E;   /* зелёный фон */
  color: #fff;                 /* белый текст */
}
.tabel-main-box {
  border-radius: 8px;
    padding: 20px 24px;
    margin: 0;
    background: #fff; 
}
.tabel-main-box .bg-bgray-50 {
--tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
    border: 1px solid #c7cacf;
appearance: none;
border-radius: 0.5rem;
}

.tabel-main-box textarea{
line-height: 1.42;
 border: 1px solid #c7cacf;
outline: none;
overflow-y: auto;
padding: 12px 15px;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
width: 100%;
border: 1px solid #c7cacf;
border-radius: 0.5rem;
}

.bg-red-500 {
font-size: 13px;
font-weight: bold;
line-height: 160%;
text-align: center;
padding: 4px 16px;
border-radius: 4px;
background-color: #fad3d3;
display: inline-block;
color:red
}
.absolute.top-1.right-1 {
      position: absolute;
    top: 7px;
    left: 7px;
}
#photo-preview .relative img{
border: 1px solid #ccc;  
}
a svg{display: inline-block;}
.ml-4{margin-left: 10px;}

select[name="pages-table_length"] {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9fafb;
  color: #333;
  font-size: 14px;
  min-width: 62px;
}
.logo_img{max-width: 50px;border-radius:10px}
.dataTables_length select{min-width: 62px;}
.dataTables_filter{margin-bottom: 10px;}
.Paid {
font-size: var(--text-14px);
font-weight: var(--font-semibold);
line-height: 160%;
text-align: center;
padding: 4px 16px;
border-radius: 4px;
background-color: #e4f5ec;
display: inline-block;
}
.Unpaid a {
color: #fa4646;
}
.min-h-\[460px\] {
  min-height: 260px;
}

#photo-preview img{height: 150px;}
.swiper-slide a img{height: 380px;}
#objects-table_length{margin-bottom: 20px;}


/* === Зелёная пагинация (для Laravel Blade / Tailwind) === */

nav[role="navigation"] .inline-flex > a,
nav[role="navigation"] .inline-flex > span {
  border-color: #d1d5db !important; /* border-gray-300 */
  color: #374151 !important; /* text-gray-700 */
  background-color: #ffffff !important;
  transition: all 0.2s ease;
      margin-left: 5px;
}

/* Hover эффект */
nav[role="navigation"] .inline-flex > a:hover {
  background-color: rgb(22 163 74 / 0.15) !important; /* зелёный полупрозрачный */
  border-color: rgb(22 163 74 / 0.25) !important;
  color: rgb(34 197 93) !important;
}

/* Активная страница */
nav[role="navigation"] [aria-current="page"] > span {
  background-color: rgb(34 197 93) !important; /* bg-green-600 */
  border-color: rgb(34 197 93) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Disabled стрелки (в начале / в конце) */
nav[role="navigation"] [aria-disabled="true"] > span {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background-color: #f3f4f6 !important; /* bg-gray-100 */
}

/* Hover на стрелках */
nav[role="navigation"] a[rel="next"]:hover,
nav[role="navigation"] a[rel="prev"]:hover {
  background-color: rgb(22 163 74 / 0.15) !important;
  color: rgb(34 197 93) !important;
}

/* Текст "Showing 1 to 12 of ..." */
nav[role="navigation"] p.text-sm {
  color: #4b5563 !important; /* text-gray-700 */
  font-size: 14px;
}

.h-336{height:336px}
.kursive{font-style: italic;}
.select2-container--default .select2-selection--single{
  height: 49px;
}
#photo-preview img{cursor: all-scroll;}

.alert-error {
  background-color: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}
.bg-red-50 {
  background-color: #fef2f2; /* светло-розовый фон */
}

.text-red-700 {
  color: #b91c1c; /* насыщенно-красный текст */
}

.border {
  border-width: 1px;
  border-style: solid;
}

.border-red-200 {
  border-color: #fecaca; /* светлая красная граница */
}

.rounded-md {
  border-radius: 0.375rem; /* ~6px */
}

.p-3 {
  padding: 0.75rem; /* ~12px */
}

.mb-4 {
  margin-bottom: 1rem; /* ~16px */
}



#fav-alert {
position: fixed;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: max-content;
    max-width: 90%;
    width: 200px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #000;
}
.favorite-btn.active {--tw-text-opacity: 1;
color: rgb(239 68 68 / var(--tw-text-opacity));}

@media (max-width: 768px) {
  .mob_full_w {
    width: 100% !important;
    max-width: 100% !important;
  }
  .mob_centr{text-align: center;}
  .wf{  width: 100%;overflow-x: auto;}
  .form-select{width: 160px !important;}
  .filters-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem; /* отступы между колонками */
  }  
}


/* === Общий контейнер секции === */
.bg-white.dark\:bg-darkblack-600.rounded-lg.p-6 {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background-color 0.3s;
}

.dark .bg-white.dark\:bg-darkblack-600.rounded-lg.p-6 {
  background-color: #1f1f1f;
}

/* === Заголовок секции === */
.bg-white.dark\:bg-darkblack-600.rounded-lg.p-6 h2 {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

.dark .bg-white.dark\:bg-darkblack-600.rounded-lg.p-6 h2 {
  color: #f3f4f6;
}

/* === Карточка элемента (feature-block) === */
.feature-block {
  position: relative;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-block:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.dark .feature-block {
  background: #27272a;
  border-color: #3f3f46;
}

/* === Кнопка удаления блока (крестик) === */
.feature-block .remove-feature {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #ef4444;
  font-size: 20px;
  font-weight: bold;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.feature-block .remove-feature:hover {
  color: #b91c1c;
}

/* === Поля ввода и текстовые области внутри карточки === */
.feature-block input[type="text"],
.feature-block textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.feature-block input[type="text"]:focus,
.feature-block textarea:focus {
  border-color: #06b6d4; /* cyan */
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
  outline: none;
}

.dark .feature-block input[type="text"],
.dark .feature-block textarea {
  background-color: #18181b;
  color: #f3f4f6;
  border-color: #3f3f46;
}

/* === Кнопка добавления нового блока === */
#add-placement,
#add-service {
  
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

#add-placement:hover,
#add-service:hover {
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
  transform: translateY(-1px);
}

#add-placement:active,
#add-service:active {
  transform: translateY(0);
}

/* === Отступы между карточками === */
#placements-container .feature-block,
#services-container .feature-block {
  margin-bottom: 14px;
}

/* === Превью изображения === */
.feature-block img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
}

/* === Подписи к полям === */
.feature-block label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
  display: block;
}

.dark .feature-block label {
  color: #d1d5db;
}


/* === 3-колоночный верхний блок === */
/* === 3-колоночный верхний блок с фото и картой === */
.object-photos-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.3fr;
  gap: 16px;
}

/* — Большое левое фото — */
.object-main-photo {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f5f5;
  height: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* — Средняя колонка с двумя фото — */
.object-side-photo {
  border-radius: 14px;
  overflow: hidden;
  background: #f5f5f5;
  flex: 1;
  height: 190px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.object-side-photo + .object-side-photo {
  margin-top: 20px;
}

/* — Фото внутри — */
.object-main-photo img,
.object-side-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.object-main-photo img:hover,
.object-side-photo img:hover {
  transform: scale(1.03);
}

/* — Карта — */
.object-map {
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  height: 400px;
}

.object-map iframe,
.object-map div {
  width: 100%;
  height: 100%;
}

/* — Adaptive — */
@media (max-width: 1024px) {
  .object-photos-grid {
    grid-template-columns: 1fr 1fr;
  }

  .object-map {
    grid-column: span 2;
    height: 300px;
  }
}

@media (max-width: 640px) {
  .object-photos-grid {
    grid-template-columns: 1fr;
  }

  .object-main-photo,
  .object-side-photo,
  .object-map {
    /* height: 250px; */
  }

  .object-side-photo + .object-side-photo {
    margin-top: 12px;
  }
}
/* ## */



.object-side-photo-all:hover::after {
  background: rgba(0,0,0,0.6);
}
.booking-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  /* max-width: 740px; */
}

/* верхний ряд — две кнопки рядом */
.booking-buttons-top {
  display: flex;
  /* flex-wrap: wrap;
  justify-content: center; */
  gap: 1rem;
}

.booking-buttons-top a {
  flex: 1 1 45%;
  line-height: 38px;
  min-width: 220px;
  text-align: center;
  font-weight: 600;
  padding: 14px 0;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn-wa {
  background-color: #25D366;
}
.btn-wa:hover {
  background-color: #1ebe5c;
  transform: translateY(-1px);
}

.btn-tg {
  background-color: #1B1D21;
}
.btn-tg:hover {
  background-color: #333;
  transform: translateY(-1px);
}

/* нижний блок (homereserve) */
.booking-buttons-bottom {
  text-align: center;
}
.booking-buttons-bottom > *:not(script) {
  display: inline-block;
  width: auto;
  min-width: 240px;
}

/* №№№№ */
.swiper {
  width: 100%;
  padding: 20px 0;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title_h2{min-height: 47px;}
.swiper-wrapper{padding-top: 4px;}
.extras-card {
  border: 2px solid #16a34a;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  color: #000;
  width: 231px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.extras-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 255, 0, 0.2);
}

.extras-card img {
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

/* стрелки — зелёные */
.swiper-button-next,
.swiper-button-prev {
  color: #16a34a;
}

/* затемнение фона */
#serviceModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

/* активное состояние (при открытии) */
#serviceModal.flex {
  display: flex !important;
  opacity: 1;
}

/* само окно */
#serviceModal .modal-content {
  background: #fff;
  color: #333;
  border-radius: 16px;
  width: 90%;
  max-width: 880px;

  /* ключевые правки ↓↓↓ */
  max-height: 90vh;         /* ограничиваем высоту */
  overflow-y: auto;         /* включаем прокрутку */
  -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  position: relative;
}

/* анимация появления */
#serviceModal.flex .modal-content {
  transform: scale(1);
  opacity: 1;
}

/* верхнее изображение */
#serviceModal img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* текстовое содержимое */
#serviceModal .modal-body {
  padding: 20px;
  text-align: left;
}

#serviceModal h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #15803d; /* зелёный акцент */
  margin-bottom: 10px;
}

#serviceModal p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #444;
}

/* кнопка закрытия */
#serviceModal button.close-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 22px;
  color: #666;
  cursor: pointer;
  transition: color 0.2s ease;
}

#serviceModal button.close-btn:hover {
  color: #000;
}

.object-side-photo{
  height:190px;
  flex: 0 0 190px !important; /* критично для Chrome */
  overflow: hidden;
  border-radius: 14px;
  background:#f5f5f5;
}
.object-side-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width: 640px) {
  .booking-buttons-top {
    flex-direction: column;
  }

  .booking-buttons-top a {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .extras-card{width: 100%;}
    .object-map {
        grid-column: span 1;
        height: auto;
    }  
}