/* phone-market.css — плагин: стили формы поиска и карточек (высокая специфичность) */

/* Контейнер (плагин) — специфично к плагину */
.pm-search-wrapper {
    background: #f7f8ff;
    border: 1px solid #e1e6ff;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.pm-search-wrapper strong {
    color: #5d4037;
}

.pm-search-wrapper input,
.pm-search-wrapper select {
    background-color: #fffefb;
}

.pm-search-wrapper input:focus {
    border-color: #ffb74d;
    box-shadow: 0 0 0 2px rgba(255,183,77,0.25);
}

/* Маска 7 клеток */
.pm-search-wrapper .pm-mask {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.pm-search-wrapper .mask-cell {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    padding: 0;
    background: #ffffff;
    color: #222;
    border: 1px solid #cfd8e6;
    border-radius: 6px;
    box-sizing: border-box;
}

/* Placeholder */
.pm-search-wrapper .mask-cell::placeholder {
    color: #8a93a6;
    opacity: 1;
}

/* Блок фильтров */
.pm-search-wrapper .pm-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 28px;
}

.pm-search-wrapper .pm-filter-block {
    width: 100%;
    min-width: 0; /* важно для grid */
}

/* Блок фильтров префиксов и операторов */
.pm-prefix-list,
.pm-operator-list {
    background: linear-gradient(180deg, #ffffff, #f6f8ff);
    border: 1px solid #e2e7ff;
    border-radius: 8px;
    padding: 12px 14px;
    max-height: 260px;
    overflow-y: auto;
}

/* аккуратный скролл */
.pm-prefix-list::-webkit-scrollbar,
.pm-operator-list::-webkit-scrollbar {
    width: 6px;
}
.pm-prefix-list::-webkit-scrollbar-thumb,
.pm-operator-list::-webkit-scrollbar-thumb {
    background: #c7cffb;
    border-radius: 6px;
}

/* Результаты — сетка (плагин namespace: pm-results) */
.pm-results {
    display: grid;
    gap: 18px;
    grid-auto-flow: dense;
}

/* 1 col mobile, 2 col tablet, 3 col desktop */
@media (min-width: 700px) {
    .pm-results { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .pm-results { grid-template-columns: repeat(3, 1fr); }
}

/* Карточка — усиленная специфичность чтобы перебивать стиль темы */
.pm-results .phone-item {
    border: 1px solid #e0e6fb;
	border-color: #e8e1d6;
    padding: 16px 16px 22px;
    border-radius: 10px;
    background: #ffffff;
    transition: transform 0.28s cubic-bezier(.2,.9,.3,1), box-shadow 0.28s ease, background 0.28s ease;
    box-sizing: border-box;
    /* animation on insertion */
    animation: pm-fade-in 260ms ease both;
}

/* Красивый hover — контрастнее, приятный синий тон */
.pm-results .phone-item:hover {
    background: #f0f8ff;
    box-shadow: 0 14px 40px rgba(26,35,126,0.14);
    transform: translateY(-6px) scale(1.01);
}

/* Уточняем элементы карточки */
.pm-results .phone-number {
    color: #0d1b6b; /* чуть глубже Navy */
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 8px;
	text-align: center;
}

.pm-results .phone-operator {
    font-size: 1.05rem;
    font-weight: 500;
    color: #444;
    margin-top: 6px;
    text-align: center;
}

.pm-results .phone-price {
    color: #d32f2f;
    font-weight: 700;
    margin-top: 8px;
	text-align: center;
}

/* Кнопка внутри карточки */
.pm-results .phone-item .button {
    margin-top: 15px;
    width: 100%;
    display: block;
    text-align: center;
    padding: 10px 18px;
    border-radius: 6px;
}

/* Кнопка заказа */
#pm-order-form button {
  font-size: 18px;
  padding: 12px 20px;
}

@media (max-width: 700px) {
  #pm-order-form button {
    width: 100%;
  }
}

/* Подсказка по типам */
.pm-search-wrapper .pm-type-hint {
    font-size: 13px;
    color: #6b6f80;
    margin-top: 8px;
}

/* Анимация появления карточки */
@keyframes pm-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Увеличим контраст полей ввода (чтобы не сливались с фоном темы) */
.pm-search-wrapper .mask-cell {
    background: #fff; /* явный белый фон */
}

/* Вывод данных на стр.заказа */
#your-order {
    margin-bottom: 20px;
	font-weight: 700;
	color: navy;
	text-transform: uppercase;
	text-decoration: underline;
}

/* ===== Форма заказа — ширина полей ===== */

#pm-order-form {
    max-width: 520px;   /*ширина самой формы */
	margin-top: 30px;
}

#pm-order-form input[type="text"],
#pm-order-form input[type="email"] {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    font-size: 16px;

    border: 1px solid #d7dffb;
    border-radius: 8px;
    box-sizing: border-box;
}

#pm-order-form label {
    font-weight: 500;
    font-size: 14px;
}


#pm-order-form p {
	margin-top: 20px;
    margin-bottom: 16px;
}

.pm-order-number {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ===== ФИЛЬТР ЦЕНЫ ===== */

/* Поля цены */
.pm-search-wrapper .pm-price input[type="number"] {
    width: 100%;
    padding: 8px 10px; /* место под стрелки */
    font-size: 15px;
    border: 1px solid #d7dffb;
    border-radius: 6px;
    box-sizing: border-box;
}

/* ===== СтрЕлки для цены ===== */
.pm-search-wrapper .pm-price input[type="number"]::-webkit-inner-spin-button,
.pm-search-wrapper .pm-price input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.7;
    height: 22px;
}

