/* Member panel: Voxel / Elementor pages (sign-in, account, My listings, Current plan, Orders, Inbox, Collections,
   create forms, plans) in the site's own look. Loaded only on Elementor-built pages (inc/cl26-member.php).
   Voxel colours its widgets from --ts-* variables and Elementor kit globals; ":root body" outranks both Voxel's
   "body" and the kit's ".elementor-kit-N" rules, so the palette tokens win whatever the load order.
   Reference: greece-car-rental.review (gcr-child/assets/css/gcr-voxel.css). */
:root body{
  --ts-accent-1:var(--teal);--ts-accent-2:var(--teal-ink);
  --ts-shade-1:var(--ink);--ts-shade-2:var(--ink-2);--ts-shade-3:var(--ink-3);--ts-shade-4:var(--line);
  --ts-shade-5:var(--mist);--ts-shade-6:var(--mist);--ts-shade-7:var(--sand);
  --e-global-color-primary:var(--teal);--e-global-color-accent:var(--coral-ink);
  --e-global-color-secondary:var(--ink-2);--e-global-color-text:var(--ink);
  --e-global-typography-primary-font-family:var(--f-display);--e-global-typography-secondary-font-family:var(--f-body);
  --e-global-typography-text-font-family:var(--f-body);--e-global-typography-accent-font-family:var(--f-body);
  --e-global-typography-text-font-size:1rem;
}
.pg-builder{ padding:0 0 64px }
.pg-builder.cl26-user-menu{ padding:0; margin:0 0 8px }
.pg-builder .elementor-widget :is(p,a,span,button,input,textarea,select,label,li,small,strong,dd,dt){ font-family:var(--f-body) }
.pg-builder .elementor-widget :is(h1,h2,h3,h4){ font-family:var(--f-display); color:var(--ink); letter-spacing:-.01em }
.pg-builder .elementor-widget-heading h1.elementor-heading-title{ font-size:clamp(1.7rem,3.2vw,2.3rem)!important; line-height:1.15!important; margin:0 0 14px }
.pg-builder .acct-fallback{ margin-top:16px; border-top:0; padding-top:0 }
.pg-builder .acct-me-list{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) }
.pg-builder .elementor-widget a:where(:not(.ts-btn,.ts-item-link,.ts-plan-tabs a,.ts-term-dropdown-list a)){ color:var(--teal-ink); text-decoration:none }
.pg-builder .elementor-widget :is(p,label,small,dd,.field-info) a:where(:not(.ts-btn,.ts-item-link)){ text-decoration:underline; text-underline-offset:3px } /* links inside text are not colour-only */
.pg-builder .elementor-widget a:where(:not(.ts-btn,.ts-item-link,.ts-plan-tabs a,.ts-term-dropdown-list a)):hover{ color:var(--coral-press); text-decoration:underline; text-underline-offset:3px }
.pg-builder :is(.ts-btn,.ts-item-link,a,button):focus-visible{ outline:3px solid var(--ink); outline-offset:2px; box-shadow:none }

/* ---------- Pill button bar: the user-menu bar on every member page (print template, ts-navbar) and Voxel's account
   row on the auth page (Update email, Update password, Authenticator, Privacy, Log out, plus the theme's Edit profile).
   Track in mist, white pills, the current page's pill in the accent. ---------- */
