/* TeslaShop.GE — one light, tactile interaction layer for web and PWA.
   Glass belongs to navigation and temporary controls; listing content stays opaque.
   All transparency and motion are optional so older browsers remain usable. */

:root {
  --tsn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Noto Sans Georgian", sans-serif;
  --tsg-ink: #171b24;
  --tsg-muted: #566174;
  --tsg-red: #c91832;
  --tsg-line: rgba(68, 83, 104, .13);
  --tsg-press: cubic-bezier(.2, .75, .2, 1);
  --tsg-shadow: 0 18px 42px rgba(35, 43, 60, .13), 0 4px 12px rgba(35, 43, 60, .06);
}

body:not([data-module="chargers"]) {
  font-family: var(--tsn-font);
  background: #fbfbfd;
  accent-color: var(--tsg-red);
  caret-color: var(--tsg-red);
  -webkit-tap-highlight-color: transparent;
}

body:not([data-module="chargers"]) ::selection {
  background: rgba(201, 24, 50, .2);
  color: #171b24;
}

body:not([data-module="chargers"]) :focus-visible {
  outline: 3px solid #b5162c !important;
  outline-offset: 3px !important;
}

/* Stable opaque first paint, then opt into optical depth where supported. */
body:not([data-module="chargers"]) .site-header.tsn-header,
body:not([data-module="chargers"]) .site-header.tsn-header.is-scrolled {
  border-bottom: 1px solid rgba(255, 255, 255, .83) !important;
  background: #f9fafc !important;
  box-shadow: 0 7px 22px rgba(39, 48, 68, .055) !important;
}

.site-header.tsn-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(84, 98, 118, .2) 28%, rgba(255, 255, 255, .88) 62%, transparent);
  content: "";
  pointer-events: none;
}

.site-header.tsn-header .tsn-nav {
  align-items: center;
  gap: 2px;
}

.site-header.tsn-header .tsn-nav a {
  height: 41px;
  padding: 0 13px;
  border-radius: 13px;
  transition: background-color .24s var(--tsg-press), color .24s ease, box-shadow .24s ease, transform .24s var(--tsg-press);
}

.site-header.tsn-header .tsn-nav a::after {
  display: none;
}

.site-header.tsn-header .tsn-nav a.active,
.site-header.tsn-header .tsn-nav a:hover {
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 3px 10px rgba(40, 50, 67, .065);
}

.site-header.tsn-header .tsn-icon-button,
.site-header.tsn-header .tsn-menu-button,
.site-header.tsn-header .tsn-account summary {
  border-color: rgba(108, 120, 138, .17);
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 2px 7px rgba(35, 45, 65, .05);
  transition: transform .22s var(--tsg-press), background-color .22s ease, box-shadow .22s ease;
}

.site-header.tsn-header .tsn-route-button {
  border-color: rgba(201, 24, 50, .12);
  border-radius: 15px;
  background: rgba(255, 247, 249, .82);
  box-shadow: inset 0 1px 0 #fff, 0 3px 11px rgba(160, 20, 40, .07);
}

