/* Мобильная адаптация модального окна ключевых слов */

/* Основные стили для мобильных устройств */
@media (max-width: 768px) {
  /* Контейнер модального окна */
  #customKeywordsModal .custom-modal-container {
    width: 55%; /* Уменьшено еще на 30% с 78% */
    max-width: none;
    max-height: 58.3vh; /* Увеличено на 10% с 53vh */
    margin: 0.5rem;
    border-radius: 12px;
  }
  
  /* Заголовок модального окна */
  #customKeywordsModal .custom-modal-header {
    padding: 0.1275rem 0.8rem;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
  }
  
  #customKeywordsModal .custom-modal-header span {
    display: none;
  }
  
  #customKeywordsModal .custom-modal-close {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Тело модального окна */
  #customKeywordsModal .custom-modal-body {
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
  }
  
  /* Поисковые поля */
  #customKeywordsModal .d-flex.flex-wrap {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  #customKeywordsModal #keywords-search-input,
  #customKeywordsModal #keywords-category-search {
    display: none !important;
  }
  
  #customKeywordsModal #keywords-category-filter {
    max-width: none;
    width: 100%;
    font-size: 0.9rem;
    padding: 0.48rem 0.8rem;
  }
  
  /* Кнопки управления */
  #customKeywordsModal .mb-2.d-flex.flex-wrap {
    flex-direction: column;
    gap: 0.4rem;
  }
  
  #customKeywordsModal .btn {
    width: 100%;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    justify-content: center;
  }
  
  /* Табы ключевых слов */
  #customKeywordsModal .keywords-tabs {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.3rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    grid-template-columns: none !important;
  }
  
  #customKeywordsModal .keywords-tab-item {
    flex: 1;
    min-width: 0;
  }
  
  #customKeywordsModal .keywords-tab-link {
    width: 100%;
    padding: 0.125rem 0.6rem;
    font-size: 0.8rem;
    justify-content: center;
    border-radius: 6px;
    white-space: nowrap;
  }
  
  #customKeywordsModal .keywords-tab-link .badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
    margin-left: 0.3rem;
  }
  
  /* Контент табов */
  #customKeywordsModal .keywords-tab-content {
    max-height: 300px;
    overflow-y: auto;
  }
  
  #customKeywordsModal .keywords-list {
    max-height: 250px;
    overflow-y: auto;
  }
  
  /* Элементы ключевых слов */
  #customKeywordsModal .keyword-item {
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.3rem;
    border-radius: 6px;
    font-size: 0.85rem;
  }
  
  #customKeywordsModal .keyword-text {
    font-size: 0.85rem;
    line-height: 1.3;
  }
  
  #customKeywordsModal .keyword-row {
    min-height: auto !important;
    height: auto !important;
    align-items: center !important;
  }
  
  #customKeywordsModal .keyword-row .d-flex.align-items-center.gap-2 {
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
    align-items: center !important;
  }
  
  #customKeywordsModal .add-keyword-btn {
    --bs-btn-padding-y: 0.1rem !important;
    --bs-btn-padding-x: 0.2rem !important;
    --bs-btn-font-size: 0.6rem !important;
    padding: 0.1rem 0.2rem !important;
    font-size: 0.6rem !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    line-height: 1 !important;
  }
  
  /* Выбранные ключевые слова */
  #customKeywordsModal .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  
  #customKeywordsModal #selected-keywords-count {
    font-size: 0.8rem;
  }
  
  #customKeywordsModal #selected-keywords-display {
    max-height: 150px;
    overflow-y: auto;
    padding: 0.5rem;
    border-radius: 6px;
    background: #f8f9fa;
  }
  
  #customKeywordsModal .selected-keyword {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
  }
  
  #customKeywordsModal .remove-keyword-btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
  }
  
  /* Футер модального окна */
  #customKeywordsModal .custom-modal-footer {
    padding: 0.4rem 0.8rem;
    flex-direction: row;
    gap: 0.3rem;
    justify-content: space-between;
  }
  
  #customKeywordsModal .custom-modal-footer .btn {
    flex: 1;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    justify-content: center;
    min-width: 0;
  }
  
  /* Индикаторы загрузки */
  #customKeywordsModal .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  #customKeywordsModal .text-center.py-3 p {
    font-size: 0.85rem;
    margin-top: 0.5rem;
  }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
  #customKeywordsModal .custom-modal-container {
    width: 56%; /* Уменьшено еще на 30% с 80% */
    max-height: 60.5vh; /* Увеличено на 10% с 55vh */
    margin: 0.25rem;
    border-radius: 8px;
  }
  
  #customKeywordsModal .custom-modal-header {
    padding: 0.085rem 0.6rem;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
  }
  
  #customKeywordsModal .custom-modal-header span {
    display: none;
  }
  
  #customKeywordsModal .custom-modal-close {
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #customKeywordsModal .custom-modal-body {
    padding: 0.8rem;
    max-height: 75vh;
  }
  
  #customKeywordsModal #keywords-search-input,
  #customKeywordsModal #keywords-category-search {
    display: none !important;
  }
  
  #customKeywordsModal #keywords-category-filter {
    font-size: 0.85rem;
    padding: 0.4rem 0.7rem;
  }
  
  #customKeywordsModal .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.7rem;
  }
  
  #customKeywordsModal .keywords-tabs {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
  }
  
  #customKeywordsModal .keywords-tab-link {
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
  }
  
  #customKeywordsModal .keywords-tab-link .badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }
  
  #customKeywordsModal .keywords-tab-content {
    max-height: 250px;
  }
  
  #customKeywordsModal .keywords-list {
    max-height: 200px;
  }
  
  #customKeywordsModal .keyword-item {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
  }
  
  #customKeywordsModal .keyword-text {
    font-size: 0.8rem;
  }
  

  
  #customKeywordsModal .form-label {
    font-size: 0.85rem;
  }
  
  #customKeywordsModal #selected-keywords-display {
    max-height: 120px;
    padding: 0.4rem;
  }
  
  #customKeywordsModal .selected-keyword {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
  }
  
  #customKeywordsModal .remove-keyword-btn {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }
  
  #customKeywordsModal .custom-modal-footer {
    padding: 0.3rem 0.6rem;
    flex-direction: row;
    gap: 0.25rem;
    justify-content: space-between;
  }
  
  #customKeywordsModal .custom-modal-footer .btn {
    flex: 1;
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    min-width: 0;
  }
}