.pg-builder .ts-nav-menu.ts-wp-menu > ul.ts-nav-horizontal,
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email){
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; width:100%; max-width:100%;
  margin:0 0 16px; padding:6px; background:var(--mist); border:1px solid var(--line); border-radius:30px;
  overflow:visible;
}
/* the account actions are a second, lighter row: no track, outlined pills, a little smaller than the menu */
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email){ padding:0; margin:4px 0 8px; background:transparent; border:0; border-radius:0 }
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email) .ts-btn{ min-height:40px; padding:0 16px!important; font-size:.9rem; color:var(--ink-2); background:var(--paper); border-color:var(--line) }
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email) .ts-btn:hover{ color:var(--teal-ink); border-color:var(--teal-ink); background:var(--teal-tint) }
/* two-factor authentication is not offered on the locals sites, and Log out lives in the site header: one button (owner, 2026-11-11) */
.pg-builder .ts-auth .ts-account--authenticator, .pg-builder .ts-auth .ts-account--logout{ display:none }
.pg-builder .ts-nav-menu.ts-wp-menu > ul > li{ display:flex!important; width:auto; flex:none }
.pg-builder .ts-nav-menu.ts-wp-menu > ul > li.ts-mobile-menu{ display:none!important }
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email) > .ts-form-group{ width:auto; flex:none; margin:0 }
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email){ margin-bottom:8px }
.pg-builder .elementor-widget .ts-nav-menu .ts-item-link,
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email) .ts-btn{
  display:inline-flex; align-items:center; gap:8px; width:auto; min-height:44px; height:auto; padding:0 18px!important;
  border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--ink-2);
  font:600 .95rem/1 var(--f-body); letter-spacing:0; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.pg-builder .elementor-widget .ts-nav-menu .ts-item-link > span{ opacity:1; font-size:.95rem!important; font-weight:600!important; line-height:1!important; color:inherit; letter-spacing:0 }