.site-header.tsn-header .tsn-route-button__icon {
  background: linear-gradient(155deg, #ed3951 0%, #bc1029 80%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 4px 10px rgba(154, 19, 41, .21);
}

.site-header.tsn-header .tsn-publish {
  border-radius: 14px;
  background: #202530;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 12px rgba(23, 29, 40, .12);
}

.tsn-account__menu {
  border-color: rgba(255, 255, 255, .9);
  border-radius: 21px;
  background: #f9fafc;
  box-shadow: var(--tsg-shadow);
}

.tsn-account__menu a,
.tsn-account__menu button {
  min-height: 43px;
  border-radius: 12px;
  transition: background-color .18s ease;
}

/* Search and navigation sheets carry the light, not the content behind them. */
.tsn-search[role="dialog"] {
  /* The generic mobile dialog rule must not narrow a viewport backdrop. */
  max-width: none;
}

.tsn-search__backdrop,
.tsn-mobile-menu__backdrop {
  background: rgba(35, 43, 59, .27);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.tsn-search__panel,
.tsn-mobile-menu__panel {
  border: 1px solid rgba(255, 255, 255, .85);
  background: #f7f8fb;
  box-shadow: 0 28px 76px rgba(23, 31, 47, .24), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.tsn-search__panel {
  border-radius: 28px;
}

.tsn-search__panel h2 {
  letter-spacing: -.035em;
}

.tsn-search__head {
  margin-bottom: clamp(18px, 3vw, 30px);
  letter-spacing: .02em;
  text-transform: none;
}

.tsn-search__head button,
.tsn-mobile-menu__head > button {
  border-color: rgba(99, 111, 131, .14);
  background: rgba(255, 255, 255, .77);
  box-shadow: inset 0 1px 0 #fff;
}

.tsn-search__panel form,
.tsn-market-search {
  border-color: rgba(104, 119, 140, .16);
  background: rgba(255, 255, 255, .84);
  box-shadow: inset 0 1px 0 #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.tsn-search__panel form:focus-within,
.tsn-market-search:focus-within {
  border-color: rgba(201, 24, 50, .5);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(201, 24, 50, .11);
}

.tsn-search__panel #searchOverlayInput:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.tsn-search__panel form button,
.tsn-market-search button {
  border-radius: 13px;
  background: #222731;
}

.tsn-search__panel > nav a {
  min-height: 40px;
  border-color: rgba(101, 115, 136, .17);
  background: rgba(255, 255, 255, .73);
  font-size: 12px;
}

.ts-live-search:not([hidden]) {
  border-color: rgba(255, 255, 255, .84);
  border-radius: 17px;
  background: #f8f9fc;
  box-shadow: 0 17px 38px rgba(30, 39, 55, .17), inset 0 1px 0 #fff;
}

.ts-live-search__row {
  border-radius: 12px;
  transition: background-color .17s ease;
}

.ts-live-search__row:hover,
.ts-live-search__row[aria-selected="true"] {
  border-color: rgba(125, 137, 156, .12);
  background: rgba(255, 255, 255, .86);
}

.tsn-home-hero .tsn-hero-search,
.tshub__search {
  border-radius: 19px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 5px 15px rgba(33, 43, 60, .07);
}

.tsn-mobile-menu__panel {
  border-radius: 24px 0 0 24px;
}

.tsn-mobile-menu__primary a {
  min-height: 62px;
  border-bottom-color: rgba(87, 101, 121, .1);
}

.tsn-mobile-menu__primary a:active,
.tsn-mobile-menu__links a:active {
  background: rgba(255, 255, 255, .68);
}

.tsn-mobile-menu__primary span {
  color: #657083;
  font-variant-numeric: tabular-nums;
}

.tsn-mobile-menu__route {
  border-radius: 19px;
  background: linear-gradient(145deg, #e41e3a, #b90f27);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 12px 24px rgba(168, 17, 43, .18);
}

.tsn-mobile-menu__route small {
  opacity: .9;
  font-size: 10px;
}

.tsn-mobile-menu__route strong {
  font-size: 13px;
  line-height: 1.3;
}

.tsn-mobile-menu__links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid rgba(106, 118, 137, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
  font-size: 12px;
}

/* Tactile controls on every public page; map controls have their own system. */
body:not([data-module="chargers"]) .tsn-button,
body:not([data-module="chargers"]) .mp-btn,
body:not([data-module="chargers"]) .evm-btn,
body:not([data-module="chargers"]) .tsn-publish,
body:not([data-module="chargers"]) .tsn-login,
body:not([data-module="chargers"]) .tsn-route-button,
body:not([data-module="chargers"]) .evm-mobile-toolbar button {
  touch-action: manipulation;
  transition: transform .24s var(--tsg-press), box-shadow .24s ease, background-color .24s ease, color .24s ease;
}

body:not([data-module="chargers"]) .tsn-button:active,
body:not([data-module="chargers"]) .mp-btn:active,
body:not([data-module="chargers"]) .evm-btn:active,
body:not([data-module="chargers"]) .tsn-publish:active,
body:not([data-module="chargers"]) .tsn-login:active,
body:not([data-module="chargers"]) .tsn-route-button:active,
body:not([data-module="chargers"]) .tsn-icon-button:active,
body:not([data-module="chargers"]) .tsn-menu-button:active,
body:not([data-module="chargers"]) .evm-mobile-toolbar button:active {
  transform: scale(.965);
}

body:not([data-module="chargers"]) button:disabled,
body:not([data-module="chargers"]) [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
  transform: none !important;
}

.evm-listing-card,
.tshub__directory-card,
.tsn-direction-card {
  transition: transform .25s var(--tsg-press), box-shadow .25s ease, border-color .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .evm-listing-card:hover,
  .tshub__directory-card:hover,
  .tsn-direction-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(33, 42, 60, .1);
  }
}

.evm-listing-card:active,
.tshub__directory-card:active,
.tsn-direction-card:active {
  transform: scale(.992);
}

.mp-search-page input[type="search"],
.mp-search-page select,
.evm-filter-panel input[type="search"],
.evm-filter-panel input[type="text"],
.evm-filter-panel select,
.ts-deals-filters input,
.ts-deals-filters select,
.evw-wizard input:not([type="checkbox"]):not([type="radio"]),
.evw-wizard select,
.evw-wizard textarea {
  border-radius: 13px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.mp-search-page input:focus,
.mp-search-page select:focus,
.evm-filter-panel input:focus,
.evm-filter-panel select:focus,
.ts-deals-filters input:focus,
.ts-deals-filters select:focus,
.evw-wizard input:focus,
.evw-wizard select:focus,
.evw-wizard textarea:focus {
  border-color: rgba(201, 24, 50, .62);
  box-shadow: 0 0 0 3px rgba(201, 24, 50, .12);
}

.mp-search-page .ts-search-filters,
.evm-catalog-tabs {
  border-color: rgba(92, 105, 123, .12) !important;
  border-radius: 18px !important;
  background: #f2f3f7 !important;
}

.evm-catalog-tabs a.is-active,
.mp-search-types a.is-active,
.mp-search-types a[aria-current="page"] {
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(38, 48, 65, .1) !important;
}

/* The desktop footer remains a calm content surface with clearer affordances. */
@media (min-width: 768px) {
  .site-footer.tsn-footer .tsn-footer__route {
    border-radius: 23px;
    background: linear-gradient(148deg, #e71935 0%, #c90f29 72%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 32px rgba(162, 13, 37, .17);
    transition: transform .26s var(--tsg-press), box-shadow .26s ease;
  }

  .site-footer.tsn-footer .tsn-footer__route:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 24px 42px rgba(162, 13, 37, .22);
  }

  .site-footer.tsn-footer .tsn-footer__nav a,
  .site-footer.tsn-footer .tsn-footer__nav button {
    border-radius: 8px;
    transition: color .2s ease, background-color .2s ease;
  }

  .site-footer.tsn-footer .tsn-footer__nav a:hover,
  .site-footer.tsn-footer .tsn-footer__nav button:hover {
    color: #fff !important;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  }

  /* A clear optical layer: the page remains visible through the navigation. */
  body:not([data-module="chargers"]) nav.tsn-dock {
    min-height: 72px !important;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .78) !important;
    border-radius: 34px !important;
    background: #f5f7fa !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .93), inset 0 -1px 0 rgba(82, 105, 139, .08),
                0 14px 34px rgba(31, 42, 63, .17), 0 3px 9px rgba(31, 42, 63, .08) !important;
  }

  body:not([data-module="chargers"]) nav.tsn-dock::before {
    z-index: 0;
    inset: 0;
    background: linear-gradient(125deg, rgba(255, 255, 255, .23), rgba(255, 255, 255, .035) 42%, rgba(197, 217, 245, .055) 70%, rgba(255, 255, 255, .17));
    pointer-events: none;
  }

  body:not([data-module="chargers"]) nav.tsn-dock::after {
    position: absolute;
    z-index: 0;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, .43);
    border-radius: 33px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 25%, transparent 82%, rgba(255, 255, 255, .045));
    content: "";
    pointer-events: none;
  }

  body:not([data-module="chargers"]) nav.tsn-dock > a,
  body:not([data-module="chargers"]) nav.tsn-dock > button {
    position: relative;
    z-index: 1;
    min-height: 58px !important;
    gap: 4px !important;
    border: 1px solid transparent !important;
    border-radius: 27px !important;
    background: transparent !important;
    box-shadow: none;
    color: #414e61 !important;
    transition: transform .24s var(--tsg-press), background-color .24s ease, box-shadow .24s ease, color .24s ease;
  }

  body:not([data-module="chargers"]) nav.tsn-dock > a.is-active,
  body:not([data-module="chargers"]) nav.tsn-dock > button[aria-expanded="true"] {
    border-color: rgba(255, 255, 255, .72) !important;
    background: linear-gradient(155deg, rgba(255, 255, 255, .63), rgba(255, 255, 255, .26)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), inset 0 -1px 0 rgba(106, 124, 149, .08),
                0 4px 10px rgba(47, 63, 90, .08) !important;
    color: #202b3c !important;
  }

  body:not([data-module="chargers"]) nav.tsn-dock > a:active,
  body:not([data-module="chargers"]) nav.tsn-dock > button:active {
    transform: scale(.92);
    background: rgba(255, 255, 255, .74) !important;
  }

  body:not([data-module="chargers"]) nav.tsn-dock svg {
    width: 24px !important;
    height: 24px !important;
    flex: none;
  }

  nav.tsn-dock .tsn-dock__icon-solid {
    display: none;
  }

  nav.tsn-dock > a.is-active .tsn-dock__icon-line,
  nav.tsn-dock > button[aria-expanded="true"] .tsn-dock__icon-line {
    display: none;
  }

  nav.tsn-dock > a.is-active .tsn-dock__icon-solid,
  nav.tsn-dock > button[aria-expanded="true"] .tsn-dock__icon-solid {
    display: inline;
  }

  body:not([data-module="chargers"]) nav.tsn-dock > a > span,
  body:not([data-module="chargers"]) nav.tsn-dock > button > span {
    font-size: 10px !important;
    font-weight: 600;
    letter-spacing: -.01em;
  }

  body:not([data-module="chargers"]) nav.tsn-dock .tsn-dock__route i {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(255, 255, 255, .76) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, rgba(255, 199, 208, .67), rgba(225, 84, 110, .28)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(168, 33, 58, .13),
                0 4px 10px rgba(151, 26, 49, .13) !important;
    color: #b91530;
  }

  body:not([data-module="chargers"]) nav.tsn-dock .tsn-dock__route i svg {
    width: 20px !important;
    height: 20px !important;
  }

  body:not([data-module="chargers"]) nav.tsn-dock .tsn-dock__route.is-active i {
    background: linear-gradient(145deg, rgba(237, 58, 88, .89), rgba(182, 12, 43, .88)) !important;
    color: #fff;
  }

  body.tsm-keyboard-open nav.tsn-dock {
    opacity: 0;
    translate: 0 120%;
    visibility: hidden;
    pointer-events: none;
  }

  /* The supplemental contact/legal footer stays readable below the glass dock. */
  .site-footer.tsn-footer .tsn-footer__lead {
    border-color: rgba(255, 255, 255, .86);
    border-radius: 20px;
    background: #f3f5f9;
    box-shadow: inset 0 1px 0 #fff, 0 12px 25px rgba(35, 45, 63, .08);
  }

  .site-footer.tsn-footer .tsn-footer__bottom {
    color: #566174 !important;
  }

  .site-footer.tsn-footer .tsn-footer__bottom a {
    color: #344057 !important;
  }

  .tsn-search__panel {
    border-radius: 25px !important;
    box-shadow: 0 23px 58px rgba(25, 33, 48, .2), inset 0 1px 0 #fff;
  }

  .tsn-search__panel h2 {
    font-size: clamp(27px, 7vw, 39px);
    line-height: 1.12;
  }

  .tsn-search__panel form {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0;
    min-height: 54px;
    padding: 5px 5px 5px 12px;
  }

  .tsn-search__panel form input {
    min-height: 44px !important;
    padding: 0 8px;
    font-size: 16px;
  }

  .tsn-search__panel form button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
    font-size: 13px;
  }

  .evm-filter-panel.is-open,
  .evm-filter-panel[aria-hidden="false"].is-open {
    z-index: 2300 !important;
    border-radius: 24px 24px 0 0 !important;
    background: #f7f8fb !important;
    box-shadow: 0 -20px 50px rgba(30, 40, 59, .14) !important;
  }

  .evm-filter-panel__actions {
    background: rgba(247, 248, 251, .94);
  }

  .evm-filter-backdrop.is-visible {
    z-index: 2290 !important;
  }

  .evm-mobile-toolbar button,
  .evm-mobile-toolbar select {
    border-radius: 14px !important;
  }
}

@media (max-width: 350px) {
  body:not([data-module="chargers"]) nav.tsn-dock > a > span,
  body:not([data-module="chargers"]) nav.tsn-dock > button > span {
    font-size: 9px !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) and (max-height: 500px) {
  body:not([data-module="chargers"]) nav.tsn-dock {
    min-height: 56px !important;
    border-radius: 22px !important;
  }

  body:not([data-module="chargers"]) nav.tsn-dock > a,
  body:not([data-module="chargers"]) nav.tsn-dock > button {
    min-height: 44px !important;
  }

  body:not([data-module="chargers"]) nav.tsn-dock .tsn-dock__route i {
    width: 27px !important;
    height: 27px !important;
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not([data-module="chargers"]) .site-header.tsn-header,
  body:not([data-module="chargers"]) .site-header.tsn-header.is-scrolled {
    background: rgba(244, 247, 251, .63) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.85);
    backdrop-filter: blur(24px) saturate(1.85);
  }

  .tsn-account__menu,
  .tsn-search__panel,
  .tsn-mobile-menu__panel {
    background: rgba(245, 248, 252, .79);
    -webkit-backdrop-filter: blur(30px) saturate(1.7);
    backdrop-filter: blur(30px) saturate(1.7);
  }

  .ts-live-search:not([hidden]) {
    background: rgba(247, 249, 252, .84);
    -webkit-backdrop-filter: blur(20px) saturate(1.55);
    backdrop-filter: blur(20px) saturate(1.55);
  }

  @media (max-width: 767px) {
    body:not([data-module="chargers"]) nav.tsn-dock {
      background: rgba(230, 239, 252, .3) !important;
      -webkit-backdrop-filter: blur(23px) saturate(1.65) contrast(1.04) !important;
      backdrop-filter: blur(23px) saturate(1.65) contrast(1.04) !important;
    }

    .site-footer.tsn-footer .tsn-footer__lead {
      background: rgba(242, 246, 251, .57);
      -webkit-backdrop-filter: blur(15px) saturate(1.45);
      backdrop-filter: blur(15px) saturate(1.45);
    }

    .evm-filter-panel.is-open,
    .evm-filter-panel[aria-hidden="false"].is-open {
      background: rgba(246, 248, 252, .94) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.3);
      backdrop-filter: blur(18px) saturate(1.3);
    }
  }
}

@media (prefers-reduced-transparency: reduce) {
  body:not([data-module="chargers"]) .site-header.tsn-header,
  body:not([data-module="chargers"]) .site-header.tsn-header.is-scrolled,
  .tsn-search__panel,
  .tsn-mobile-menu__panel,
  .tsn-account__menu,
  .ts-live-search:not([hidden]),
  .site-footer.tsn-footer .tsn-footer__lead,
  body:not([data-module="chargers"]) nav.tsn-dock,
  .evm-filter-panel.is-open {
    background: #f7f8fb !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.tsn-header *,
  .tsn-search *,
  .tsn-mobile-menu *,
  nav.tsn-dock *,
  .evm-listing-card,
  .tshub__directory-card,
  .tsn-direction-card {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  body:not([data-module="chargers"]) nav.tsn-dock,
  body:not([data-module="chargers"]) nav.tsn-dock > a.is-active,
  .site-header.tsn-header,
  .tsn-search__panel,
  .tsn-mobile-menu__panel {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}