/* Virtolit Cabinet UI (tabs/login/register) */
                /* Ensure red warning words stay red even inside muted containers */
    .vcab-nick-hints .vcab-red{color:#d11 !important; font-weight:700;}
    .vcab-red{color:#d11 !important; font-weight:700;}
.vcab-nick-hints{margin-top:6px;line-height:1.25;}
    .vcab-nick-hint-line{margin-top:3px;}
    .vcab-nick-hint-line:first-child{margin-top:0;}
.vcab-tabs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  width:max-content;
  height:100%;
  margin:0;
}
.vcab-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#f8fafc;
  cursor:pointer;
  color:#0f172a;
  height:100%;
  min-width:120px;
  line-height:1.1;

  /* Less bold, clearer text for tabs */
  font-family: Arial, "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:600;
  letter-spacing:0.1px;
}
.vcab-tab.is-active{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
  font-weight:600;
}
.vcab-tab:not(.is-active){
  background:#f8fafc;
  border-color:#e5e7eb;
  color:#0f172a;
  font-weight:500;
}


/* === Profile settings modal (Virtolit Cabinet) === */

/* Virtolit Cabinet: spacing between OTP code field and confirm button */
.vcab-card form input[name="vcab_code"]{
  display:block;
  margin-bottom:5px;
}



/* OTP verify step: add spacing between code input and confirm button */
.vcab-verify-form input[name="vcab_code"]{
  display:block;
  margin-bottom:5px;
}
.vcab-verify-form button.btn{
  margin-top:5px;
}

