/*
 * Advertiser listings styles (spec §6). Every class is prefixed vtlv- so
 * nothing collides with Bootstrap 3 or style_portal.css.
 * Loaded only by pages that use it.
 *
 * Units are em, not rem: Bootstrap 3 sets html{font-size:10px} on the site's
 * pages. Each component root sets a 16px base instead (.vtlv-cta-bar,
 * .vtlv-modal .modal-content, .vtlv-standalone).
 */

:root{
  --vtlv-accent:   #e00f2c;  /* div#tour-name */
  --vtlv-accent-d: #b30c23;  /* derived: pressed/hover, not in the site CSS */
  --vtlv-panel:    #d6eff4;  /* #til-filters-wrapper */
  --vtlv-link:     #333399;
  --vtlv-ink:      #000000;
  --vtlv-muted:    #6b6b6b;
  --vtlv-rule:     #d5d5d5;  /* used by the about modal */
  --vtlv-paper:    #ffffff;
  --vtlv-focus:    rgba(167,175,23,.4);  /* input glow, focus rings on secondary controls */
  --vtlv-err-focus: rgba(224,15,44,.35); /* glow on a focused field that has an error */
  /* Citrus 3D (design board, "Saturated 3D family"): glossy lime face, dark olive text, olive bevel */
  --vtlv-go:       #d5df33;  /* button face (gradient middle); strips, main-photo badge */
  --vtlv-go-hi:    #edf65d;  /* gradient top */
  --vtlv-go-lo:    #a7af17;  /* gradient bottom (dark text 5.8:1, 11.9:1 at the top) */
  --vtlv-go-ink:   #263000;  /* text on citrus */
  --vtlv-go-edge:  #818a0d;  /* 1px button border; lines on white: focused input, checked choice, main-photo frame (3.8:1) */
  --vtlv-go-base:  #6e7608;  /* quiet lower bevel */
  --vtlv-go-focus: #818a0d;  /* keyboard focus ring around a citrus button */
  --vtlv-go-bg:    linear-gradient(180deg, var(--vtlv-go-hi) 0%, var(--vtlv-go) 52%, var(--vtlv-go-lo) 100%);
  --vtlv-go-bevel: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(0,0,0,.14);  /* top shine, bottom shade */
  --vtlv-go-drop:  0 2px 0 var(--vtlv-go-base), 0 6px 12px -10px rgba(80,88,8,.55);
  --vtlv-go-drop-press: 0 1px 0 var(--vtlv-go-base);  /* pressed: 1px down onto the bevel */
}

/* ---- Buttons ---- */

/* Primary button: the same Citrus 3D face as the filter-page publish button (.vtlv-pub), so the
   modal, /auth-enter, /my-ads and the editor match it. Hover brightens and press shades with an
   inset tint (the shine stays on top); press also sinks the button 1px onto its bevel. */
.vtlv-cta{
  --vtlv-tint:transparent; --vtlv-drop:var(--vtlv-go-drop);
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:2.75em; padding:.72em 1.5em; font:inherit; font-weight:700; font-size:1em; line-height:1;
  color:var(--vtlv-go-ink); background:var(--vtlv-go-bg); border:1px solid var(--vtlv-go-edge); border-radius:8px;
  box-shadow:var(--vtlv-go-bevel), inset 0 0 0 999px var(--vtlv-tint), var(--vtlv-drop);
  text-decoration:none; cursor:pointer; transition:box-shadow .12s ease, transform .12s ease;
}
/* To beat style_portal.css's a:link/:visited/:hover/:active (13px grey, normal weight). Links only: on a
   <button> this font-size would beat .vtlv-cta--hero's, and the hero button shrank on hover and focus. */
a.vtlv-cta:link, a.vtlv-cta:visited, a.vtlv-cta:hover, a.vtlv-cta:active, a.vtlv-cta:focus{ color:var(--vtlv-go-ink); font-size:1em; font-weight:700; text-decoration:none; }
.vtlv-cta:hover{ --vtlv-tint:rgba(255,255,255,.11); }
.vtlv-cta:active{ --vtlv-tint:rgba(0,0,0,.08); --vtlv-drop:var(--vtlv-go-drop-press); transform:translateY(1px); }
.vtlv-cta:focus{ outline:0; }
.vtlv-cta:focus-visible{ outline:3px solid var(--vtlv-go-focus); outline-offset:2px; }
.vtlv-cta__icon{ width:.875em; height:.875em; flex:none; }
.vtlv-cta--block{ width:100%; margin-top:1.2em; }
.vtlv-cta.is-busy{ opacity:.75; pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .vtlv-cta{ transition:none; } .vtlv-cta:active{ transform:none; } }

.vtlv-linkbtn{ border:0; background:none; padding:0; font:inherit; color:var(--vtlv-link); text-decoration:underline; cursor:pointer; }

/* ---- Form fields ---- */

