/**
 * Virtolit Suite - Global site tweaks
 * Note: keep this lightweight and theme-friendly.
 *
 * IMPORTANT (Virtolit Theme):
 * Global layout responsibilities (sticky footer, page bottom spacing, etc.) are handled by the theme.
 * This stylesheet focuses on Virtolit Suite UI stabilization across themes.
 */

/* Hide the WP admin bar on the frontend (mobile black bar with profile/logout). */
#wpadminbar{
  display: none !important;
}
html{
  margin-top: 0 !important;
}
body.admin-bar{
  margin-top: 0 !important;
}

/* Marketplace filters: force smaller "Apply" button (~20% smaller).
   DEV-SAFE: global override loaded late to avoid theme/Elementor button rules.
   Also uses a specificity booster (.vsuite-filter-apply repeated) to beat combined/minified CSS. */
body .vsuite-market-filters .vsuite-market-filters-actions button.vsuite-filter-apply.vsuite-filter-apply,
body .vsuite-market-filters .vsuite-market-filters-actions .vsuite-filter-apply.vsuite-filter-apply{
  min-height: 26px !important;
  height: auto !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;

  /* Prevent theme "tap/click" scaling animations */
  transform: none !important;
  transition: none !important;
}

body .vsuite-market-filters .vsuite-market-filters-actions button.vsuite-filter-apply.vsuite-filter-apply:focus,
body .vsuite-market-filters .vsuite-market-filters-actions button.vsuite-filter-apply.vsuite-filter-apply:active,
body .vsuite-market-filters .vsuite-market-filters-actions button.vsuite-filter-apply.vsuite-filter-apply:focus-visible,
body .vsuite-market-filters .vsuite-market-filters-actions .vsuite-filter-apply.vsuite-filter-apply:focus,
body .vsuite-market-filters .vsuite-market-filters-actions .vsuite-filter-apply.vsuite-filter-apply:active,
body .vsuite-market-filters .vsuite-market-filters-actions .vsuite-filter-apply.vsuite-filter-apply:focus-visible{
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Marketplace project/category navigation: prevent size "jumps" on navigation.
   Category buttons are rendered as <a class="vsuite-market-cat-link ..."> inside .vsuite-market-categories.
   Some themes add :active/:focus transforms or transitions (scale), which looks like grow/shrink on each navigation.
   We lock size-critical properties and hard-disable transform/transition on these links. */
body .vsuite-market-archive .vsuite-market-categories .vsuite-market-cat-link.vsuite-market-cat-link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;

  /* Size lock */
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 10px 12px !important;
  min-height: 36px !important;
  white-space: nowrap !important;

  /* Prevent theme "tap/click" scaling animations */
  transform: none !important;
  transition: none !important;

  /* Keep underline / focus effects from changing perceived height */
  text-decoration: none !important;

  /* Border width can change on some themes; lock it to avoid layout shifts */
  border-width: 1px !important;
}

body .vsuite-market-archive .vsuite-market-categories .vsuite-market-cat-link.vsuite-market-cat-link:hover,
body .vsuite-market-archive .vsuite-market-categories .vsuite-market-cat-link.vsuite-market-cat-link:focus,
body .vsuite-market-archive .vsuite-market-categories .vsuite-market-cat-link.vsuite-market-cat-link:active,
body .vsuite-market-archive .vsuite-market-categories .vsuite-market-cat-link.vsuite-market-cat-link:focus-visible{
  transform: none !important;
  transition: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  border-width: 1px !important;
}

/* Project page (builder): make "Create ad" button look like regular category buttons.
   The button is rendered as .vsuite-create-ad-btn with inner spans.
   Keep positioning logic intact (left/top/translateY), but remove "badge" look & scaling. */
body .vsuite-project-page .vsuite-create-ad-btn.vsuite-create-ad-btn{
  width: auto !important;
  height: auto !important;
  min-height: 36px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid #ddd !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  gap: 0 !important;

  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;

  /* Prevent theme/button animations from changing size */
  transition: none !important;
}
/* Відступ між аватаром проєкту та кнопкою "Створити оголошення"
   - телефон: 22px
   - планшет: 25px
   - дуже малі екрани: 9px
   - ПК: без змін (не чіпаємо >= 1025px)
*/
@media (max-width: 767px){
  body .vsuite-project-page .vsuite-create-ad-btn.vsuite-create-ad-btn{
    margin-left: 22px !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px){
  body .vsuite-project-page .vsuite-create-ad-btn.vsuite-create-ad-btn{
    margin-left: 25px !important;
  }
}
/* Дуже маленькі екрани — щоб не “вилазило” */
@media (max-width: 360px){
  body .vsuite-project-page .vsuite-create-ad-btn.vsuite-create-ad-btn{
    margin-left: 9px !important;
  }
}


body .vsuite-project-page .vsuite-create-ad-btn.vsuite-create-ad-btn:hover,
body .vsuite-project-page .vsuite-create-ad-btn.vsuite-create-ad-btn:focus,
body .vsuite-project-page .vsuite-create-ad-btn.vsuite-create-ad-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  border-color: #000 !important;
  transition: none !important;
}