.pg-builder .elementor-widget .ts-nav-menu .ts-item-link{ font-size:.95rem!important; font-weight:600!important }
.pg-builder .ts-nav-menu .ts-item-link .ts-item-icon{ width:18px; height:18px; --ts-icon-size:18px; --ts-icon-color:currentColor }
.pg-builder .ts-nav-menu .ts-item-link .ts-item-icon:not(:has(svg,i,img)){ display:none } /* the menu items carry no icons */
/* Log out is in the site header and in Voxel's account row: the user-menu copy would be a third one */
.pg-builder .ts-nav-menu > ul > li:has(> a[href*="action=auth.logout"]){ display:none!important }
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email) .ts-btn :is(svg,i){ width:18px; height:18px; font-size:18px; fill:currentColor; color:currentColor }
.pg-builder .ts-nav-menu .ts-item-link:hover,
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email) .ts-btn:hover{ border-color:var(--teal-ink); color:var(--teal-ink); background:var(--paper) }
.pg-builder .ts-nav-menu > ul > li.current-menu-item > .ts-item-link,
.pg-builder .ts-nav-menu > ul > li.current_page_item > .ts-item-link,
.pg-builder .ts-nav-menu > ul > li.current-menu-item > .ts-item-link:hover{ background:var(--coral-ink); border-color:var(--coral-ink); color:#fff!important }
.pg-builder .elementor-widget .ts-nav-menu > ul > li:is(.current-menu-item,.current_page_item) > .ts-item-link > span{ color:#fff!important }
/* the printed user-menu template draws a rule under the bar: room between that rule and the next row */
.pg-builder .elementor-widget-ts-print-template{ margin-bottom:22px!important }
.pg-builder .ts-nav-menu > ul > li > .ts-item-link[href=""]{ display:none }
@media (max-width:560px){
  .pg-builder .ts-nav-menu.ts-wp-menu > ul.ts-nav-horizontal,
  .pg-builder .ts-auth .login-section:has(> .ts-account--update-email){ border-radius:20px }
  .pg-builder .ts-nav-menu .ts-item-link,
  .pg-builder .ts-auth .login-section:has(> .ts-account--update-email) .ts-btn{ padding:0 14px; font-size:.9rem }
}

/* ---------- Page shell: the Voxel auth page's container has a viewport-tall min-height and a 350px widget column;
   in the theme shell the content sets its own height and the account row runs full width ---------- */
.pg-builder .e-con, .pg-builder .elementor-section{ min-height:0!important }
.pg-builder .e-con-inner{ padding-top:0!important; padding-bottom:0!important }
.pg-builder .e-con.e-con-boxed{ padding-left:0!important; padding-right:0!important }
.pg-builder .e-con{ --content-width:100%!important; --width:100%!important }
.pg-builder .e-con-inner{ max-width:none!important; width:100%!important }
.pg-account .elementor-widget-ts-login{ width:100%!important; max-width:100%!important; --container-widget-width:100%!important }
.pg-account .elementor-widget-ts-login .elementor-widget-container{ width:100% }

/* ---------- Voxel forms and buttons (sign-in, registration, account screens, create-post) ---------- */
.pg-builder .ts-auth .ts-form:not(:has(> .login-section > .ts-account--update-email)){ max-width:520px; margin:8px auto 0 }
.pg-builder .vx-step-title{ display:block; font:600 1.6rem/1.2 var(--f-display); letter-spacing:-.01em; color:var(--ink); margin:0 0 6px }
.pg-builder .ts-login-head{ margin:0 0 18px }
.pg-builder .or-text{ font:600 .78rem/1.2 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) }
.pg-builder .or-line{ background:var(--line) }
.pg-builder .field-info, .pg-builder .ts-form-group label, .pg-builder .ts-form-group > label{ color:var(--ink); font:600 .92rem/1.35 var(--f-body) }
.pg-builder .ts-form .ts-form-group .ts-filter, .pg-builder .ts-form :is(input.ts-filter,textarea.ts-filter,select.ts-filter), .pg-builder .inline-input{
  min-height:48px; border-radius:8px; background:var(--paper); border:1px solid var(--ink-3); color:var(--ink);
  font:400 1rem/1.3 var(--f-body); box-shadow:none;
}
.pg-builder .ts-form .ts-form-group textarea.ts-filter{ border-radius:10px }
.pg-builder .ts-filter::placeholder{ color:var(--ink-3); opacity:1 }
.pg-builder .ts-form .ts-filter:focus, .pg-builder .ts-form .ts-filter:focus-within{ border-color:var(--ink); box-shadow:0 0 0 3px var(--teal-tint), 0 0 0 4px var(--ink); outline:2px solid transparent; outline-offset:2px } /* the transparent outline is repainted in forced-colors mode */
.pg-builder .ts-btn{ min-height:48px; border-radius:8px; font:600 1rem/1 var(--f-body); transition:background-color .15s, border-color .15s, color .15s }
.pg-builder .ts-btn.ts-btn-2{ background:var(--coral-ink); border:1px solid var(--coral-ink); color:#fff }
.pg-builder .ts-btn.ts-btn-2:hover{ background:var(--coral-press); border-color:var(--coral-press); color:#fff }
.pg-builder .ts-btn.ts-btn-1, .pg-builder .elementor-widget .ts-login .ts-btn.ts-google-btn.ts-btn-1{ background:var(--paper); border:1px solid var(--ink-3); color:var(--ink) }
.pg-builder .ts-btn.ts-btn-1:hover, .pg-builder .elementor-widget .ts-login .ts-btn.ts-google-btn.ts-btn-1:hover{ border-color:var(--teal-ink); color:var(--teal-ink) }
.pg-builder .ts-btn.ts-btn-4{ background:var(--mist); border:1px solid var(--line); color:var(--ink) }
.pg-builder .ts-btn.ts-btn-large{ min-height:50px; padding:0 26px }
.pg-builder .ts-btn :is(svg,i){ color:currentColor; fill:currentColor }
.pg-builder .ts-btn.vx-disabled, .pg-builder .ts-btn.disabled{ opacity:.55 }
.pg-builder .ts-icon-btn{ min-width:44px; min-height:44px; border-radius:999px; background:var(--mist); color:var(--ink) }
.pg-builder .ts-icon-btn:hover{ background:var(--teal-tint); color:var(--teal-ink) }
.pg-builder .container-checkbox .checkmark, .pg-builder input[type=checkbox]{ accent-color:var(--teal) }
.pg-builder .ts-notice, .pg-builder .ts-form-group .ts-error, .pg-builder .vx-error{ border-radius:8px }

/* ---------- Listing plans, cart and orders (Voxel widgets on member pages) ---------- */
.pg-builder .ts-plan-tabs{ gap:8px; justify-content:center; margin:0 0 24px }
.pg-builder .ts-plan-tabs li a{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-2); font:600 .95rem/1 var(--f-body); text-decoration:none }
.pg-builder .ts-plan-tabs li.ts-tab-active a{ background:var(--coral-ink); border-color:var(--coral-ink); color:#fff }
.pg-builder .ts-plan-container{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:none; overflow:hidden }
.pg-builder .ts-plan-container.plan-featured{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) }
.pg-builder .ts-plan-name{ font:600 1.2rem/1.25 var(--f-display); color:var(--ink) }
.pg-builder .ts-plan-price{ font:600 2rem/1.1 var(--f-display); color:var(--ink) }
.pg-builder .ts-plan-features li :is(svg,i){ color:var(--teal-ink); fill:var(--teal-ink) }
.pg-builder .ts-checkout{ max-width:640px; margin:0 auto }
.pg-builder .checkout-section, .pg-builder .vx-order-card, .pg-builder .order-event-box{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius) }
.pg-builder .vx-order-card{ padding:16px 18px }
.pg-builder .vx-order-card:hover{ border-color:var(--teal) }
.pg-builder .order-status{ display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; background:var(--mist); color:var(--ink); font:600 .82rem/1 var(--f-body) }
.pg-builder .vx-order-filters .ts-filter.ts-filled{ background:var(--teal-tint); border-color:var(--teal); color:var(--teal-ink) }

/* ---------- Create / edit listing form ---------- */
.pg-builder .ts-create-post{ max-width:820px; margin:0 auto }
.pg-builder .step-percentage li{ height:6px; border-radius:999px; background:var(--line) }
.pg-builder .step-percentage li.step-done{ background:var(--teal) }
.pg-builder .active-step-details p{ font:600 1.15rem/1.25 var(--f-display); color:var(--ink); margin:0 }
.pg-builder .ts-create-post .is-required{ font:400 .85rem/1.3 var(--f-body); color:var(--ink-3) }
.pg-builder .ts-create-post .ts-has-errors :is(.is-required,.ts-filter){ color:var(--coral-press); border-color:var(--coral-ink) }
.pg-builder .ts-term-dropdown-list a{ min-height:44px; color:var(--ink); border-radius:8px }
.pg-builder .ts-term-dropdown-list li.ts-selected a{ color:var(--teal-ink); background:var(--teal-tint) }
.pg-builder .ts-field-repeater{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden }
.pg-builder .ts-repeater-head{ background:var(--mist) }
.pg-builder .onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label{ background:var(--teal) }
.pg-builder .ts-form-footer{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line) }
.pg-builder .ts-edit-success{ max-width:620px; margin:0 auto; padding:36px 28px; background:var(--mist); border-radius:var(--radius); text-align:center }
.pg-builder .ts-file-upload .pick-file-input a{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; border-radius:8px; border:1px dashed var(--ink-3); background:var(--mist); color:var(--ink) }
.pg-builder .ts-remove-file{ min-width:44px; min-height:44px; align-items:center; justify-content:center }

