/* Tire & Wheel Finder — redesign 2026-05-14 под oct_ultrastore стилистику (new.tire.ua). */

.tua-finder {
  display: block;
  background: #fff;
  position: relative;
  color: #222;
  /* full-bleed: JS в search_auto.js выставит margin-left и width по факту,
     потому что Journal-grid использует асимметричные gutter-переменные */
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.tua-image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 1;
  pointer-events: none;
}
.tua-form-area-wrap {
  width: 100%;
  position: relative;
  z-index: 2;
}
.tua-form-area {
  width: 100%;
  /* Padding с двух сторон, симметрично, → форм-бокс визуально по центру.
     360px слева компенсирует image (320px) + воздух,
     360px справа — зеркало для симметрии. */
  padding: 24px 360px;
  min-width: 0;
  box-sizing: border-box;
}
.tua-image::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: linear-gradient(135deg, #FF8500 0%, #FFAD00 60%, transparent 60%);
  clip-path: polygon(0 0, 75% 0, 30% 100%, 0 100%);
  z-index: 1;
}
.tua-hero-img {
  position: relative;
  z-index: 2;
  max-width: 90%;
  max-height: 300px;
}

.tua-tabs {
  display: flex;
  gap: 24px;
  justify-content: flex-end;
  margin-bottom: 18px;
}
.tua-tab {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: color 0.15s;
}
.tua-tab .tua-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.tua-tab .tua-icon-box img { max-width: 38px; max-height: 38px; }
.tua-tab.active .tua-icon-box { background: #FFAD00; }
.tua-tab.active { color: #000; }
.tua-tab:hover .tua-icon-box { background: #FFE0A0; }
.tua-tab.active:hover .tua-icon-box { background: #FFAD00; }

.tua-form-box {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 22px 26px;
}

.tua-panel { display: block; }
.tua-panel.tua-hidden { display: none; }
.tua-mode-content { display: block; }
.tua-mode-content.tua-hidden { display: none; }

.tua-mode-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.tua-modes { display: flex; gap: 8px; }
.tua-mode {
  background: #f1f1f1;
  color: #555;
  border: 0;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tua-mode.active { background: #FFAD00; color: #000; }
.tua-mode:hover:not(.active) { background: #FFE0A0; color: #000; }

.tua-catalog-link {
  font-size: 13px;
  color: #555;
  text-decoration: underline;
}
.tua-catalog-link:hover { color: #FF8500; }

.tua-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.tua-grid-car {
  grid-template-columns: repeat(4, 1fr);
}
.tua-grid select,
.tua-grid input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  font-size: 14px;
  background: #fff;
  color: #333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1.5 3.5h9L6 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.tua-grid select:focus,
.tua-grid input:focus {
  outline: none;
  border-color: #FFAD00;
  background-color: #fff;
}
.tua-grid select:disabled { background-color: #f5f5f5; color: #aaa; cursor: not-allowed; }

.tua-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.tua-btn-search,
.tua-btn-clear {
  border: 0;
  padding: 11px 28px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tua-btn-search { background: #FFAD00; color: #000; }
.tua-btn-search:hover { background: #FF8500; color: #fff; }
.tua-btn-clear { background: #f1f1f1; color: #555; }
.tua-btn-clear:hover { background: #e0e0e0; color: #333; }

@media (max-width: 900px) {
  .tua-finder { flex-direction: column; }
  .tua-image { flex: 0 0 auto; height: 200px; }
  .tua-grid { grid-template-columns: 1fr 1fr; }
  .tua-grid-car { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tua-grid, .tua-grid-car { grid-template-columns: 1fr; }
  .tua-tabs { justify-content: center; }
  .tua-mode-row { justify-content: center; }
}