/* Remove click-scale while keeping translateY positioning stable */
body .vsuite-project-page .vsuite-create-ad-btn.vsuite-create-ad-btn:active{
  transform: translateY(-50%) !important;
  transition: none !important;
  text-decoration: none !important;
  border-color: #000 !important;
}

/* Inner content */
body .vsuite-project-page .vsuite-create-ad-plus{ display: none !important; }
body .vsuite-project-page .vsuite-create-ad-text{
  display: inline !important;
  color: #111 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
body .vsuite-project-page .vsuite-create-ad-text br{ display: none !important; }

/* Project category pages (shortcode with category): make spacing compact
   between:
   - category buttons (.vsuite-project-taxonomy)
   - attribute filters (.vsuite-market-filters)
   - ads list (.vsuite-project-ads)
   DEV-SAFE: use !important to beat theme/inline/layout CSS. */
body .vsuite-project-page .vsuite-project-taxonomy{
  margin-bottom: 4px !important;
}

body .vsuite-project-page .vsuite-project-taxonomy + .vsuite-market-filters{
  margin-top: 4px !important;
}

body .vsuite-project-page .vsuite-market-filters{
  margin-top: 4px !important;
  margin-bottom: 6px !important;
}

body .vsuite-project-page .vsuite-market-filters + .vsuite-project-ads{
  margin-top: 6px !important;
}

body .vsuite-project-page .vsuite-project-ads{
  margin-top: 6px !important;
}

/* Project category pages: make ad cards look like a compact list
   with only horizontal separators (no full boxed border / rounded background).
   Between two ads there must be only ONE horizontal line:
   - every card has bottom border
   - only the first card also has top border
*/
body .vsuite-project-page .vsuite-project-ads .vsuite-ad-list{
  gap: 0 !important;
}

body .vsuite-project-page .vsuite-project-ads .vsuite-ad-card{
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  /* Compact padding between separator line and content */
  padding: 6px 0 !important;
  margin: 0 !important;
}

body .vsuite-project-page .vsuite-project-ads .vsuite-ad-card{
  border-bottom: 1px solid #e7e7e7 !important;
}

body .vsuite-project-page .vsuite-project-ads .vsuite-ad-card:first-child{
  border-top: 1px solid #e7e7e7 !important;
}

/* Project ads list: hover/focus highlight must cover the whole card (not only the avatar block). */
body .vsuite-project-page .vsuite-project-ads .vsuite-ad-card:hover,
body .vsuite-project-page .vsuite-project-ads .vsuite-ad-card:focus,
body .vsuite-project-page .vsuite-project-ads .vsuite-ad-card:focus-visible{
  background: #f3f4f6 !important;
  filter: none !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Project category buttons ("Вірти / Майно / Акаунти"): remove link underlines.
   Some themes apply `a { text-decoration: underline; }` globally.
   These tabs are designed as buttons, so we hard-disable underlines. */
body .vsuite-project-taxonomy a,
body .vsuite-project-taxonomy a:hover,
body .vsuite-project-taxonomy a:focus,
body .vsuite-project-taxonomy a:active,
body .vsuite-project-taxonomy a:visited{
  text-decoration: none !important;
}

/* Ad cards: attribute row wrapping fix (marketplace list + cabinet/profile lists).
   Goal:
   - Keep "value + unit" together (e.g. "60 кк", "129 грн").
   - Do NOT move values to a new line if there is still room.
   - Allow the value block to move to the next line as a whole when there isn't room.
*/
body .vsuite-ad-card .vsuite-ad-attrs{
  display: block !important;
  text-align: left !important;
  line-height: 1.55 !important;
}

body .vsuite-ad-card .vsuite-ad-attrs .vsuite-ad-attr{
  display: inline !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 18px 0 0 !important;
  white-space: normal !important;
  text-align: left !important;
}

body .vsuite-ad-card .vsuite-ad-attrs .vsuite-ad-attr .k{
  display: inline !important;
  white-space: nowrap !important;
}

body .vsuite-ad-card .vsuite-ad-attrs .vsuite-ad-attr .v{
  display: inline !important;
  white-space: nowrap !important;
}

/* Create Ad page: normalize single-line field heights across all input/select types
   to match the marketplace filters sizing (one-row thickness).
   Multi-line fields (textarea, select[multiple]) are intentionally not forced. */
body .vsuite-create-ad-wrap .vsuite-create-ad-field input[type="text"],
body .vsuite-create-ad-wrap .vsuite-create-ad-field input[type="number"],
body .vsuite-create-ad-wrap .vsuite-create-ad-field select:not([multiple]){
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  line-height: 38px !important;
  box-sizing: border-box !important;
}
/* ПРАВКА 2:
   Create Ad page: single-select should not render with a grey background on mobile/tablet.
   Some themes or mobile UA styles apply a grey background to <select>.
   Force a neutral white background and readable text color.
   DEV-SAFE: scoped strictly to the create-ad wrapper.
*/
body .vsuite-create-ad-wrap .vsuite-create-ad-field select:not([multiple]){
  background-color: #fff !important;
  color: #111 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #111 !important; /* iOS/Safari */
  -webkit-appearance: menulist !important;
  appearance: auto !important;
}


/* Unit suffix block must match the same height as the input/select fields. */
body .vsuite-create-ad-wrap .vsuite-input-group{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body .vsuite-create-ad-wrap .vsuite-input-group .vsuite-unit-suffix{
  height: 40px !important;
  min-height: 40px !important;
  line-height: 38px !important;
  box-sizing: border-box !important;
}

/* Create Ad page: make the top title "Створити оголошення" match the project line below (.sub)
   - same font size
   - same grey color
   Scope is limited to the create-ad header to avoid affecting other H1 on the site. */
body .vsuite-create-ad-wrap .vsuite-create-ad-head .vsuite-create-ad-meta{
  color: #666 !important;
}

body .vsuite-create-ad-wrap .vsuite-create-ad-head .vsuite-create-ad-meta h1{
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: inherit !important;
}

body .vsuite-create-ad-wrap .vsuite-create-ad-head .vsuite-create-ad-meta .sub{
  color: inherit !important;
}

/* Create Ad page: remove grey outline/border around the project avatar in the header.
   The base create-ad template sets a light border in an inline <style> block;
   we override it with !important so the border is removed without touching PHP markup. */
body .vsuite-create-ad-wrap .vsuite-create-ad-head img{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Create Ad page: button sizing
   - Phone/Tablet: +10% vs base "Застосувати"
   - PC (>=1025px): +20% vs base "Застосувати"
   NOTE: This targets action buttons within the create-ad form area only. */
body .vsuite-create-ad-wrap .vsuite-create-ad-actions button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* +10% (26px -> ~29px) */
  min-height: 29px !important;
  height: auto !important;

  /* +10% (8px -> ~9px) */
  padding: 0 9px !important;

  /* +10% (12px -> ~13px) */
  font-size: 13px !important;
  line-height: 1.1 !important;

  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;

  /* +10% (10px -> ~11px) */
  border-radius: 11px !important;

  /* Prevent theme/inline click effects from changing size */
  transform: none !important;
  transition: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* PC: +20% */
@media (min-width: 1025px){
  body .vsuite-create-ad-wrap .vsuite-create-ad-actions button{
    min-height: 32px !important;  /* 26px * 1.2 ~= 31.2 */
    padding: 0 10px !important;   /* 8px * 1.2 ~= 9.6 */
    font-size: 14px !important;   /* 12px * 1.2 ~= 14.4 */
    border-radius: 12px !important;
  }
}

/* Cabinet/Profile: user ID should be plain text (same as the online/last-seen line).
   DEV-SAFE: use !important to override inline CSS injected by the Cabinet module. */
.vcab .vcab-id-badge{
  display: inline !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #6b7280 !important;
  white-space: nowrap !important;
}

.vcab.vcab-profile .vcab-id-badge{
  padding: 0 !important;
}

/* Cabinet/Profile: make spacing between Nickname -> ID -> Online status uniform.
   The Cabinet module uses inline spacer elements with different heights.
   We override them here with !important to keep the rhythm consistent. */
.vcab .vcab-gap-nick-id,
.vcab .vcab-gap-id-status,
.vcab .vcab-gap-status-reg{
  display: block !important;
  height: 4px !important;
  line-height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}