/* ---------- Post feeds and empty states on member pages ---------- */
.pg-builder .ts-no-posts{ padding:28px; background:var(--mist); border-radius:var(--radius); color:var(--ink-2) }
.pg-builder .ts-no-posts :is(p,h3){ color:var(--ink-2); font-family:var(--f-body) }

/* ---------- "Your details" and "Your listings" (cl26_account_sections(), auth page) ---------- */
.pg-builder .acct{ max-width:none; margin:36px 0 0; padding-top:28px; border-top:1px solid var(--line) }
.pg-builder .acct-title{ font:600 1.45rem/1.2 var(--f-display); letter-spacing:-.01em; color:var(--ink); margin:0 0 18px }
.pg-builder .acct-me-card{ display:flex; gap:18px; align-items:flex-start; padding:20px 22px; background:var(--mist); border:1px solid var(--line); border-radius:var(--radius) }
.pg-builder .acct-me-av{ flex:none; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--teal-tint); color:var(--teal-ink); font:600 1.4rem/1 var(--f-display); overflow:hidden }
.pg-builder .acct-me-av img{ width:100%; height:100%; object-fit:cover; display:block }
.pg-builder .acct-me-list{ flex:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px 24px; margin:0 }
.pg-builder .acct-me-list div{ min-width:0 }
.pg-builder .acct-me-list dt{ font:400 .82rem/1.3 var(--f-body); color:var(--ink-3); margin:0 0 3px }
.pg-builder .acct-me-list dd{ margin:0; font:500 .98rem/1.4 var(--f-body); color:var(--ink); overflow-wrap:anywhere }
.pg-builder .acct-me-note{ margin:12px 0 0; color:var(--ink-2); font-size:.9rem }
.pg-builder .acct-empty{ padding:22px 24px; background:var(--mist); border:1px solid var(--line); border-radius:var(--radius) }
.pg-builder .acct-empty p{ margin:0 0 12px; color:var(--ink-2) }
.pg-builder .acct-empty p:last-child{ margin-bottom:0 }
.pg-builder .acct-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.pg-builder .acct-card{ display:flex; gap:18px; align-items:flex-start; padding:18px 20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius) }
.pg-builder .acct-logo{ flex:none; width:64px; height:64px; border-radius:var(--radius-s); border:1px solid var(--line); background:var(--mist); overflow:hidden; display:flex; align-items:center; justify-content:center }
.pg-builder .acct-ini{ color:var(--teal-ink); font:600 1.5rem/1 var(--f-display) }
.pg-builder .acct-body{ flex:1; min-width:0 }
.pg-builder .acct-name{ font:600 1.1rem/1.3 var(--f-display); margin:0 }
.pg-builder .acct-name a{ color:var(--ink); text-decoration:none }
.pg-builder .acct-name a:hover{ color:var(--teal-ink); text-decoration:underline }
.pg-builder .acct-status{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin:6px 0 0; font-size:.9rem; color:var(--ink-2) }
.pg-builder .acct-state.is-live{ color:#0F4D35; font-weight:600 }
.pg-builder .acct-actions, .pg-builder .acct-create{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px }
.pg-builder .acct-actions .btn, .pg-builder .acct-create .btn, .pg-builder .acct-empty .btn{ min-height:44px; padding:0 20px }
.pg-builder .acct .btn.btn-light{ border:1px solid var(--line); color:var(--teal-ink) }
.pg-builder .acct .btn.btn-light:hover{ border-color:var(--teal-ink); background:var(--teal-tint) }
.pg-builder .acct-create{ margin-top:18px }
@media (max-width:560px){
  .pg-builder .acct-me-card, .pg-builder .acct-card{ flex-direction:column }
}


/* Registration: "Join the platform as" role choice as a toggle bar (track + filled active segment) */
.pg-builder .ts-auth .role-selection-hold{ width:100%; border:0!important; padding:0!important; background:transparent!important; box-shadow:none!important }
.pg-builder .ts-auth .role-selection{ display:flex; gap:4px; width:100%; padding:4px; background:var(--mist); border:1px solid var(--line); border-radius:999px }
.pg-builder .ts-auth .role-selection a{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--ink-2); font:600 .95rem/1 var(--f-body); text-decoration:none!important; transition:background-color .15s ease-out, color .15s ease-out }
.pg-builder .ts-auth .role-selection a:hover{ color:var(--teal-ink); background:var(--paper); border-color:var(--line) }
.pg-builder .ts-auth .role-selection a.selected-role, .pg-builder .ts-auth .role-selection a.selected-role:hover{ background:var(--coral-ink); border-color:var(--coral-ink); color:#fff }
.pg-builder .ts-auth .role-selection a:focus-visible{ outline:3px solid var(--ink); outline-offset:2px }

/* The Elementor page CSS of the auth page (post-483.css, from the golden template) colours .ts-btn-1:hover and .ts-btn-2:hover
   with CreteLocals kit globals (a red); those rules outrank the theme's, so the hover colours are pinned here. */
.pg-builder .elementor-widget .ts-login .ts-btn.ts-btn-1:hover, .pg-builder .ts-auth .ts-btn.ts-btn-1:hover{ background:var(--paper)!important; border-color:var(--teal-ink)!important; color:var(--teal-ink)!important }
.pg-builder .ts-auth .login-section:has(> .ts-account--update-email) .ts-btn:hover{ background:var(--teal-tint)!important; border-color:var(--teal-ink)!important; color:var(--teal-ink)!important }
.pg-builder .elementor-widget .ts-login .ts-btn.ts-btn-2:hover, .pg-builder .ts-auth .ts-btn.ts-btn-2:hover{ background:var(--coral-press)!important; border-color:var(--coral-press)!important; color:#fff!important }
