/* ================================================================
   HivePress Dark Theme — AIDiveForge
   Theme: #000 bg, #fff text, #00c8ff cyan accent
   ================================================================ */

/* ----------------------------------------------------------------
   1. LISTING CARDS (.hp-listing--view-block)
   ---------------------------------------------------------------- */
.hp-listing--view-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #222;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.hp-listing--view-block:hover {
  border-color: rgba(0, 200, 255, 0.35);
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.1), 0 4px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

/* Card content area padding */
.hp-listing--view-block .hp-listing__content,
.hp-listing--view-block .hp-listing__header,
.hp-listing--view-block .hp-listing__footer {
  padding-left: 1rem;
  padding-right: 1rem;
}
.hp-listing--view-block .hp-listing__footer {
  padding-bottom: 1rem;
}

/* Image placeholder bg */
.hp-listing--view-block .hp-listing__image img,
.hp-listing--view-block .hp-listing__image video {
  background-color: #111 !important;
}

/* ----------------------------------------------------------------
   2. LISTING TEXT
   ---------------------------------------------------------------- */
.hp-listing__title,
.hp-listing__title a,
.hp-listing__title span {
  color: #ffffff !important;
}
.hp-listing__title a:hover {
  color: #00c8ff !important;
}

.hp-listing__content,
.hp-listing__description,
.hp-listing__attribute,
.hp-listing__created-date,
.hp-listing-category__name,
.hp-listing-category__name a,
.hp-listing-category__item-count {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ----------------------------------------------------------------
   3. CATEGORY BADGES
   ---------------------------------------------------------------- */
.hp-listing__categories,
.hp-listing__category {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.hp-listing__category a,
.hp-listing__categories a {
  display: inline-block;
  background: rgba(0, 200, 255, 0.12);
  color: #00c8ff !important;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 200, 255, 0.25);
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hp-listing__category a:hover,
.hp-listing__categories a:hover {
  background: rgba(0, 200, 255, 0.2);
  border-color: #00c8ff;
  color: #66dfff !important;
}

/* ----------------------------------------------------------------
   4. LISTING CATEGORY CARDS
   ---------------------------------------------------------------- */
.hp-listing-category--view-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #222;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hp-listing-category--view-block:hover {
  border-color: rgba(0, 200, 255, 0.35);
  box-shadow: 0 0 16px rgba(0, 200, 255, 0.08);
}
.hp-listing-category--view-block .hp-listing-category__content {
  padding: 1rem;
}

/* ----------------------------------------------------------------
   5. SEARCH & FILTER FORMS
   ---------------------------------------------------------------- */
.hp-form input[type="text"],
.hp-form input[type="email"],
.hp-form input[type="url"],
.hp-form input[type="search"],
.hp-form input[type="number"],
.hp-form input[type="tel"],
.hp-form input[type="password"],
.hp-form textarea,
.hp-form select,
.hp-field--text,
.hp-field--email,
.hp-field--number,
.hp-field--search,
.hp-field--select,
.hp-field--textarea,
.hp-field--url,
.hp-field--password {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hp-form input:focus,
.hp-form textarea:focus,
.hp-form select:focus {
  border-color: #00c8ff !important;
  box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.15) !important;
  outline: none;
}
.hp-form input::placeholder,
.hp-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Select2 dropdowns (HivePress uses select2) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  color: #fff !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ffffff !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}
.select2-dropdown {
  background: #111 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.select2-results__option {
  color: #ffffff !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(0, 200, 255, 0.2) !important;
  color: #ffffff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(0, 200, 255, 0.1) !important;
}
.select2-search--dropdown .select2-search__field {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Filter widget sidebar */
.hp-widget--listing-filter,
.hp-widget--vendor-filter {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #222;
  border-radius: 8px;
  padding: 1.25rem;
}
.hp-widget .hp-field__label,
.hp-widget label {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Form messages */
.hp-form__messages {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------------
   6. PAGINATION
   ---------------------------------------------------------------- */
.hp-pagination .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff !important;
  border: 1px solid #333;
  border-radius: 6px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.hp-pagination .nav-links .page-numbers:hover {
  background: rgba(0, 200, 255, 0.15);
  border-color: #00c8ff;
  color: #00c8ff !important;
}
.hp-pagination .nav-links .page-numbers.current {
  background: #00c8ff;
  border-color: #00c8ff;
  color: #000000 !important;
  font-weight: 600;
}

/* ----------------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------------- */
.hp-form__button,
.hp-button,
button.hp-listing__action,
button.hp-vendor__action,
.hp-form__footer .hp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #00c8ff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 6px;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.3s ease, transform 0.2s ease;
  text-decoration: none !important;
}
.hp-form__button:hover,
.hp-button:hover,
button.hp-listing__action:hover,
button.hp-vendor__action:hover {
  background: #33d4ff !important;
  box-shadow: 0 0 20px rgba(0, 200, 255, 0.3);
  transform: translateY(-1px);
}

/* Outline/secondary link-style actions */
a.hp-listing__action,
a.hp-vendor__action,
.hp-form__action:not(button) {
  color: #00c8ff !important;
  text-decoration: none !important;
}
a.hp-listing__action:hover,
a.hp-vendor__action:hover,
.hp-form__action:not(button):hover {
  color: #66dfff !important;
}

/* ----------------------------------------------------------------
   8. GENERAL HivePress PAGE CHROME
   ---------------------------------------------------------------- */
.hp-page {
  color: #ffffff;
}
.hp-page__title,
.hp-section__title {
  color: #ffffff !important;
}
.hp-page__description {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Topbar separator */
.hp-page__topbar--separate {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Tabbed menu */
.hp-menu--tabbed {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.hp-menu--tabbed .hp-menu__item a {
  color: rgba(255, 255, 255, 0.65) !important;
}
.hp-menu--tabbed .hp-menu__item--current a {
  color: #ffffff !important;
}
.hp-menu--tabbed .hp-menu__item--current::before {
  background-color: #00c8ff !important;
}

/* Breadcrumbs */
.hp-menu--breadcrumb .hp-menu__item {
  color: rgba(255, 255, 255, 0.5) !important;
}
.hp-menu--breadcrumb .hp-menu__item a {
  color: #00c8ff !important;
}
.hp-menu--breadcrumb .hp-menu__item a:hover {
  color: #66dfff !important;
}

/* Status badges */
.hp-status span {
  border-color: currentColor !important;
}

/* Meta text */
.hp-meta {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Links */
.hp-link:not(:hover) {
  color: rgba(255, 255, 255, 0.8) !important;
}
.hp-link:hover {
  color: #00c8ff !important;
}

/* Block placeholders */
.hp-block__placeholder {
  background-color: #111 !important;
}
.hp-block__placeholder span {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Repeater / table rows */
.hp-field--repeater tr {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
.hp-field--repeater td {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Modals */
.hp-modal {
  background: #111 !important;
  color: #fff !important;
  border-radius: 8px;
}
.hp-modal__title {
  color: #fff !important;
}

/* ================================================================
   9. SINGLE LISTING PAGE (.hp-listing--view-page)
   ================================================================ */

/* Hero-style title area */
.hp-listing--view-page .hp-listing__title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff !important;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(0, 200, 255, 0.2);
  margin-bottom: 1.5rem !important;
}

/* Primary attributes — dark cards with accent */
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute {
  background-color: rgba(0, 200, 255, 0.06) !important;
  border: 1px solid rgba(0, 200, 255, 0.15);
  border-radius: 8px;
  color: #ffffff !important;
}

/* Description */
.hp-listing--view-page .hp-listing__description {
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.75;
}

/* Secondary / ternary attributes */
.hp-listing--view-page .hp-listing__attributes--secondary,
.hp-listing--view-page .hp-listing__attributes--ternary {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Image gallery background */
.hp-listing--view-page .hp-listing__images img,
.hp-listing--view-page .hp-listing__images video {
  background-color: #0a0a0a !important;
  border-radius: 8px;
}

/* Image carousel thumbnails */
.hp-listing__image-carousel .slick-slide img,
.hp-listing__image-carousel .slick-slide video {
  border-radius: 4px;
}

/* Sidebar sections (vendor info, actions) */
.hp-page__sidebar .hp-widget,
.hp-page__sidebar .hp-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #222;
  border-radius: 8px;
  padding: 1.5rem;
}

/* Vendor card in sidebar */
.hp-vendor--view-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #222;
  border-radius: 8px;
  padding: 1rem;
}
.hp-vendor__name,
.hp-vendor__name a {
  color: #ffffff !important;
}
.hp-vendor__name a:hover {
  color: #00c8ff !important;
}
.hp-vendor__attribute,
.hp-vendor__registered-date {
  color: rgba(255, 255, 255, 0.6) !important;
}
.hp-vendor__image img {
  background-color: #111 !important;
}

/* Well-spaced content sections on single page */
.hp-listing--view-page > *:not(:last-child) {
  margin-bottom: 2rem;
}

/* ================================================================
   10. "USED IN WORKFLOW PACKS" PLACEHOLDER
       (styled section for future integration)
   ================================================================ */
.hp-listing__workflow-packs {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(0, 200, 255, 0.04);
  border: 1px dashed rgba(0, 200, 255, 0.25);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.hp-listing__workflow-packs strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #00c8ff;
  font-size: 1rem;
}

/* ================================================================
   11. RESPONSIVE ADJUSTMENTS
   ================================================================ */

/* ---- Tablet (768px / 47.99em) ---- */
@media only screen and (max-width: 47.99em) {

  /* Single listing title — smaller */
  .hp-listing--view-page .hp-listing__title {
    font-size: 1.5rem;
  }

  /* Sidebar widgets — tighter padding */
  .hp-page__sidebar .hp-widget,
  .hp-page__sidebar .hp-section {
    padding: 1rem;
  }

  /* Listing cards — full width, proper margins */
  .hp-listing--view-block {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 1rem;
  }

  /* Single listing — stack primary attributes */
  .hp-listing--view-page .hp-listing__attributes--primary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute {
    width: 100% !important;
  }

  /* Filter sidebar — full width above listings */
  .hp-page__sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem;
  }
  .hp-page__content {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Pagination — wrappable pills */
  .hp-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
  }
  .hp-pagination .nav-links .page-numbers {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
  }
}

/* ---- Phone (480px) ---- */
@media only screen and (max-width: 480px) {

  /* Single listing title — even smaller */
  .hp-listing--view-page .hp-listing__title {
    font-size: 1.25rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem !important;
  }

  /* Listing card content — tighter */
  .hp-listing--view-block .hp-listing__content,
  .hp-listing--view-block .hp-listing__header,
  .hp-listing--view-block .hp-listing__footer {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Category badges — smaller */
  .hp-listing__category a,
  .hp-listing__categories a {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
  }

  /* Sidebar widgets — tight padding */
  .hp-page__sidebar .hp-widget,
  .hp-page__sidebar .hp-section {
    padding: 0.75rem;
  }

  /* Filter widget — tighter */
  .hp-widget--listing-filter,
  .hp-widget--vendor-filter {
    padding: 1rem;
  }

  /* Pagination — smaller pills */
  .hp-pagination .nav-links .page-numbers {
    min-width: 1.8rem;
    min-height: 1.8rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
  }

  /* Buttons — larger tap target */
  .hp-form__button,
  .hp-button,
  button.hp-listing__action,
  button.hp-vendor__action {
    min-height: 44px;
    padding: 0.7rem 1.2rem;
    width: 100%;
    justify-content: center;
  }

  /* Vendor card sidebar — tighter */
  .hp-vendor--view-block {
    padding: 0.75rem;
  }

  /* Modal — near full-width on phone */
  .hp-modal {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 1rem auto;
  }
}