/* Shared Rentulo visual foundation.
   Keep this file limited to global theme tokens and safe shared UI defaults. */

:root {
  --rentulo-page: #F5F8F6;
  --rentulo-surface: #ffffff;
  --rentulo-ink: #102019;
  --rentulo-muted: #64706b;
  --rentulo-green: #176747;
  --rentulo-green-dark: #0e5037;
  --rentulo-green-soft: #e9f4ee;
  --rentulo-line: #e5e9e5;
  --rentulo-font: "Manrope", Arial, sans-serif;
}

html,
body {
  background-color: var(--rentulo-page) !important;
}

body {
  color: var(--rentulo-ink);
  font-family: var(--rentulo-font);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Mobile/tablet header is shared across the project.
   Keep the brand and shared Menu control on one row even when a page
   does not provide its own mobile header styling. */
@media (max-width: 1100px) {
  .header,
  .header-inner {
    position: relative !important;
    z-index: 1000;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .header > .logo,
  .header-inner > .logo {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 1 auto !important;
    min-width: 0;
    color: var(--rentulo-ink) !important;
    text-decoration: none !important;
  }

  .header .logo-icon,
  .header-inner .logo-icon {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .header .logo-icon::before,
  .header .logo-icon::after,
  .header-inner .logo-icon::before,
  .header-inner .logo-icon::after {
    content: none !important;
    display: none !important;
  }

  .header .logo-icon img,
  .header-inner .logo-icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .header .logo-text,
  .header-inner .logo-text {
    display: block !important;
    line-height: 1 !important;
  }

  .header .logo-text strong,
  .header-inner .logo-text strong {
    display: block !important;
    font-family: var(--rentulo-font) !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    color: #101c18 !important;
    text-decoration: none !important;
  }

  .header .logo-text small,
  .header-inner .logo-text small,
  .header .logo-dot,
  .header-inner .logo-dot {
    display: none !important;
  }

  .shared-mobile-menu-button {
    margin-left: auto !important;
  }
}

/* Desktop header is shared across the project. */
@media (min-width: 1101px) {
  .header {
    position: relative !important;
    z-index: 1000;
    width: min(1480px, calc(100% - 64px)) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 14px 0 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
    background: transparent !important;
  }

  .logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    color: var(--rentulo-ink) !important;
    text-decoration: none !important;
  }

  .logo-icon {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .logo-icon::before,
  .logo-icon::after {
    content: none !important;
    display: none !important;
  }

  .logo-icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .logo-dot {
    display: none !important;
  }

  .logo-text {
    display: block !important;
    line-height: 1 !important;
  }

  .logo-text strong {
    display: block !important;
    font-family: var(--rentulo-font) !important;
    font-size: 27px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    color: #101c18 !important;
  }

  .logo-text small {
    font-family: var(--rentulo-font) !important;
    color: var(--rentulo-muted) !important;
  }

  .nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px 22px !important;
    min-width: 0;
    color: #17251f !important;
    font-family: var(--rentulo-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .nav > a:not(.btn-register):not(.logout-link) {
    padding: 10px 1px !important;
    border-bottom: 2px solid transparent !important;
    color: #17251f !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.16s ease, border-color 0.16s ease;
  }

  .nav > a:not(.btn-register):not(.logout-link):hover,
  .nav > a.active-link:not(.btn-register):not(.logout-link) {
    color: var(--rentulo-green) !important;
    border-bottom-color: rgba(23, 103, 71, 0.22) !important;
  }

  .btn-register,
  .logout-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--rentulo-action-green) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(0, 112, 75, 0.14) !important;
    transition: transform 0.16s ease, background 0.16s ease !important;
  }

  .btn-register:hover,
  .logout-link:hover {
    background: var(--rentulo-action-green-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
  }

  .nav-notification-badge {
    background: #DC3545 !important;
    color: #ffffff !important;
  }

  .nav-account-link:hover .nav-notification-badge {
    background: #DC3545 !important;
  }
}

/* Shared action-color semantics for My offers / My reservations.
   Green = action, red = action required or error, neutral gray = passive,
   soft mint = navigation/detail or positive action. */
.simple-reservation-actions
  .reservation-primary-action[data-reservations-action="toggle-detail"],
.simple-offer-record:has(> .request-panel.open)
  .simple-offer-actions > .offer-primary-button.urgent {
  background: #edf5f1 !important;
  color: #173f35 !important;
  border-color: #edf5f1 !important;
  box-shadow: none !important;
}

.simple-reservation-actions
  .reservation-primary-action[data-reservations-action="toggle-detail"]:hover,
.simple-offer-record:has(> .request-panel.open)
  .simple-offer-actions > .offer-primary-button.urgent:hover {
  background: #e2f0e9 !important;
  color: #173f35 !important;
  border-color: #e2f0e9 !important;
}

/* Homepage mobile readability: strengthen search labels and category names. */
@media (max-width: 640px) {
  body[data-navigation-page="uvod"] .search-field label {
    font-size: 14px !important;
    letter-spacing: 0.045em;
  }

  body[data-navigation-page="uvod"] .search-field input {
    font-size: 15px !important;
  }

  body[data-navigation-page="uvod"] .home-point-button span {
    font-size: 14px !important;
    line-height: 1.2;
    font-weight: 800 !important;
  }
}

/* Results mobile layout: keep filters compact and remove nested info cards. */
@media (max-width: 760px) {
  body[data-navigation-page="vysledky"] .filters-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body[data-navigation-page="vysledky"] .filters-card > h2,
  body[data-navigation-page="vysledky"] .filters-card > .filter-group:nth-of-type(1),
  body[data-navigation-page="vysledky"] .filters-card > .filter-group:nth-of-type(2),
  body[data-navigation-page="vysledky"] .filters-card > #results-search-button {
    grid-column: 1 / -1 !important;
  }

  body[data-navigation-page="vysledky"] .filters-card > .filter-group:nth-of-type(3),
  body[data-navigation-page="vysledky"] .filters-card > .filter-group:nth-of-type(4) {
    grid-column: auto !important;
  }

  body[data-navigation-page="vysledky"] .filter-group:nth-of-type(3) select,
  body[data-navigation-page="vysledky"] .filter-group:nth-of-type(4) select {
    padding-right: 24px !important;
    padding-left: 10px !important;
    font-size: 12.5px !important;
  }

  body[data-navigation-page="vysledky"] .result-info {
    display: block !important;
    margin-bottom: 14px !important;
  }

  body[data-navigation-page="vysledky"] .result-info-box {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    min-height: 0 !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rentulo-line, #e5e9e5) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body[data-navigation-page="vysledky"] .result-info-box:last-child {
    border-bottom: 0 !important;
  }

  body[data-navigation-page="vysledky"] .result-info-box span {
    margin-bottom: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  body[data-navigation-page="vysledky"] .result-info-box strong {
    font-size: 13px !important;
    line-height: 1.3 !important;
    text-align: right;
  }
}

@media (max-width: 350px) {
  body[data-navigation-page="vysledky"] .filters-card {
    grid-template-columns: 1fr !important;
  }

  body[data-navigation-page="vysledky"] .filters-card > .filter-group:nth-of-type(3),
  body[data-navigation-page="vysledky"] .filters-card > .filter-group:nth-of-type(4) {
    grid-column: 1 / -1 !important;
  }
}

/* Results search arrow: match the homepage arrow shape and weight. */
body[data-navigation-page="vysledky"] #results-search-button::after {
  content: "" !important;
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  margin-left: 7px !important;
  background: center / 26px 26px no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPSd3aGl0ZScgc3Ryb2tlLXdpZHRoPScyLjUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTUgMTJoMTMnLz48cGF0aCBkPSdtMTQgNyA1IDUtNSA1Jy8+PC9zdmc+") !important;
}

/* Mobile language picker: open as a compact vertical column below the flag button. */
@media (max-width: 760px) {
  #mainNav .nav-language-control {
    width: auto !important;
    align-self: flex-start !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #mainNav.is-user-navigation > .nav-language-control {
    display: grid !important;
    grid-template-columns: auto auto !important;
    width: 100% !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 10px !important;
  }

  #mainNav.is-user-navigation > .nav-language-control .nav-language-label {
    grid-column: 1;
    grid-row: 1;
  }

  #mainNav.is-user-navigation > .nav-language-control .nav-language-button {
    grid-column: 2;
    grid-row: 1;
  }

  #mainNav.is-user-navigation > .nav-language-control .nav-language-menu {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }

  #mainNav .nav-language-menu {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    width: 94px !important;
    min-width: 94px !important;
    margin-top: 6px !important;
    padding: 4px !important;
    border: 1px solid var(--rentulo-line, #e5e9e5) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(16, 32, 25, 0.08) !important;
  }

  #mainNav .nav-language-menu button {
    justify-content: flex-start !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 7px !important;
  }

  #mainNav .nav-language-menu .nav-language-flag {
    width: 26px !important;
    height: 19px !important;
    flex: 0 0 26px !important;
  }

  #mainNav .nav-language-menu .nav-language-code {
    font-size: 12px !important;
    letter-spacing: 0.01em !important;
  }
}

