/* =============================================================================
   VENDORS - the universal vendor pages (Vendors/Default.aspx, Vendors/Vendor.aspx).
   Builds on hms.css (loaded first); only what the vendor screens add.
   ============================================================================= */
.vx .v-ava { width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto; display: inline-grid; place-items: center; font-weight: 700; font-size: 14px;
             color: #fff; background: var(--iv-p); letter-spacing: .5px; }
.vx .v-ava.lg { width: 56px; height: 56px; font-size: 20px; border-radius: 10px; }
.vx .v-ava.house { background: #354A5F; }
.vx .v-name { display: flex; gap: 10px; align-items: center; min-width: 240px; }
.vx .v-name b { display: block; color: var(--iv-ink); font-weight: 600; }
.vx .v-name small { display: block; color: var(--iv-muted); font-size: 12px; }
.vx .v-name a { text-decoration: none; }
.vx .v-name a:hover b { color: var(--iv-p); text-decoration: underline; }

/* product chips in lists and headers */
.vx .pchips { display: flex; flex-wrap: wrap; gap: 4px; }
.vx .pchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; line-height: 19px;
             background: var(--iv-p-l); color: var(--iv-p-d); border: 1px solid #B8D9F7; white-space: nowrap; }
.vx .pchip.req { background: var(--iv-warn-l); color: var(--iv-warn); border-color: #F0C49C; }
.vx .pchip.off { background: #F2F4F6; color: #6A7D90; border-color: #D9DDE1; }

/* the header of one vendor */
.vx .v-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #fff; border-radius: var(--iv-r-lg); box-shadow: var(--iv-sh-1);
              padding: 14px 16px; margin-bottom: 14px; }
.vx .v-head h1 { margin: 0; font-size: 21px; font-weight: 600; color: var(--iv-ink); }
.vx .v-head .meta { color: var(--iv-muted); font-size: 12.5px; margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vx .v-head .acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* product cards */
.vx .v-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.vx .v-prod { border: 1px solid var(--iv-line); border-radius: var(--iv-r-lg); padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.vx .v-prod.APPROVED { border-color: #A7DDBC; box-shadow: inset 3px 0 0 var(--iv-ok); }
.vx .v-prod.REQUESTED { border-color: #F0C49C; box-shadow: inset 3px 0 0 var(--iv-warn); }
.vx .v-prod.SUSPENDED, .vx .v-prod.REJECTED { border-color: #F1A8A8; box-shadow: inset 3px 0 0 var(--iv-err); }
.vx .v-prod .t { display: flex; align-items: center; gap: 8px; }
.vx .v-prod .t i.fa { width: 30px; height: 30px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--iv-p-l); color: var(--iv-p); font-size: 14px; }
.vx .v-prod .t b { font-size: 14px; color: var(--iv-ink); }
.vx .v-prod .t .bdg { margin-left: auto; }
.vx .v-prod p { margin: 0; font-size: 12.5px; color: var(--iv-muted); }
.vx .v-prod .why { font-size: 12px; color: var(--iv-ink-3); background: var(--iv-surface-2, #F5F6F7); border-radius: 4px; padding: 5px 8px; }
.vx .v-prod .ft { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* product tick boxes (new vendor, team member limits) */
.vx .v-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 6px 14px; }
.vx .v-ticks label { display: flex !important; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--iv-ink-3); cursor: pointer; margin: 0; }
.vx .v-ticks input { width: 16px; height: 16px; margin: 0; }

/* documents */
.vx .d-left { font-weight: 600; }
.vx .d-left.soon { color: var(--iv-warn); }
.vx .d-left.gone { color: var(--iv-err); }
.vx .v-upload { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; align-items: end; }

/* the empty-state line inside a card */
.vx .v-empty { color: var(--iv-muted); font-size: 13px; padding: 14px 4px; text-align: center; }
.vx .v-note { font-size: 12.5px; color: var(--iv-muted); margin: 0 0 10px; }
.vx .v-ro .hms-f input, .vx .v-ro .hms-f select, .vx .v-ro .hms-f textarea { background: #F7F8F9; }
.vx .lg-free { font-size: 12px; margin-top: 3px; }
.vx .lg-free.ok { color: var(--iv-ok); } .vx .lg-free.no { color: var(--iv-err); }
@media (max-width: 640px) { .vx .v-head .acts { margin-left: 0; width: 100%; } }
/* the module tokens: hms.css declares them on html.prod-hms, which only the hotel pages carry - the Vendors pages and the
   public sign-up need the same values (field borders, labels, shell colours) */
.vx {
    --iv-p: #0A6ED1; --iv-p-d: #0854A0; --iv-p-l: #EBF5FE; --iv-p-g1: #9CC9F5; --iv-p-g2: #CFE4FA;
    --iv-ink: #1D2D3E; --iv-ink-2: #1D2D3E; --iv-ink-3: #32363A; --iv-muted: #6A6D70; --iv-faint: #8C9196;
    --iv-line: #D9DDE1; --iv-line-2: #EBEEF0; --iv-surface-2: #F7F8F9; --iv-bg: #F5F6F7;
    --iv-ok: #107E3E; --iv-ok-l: #F1FDF6; --iv-warn: #B44F00; --iv-warn-l: #FEF7F1; --iv-err: #BB0000; --iv-err-l: #FFEBEB;
    --iv-info: #0854A0; --iv-info-l: #F0F7FE;
    --iv-r-xs: 3px; --iv-r-sm: 4px; --iv-r-md: 6px; --iv-r-lg: 8px; --iv-r-xl: 8px;
    --iv-sh-1: 0 0 0 1px rgba(29,45,62,.07), 0 1px 3px rgba(29,45,62,.09);
    --iv-sh-2: 0 0 0 1px rgba(29,45,62,.07), 0 4px 12px rgba(29,45,62,.12);
    --iv-sh-3: 0 10px 30px rgba(29,45,62,.20);
    --iv-sh-4: 0 20px 60px rgba(29,45,62,.28);
    --hx-shell: #354A5F; --hx-shell-d: #283848; --hx-shell-l: #4A627A; --hx-shell-t: #E3ECF4;
    --hx-label: #556B82; --hx-hover: #F2F5F8; --hx-sel: #E5F0FA; --hx-field: #A9B4BE;
    --hx-font: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* the legacy theme styles elements that carry [hidden]; keep them hidden */
.vx [hidden] { display: none !important; }