/* Экстремально маленькие экраны */
@media (max-width: 360px) {
  #customKeywordsModal .custom-modal-container {
    width: 56%; /* Уменьшено еще на 30% с 80% */
    max-height: 61.6vh; /* Увеличено на 10% с 56vh */
    margin: 0.1rem;
    border-radius: 6px;
  }
  
  #customKeywordsModal .custom-modal-header {
    padding: 0.068rem 0.5rem;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
  }
  
  #customKeywordsModal .custom-modal-header span {
    display: none;
  }
  
  #customKeywordsModal .custom-modal-close {
    width: 15px;
    height: 15px;
    font-size: 0.55rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #customKeywordsModal .custom-modal-body {
    padding: 0.6rem;
    max-height: 80vh;
  }
  
  #customKeywordsModal #keywords-search-input,
  #customKeywordsModal #keywords-category-search {
    display: none !important;
  }
  
  #customKeywordsModal #keywords-category-filter {
    font-size: 0.8rem;
    padding: 0.32rem 0.6rem;
  }
  
  #customKeywordsModal .btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
  }
  
  #customKeywordsModal .keywords-tabs {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
  }
  
  #customKeywordsModal .keywords-tab-link {
    font-size: 0.7rem;
    padding: 0.0875rem 0.5rem;
    white-space: nowrap;
  }
  
  #customKeywordsModal .keywords-tab-content {
    max-height: 200px;
  }
  
  #customKeywordsModal .keywords-list {
    max-height: 180px;
  }
  
  #customKeywordsModal .keyword-item {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
  }
  
  #customKeywordsModal .keyword-text {
    font-size: 0.75rem;
  }
  

  
  #customKeywordsModal .form-label {
    font-size: 0.8rem;
  }
  
  #customKeywordsModal #selected-keywords-display {
    max-height: 100px;
    padding: 0.3rem;
  }
  
  #customKeywordsModal .selected-keyword {
    padding: 0.25rem 0.4rem;
    font-size: 0.7rem;
  }
  
  #customKeywordsModal .remove-keyword-btn {
    font-size: 0.6rem;
    padding: 0.1rem 0.25rem;
  }
  
  #customKeywordsModal .custom-modal-footer {
    padding: 0.25rem 0.5rem;
    flex-direction: row;
    gap: 0.2rem;
    justify-content: space-between;
  }
  
  #customKeywordsModal .custom-modal-footer .btn {
    flex: 1;
    font-size: 0.65rem;
    padding: 0.25rem 0.4rem;
    min-width: 0;
  }
}

/* Улучшения для touch-устройств */
@media (hover: none) and (pointer: coarse) {
  #customKeywordsModal .btn {
    min-height: 44px; /* Минимальная высота для touch */
  }
  
  #customKeywordsModal .keyword-item {
    min-height: 44px;
  }
  
  #customKeywordsModal .keywords-tab-link {
    min-height: 44px;
  }
  
  #customKeywordsModal .custom-modal-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Портретная ориентация на мобильных */
@media (max-width: 768px) and (orientation: portrait) {
  #customKeywordsModal .custom-modal-container {
    max-height: 50vh; /* Уменьшено еще на 30% с 72vh */
  }
  
  #customKeywordsModal .keywords-tab-content {
    max-height: 250px;
  }
  
  #customKeywordsModal .keywords-list {
    max-height: 200px;
  }
}

/* Ландшафтная ориентация на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
  #customKeywordsModal .custom-modal-container {
    max-height: 48vh; /* Уменьшено еще на 30% с 68vh */
  }
  
  #customKeywordsModal .custom-modal-body {
    max-height: 60vh;
  }
  
  #customKeywordsModal .keywords-tab-content {
    max-height: 200px;
  }
  
  #customKeywordsModal .keywords-list {
    max-height: 150px;
  }
}