/* Universal customer shell. Navigation, header and page frame have one source of truth. */

body.tibu-public {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
}

.customer-shell-page,
body.tibu-public > .app,
body.tibu-public > .page,
body.tibu-public > .wrap {
  width: min(100%, var(--page-max-width));
  min-height: 100vh;
  margin: 0 auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  padding-bottom: calc(var(--bottom-nav-height) + 34px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  box-shadow: 0 0 70px rgba(8,24,47,.055);
}

.customer-topbar,
.account-topbar,
.public-topbar,
.universal-customer-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--topbar-height);
  margin: 0 !important;
  padding: 16px 0 12px !important;
  border: 0 !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.customer-brand,
.account-brand,
.public-topbar .brand,
.universal-customer-brand {
  min-width: 0;
  color: var(--color-navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.customer-brand-wordmark,
.account-brand-wordmark,
.public-topbar .tibu-wordmark,
.universal-customer-brand .tibu-wordmark {
  display:block;
  color:var(--color-navy);
  font-size:38px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.075em;
}

.customer-top-actions,
.account-top-actions,
.public-account-wrap,
.universal-customer-actions {
  position: relative;
  min-width: 0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.top-customer-summary,
.account-summary,
.public-account-summary,
.universal-customer-summary {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-height:48px;
}

/* Kredit, odmena a meno tvoria jeden kompaktný horizontálny riadok. */
.top-balance-chip,
.account-balance-chip,
.public-balance-chip,
.universal-balance-chip {
  min-height:40px;
  min-width:0;
  border:1px solid var(--color-line);
  border-radius:var(--radius-pill);
  padding:0 10px;
  background:#fff;
  color:var(--color-navy);
  text-decoration:none;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-shadow:none;
  white-space:nowrap;
}

.top-balance-chip small,
.account-balance-chip small,
.public-balance-chip small,
.universal-balance-chip small {
  display:inline;
  color:var(--color-muted);
  font-size:10px;
  line-height:1;
  font-weight:750;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
}

.top-balance-chip strong,
.account-balance-chip strong,
.public-balance-chip strong,
.universal-balance-chip strong {
  display:inline;
  color:var(--color-navy);
  font-size:14px;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
}

.top-balance-chip.partner strong,
.account-balance-chip.partner strong,
.public-balance-chip.partner strong,
.universal-balance-chip.partner strong { color:var(--color-green-dark); }

.top-login-btn,
.top-login-icon,
.public-login-link,
.universal-login-button {
  width:48px;
  height:48px;
  min-height:48px;
  border:1px solid var(--color-line);
  border-radius:50%;
  padding:0;
  background:#fff;
  color:var(--color-navy);
  display:grid;
  place-items:center;
  box-shadow:var(--shadow-xs);
  cursor:pointer;
}

.top-login-btn .ui-icon,
.top-login-icon .ui-icon,
.universal-login-button .ui-icon { width:27px; height:27px; }

.top-account-btn,
.account-profile-btn,
.public-account-btn,
.universal-account-name {
  min-height:40px;
  max-width:128px;
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  color:var(--color-navy);
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  font-size:13px;
  line-height:1;
  font-weight:850;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}

.top-account-btn:hover,
.account-profile-btn:hover,
.public-account-btn:hover,
.universal-account-name:hover {
  color:var(--color-green-dark);
  text-decoration:underline;
  text-underline-offset:4px;
}

.top-account-btn .ui-icon,
.account-profile-btn .ui-icon,
.public-account-btn .ui-icon { display:none !important; }
.top-account-btn .sr-only,
.account-profile-btn .sr-only,
.public-account-btn .sr-only {
  position:static !important;
  width:auto !important;
  height:auto !important;
  clip:auto !important;
  clip-path:none !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis;
}

.customer-top-panel,
.customer-menu,
.account-menu,
.public-menu,
.universal-customer-menu {
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  z-index:55;
  width:min(300px, calc(100vw - 28px));
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  padding:10px;
  background:#fff;
  box-shadow:var(--shadow-md);
}

.customer-menu a,.customer-menu button,.customer-menu .menu-disabled,
.account-menu a,.account-menu button,.account-menu .menu-disabled,
.public-menu a,.public-menu button,.public-menu .menu-disabled {
  width:100%;
  min-height:42px;
  border:0;
  border-radius:12px;
  padding:0 11px;
  background:transparent;
  color:var(--color-navy);
  text-decoration:none;
  display:flex;
  align-items:center;
  text-align:left;
  font:inherit;
  font-size:14px;
  font-weight:750;
  cursor:pointer;
}
.customer-menu a:hover,.customer-menu button:hover,
.account-menu a:hover,.account-menu button:hover,
.public-menu a:hover,.public-menu button:hover { background:var(--color-soft); }
.customer-menu .menu-disabled,.account-menu .menu-disabled,.public-menu .menu-disabled { color:var(--color-muted-2); cursor:not-allowed; }
.customer-menu .menu-separator,.account-menu .menu-separator,.public-menu .menu-separator { height:1px; margin:6px 4px; background:var(--color-line); }

.customer-bottom-nav {
  position:fixed;
  z-index:45;
  left:50%;
  bottom:0;
  width:min(100%, var(--page-max-width));
  min-height:var(--bottom-nav-height);
  padding:9px 14px max(9px, env(safe-area-inset-bottom));
  border-top:1px solid var(--color-line);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px);
  display:grid;
  grid-template-columns:repeat(var(--nav-item-count, 3), minmax(0,1fr));
  transform:translateX(-50%);
  box-shadow:0 -10px 34px rgba(8,24,47,.055);
}

.bottom-nav-item {
  position:relative;
  min-width:0;
  min-height:60px;
  border-radius:16px;
  color:var(--color-muted-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-decoration:none;
  font-size:11px;
  line-height:1;
  font-weight:700;
}
.bottom-nav-item .ui-icon { width:28px; height:28px; }
.bottom-nav-item.active { color:var(--color-navy); font-weight:800; }
.bottom-nav-item.active::before {
  content:"";
  position:absolute;
  top:2px;
  width:42px;
  height:4px;
  border-radius:999px;
  background:var(--color-navy);
}
.bottom-nav-badge {
  position:absolute;
  top:7px;
  right:calc(50% - 29px);
  width:11px;
  min-width:11px;
  height:11px;
  border:2px solid #fff;
  border-radius:999px;
  padding:0;
  background:var(--color-danger);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:0;
}
.bottom-nav-badge.hidden,.hidden { display:none !important; }

body.tibu-public > .app,
body.tibu-public > .page,
body.tibu-public > .wrap { padding-bottom:calc(var(--bottom-nav-height) + 34px + env(safe-area-inset-bottom)) !important; }

@media (max-width:480px) {
  :root { --page-padding:16px; }
  .customer-brand-wordmark,.account-brand-wordmark,.public-topbar .tibu-wordmark,.universal-customer-brand .tibu-wordmark { font-size:33px; }
  .top-customer-summary,.account-summary,.public-account-summary,.universal-customer-summary { gap:6px; }
  .top-balance-chip,.account-balance-chip,.public-balance-chip,.universal-balance-chip { min-height:38px; padding-left:8px; padding-right:8px; gap:4px; }
  .top-account-btn,.account-profile-btn,.public-account-btn,.universal-account-name { min-height:38px; max-width:86px; font-size:12px; }
}

@media (max-width:340px) {
  .top-customer-summary,.account-summary,.public-account-summary,.universal-customer-summary { gap:4px; }
  .top-balance-chip,.account-balance-chip,.public-balance-chip,.universal-balance-chip { padding-left:7px; padding-right:7px; }
  .top-balance-chip small,.account-balance-chip small,.public-balance-chip small,.universal-balance-chip small { display:none; }
  .top-account-btn,.account-profile-btn,.public-account-btn,.universal-account-name { max-width:68px; font-size:11px; }
}

.ride-extra-chips {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ride-extra-chip {
  min-height: 34px;
  border: 1px solid #e0e8e4;
  border-radius: 999px;
  padding: 6px 10px;
  background: #fff;
  color: #071b3f;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1;
  font-weight: 750;
}

.ride-extra-chip .ui-icon {
  width: 17px;
  height: 17px;
  color: #13a86b;
}

/* Inline price preview shown before a ride request is submitted. */

.inline-price-preview {
  min-height: 44px;
  margin: 12px 0 0;
  border: 1px solid #cfe7db;
  border-radius: 14px;
  padding: 10px 12px;
  background: #eaf8f1;
  color: var(--customer-shell-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: none;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}

.inline-price-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.inline-price-label {
  color: #087949;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.inline-price-value {
  margin: 0;
  color: var(--customer-shell-ink);
  font-size: 17px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.02em;
  text-align: right;
}

.inline-price-badge {
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  background: #fff;
  color: #087949;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(8, 24, 47, .055);
}

.inline-price-route {
  margin: 13px 0 0;
  color: var(--customer-shell-ink);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}

.inline-price-note {
  margin: 5px 0 0;
  color: #687180;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 650;
}

.inline-price-preview.loading,
.inline-price-preview.waiting {
  border-color: var(--customer-shell-line);
  background: #f5f7f6;
}

.inline-price-preview.loading .inline-price-badge,
.inline-price-preview.waiting .inline-price-badge {
  color: #687180;
}

.inline-price-preview.unavailable,
.inline-price-preview.error {
  border-color: #f0d8aa;
  background: #fff8eb;
}

.inline-price-preview.unavailable .inline-price-badge,
.inline-price-preview.error .inline-price-badge {
  color: #9a610c;
}

@media (max-width: 390px) {
  .inline-price-preview {
    padding: 16px;
  }

  .inline-price-value {
    font-size: 27px;
  }
}

/* Finálny objednávací formulár: kompaktná cena a doplnky jazdy. */

.route-panel .inline-price-preview {
  min-height: 42px;
  margin: 10px 0 0;
  border: 0;
  border-radius: 13px;
  padding: 10px 13px;
  background: #eaf8f1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: none;
}

.route-panel .inline-price-label {
  color: #486356;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.route-panel .inline-price-value {
  margin: 0;
  color: #071b3f;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: right;
  white-space: nowrap;
}

.route-panel .inline-price-preview.loading,
.route-panel .inline-price-preview.waiting {
  background: #f0f3f2;
}

.route-panel .inline-price-preview.unavailable,
.route-panel .inline-price-preview.error {
  border: 0;
  background: #fff0f2;
}

.ride-extras-card {
  margin: 14px 0;
  border: 1px solid #e0e8e4;
  border-radius: 20px;
  padding: 14px;
  background: #f5f7f6;
}

.ride-extras-card > .label {
  margin: 0 0 10px;
}

.ride-extras-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ride-extra {
  min-width: 0;
  min-height: 92px;
  border: 1px solid #e0e8e4 !important;
  border-radius: 15px !important;
  padding: 10px 5px 8px !important;
  background: #fff !important;
  color: #071b3f !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: none !important;
}

.ride-extra .ui-icon {
  width: 25px;
  height: 25px;
}

.ride-extra-name {
  min-height: 24px;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 750;
  text-align: center;
}

.ride-extra-price {
  color: #687180;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}

.ride-extra[aria-pressed="true"] {
  border-color: #13a86b !important;
  background: #eaf8f1 !important;
  color: #087949 !important;
  box-shadow: inset 0 0 0 1px #13a86b !important;
}

.ride-note-label {
  margin: 12px 0 7px;
  color: #475469;
  display: block;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
}

.ride-extras-card textarea {
  min-height: 70px;
  background: #fff;
}

@media (max-width: 420px) {
  .ride-extras-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ride-extra {
    min-height: 78px;
  }
}

.customer-menu button[data-customer-logout],
.account-menu button[data-customer-logout],
.public-menu button[data-customer-logout] {
  color: var(--color-danger);
}

/* Authentication visibility guard */
.universal-customer-summary.hidden,
.top-customer-summary.hidden,
.hidden {
  display: none !important;
}

/* Canonical customer header: one source of truth. */
.tibu-public .universal-customer-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--topbar-height);
  padding: 16px 0 12px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.tibu-public .universal-customer-brand {
  flex: 0 0 auto;
}

.tibu-public .universal-customer-actions,
.tibu-public .universal-customer-summary {
  min-width: 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Finálny zákaznícky header: jeden čistý textový riadok bez kapsúl a rámikov. */
.tibu-public .universal-customer-summary > .universal-balance-chip,
.tibu-public .universal-customer-summary > .universal-account-name {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--color-navy) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  flex: 0 1 auto !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

.tibu-public .universal-customer-summary > .universal-balance-chip small {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-muted) !important;
  font-size: 11px !important;
  line-height: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: transparent !important;
  border: 0 !important;
}

.tibu-public .universal-customer-summary > .universal-balance-chip strong {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-navy) !important;
  font-size: 13px !important;
  line-height: inherit !important;
  font-weight: 850 !important;
  background: transparent !important;
  border: 0 !important;
}

.tibu-public .universal-customer-summary > .universal-balance-chip.partner strong {
  color: var(--color-green-dark) !important;
}

.tibu-public .universal-customer-summary > .universal-account-name {
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tibu-public .universal-customer-summary > .universal-account-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tibu-public .universal-customer-summary > a:hover,
.tibu-public .universal-customer-summary > a:focus-visible {
  color: var(--color-green-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

@media (max-width: 430px) {
  .tibu-public .universal-customer-actions,
  .tibu-public .universal-customer-summary {
    gap: 7px;
  }

  .tibu-public .universal-customer-summary > .universal-balance-chip small {
    display: none !important;
  }

  .tibu-public .universal-customer-summary > .universal-account-name {
    max-width: 82px !important;
    font-size: 12px !important;
  }
}