.vtlv-lead{ margin:0 0 1.4em; color:var(--vtlv-muted); line-height:1.6; }
.vtlv-label{ display:block; margin-bottom:.38em; font-weight:700; font-size:.92em; }
.vtlv-input{ box-sizing:border-box; width:100%; height:auto; padding:.7em .8em; font:inherit; font-size:1em; line-height:1.3; color:var(--vtlv-ink);
  border:1px solid #9a9a9a; border-radius:3px; background:#fff; }
.vtlv-input:focus{ outline:0; border-color:var(--vtlv-go-edge); box-shadow:0 0 0 3px var(--vtlv-focus); }
.vtlv-input[aria-invalid="true"]{ border-color:var(--vtlv-accent); }
.vtlv-input[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px var(--vtlv-err-focus); }
.vtlv-err{ margin:.5em 0 0; font-size:.9em; color:var(--vtlv-accent); }

/* ---- Filter page: publish CTA in the title row ---- */

/* Citrus 3D button; logged in, an arrow opens the account menu. Layout is the owner's pick from the design
   board (2026-09-15: button + menu); the Citrus 3D look is from the expanded board (branch feature/citrus3d).
   Strips, input focus and selections use the citrus tokens too; the red --vtlv-accent stays on page titles and errors only. */
/* margin-top: the button is centred on the title, so without it its top sits 15px under the nav's search box */
#tour-name.vtlv-has-cta{ position:relative; margin-top:16px; }
.vtlv-cta-bar{
  /* left edge in line with the filter panel: #til-main-content is a centred 812px column, with 15px gutters below 842px */
  position:absolute; left:max(15px, calc((100% - 812px) / 2)); top:50%; transform:translateY(-50%); z-index:20;
  font-size:16px; font-weight:400; line-height:1.2; text-align:right;
}
.vtlv-pub{
  --vtlv-drop:var(--vtlv-go-drop);
  box-sizing:border-box; display:flex; align-items:stretch; height:2.75em; overflow:hidden; border-radius:8px;
  background:var(--vtlv-go-bg); border:1px solid var(--vtlv-go-edge);
  box-shadow:var(--vtlv-go-bevel), var(--vtlv-drop); transition:box-shadow .12s ease, transform .12s ease;
}
/* pressing either half sinks the whole group onto its bevel */
.vtlv-pub:has(.vtlv-pub__main:active, .vtlv-pub__caret:active){ --vtlv-drop:var(--vtlv-go-drop-press); transform:translateY(1px); }
.vtlv-pub__main, .vtlv-pub__caret{
  --vtlv-tint:transparent;
  display:flex; align-items:center; justify-content:center; gap:.5em; margin:0; padding:0 1em;
  font:inherit; color:var(--vtlv-go-ink); background:none; border:0; white-space:nowrap; cursor:pointer;
  box-shadow:inset 0 0 0 999px var(--vtlv-tint); transition:box-shadow .12s ease;
}
.vtlv-pub__main{ flex:1 1 auto; }
.vtlv-pub__main:link, .vtlv-pub__main:visited, .vtlv-pub__main:hover, .vtlv-pub__main:active, .vtlv-pub__main:focus{
  color:var(--vtlv-go-ink); font-size:1em; font-weight:700; text-decoration:none; }
.vtlv-pub__caret{ flex:none; padding:0 .8125em; }
.vtlv-pub__main:hover, .vtlv-pub__caret:hover{ --vtlv-tint:rgba(255,255,255,.11); }
.vtlv-pub__main:active, .vtlv-pub__caret:active, .vtlv-pub__caret[aria-expanded="true"]{ --vtlv-tint:rgba(0,0,0,.08); }
.vtlv-pub__main:focus, .vtlv-pub__caret:focus{ outline:0; }
.vtlv-pub__main:focus-visible, .vtlv-pub__caret:focus-visible{ outline:2px solid var(--vtlv-go-ink); outline-offset:-5px; }
.vtlv-pub__icon{ width:.875em; height:.875em; flex:none; }
.vtlv-pub__caret .vtlv-pub__icon{ width:.75em; height:.75em; transition:transform .12s ease; }
.vtlv-pub__caret[aria-expanded="true"] .vtlv-pub__icon{ transform:rotate(180deg); }
.vtlv-pub__div{ flex:none; width:1px; margin:.625em 0; background:rgba(38,48,0,.22); }

.vtlv-pub__menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:2; box-sizing:border-box; min-width:190px; padding:6px;
  background:#fff; border:1px solid #dde2bd; border-radius:8px; box-shadow:0 12px 28px -10px rgba(60,66,6,.3);
}
.vtlv-pub__menu[hidden]{ display:none; }
.vtlv-pub__item{
  box-sizing:border-box; display:flex; align-items:center; width:100%; min-height:44px; margin:0; padding:0 .8em;
  font:inherit; font-size:.9375em; color:#20240f; text-align:right; background:none; border:0; border-radius:5px;
  text-decoration:none; white-space:nowrap; cursor:pointer;
}
.vtlv-pub__item:link, .vtlv-pub__item:visited, .vtlv-pub__item:hover, .vtlv-pub__item:active, .vtlv-pub__item:focus{
  color:#20240f; font-size:.9375em; font-weight:400; text-decoration:none; }
.vtlv-pub__item--muted, .vtlv-pub__item--muted:link, .vtlv-pub__item--muted:visited, .vtlv-pub__item--muted:hover{ color:#62674f; }
.vtlv-pub__item:hover, .vtlv-pub__item:focus{ background:#f5f8d6; outline:0; }
.vtlv-pub__item:focus-visible{ box-shadow:inset 0 0 0 2px var(--vtlv-go-edge); }
.vtlv-pub__form{ margin:0; }

/* What happened after a save or a removal (?done=, templates/filter_cta.php): under the button, where
   the menu opens (the menu covers it); the close button is wired in advertiser.js. */
.vtlv-done{
  position:absolute; top:calc(100% + 8px); left:0; z-index:1; box-sizing:border-box; display:flex; align-items:flex-start; gap:.25em;
  width:20em; max-width:calc(100vw - 30px); padding:.55em .9em .55em .35em;
  background:#fff; border:1px solid #dde2bd; border-inline-start:4px solid var(--vtlv-go-lo); border-radius:8px;
  box-shadow:0 12px 28px -10px rgba(60,66,6,.3);
}
.vtlv-done--error{ border-color:#f1b3bc; border-inline-start-color:var(--vtlv-accent); }
.vtlv-done[hidden]{ display:none; }
.vtlv-done__text{ flex:1; margin:.35em 0; font-size:.9375em; line-height:1.5; color:#20240f; }
.vtlv-done--error .vtlv-done__text{ color:var(--vtlv-accent-d); }
.vtlv-done__close{
  flex:none; display:flex; align-items:center; justify-content:center; width:2.25em; height:2.25em; margin:0; padding:0;
  color:#62674f; background:none; border:0; border-radius:5px; cursor:pointer;
}
.vtlv-done__close svg{ width:.75em; height:.75em; }
.vtlv-done__close:hover{ background:#f5f8d6; }
.vtlv-done__close:focus{ outline:0; }
.vtlv-done__close:focus-visible{ box-shadow:inset 0 0 0 2px var(--vtlv-go-edge); }
@media (prefers-reduced-motion:reduce){
  .vtlv-pub, .vtlv-pub__main, .vtlv-pub__caret, .vtlv-pub__caret .vtlv-pub__icon{ transition:none; }
  .vtlv-pub:has(.vtlv-pub__main:active, .vtlv-pub__caret:active){ transform:none; }
}
@media (max-width:767px){
  #tour-name.vtlv-has-cta{ margin-top:0; }
  .vtlv-cta-bar{ position:relative; left:auto; top:auto; transform:none; margin:.75em 15px 0; }
}

/* ---- Filter page: login modal (Bootstrap 3) ---- */

.vtlv-modal .modal-dialog{ width:auto; max-width:480px; margin:10vh auto 0; }
.vtlv-modal .modal-content{
  position:relative; padding:2em 2em 1.75em; font-size:16px; line-height:1.42857;
  border:1px solid var(--vtlv-rule); border-top:4px solid var(--vtlv-go);
  border-radius:4px; box-shadow:none; color:var(--vtlv-ink); text-align:right;
}
.vtlv-modal h2{ margin:0 0 .36em; font-size:1.4em; font-weight:700; line-height:1.3; color:var(--vtlv-ink); }
.vtlv-modal h2:focus{ outline:0; }
.vtlv-modal__close{ position:absolute; inset-inline-end:4px; top:4px; width:44px; height:44px; font-size:28px; line-height:1; }
@media (max-width:480px){ .vtlv-modal .modal-dialog{ margin:16px; } .vtlv-modal .modal-content{ padding:1.5em 1em 1.25em; } }

/* ---- Standalone pages (/auth-enter) ---- */

.vtlv-standalone{
  box-sizing:border-box; min-height:100vh; margin:0; padding:10vh 16px 2em;
  display:flex; align-items:flex-start; justify-content:center;
  font-family:arial, sans-serif; font-size:16px; color:var(--vtlv-ink); background:#f4f4f4;
}
.vtlv-card{
  box-sizing:border-box; width:100%; max-width:30em; padding:2em 2em 1.75em;
  background:var(--vtlv-paper); border:1px solid var(--vtlv-rule); border-top:4px solid var(--vtlv-go);
  border-radius:4px; text-align:right;
}
.vtlv-card__logo{ display:inline-block; margin-bottom:1.5em; }
.vtlv-card__logo img{ display:block; max-width:100%; height:auto; }
.vtlv-card h1{ margin:0 0 .36em; font-size:1.4em; font-weight:700; }
.vtlv-card h1:focus{ outline:0; }
@media (max-width:30em){ .vtlv-standalone{ padding-top:1em; } .vtlv-card{ padding:1.5em 1em 1.25em; } }

/* ---- Advertiser pages (/my-ads, /my-ads-edit): frame ---- */

.vtlv-page{
  max-width:1050px; margin:0 auto; padding:0 15px 4em;
  font-family:arial, sans-serif; font-size:16px; line-height:1.5; color:var(--vtlv-ink); text-align:right;
}
.vtlv-page h2{ font-family:inherit; color:var(--vtlv-ink); }
.vtlv-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.75em 1.5em; padding:15px 0; font-size:14px; line-height:20px; }
.vtlv-head__brand{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.5em 24px; }
.vtlv-head__logo img{ display:block; height:44px; width:auto; }
.vtlv-head__back{ display:none; }
.vtlv-head a:link, .vtlv-head a:visited, .vtlv-head a:hover, .vtlv-head a:active, .vtlv-head a:focus{ color:#0c0ca6; font-size:14px; font-weight:400; }
.vtlv-head__account{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em .75em; }
.vtlv-head__email{ color:var(--vtlv-muted); overflow-wrap:anywhere; }
.vtlv-head__logout{ margin:0; }
.vtlv-page-title{ margin:.4em 0 1.1em; font-family:arial, sans-serif; font-size:31px; font-weight:700; line-height:1.2; color:var(--vtlv-accent); text-align:center; }
.vtlv-main{ max-width:812px; margin:0 auto; }

.vtlv-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:2.5em; margin:0; padding:.35em 1em;
  font:inherit; font-size:.94em; font-weight:400; line-height:1.2; color:var(--vtlv-ink); background:#fff;
  border:1px solid #9a9a9a; border-radius:3px; text-decoration:none; white-space:nowrap; cursor:pointer;
}
.vtlv-btn:link, .vtlv-btn:visited, .vtlv-btn:hover, .vtlv-btn:active, .vtlv-btn:focus{ color:var(--vtlv-ink); font-size:.94em; font-weight:400; text-decoration:none; }
.vtlv-btn:hover{ background:#f2f2f2; border-color:#6b6b6b; }
.vtlv-btn:focus-visible{ outline:3px solid var(--vtlv-focus); outline-offset:2px; }
/* flat grey, dark text (5.6:1): no bevel, no press */
.vtlv-cta.is-disabled{ color:#595959; background:#e6e6e6; border-color:#c4c4c4; box-shadow:none; transform:none; cursor:not-allowed; }
.vtlv-textlink:link, .vtlv-textlink:visited, .vtlv-textlink:hover, .vtlv-textlink:active, .vtlv-textlink:focus{ color:var(--vtlv-link); font-size:1em; font-weight:400; text-decoration:underline; }
.vtlv-linkbtn:focus-visible{ outline:3px solid var(--vtlv-focus); outline-offset:2px; }

.vtlv-notice, .vtlv-alert{ margin:0 0 1.5em; padding:.75em 1em; border:1px solid; border-radius:3px; }
.vtlv-notice{ background:var(--vtlv-panel); border-color:#b5dbe3; }
.vtlv-alert{ color:var(--vtlv-accent-d); background:#fdecee; border-color:#f1b3bc; }
.vtlv-alert:focus{ outline:0; }
.vtlv-hint{ margin:.4em 0 0; font-size:.88em; color:var(--vtlv-muted); }
.vtlv-hint--warn{ color:#8a5300; }
.vtlv-hint:empty{ display:none; }

/* ---- /my-account-delete ---- */

.vtlv-erase{ line-height:1.6; }
.vtlv-erase p, .vtlv-erase ul{ margin:0 0 1em; }
.vtlv-erase ul{ padding-inline-start:1.4em; }
.vtlv-erase__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.75em 1.5em; margin-top:1.5em; }
.vtlv-btn--danger, .vtlv-btn--danger:hover, .vtlv-btn--danger:focus{ color:#fff; background:var(--vtlv-accent-d); border-color:var(--vtlv-accent-d); min-height:44px; font-weight:700; }
.vtlv-btn--danger:hover{ background:#8f091c; border-color:#8f091c; }

/* ---- /my-ads ---- */

.vtlv-empty{ padding:3em 1em; text-align:center; border:1px solid var(--vtlv-rule); border-radius:3px; }
.vtlv-empty h2{ margin:0 0 1.1em; font-size:1.5em; font-weight:700; }
.vtlv-empty__text{ margin:0 0 1.25em; }
.vtlv-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75em 1.5em; margin-bottom:1.25em; }
.vtlv-toolbar__count{ margin:0; color:var(--vtlv-muted); }
.vtlv-toolbar__limit{ max-width:24em; }
.vtlv-ads{ margin:0; padding:0; list-style:none; border-top:1px solid var(--vtlv-rule); }
.vtlv-ad{ display:grid; grid-template-columns:200px minmax(0, 1fr); gap:1.25em; padding:1.25em 0; border-bottom:1px solid var(--vtlv-rule); }
.vtlv-ad__thumb{ aspect-ratio:4 / 3; background:#eee; overflow:hidden; }
.vtlv-ad__thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.vtlv-ad--sold .vtlv-ad__thumb img, .vtlv-ad--removed .vtlv-ad__thumb img, .vtlv-ad--blocked .vtlv-ad__thumb img{ opacity:.55; }
.vtlv-page .vtlv-ad__title{ margin:0 0 .35em; font-size:1.2em; font-weight:700; line-height:1.35; }
.vtlv-ad__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.35em .9em; margin:0 0 .9em; font-size:.94em; color:var(--vtlv-muted); }
.vtlv-ad__actions{ display:flex; flex-wrap:wrap; gap:.5em; }
.vtlv-ad__actions form{ margin:0; }
.vtlv-action-menu{ position:relative; }
.vtlv-action-menu > summary{ list-style:none; gap:.35em; }
.vtlv-action-menu > summary::-webkit-details-marker{ display:none; }
.vtlv-action-menu[open] > summary{ background:#f2f2f2; border-color:#6b6b6b; }
.vtlv-action-menu__panel{
  position:absolute; z-index:10; inset-inline-start:0; top:calc(100% + 6px); min-width:180px; padding:6px;
  background:#fff; border:1px solid var(--vtlv-rule); border-radius:5px; box-shadow:0 10px 24px -12px rgba(0,0,0,.45);
}
.vtlv-action-menu__item{
  display:flex; align-items:center; width:100%; min-height:44px; margin:0; padding:.5em .75em; font:inherit;
  font-size:.94em; color:var(--vtlv-ink); text-align:right; white-space:nowrap; background:#fff; border:0; border-radius:3px; cursor:pointer;
}
.vtlv-action-menu__item:hover, .vtlv-action-menu__item:focus{ background:#f2f2f2; outline:0; }
.vtlv-action-menu__item:focus-visible{ box-shadow:inset 0 0 0 2px var(--vtlv-go-edge); }
.vtlv-action-menu__item--danger{ color:var(--vtlv-accent-d); }
.vtlv-badge{ display:inline-block; padding:.1em .55em; font-size:.88em; font-weight:700; line-height:1.45; border:1px solid; border-radius:3px; }
.vtlv-badge--pending{ color:#6b4a00; background:#fff4d6; border-color:#e8c774; }
.vtlv-badge--published{ color:#1a6a33; background:#e8f5ec; border-color:#a8d6b6; }
.vtlv-badge--sold, .vtlv-badge--removed{ color:#4d4d4d; background:#f1f1f1; border-color:#cdcdcd; }
.vtlv-badge--blocked{ color:var(--vtlv-accent-d); background:#fdecee; border-color:#f1b3bc; }

/* ---- /my-ads-edit ---- */

/* The owner's draft (docs/board-listings/my-ad-edit-draft.jpg): one tinted panel ("sheet") holding the
   listing's date and link, details on the right with the labels beside the fields, a numbered photo grid
   on the left, a large centred publish button and a footer row. The draft's textured green is a flat pale
   mint here. */
.vtlv-main--wide{ max-width:none; }
.vtlv-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.vtlv-muted{ color:var(--vtlv-muted); }

/* Cobalt 3D (expanded design board, "Saturated 3D family") for the editor's publish button and accents;
   the other advertiser pages stay Citrus 3D. The composed tokens are restated because a custom property
   that uses var() is resolved where it is declared (:root), not where it is used. */
.vtlv-sheet{
  --vtlv-go:#2d78f3; --vtlv-go-hi:#5da5ff; --vtlv-go-lo:#1553c9; --vtlv-go-ink:#fff;
  --vtlv-go-edge:#184aa8;   /* 1px button border; checked choice, main-photo frame, focused input (8.1:1 on white) */
  --vtlv-go-base:#123d8b;   /* lower bevel */
  --vtlv-go-focus:#1553c9;
  --vtlv-focus:rgba(45,120,243,.3);
  --vtlv-go-bg:linear-gradient(180deg, #5da5ff 0%, #2d78f3 55%, #1553c9 100%);
  --vtlv-go-bevel:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.14);
  --vtlv-go-drop:0 3px 0 #123d8b, 0 10px 16px -12px rgba(21,83,201,.82);
  --vtlv-go-drop-press:0 1px 0 #123d8b;
  --vtlv-sheet-bg:#ebf7ee; --vtlv-sheet-edge:#b9dac1; --vtlv-sheet-rule:#cfe6d5;
  box-sizing:border-box; padding:1.1em 2em 1em; background:var(--vtlv-sheet-bg);
  border:1px solid var(--vtlv-sheet-edge); border-radius:10px;
}
/* white on the gradient is 4.4:1 at its middle, so the label is large (20px bold, AA-large) with a soft shade */
.vtlv-cta--hero{ min-width:16em; min-height:2.9em; padding:.7em 2.5em; font-size:1.25em; border-radius:10px; text-shadow:0 1px 0 rgba(0,0,0,.22); }
.vtlv-cta--hero:active{ transform:translateY(2px); }
@media (prefers-reduced-motion:reduce){ .vtlv-cta--hero:active{ transform:none; } }

.vtlv-sheet__meta{ display:flex; flex-wrap:wrap; gap:.3em 2.5em; margin:0 0 1.4em; padding-bottom:.9em; border-bottom:1px solid var(--vtlv-sheet-rule); }
.vtlv-sheet__meta > div{ display:flex; flex-wrap:wrap; gap:.4em; }
.vtlv-sheet__meta dt{ font-weight:700; }
.vtlv-sheet__meta dd{ margin:0; }
.vtlv-sheet__cols{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr); gap:2.5em; align-items:start; }
.vtlv-sheet__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.25em 1em; min-height:44px; margin:0 0 1.1em; border-bottom:1px solid var(--vtlv-sheet-rule); }
.vtlv-page .vtlv-sheet__head h2{ margin:0; font-size:1.25em; font-weight:700; line-height:1.3; }
.vtlv-sheet__req{ margin:0; font-size:.85em; color:var(--vtlv-muted); }
.vtlv-req{ color:var(--vtlv-accent-d); font-weight:700; }

/* A field is a row: the label in a 7.25em column, the control, hint, counter and error beside it */
.vtlv-field{ min-width:0; margin:0 0 1.25em; }
.vtlv-sheet .vtlv-field{ display:grid; grid-template-columns:7.25em minmax(0, 1fr); column-gap:1em; margin:0 0 .9em; }
.vtlv-sheet .vtlv-field > *{ grid-column:2; }
.vtlv-sheet .vtlv-field > .vtlv-label{ grid-column:1; grid-row:1; margin:0; padding-top:.72em; line-height:1.3; }
.vtlv-form select.vtlv-input{ height:auto; padding-top:.62em; padding-bottom:.62em; }
.vtlv-form textarea.vtlv-input{ min-height:10em; line-height:1.5; resize:vertical; }
.vtlv-affix{ position:relative; display:block; }
.vtlv-affix .vtlv-input{ padding-left:2.6em; text-align:right; }   /* digits stay LTR, aligned with the other fields */
.vtlv-affix__unit{ position:absolute; left:.8em; top:50%; transform:translateY(-50%); color:var(--vtlv-muted); pointer-events:none; }
.vtlv-choices{ display:flex; flex-wrap:wrap; gap:.5em .6em; }
.vtlv-page .vtlv-choice{ display:inline-flex; align-items:center; gap:.5em; min-height:44px; margin:0; padding:0 1.1em; font-weight:400; background:#fff; border:1px solid #9a9a9a; border-radius:6px; cursor:pointer; }
.vtlv-choice input{ width:1.1em; height:1.1em; margin:0; accent-color:var(--vtlv-go-edge); }
.vtlv-choice:has(input:checked){ border-color:var(--vtlv-go-edge); box-shadow:inset 0 0 0 1px var(--vtlv-go-edge); }
.vtlv-choice:has(input:focus-visible){ outline:3px solid var(--vtlv-focus); outline-offset:2px; }
.vtlv-counter{ margin:.4em 0 0; font-size:.88em; color:var(--vtlv-muted); text-align:left; }
.vtlv-counter.is-over{ font-weight:700; color:var(--vtlv-accent); }

/* Photos: the draft's numbered slots, two per row, every free slot shown. The number chip in each photo's
   corner is a <select> (editor.js) that moves it to that place; × removes it; slot 1 is the main photo. */
.vtlv-file{ position:relative; }
.vtlv-file input[type="file"]{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; clip:rect(0 0 0 0); }
.vtlv-file.is-dragging{ outline:2px dashed var(--vtlv-go); outline-offset:8px; border-radius:6px; }
.vtlv-addlink{ display:inline-flex; align-items:center; gap:.4em; min-height:44px; margin:0; font-weight:700; color:var(--vtlv-go-lo); cursor:pointer; }
.vtlv-addlink svg{ width:.85em; height:.85em; flex:none; }
.vtlv-addlink:hover{ text-decoration:underline; }
.vtlv-addlink__count{ font-weight:400; color:var(--vtlv-muted); }
.vtlv-file input[type="file"]:focus-visible + label{ outline:3px solid var(--vtlv-focus); outline-offset:2px; border-radius:4px; }
.vtlv-file input[aria-invalid="true"] + .vtlv-addlink{ color:var(--vtlv-accent-d); }

.vtlv-slots{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75em; margin:0 0 .9em; padding:0; list-style:none; }
.vtlv-slot{ position:relative; aspect-ratio:4 / 3; margin:0; overflow:hidden; color:var(--vtlv-muted); background:#e9eeea; border:1px solid var(--vtlv-sheet-edge); border-radius:8px; }
.vtlv-slot > img{ display:block; width:100%; height:100%; object-fit:cover; }
.vtlv-slot__noimg{ display:flex; align-items:center; justify-content:center; height:100%; }
.vtlv-slot--main{ border:2px solid var(--vtlv-go-edge); }
.vtlv-slot__num, .vtlv-slot__pos{
  position:absolute; top:8px; right:8px; box-sizing:border-box; min-width:2.25em; height:2.1em; margin:0; padding:0 .55em;
  font:inherit; font-size:.9em; font-weight:700; line-height:2em; color:var(--vtlv-ink); text-align:center;
  background:#fff; border:1px solid #8795a1; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.22);
}
.vtlv-slot__pos{
  -webkit-appearance:none; appearance:none; padding:0 .5em 0 1.55em; cursor:pointer; text-align:right;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23404b55' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat left .5em center / .65em;
}
.vtlv-slot__pos:hover{ border-color:var(--vtlv-go-edge); }
.vtlv-slot__pos:disabled{ padding:0 .55em; text-align:center; background-image:none; cursor:default; opacity:1; color:var(--vtlv-ink); }
.vtlv-slot__pos:focus{ outline:0; }
.vtlv-slot__pos:focus-visible{ outline:3px solid #fff; box-shadow:0 0 0 5px var(--vtlv-go-lo); }
.vtlv-slot__remove{
  position:absolute; top:6px; left:6px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin:0; padding:0;
  color:#c8321f; background:rgba(255,255,255,.94); border:1px solid rgba(0,0,0,.12); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.22); cursor:pointer;
}
.vtlv-slot__remove svg{ width:14px; height:14px; }
.vtlv-slot__remove:hover{ color:#fff; background:#c8321f; border-color:#c8321f; }
.vtlv-slot__remove:focus{ outline:0; }
.vtlv-slot__remove:focus-visible{ outline:3px solid #fff; box-shadow:0 0 0 5px var(--vtlv-go-lo); }
.vtlv-slot__main{ position:absolute; bottom:8px; right:8px; padding:.1em .6em; font-size:.8em; font-weight:700; color:var(--vtlv-go-ink); background:var(--vtlv-go-lo); border-radius:4px; }
.vtlv-slot--empty{ background:rgba(255,255,255,.5); border:1.5px dashed #a8c9b0; }
.vtlv-slot--empty label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; font-weight:400; color:#6f8f78; cursor:pointer; transition:background .12s ease, color .12s ease; }
.vtlv-slot--empty .vtlv-slot__num{ font-weight:400; color:#6f8f78; background:transparent; border-color:#bcd8c3; box-shadow:none; }
.vtlv-slot__plus{ font-size:2.25em; font-weight:300; line-height:1; }
.vtlv-slot--empty ~ .vtlv-slot--empty .vtlv-slot__plus{ opacity:.35; }   /* the first free slot is the obvious one */
.vtlv-slot--empty label:hover, .vtlv-file.is-dragging .vtlv-slot--empty label{ color:var(--vtlv-go-lo); background:#fff; }

.vtlv-actions{ display:flex; flex-wrap:wrap; flex-direction:column; align-items:center; gap:.9em; margin-top:1.5em; padding-top:1.75em; border-top:1px solid var(--vtlv-sheet-rule); }
.vtlv-mobile-save{ display:none; }
.vtlv-sheet__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em 2em; margin-top:1.5em; padding-top:.9em; border-top:1px solid var(--vtlv-sheet-rule); font-size:.94em; }
.vtlv-sheet__foot form{ margin:0; }
.vtlv-sheet__foot > a{ margin-inline-start:auto; }
.vtlv-sheet__foot > a + a{ margin-inline-start:0; }   /* "מחיקת החשבון" and "נתקלת בבעיה?" sit together at the far end */
.vtlv-sheet__foot .vtlv-textlink:link, .vtlv-sheet__foot .vtlv-textlink:visited{ font-size:1em; }
.vtlv-linkbtn--danger{ min-height:44px; color:var(--vtlv-accent-d); }

@media (max-width:959px){
  .vtlv-sheet__cols{ grid-template-columns:minmax(0, 1fr); gap:1.5em; }
  .vtlv-slots{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:767px){
  .vtlv-head{ align-items:flex-start; }
  .vtlv-ad{ grid-template-columns:132px minmax(0, 1fr); gap:.75em; }
  .vtlv-ad__thumb{ aspect-ratio:4 / 3; }
  .vtlv-ad__actions .vtlv-btn, .vtlv-head .vtlv-btn{ min-height:44px; }
  .vtlv-slot__remove{ width:44px; height:44px; top:4px; left:4px; }
  .vtlv-slot__pos{ height:2.75em; line-height:2.65em; }
  .vtlv-page-title{ font-size:26px; }
}
@media (max-width:600px){
  .vtlv-page{ padding-bottom:2em; }
  .vtlv-head{ display:grid; grid-template-columns:1fr; gap:.5em; padding:10px 0; }
  .vtlv-head__brand{ width:100%; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:1em; }
  .vtlv-head__logo img{ height:38px; }
  .vtlv-crumbs{ display:none; }
  .vtlv-head__back{ display:inline; }
  .vtlv-head__account{ width:100%; justify-content:space-between; padding-top:.5em; border-top:1px solid var(--vtlv-rule); }
  .vtlv-page-title{ margin:.35em 0 .9em; }
  .vtlv-ad{ grid-template-columns:112px minmax(0, 1fr); gap:.75em; padding:1em 0; }
  .vtlv-page .vtlv-ad__title{ font-size:1.05em; }
  .vtlv-ad__meta{ gap:.25em .6em; margin-bottom:.65em; font-size:.88em; }
  .vtlv-action-menu__panel{ inset-inline-start:auto; inset-inline-end:0; }
  .vtlv-sheet{ padding:1em .9em .75em; }
  .vtlv-sheet .vtlv-field{ grid-template-columns:minmax(0, 1fr); }
  .vtlv-sheet .vtlv-field > *, .vtlv-sheet .vtlv-field > .vtlv-label{ grid-column:1; grid-row:auto; }
  .vtlv-sheet .vtlv-field > .vtlv-label{ padding:0 0 .35em; }
  .vtlv-slots{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6em; }
  .vtlv-slot--empty ~ .vtlv-slot--empty{ display:none; }   /* phones: one free slot, not a screenful */
  .vtlv-sheet__foot{ flex-direction:column; align-items:flex-start; gap:0; padding-bottom:.25em; }   /* one action per row */
  .vtlv-sheet__foot > a{ display:flex; align-items:center; min-height:44px; margin-inline-start:0; }
  .vtlv-sheet{ margin-bottom:76px; }   /* room above the fixed save bar */
  .vtlv-actions{ display:none; }
  .vtlv-mobile-save{
    position:fixed; z-index:50; left:0; right:0; bottom:0; display:flex; align-items:center; gap:1em;
    /* The plain padding first: the 0px inside env() only covers a missing inset, so a browser
       that does not parse env() or max() throws the whole next declaration away and would be
       left with no padding at all. Browsers that do parse it override this line. */
    padding:10px 15px;
    padding:10px max(15px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(15px, env(safe-area-inset-left, 0px));
    background:rgba(255,255,255,.97); border-top:1px solid var(--vtlv-rule); box-shadow:0 -6px 18px -16px rgba(0,0,0,.6);
  }
  .vtlv-mobile-save .vtlv-cta{ flex:1; min-width:0; min-height:2.75em; padding:.6em 1em; font-size:1.1em; }
}

/* Price range on the listings filter pages (templates/price_filter.php), at the top of the middle
   column above "חיפוש לפי שם (למפרסמים)": a two-handle slider, then "מ-" / "עד" stacked
   at 174px; phones put the fields side by side and make the slider taller. The slider is RTL, so
   cheaper is to the right. */
.vtlv-price{ clear:both; font-size:16px; }
#til-filters .vtlv-price h3{ padding-right:5px; padding-bottom:5px; }
/* two range inputs stacked over one track; advertiser.js takes pointer drags on the whole slider,
   so the inputs ignore the pointer and only draw the handles and take keyboard focus */
.vtlv-price__slider{ --vtlv-thumb:20px; position:relative; width:174px; height:30px; touch-action:pan-y; cursor:pointer; -webkit-user-select:none; user-select:none; }
.vtlv-price__slider[hidden], .vtlv-price__ends[hidden]{ display:none; }
.vtlv-price__track{ position:absolute; top:50%; left:0; right:0; height:4px; margin-top:-2px; border-radius:2px; background:#aac3c9; }
/* --a / --b: the handles' positions (0–1 from the right), set by advertiser.js */
.vtlv-price__fill{ position:absolute; top:0; bottom:0; border-radius:2px; background:var(--vtlv-link);
  right:calc(var(--vtlv-thumb) / 2 + (100% - var(--vtlv-thumb)) * var(--a, 0));
  left:calc(var(--vtlv-thumb) / 2 + (100% - var(--vtlv-thumb)) * (1 - var(--b, 1))); }
/* !important: the column's legacy ".til-search-by-name input" rules use it */
#til-filters .vtlv-price__range{ position:absolute; inset:0; width:100% !important; height:100%; margin:0; padding:0 !important; border:0; background:transparent !important; pointer-events:none; -webkit-appearance:none; appearance:none; outline:none; }
#til-filters .vtlv-price__range::-webkit-slider-runnable-track{ height:100%; background:transparent; border:0; }
#til-filters .vtlv-price__range::-moz-range-track{ height:100%; background:transparent; border:0; }
#til-filters .vtlv-price__range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:var(--vtlv-thumb); height:var(--vtlv-thumb); margin-top:calc((30px - var(--vtlv-thumb)) / 2); border:2px solid var(--vtlv-link); border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); box-sizing:border-box; }
#til-filters .vtlv-price__range::-moz-range-thumb{ width:var(--vtlv-thumb); height:var(--vtlv-thumb); border:2px solid var(--vtlv-link); border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); box-sizing:border-box; }
#til-filters .vtlv-price__range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(51,51,153,.35); }
#til-filters .vtlv-price__range:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px rgba(51,51,153,.35); }
.vtlv-price__slider.is-dragging .vtlv-price__range:focus::-webkit-slider-thumb{ background:#e6e6f5; }
.vtlv-price__slider.is-dragging .vtlv-price__range:focus::-moz-range-thumb{ background:#e6e6f5; }
.vtlv-price__ends{ display:flex; justify-content:space-between; width:174px; margin:-2px 0 8px; font-size:12px; line-height:1.2; color:#4d4d4d; }
.vtlv-price__row{ display:flex; flex-direction:column; gap:6px; width:174px; }
.vtlv-price__field{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin:0; font-weight:400; }
.vtlv-price__label{ font-size:15px; white-space:nowrap; }
/* !important: the column's legacy ".til-search-by-name input" rules use it */
#til-filters .vtlv-price__input{ width:140px !important; height:28px; padding:3px 6px !important; font-size:14px !important; color:#000 !important; background:#fff !important; border:1px solid #d5b2b2; border-radius:0; box-sizing:border-box; }
.vtlv-price__input::placeholder{ color:#6b6b6b; opacity:1; }
.vtlv-price__input:focus{ outline:2px solid var(--vtlv-link); outline-offset:1px; }
.vtlv-price__input[aria-invalid]{ border-color:var(--vtlv-accent); }
.vtlv-price__note{ max-width:174px; margin:6px 0 0; font-size:13px; line-height:1.35; color:#4d4d4d; }
.vtlv-price__note:empty{ display:none; }
.vtlv-price__note.is-error{ color:var(--vtlv-accent-d); }
/* "חיפוש לפי שם (למפרסמים)" under the price (filter.php; docs/board-listings/filter-name-search-example.jpg) */
#til-filters .vtlv-name-search{ margin-top:28px; }
.vtlv-name-search__note{ font-weight:400; }
@media (max-width:767px){
  .vtlv-rwd .vtlv-price__row{ flex-direction:row; gap:12px; width:auto; }
  .vtlv-rwd .vtlv-price__field{ flex:1; min-width:0; }
  .vtlv-rwd #til-filters .vtlv-price__input{ flex:1; width:auto !important; min-width:0; height:44px; padding:0 10px !important; font-size:16px !important; }
  .vtlv-rwd .vtlv-price__note{ max-width:none; }
  .vtlv-rwd .vtlv-price__slider{ --vtlv-thumb:28px; width:auto; height:44px; margin:0 2px; }
  .vtlv-rwd #til-filters .vtlv-price__range::-webkit-slider-thumb{ margin-top:8px; }
  .vtlv-rwd .vtlv-price__ends{ width:auto; margin:-4px 2px 10px; font-size:13px; }
}