/* ===== БЛОК ЦЕНЫ — ПОЛНОЦЕННЫЙ ФИЛЬТР В GRID ===== */
.pm-search-wrapper .pm-price {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* строка "от / до" */
.pm-search-wrapper .pm-price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* label — НЕ block */
.pm-search-wrapper .pm-price-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

/* ===== Счётчик ===== */
.pm-results-count {
    margin: 10px 0 18px;
    font-weight: 600;
    color: #1a237e;
}

/* ===== Сообщения формы заказа ===== */

/* браузерные подсказки (Chrome / Edge) */
input:invalid,
input:required:invalid {
    font-size: 16px;
}

/* результат отправки заказа */
#pm-order-result {
    font-size: 18px;
    font-weight: 600;
    margin-top: 16px;
}

/* цвет уже задаётся inline, усилим читаемость */
#pm-order-result p {
    margin: 0;
}

/* Результаты поиска - заглушка до первого поиска */
.pm-search-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 10px;
    font-size: 18px;
    color: #6b6f80;
    font-weight: 500;
}

/* ===== Случайные номера ===== */
.pm-random-block {
    margin-top: 50px;
	margin-bottom: 40px;
}

.pm-random-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

/* ===== Кнопка "Обновить" (SECONDARY) ===== */
.pm-random-refresh {
    background: transparent;
    color: #1A237E;
    border: 2px solid #1A237E;
    border-radius: 8px; /* pill */
    padding: 7px 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

/* лёгкий hint на "refresh" */
.pm-random-refresh::before {
    content: "↻";
    font-size: 15px;
    transition: transform 0.35s ease;
}

.pm-random-refresh:hover {
    background: #eef1ff;
    box-shadow: 0 6px 16px rgba(26,35,126,0.18);
	color: #0F1659;
}

.pm-random-refresh:hover::before {
    transform: rotate(180deg);
}

.pm-random-refresh:active {
    transform: translateY(1px);
}

/* ===== Изображение на странице заказа ===== */
.pm-order-image {
    width: 100%;
    max-width: 100%;
}

/* ===== Карточка заказа ===== */
.pm-order-card {
    border: 2px solid #dfe3ff;
    background: linear-gradient(180deg, #f9faff, #ffffff);
    box-shadow: 0 10px 28px rgba(26,35,126,0.12);
}

/* ===== Строки под полем E-mail ===== */
.pm-privacy {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #6b6f80;
}

/* ===== Список под заказом ===== */
.pm-trust {
    margin-top: 25px;
	margin-left: -2px;
    padding-left: 0;
    list-style: none;
    font-size: 14px;
    color: #2e7d32;
}

.pm-trust li {
    margin-bottom: 6px;
}

/* ===== CTA кнопка "ЗАКАЗАТЬ" ===== */
.pm-results .phone-item .button {
    background: linear-gradient(135deg, #1A237E, #3949AB);
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 8px 22px rgba(26,35,126,0.35);
}

.pm-results .phone-item .button:hover {
    background: linear-gradient(135deg, #3949AB, #5C6BC0);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(26,35,126,0.45);
}

/* ===== "НИЧЕГО НЕ НАЙДЕНО" — красный акцент ===== */
.pm-results-count {
    transition: color 0.2s ease;
}

.pm-results-count.pm-empty {
    color: #d32f2f; /* красный */
}

/* ===== КНОПКА "ПОКАЗАТЬ ЕЩЁ" ===== */
.pm-load-more {
  display: block;
  margin: 30px auto 10px; /* 🔥 отступ от результатов */
  padding: 12px 26px;

  background: #f5f6f7;          /* НЕ как "Заказать" */
  border: 1px solid #dcdcdc;
  border-radius: 6px;

  font-size: 16px;
  font-weight: 500;
  color: #333;
  cursor: pointer;

  transition: all .2s ease;
}

.pm-load-more:hover {
  background: #e9eaec;
  color: #1A237E;
}

/* ===== LISTING контейнер: счётчик + "Показать ещё" ===== */

.pm-load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 30px 0 40px;
}

.pm-load-more-wrap .pm-results-count {
  font-size: 16px;
  font-weight: 500;
  color: #6b6f80;
}

/* АДАПТИВ */

@media (max-width: 480px) {
  .pm-mask {
    display: flex;
    justify-content: space-between;
  }

  .pm-mask .mask-cell {
    width: calc((100% - 6 * 6px) / 7);
    max-width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .pm-load-more-wrap {
    gap: 14px;
  }
  
/* ===== Карточки номеров — больше «тап-зона» ===== */
  .pm-results .phone-item {
    padding: 18px;
  }

  .pm-results .phone-item .button {
    font-size: 18px;
    padding: 14px;
  }
  
/* ===== Цена — визуальный приоритет ===== */
  .pm-results .phone-price {
    font-size: 1.3rem;
  }

/* ===== Фильтры — компактнее ===== */
  .pm-search-wrapper {
    padding: 14px;
  }

  .pm-filter-block strong {
    font-size: 15px;
  }
}

@media (max-width: 900px) {
    .pm-search-wrapper .pm-filters {grid-template-columns: repeat(2, 1fr);}
	/* Удобство: боксы в ряд не наезжают, на мобильных становятся колонкой */
	.pm-search-wrapper .pm-filter-block {min-width: 40%;}
	/* Карточки, кнопки */
	.pm-results .phone-item {padding: 12px 14px 18px;}
	.pm-results .button {padding: 10px 14px;}
}

@media (max-width: 600px) {
    .pm-search-wrapper .pm-filters {grid-template-columns: 1fr;}
	/* Удобство: боксы в ряд не наезжают, на мобильных становятся колонкой */
	.pm-search-wrapper .pm-filter-block {min-width: 100%;}
}