/* Homepage map: keep zoom controls high on the right, below the language menu area. */
body[data-navigation-page="uvod"] .home-map-zoom-controls {
  top: 145px !important;
  right: 12px !important;
  bottom: auto !important;
}

@media (max-width: 640px) {
  body[data-navigation-page="uvod"] .home-map-zoom-controls {
    top: 96px !important;
    right: 12px !important;
    bottom: auto !important;
  }
}

/* Slovak mobile results: keep the full price-filter label inside the existing select. */
@media (max-width: 760px) {
  html[lang="sk"] body[data-navigation-page="vysledky"] #categoryFilter,
  html[lang="sk"] body[data-navigation-page="vysledky"] #priceFilter {
    font-size: 12px !important;
  }
}

/* Public-page credit: always in document flow, never over the page content. */
.rentulo-credit-footer {
  position: static;
  width: 100%;
  padding: 10px 0 18px;
  border-top: 1px solid var(--rentulo-line);
  color: var(--rentulo-muted);
  font-family: var(--rentulo-font);
  font-size: 12px;
  line-height: 1.5;
}

.rentulo-credit-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  width: min(1480px, calc(100% - 64px));
  margin: 0 auto;
}

.rentulo-credit-footer-byline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rentulo-credit-footer-byline a {
  color: var(--rentulo-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rentulo-credit-footer-byline a:hover {
  color: var(--rentulo-green);
}

.rentulo-credit-footer-byline a:focus-visible {
  outline: 2px solid var(--rentulo-green);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .rentulo-credit-footer {
    padding: 12px 0 20px;
  }

  .rentulo-credit-footer-inner {
    width: calc(100% - 28px);
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}

/* V1 visual consistency: action buttons use the same green as "Nabidnout cokoli".
   Warnings and unread notification counters use the red attention palette;
   the map pins use green. */
:root {
  --rentulo-action-green: #00835a;
  --rentulo-action-green-hover: #006846;
}

body .btn-register,
body .logout-link,
body #mainNav .btn-register,
body .search-button,
body .home-map-popup-link,
body .manual-button:not(.green),
body .top-action-button,
body .account-empty-state a,
body #results-search-button,
body .result-button,
body .empty-results-button,
body .btn-primary,
body[data-navigation-page="nastaveni"] .primary-button,
body .pickup-handoff-open,
body .pickup-confirm-ready,
body .owner-debt-pay,
body .small-button.orange,
body .request-row .small-button.orange,
body .offer-primary-button.orange,
body .offer-primary-button.urgent,
body .simple-offer-actions .urgent,
body .reservation-primary-action.orange,
body .simple-reservation-actions .reservation-primary-action.orange,
body .reservation-modal-pay,
body .login-required-actions a:not(.secondary-action) {
  background: var(--rentulo-action-green) !important;
  border-color: var(--rentulo-action-green) !important;
  color: #fff !important;
}

body .btn-register:hover,
body .logout-link:hover,
body #mainNav .btn-register:hover,
body .search-button:hover,
body .home-map-popup-link:hover,
body .manual-button:not(.green):hover,
body .top-action-button:hover,
body .account-empty-state a:hover,
body #results-search-button:hover,
body .result-button:hover,
body .empty-results-button:hover,
body .btn-primary:hover,
body[data-navigation-page="nastaveni"] .primary-button:hover,
body .pickup-handoff-open:hover,
body .pickup-confirm-ready:hover,
body .owner-debt-pay:hover,
body .small-button.orange:hover,
body .request-row .small-button.orange:hover,
body .offer-primary-button.orange:hover,
body .offer-primary-button.urgent:hover,
body .simple-offer-actions .urgent:hover,
body .reservation-primary-action.orange:hover,
body .simple-reservation-actions .reservation-primary-action.orange:hover,
body .reservation-modal-pay:hover,
body .login-required-actions a:not(.secondary-action):hover {
  background: var(--rentulo-action-green-hover) !important;
  border-color: var(--rentulo-action-green-hover) !important;
  color: #fff !important;
}

/* Replace only the orange glow that accompanied orange call-to-action buttons. */
body .btn-register,
body .logout-link,
body .search-button,
body .manual-button:not(.green),
body #results-search-button,
body .result-button,
body .empty-results-button,
body .btn-primary {
  box-shadow: 0 10px 24px rgba(0, 112, 75, 0.14) !important;
}

/* V1 color semantics: green actions/map, red action-required alerts, neutral passive states.
   This is deliberately visual only: no status, event, PIN, or layout logic changes. */
:root {
  --rentulo-attention-red: #DC3545;
  --rentulo-attention-soft: #FFF0F1;
  --rentulo-attention-border: #F0B2BB;
  --rentulo-attention-ink: #9D2634;
  --rentulo-passive-bg: #EEF1F2;
  --rentulo-passive-border: #DAE2DF;
  --rentulo-passive-ink: #42564E;
}

/* Unread counters in header and inside the account menu, including mobile. */
body .nav-notification-badge,
body .nav-menu-notification-badge,
body .nav-account-link:hover .nav-notification-badge {
  background: var(--rentulo-attention-red) !important;
  color: #fff !important;
}

/* Waiting for an owner is informational; approved-but-unpaid needs a renter action. */
body[data-navigation-page="moje-rezervace"] .status-pending,
body[data-navigation-page="moje-rezervace"] .contact-box.hidden {
  background: var(--rentulo-passive-bg) !important;
  border-color: var(--rentulo-passive-border) !important;
  color: var(--rentulo-passive-ink) !important;
}
body[data-navigation-page="moje-rezervace"] .contact-box.hidden strong {
  color: var(--rentulo-passive-ink) !important;
}
body[data-navigation-page="moje-rezervace"] .status-approved,
body[data-navigation-page="moje-rezervace"] .payment-box.waiting,
body[data-navigation-page="moje-rezervace"] .reservation-state-box.rejected,
body[data-navigation-page="moje-rezervace"] .reservation-page-notice.error {
  background: var(--rentulo-attention-soft) !important;
  border-color: var(--rentulo-attention-border) !important;
  color: var(--rentulo-attention-ink) !important;
}
body[data-navigation-page="moje-rezervace"] .payment-box.waiting strong,
body[data-navigation-page="moje-rezervace"] .reservation-state-box.rejected strong,
body[data-navigation-page="moje-rezervace"] .reservation-page-notice.error::before {
  color: var(--rentulo-attention-ink) !important;
}

/* Owner requests and open debts need attention; simple request notes remain passive. */
body[data-navigation-page="moje-nabidky"] .request-status:not(.paid):not(.active):not(.finished),
body[data-navigation-page="moje-nabidky"] .owner-debt-status:not(.is-paid):not(.is-waived) {
  background: var(--rentulo-attention-soft) !important;
  border-color: var(--rentulo-attention-border) !important;
  color: var(--rentulo-attention-ink) !important;
}
body[data-navigation-page="moje-nabidky"] .request-note {
  background: var(--rentulo-passive-bg) !important;
  border-color: var(--rentulo-passive-border) !important;
  color: var(--rentulo-passive-ink) !important;
}

/* Read-only booking states and warnings on other pages use the same semantics. */
body .status-pending,
body .status-draft,
body[data-navigation-page="detail"] .badge.draft,
body[data-navigation-page="detail"] .privacy-box {
  background: var(--rentulo-passive-bg) !important;
  border-color: var(--rentulo-passive-border) !important;
  color: var(--rentulo-passive-ink) !important;
}
body[data-navigation-page="detail"] .privacy-box strong {
  color: var(--rentulo-passive-ink) !important;
}
body .status-approved,
body[data-navigation-page="detail"] .badge.unavailable,
body[data-navigation-page="detail"] .availability-panel.unavailable,
body[data-navigation-page="detail"] .availability-box.unavailable,
body[data-navigation-page="detail"] .gps-note.missing,
body[data-navigation-page="detail"] .message-card.warning,
body[data-navigation-page="detail"] .primary-button.date-conflict,
body[data-navigation-page="historie"] .history-success-notice[role="alert"],
body[data-navigation-page="vysledky"] .nearby-results-banner.warning,
body[data-navigation-page="edit-nabidka"] .edit-price-lock-notice {
  background: var(--rentulo-attention-soft) !important;
  border-color: var(--rentulo-attention-border) !important;
  color: var(--rentulo-attention-ink) !important;
}
body[data-navigation-page="detail"] .availability-panel.unavailable strong,
body[data-navigation-page="detail"] .availability-box.unavailable strong,
body[data-navigation-page="detail"] .message-card.warning strong,
body[data-navigation-page="vysledky"] .nearby-results-banner.warning span {
  color: var(--rentulo-attention-ink) !important;
}