/* Password change / reset UI (settings modal) */
a.vcab-forgot-link{color:#dc2626;font-weight:700;text-decoration:underline;cursor:pointer;}
.vcab-pw-wrap{margin-top:10px;}

/* === Settings modal: spacing + button styles for password change === */

/* 1) +3px space between Email row and the "Змінити пароль" button row */
.vcab-ps-row.vcab-ps-row-pwbtn{margin-top:6px !important;}

/* Fix inheritance from .vcab-actions (line-height:0) inside the settings modal */
.vcab-ps-modal{line-height:1.2 !important;}

/* Restore normal button padding inside settings modal (vcab-actions resets button padding to 0) */
.vcab-ps-modal .btn{padding:10px 14px !important;}
.vcab-ps-modal .btn.small{padding:8px 12px !important;}

/* 2) "Змінити пароль" button: add comfortable inner padding */
.vcab-ps-modal .vcab-pw-trigger{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:24px !important;
  padding:6px 10px !important;
  font-size:0.7em !important;
  line-height:1 !important;
  white-space:nowrap !important;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.vcab-ps-modal .vcab-pw-trigger:hover{
  cursor:pointer !important;
  background-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px);
  filter: none;
}


/* 3) "Зберегти" buttons in password forms: same look as nickname "Зберегти" + 3px gap from inputs */
.vcab-ps-modal .vcab-pw-save.btn.small{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  background:#0f172a !important;
  color:#fff !important;
  border-color:#0f172a !important;
  padding:8px 12px !important;
  border-radius:9px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  margin-top:6px !important;
}

/* 4) "Забув пароль" button: same as "Зберегти" but red */
.vcab-ps-modal .vcab-pw-forgot-btn.btn.small{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:0.7em !important;
  min-height:24px !important;
  background:#dc2626 !important;
  color:#fff !important;
  border-color:#dc2626 !important;
  padding:6px 10px !important;
  border-radius:9px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  margin-top:0 !important;
}
.vcab-ps-modal .vcab-pw-forgot-btn.btn.small:hover{
  filter:brightness(0.95);
}

/* 5) "Надіслати" button in forgot-password flow: red + white like "Забув пароль", and ~10% smaller than "Зберегти" */
.vcab-ps-modal .vcab-pw-send-btn.btn.small{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:31px !important; /* 34px * 0.9 */
  background:#dc2626 !important;
  color:#fff !important;
  border-color:#dc2626 !important;
  padding:7px 11px !important; /* 8/12 * 0.9 */
  border-radius:9px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  margin-top:6px !important;
  font-size:0.9em !important;
}
.vcab-ps-modal .vcab-pw-send-btn.btn.small:hover{
  filter:brightness(0.95);
}

/* 6) "Підтвердити код" button: same as "Зберегти" but ~10% smaller */
.vcab-ps-modal .vcab-pw-confirm-btn.btn.small{
  min-height:31px !important; /* 34px * 0.9 */
  padding:7px 11px !important; /* 8/12 * 0.9 */
  font-size:0.9em !important;
}

/* === Avatar crop overlay (Virtolit Cabinet) === */
.vcab-no-scroll{overflow:hidden !important;}
.vcab-crop-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:99999;padding:16px;}
.vcab-crop-modal{background:#fff;border-radius:16px;max-width:420px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:14px;}
.vcab-crop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.vcab-crop-title{font-weight:800;font-size:16px;}
.vcab-crop-close{background:transparent;border:0;font-size:22px;line-height:1;cursor:pointer;padding:6px 10px;}
.vcab-crop-viewport{width:320px;height:320px;max-width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#0b1220;position:relative;margin:0 auto;touch-action:none;cursor:grab;}
.vcab-crop-viewport:active{cursor:grabbing;}
.vcab-crop-viewport img{position:absolute;top:0;left:0;user-select:none;-webkit-user-drag:none;}
.vcab-crop-controls{margin-top:10px;display:flex;justify-content:center;}
.vcab-crop-zoom-label{font-size:13px;display:flex;align-items:center;gap:10px;}
.vcab-crop-zoom-label input[type=range]{width:220px;}
.vcab-crop-actions{margin-top:12px;display:flex;gap:10px;justify-content:flex-end;}
@media (max-width:420px){
  .vcab-crop-viewport{width:260px;height:260px;}
  .vcab-crop-actions{flex-direction:column;}
}

/* Cabinet: make only the "Онлайн" status text bolder (do NOT change last-seen text). */
.vcab-live-status.online{font-weight:700 !important;}

/* === Cabinet/Profile layout spacing ===
   IMPORTANT: The top spacing between the site header and the Cabinet/Profile content must be
   owned by ONE layer to avoid "!important wars" between Theme and Plugin.

   ✅ Current approach (professional): Theme controls spacing.
   - The plugin does NOT force margin-top (no negative margins, no !important here).
   - If you need to adjust the gap, do it in the Theme (or Custom CSS) by setting the variable below.

   Usage example in theme/custom CSS:
     .vcab{ --vcab-top-gap: 0px; }
     @media (min-width: 782px){ .vcab{ --vcab-top-gap: 0px; } }

   NOTE: If the theme still sets `.vcab{margin-top:... !important;}` that rule will win.
   Remove it and use `--vcab-top-gap` instead for clean control.
*/
.vcab{
  margin-top: var(--vcab-top-gap, 0px);
}


/* === Seller rating row in Cabinet header ("РЕЙТИНГ ПРОДАВАЦЯ") ===
   Fix: restore spacing between registration date and rating row,
   and restore colored stars (was lost after previous tweaks).
   DEV-SAFE: scoped to Cabinet markup only. */
.vcab .vcab-rating-row{
  margin-top:15px !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
}

.vcab .vcab-rating-label{
  color:#6b7280 !important;
}

.vcab .vcab-rating-stars{
  display:inline-flex !important;
  align-items:center !important;
  gap:1px !important;
  line-height:1 !important;
}

.vcab .vcab-rating-stars .vcab-star{
  font-size:14px !important;
  line-height:1 !important;
}

.vcab .vcab-rating-stars .vcab-star.is-filled{
  color:var(--vcab-rating-color, #f59e0b) !important;
}

.vcab .vcab-rating-stars .vcab-star.is-empty{
  color:#9ca3af !important;
}

.vcab .vcab-rating-count{
  color:#111 !important;
  font-weight:400 !important;
}

/* === Cabinet "Оголошення" kebab menu (3 dots) button ===
   Fix: prevent theme hover from making border red and dots white.
   Requirement: default border grey, hover border black, dots always black. */
.vcab .vcab-ads-menu-btn{
  border:1px solid #d1d5db !important;
  background:#fff !important;
  color:#111 !important;
  outline:none !important;
  box-shadow:none !important;

  position: relative;
  z-index: 6;}
.vcab .vcab-ads-menu-btn svg{
  fill:currentColor !important;
}
.vcab .vcab-ads-menu-btn:hover,
.vcab .vcab-ads-menu-btn:focus,
.vcab .vcab-ads-menu-btn:focus-visible{
  border-color:#111 !important;
  background:#fff !important;
  color:#111 !important;
  outline:none !important;
  box-shadow:none !important;
}
.vcab .vcab-ads-menu-btn:active{
  border-color:#111 !important;
  background:#f8fafc !important;
  color:#111 !important;
}

/* Keep the kebab button border black while the dropdown menu is open (clicked). */
.vcab .vcab-ads-actions.is-open .vcab-ads-menu-btn{
  border-color:#111 !important;
}

/* === Cabinet/Profile "ОГОЛОШЕННЯ" list: match marketplace card attribute style + action button on the right ===
   Requirements:
   - Attributes flow like on marketplace category cards (with | separators).
   - 3-dots action button sits on the right side of each ad row.
   DEV-SAFE: only affects the injected ads section markup (.vcab-ads-*). */
.vcab .vcab-ads-card{
  display:flex !important;
  align-items:center !important;

  /* List-row look (no rounded card): only horizontal separators.
     We override the injected inline <style> defaults.
     - Top separator for every item
     - Bottom separator only for the last item in a group (so only one line between items)
  */
  background:transparent !important;
  border:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  padding:14px 0 !important;

  border-top:1px solid #e5e7eb !important;
}

/* Only one separator line between stacked items */
.vcab .vcab-ads-group .vcab-ads-card:last-child{
  border-bottom:1px solid #e5e7eb !important;
}

/* Swap visual order without changing markup (actions are output first in HTML). */
.vcab .vcab-ads-card-body{
  order:1 !important;
  flex:1 1 auto !important;
  text-align:left !important;

  position: relative;
  z-index: 1;}

.vcab .vcab-ads-actions{
  order:2 !important;
  margin-left:auto !important;

  position: relative !important;
  z-index: 5 !important;}

/* Attributes: inline flow + separators like marketplace cards */
.vcab .vcab-ads-card-body .vcab-ads-attr{
  display:inline !important;
  margin:0 !important;
  padding:0 !important;
  white-space:normal !important;
}

.vcab .vcab-ads-card-body .vcab-ads-attr:not(:last-child)::after{
  content:'\00a0|\00a0' !important;
  display:inline !important;
  color:#bdbdbd !important;
  transform: translateY(-0.5px);
}

.vcab .vcab-ads-card-body .vcab-ads-attr-k{
  display:inline !important;
  font-weight:700 !important;
  color:#000 !important;
  white-space:normal !important;
}

.vcab .vcab-ads-card-body .vcab-ads-attr-v{
  display:inline !important;
  font-weight:500 !important;
  color:#000 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:manual !important;
}

/* === Cabinet page: remove forced min-heights that create a huge empty gap before the footer ===
   DEV-SAFE: scoped to body.vsuite-no-sticky-footer (Cabinet only). */
body.vsuite-no-sticky-footer #content,
body.vsuite-no-sticky-footer .site-content,
body.vsuite-no-sticky-footer .ast-container,
body.vsuite-no-sticky-footer #primary,
body.vsuite-no-sticky-footer .content-area,
body.vsuite-no-sticky-footer .site-main,
body.vsuite-no-sticky-footer .elementor,
body.vsuite-no-sticky-footer .elementor-section,
body.vsuite-no-sticky-footer .elementor-section.elementor-section-height-min-height,
body.vsuite-no-sticky-footer .elementor-section-wrap,
body.vsuite-no-sticky-footer .elementor-container,
body.vsuite-no-sticky-footer .elementor-column,
body.vsuite-no-sticky-footer .elementor-column-wrap,
body.vsuite-no-sticky-footer .elementor-widget-wrap{
  min-height: unset !important;
  height: auto !important;
}

/* Some templates add a large bottom padding/margin to the main area; normalize it on Cabinet only. */
body.vsuite-no-sticky-footer #content,
body.vsuite-no-sticky-footer .site-content,
body.vsuite-no-sticky-footer .content-area,
body.vsuite-no-sticky-footer .site-main,
body.vsuite-no-sticky-footer .elementor,
body.vsuite-no-sticky-footer .elementor-section,
body.vsuite-no-sticky-footer .elementor-section-wrap{
  /* Keep a normal breathing room like other pages, but remove huge template-added gaps. */
  padding-bottom: 24px !important;
  margin-bottom: 0 !important;
}

/* === Auth layout (desktop/tablet): stop over-stretching form width ===
   DEV-SAFE: applies only on guest auth screen (only case where .vcab contains direct .grid wrapper). */
.vcab > .grid{
  display:grid !important;
  grid-template-columns: max-content minmax(320px, 640px) !important;
  column-gap: 24px !important;
  justify-content: center !important;
  align-items: stretch !important;

  /* hard cap for very wide screens */
  max-width: 980px !important;
  width: 100% !important;
  box-sizing: border-box !important;

  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Make the auth card respect the column cap (some themes force wider cards). */
.vcab > .grid .box{
  width: 100% !important;
  max-width: 640px !important;
  justify-self: start !important;
  box-sizing: border-box !important;
}

/* Tabs: stretch to match the form height */
.vcab > .grid .vcab-tabs{height:100%;}
.vcab > .grid .vcab-tab{height:100%;}

/* Tablet: slightly narrower form cap + tighter gap */
@media (max-width: 1024px){
  .vcab > .grid{
    grid-template-columns: max-content minmax(320px, 560px) !important;
    column-gap: 18px !important;
    max-width: 920px !important;
  }
  .vcab > .grid .box{
    max-width: 560px !important;
  }
}

/* Mobile: single-column layout + compact tabs */
@media (max-width: 760px){
  .vcab > .grid{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 14px;
    justify-content: initial !important;
    align-items: stretch !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .vcab-tabs{
    display:flex;
    gap:10px;
    height:auto;
    width:auto;
    margin-bottom:0;
    justify-content:center;
  }
  .vcab-tab{
    height:auto;
    min-width:0;
    padding:10px 16px;
    border-radius:10px;

    /* match less-bold style on mobile too */
    font-family: Arial, "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight:600;
  }
  .vcab-tab:not(.is-active){
    font-weight:500;
  }
}