:root {
  --suke-green: #1B7A3D;
  --suke-green-dark: #145c2e;
  --suke-green-light: #e6f4ea;
  --suke-radius: 14px;
}

/* legacy theme markup occasionally overflows narrow viewports; clip
   the stray horizontal scrollbar site-wide rather than hunt every case */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Sticky footer: on a short page (few search results, etc.) the footer
   used to sit right under the content instead of the bottom of the
   viewport, leaving a big blank gap below it. Push the footer down via
   flexbox on body + margin-top:auto. Three of the four layout files
   wrap the footer block in its own `<div class="col-12">` (not the
   footer element itself) as a direct child of body — margin-top:auto
   on .suke-footer had no effect there since its real flex parent was
   that div, not body. Layout files now tag that wrapper
   `suke-footer-wrap` so this can target the actual flex item. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.suke-footer-wrap {
  margin-top: auto;
}

/* suke-style rounded cards, applied to the existing Bootstrap utility
   classes so listing cards across automobiles/realestate pick it up
   without per-template edits */
.rounded {
  border-radius: var(--suke-radius) !important;
}
.card {
  border-radius: var(--suke-radius);
  overflow: hidden;
}
.shadow, .shadow-soft {
  box-shadow: 0 2px 10px rgba(27, 122, 61, 0.12) !important;
}
.badge.bg-light {
  border: 1px solid var(--suke-green-light);
}

/* ===================== suke UI kit =====================
   Shared components for automobiles/realestate, mirroring the
   suke mobile app's interaction patterns. Built with flexbox
   instead of col-* utilities, since [class*="col-"] below is
   forced to 100% width on mobile and would collapse these. */

.suke-listcard {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid #e8ece9;
  border-radius: var(--suke-radius);
  box-shadow: 0 2px 10px rgba(27, 122, 61, 0.08);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  margin-bottom: 14px;
  min-height: 96px;
}
.suke-listcard:hover { box-shadow: 0 4px 16px rgba(27, 122, 61, 0.16); }
.suke-listcard--featured {
  background: var(--suke-green-light);
  border-color: var(--suke-green);
}
.suke-listcard__thumb {
  flex: 0 0 96px;
  width: 96px;
  min-height: 96px;
  overflow: hidden;
  background: #f0f0f0;
}
.suke-listcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.suke-listcard__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.suke-listcard__title {
  font-weight: 700;
  color: #212529;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.suke-listcard__price {
  font-weight: 700;
  color: var(--suke-green);
  font-size: 1.05rem;
}
.suke-listcard__facts {
  font-size: 0.82rem;
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suke-listcard__chev {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-right: 10px;
  color: #adb5bd;
}
.suke-listcard--featured .suke-listcard__facts { color: #3a6b4a; }

.suke-listcard-compact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #e8ece9;
  border-radius: var(--suke-radius);
  box-shadow: 0 2px 10px rgba(27, 122, 61, 0.08);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 14px;
  min-height: 96px;
}
.suke-listcard-compact:hover { box-shadow: 0 4px 16px rgba(27, 122, 61, 0.16); }
.suke-listcard-compact__avatar {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
}
.suke-listcard-compact__avatar img { width: 100%; height: 100%; object-fit: cover; }
.suke-listcard-compact__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.suke-listcard-compact__title {
  font-weight: 700;
  color: #212529;
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.suke-listcard-compact__facts { font-size: 0.82rem; color: #6c757d; }
.suke-listcard-compact__about {
  font-size: 0.85rem;
  color: #495057;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0;
}
.suke-listcard-compact__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #6c757d;
}
.suke-listcard-compact__row i {
  flex: 0 0 auto;
  width: 14px;
  color: var(--suke-green);
}
.suke-listcard-compact__row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suke-listcard-compact__chev {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: #adb5bd;
  align-self: center;
}

.suke-searchbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.suke-searchbar__form {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
}
.suke-searchbar__input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #dfe3e0;
  padding: 10px 16px 10px 40px;
  font-size: 0.95rem;
  background: #fff;
}
.suke-searchbar__input:focus {
  outline: none;
  border-color: var(--suke-green);
  box-shadow: 0 0 0 3px rgba(27, 122, 61, 0.15);
}
.suke-searchbar__icon {
  position: absolute;
  left: 14px;
  color: #adb5bd;
  pointer-events: none;
}
.suke-searchbar__filterbtn {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--suke-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px;
}
.suke-searchbar__filterbtn:hover { background: var(--suke-green-dark); color: #fff; }
.suke-searchbar__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #fff;
  color: var(--suke-green);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--suke-green);
}

.suke-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.suke-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #dfe3e0;
  background: #fff;
  color: #495057;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}
.suke-chip:hover { border-color: var(--suke-green); color: var(--suke-green); text-decoration: none; }
.btn-check:checked + .suke-chip,
.suke-chip.active {
  background: var(--suke-green);
  border-color: var(--suke-green);
  color: #fff;
}
.suke-chip__remove { font-weight: 700; }
.suke-chip--static { cursor: default; color: var(--suke-green-dark); border-color: var(--suke-green-light); background: var(--suke-green-light); }
.suke-chip--static:hover { color: var(--suke-green-dark); }
.suke-chip--static i { color: var(--suke-green); }

.suke-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--suke-green-light);
}
.suke-section:first-child { margin-top: 0; }
.suke-section__title {
  font-weight: 700;
  font-size: 1rem;
  color: #14532d;
  margin: 0;
}

.suke-fieldrow { margin-bottom: 16px; }
.suke-fieldrow label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: #333;
  margin-bottom: 6px;
}
.suke-fieldrow .required-asterisk { color: #c0392b; margin-left: 2px; }
.suke-fieldrow .form-control,
.suke-fieldrow .form-select {
  min-height: 46px;
  border-radius: 10px;
}
.suke-fieldrow .invalid-feedback,
.suke-fieldrow .text-danger { font-size: 0.82rem; }

.suke-spec {
  background: #fff;
  border-radius: var(--suke-radius);
  overflow: hidden;
  margin-bottom: 6px;
}
.suke-spec__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f2f0;
  font-size: 0.9rem;
}
.suke-spec__row:last-child { border-bottom: none; }
.suke-spec__label { color: #6c757d; }
.suke-spec__value { font-weight: 600; color: #212529; text-align: right; }
.suke-spec__value--emphasis { color: var(--suke-green); font-size: 1.1rem; }

.suke-contact { background: var(--suke-green-light); border-radius: var(--suke-radius); padding: 16px; }
.suke-contact--sticky {
  display: none;
}
@media (max-width: 767.98px) {
  .suke-contact--sticky {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
  }
  .suke-contact--sticky .btn { flex: 1 1 auto; }
  .suke-contact-spacer { display: block; height: 76px; }
}

.suke-empty {
  text-align: center;
  color: #6c757d;
  padding: 40px 16px;
  font-size: 0.95rem;
}

.suke-filter-panel .offcanvas-header {
  background: var(--suke-green);
  color: #fff;
}
.suke-filter-panel .offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.suke-filter-panel .offcanvas-footer {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid #eee;
}
.suke-filter-panel .offcanvas-footer .btn-apply { flex: 1 1 auto; }
@media (min-width: 768px) {
  .suke-filter-panel.offcanvas-bottom {
    width: 420px;
    height: 100vh !important;
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    border-radius: 0;
  }
}

.suke-checkdrop {
  position: relative;
  margin-bottom: 14px;
}
.suke-checkdrop__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid #dfe3e0;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.88rem;
  color: #333;
}
.suke-checkdrop__toggle:hover { border-color: var(--suke-green); }
.suke-checkdrop__count { color: var(--suke-green); font-weight: 700; margin-left: auto; margin-right: 6px; }
.suke-checkdrop__toggle i { font-size: 0.75rem; color: #adb5bd; }
.suke-checkdrop__menu {
  width: 100%;
  max-height: 190px;
  overflow-y: auto;
  padding: 6px 10px;
}
.suke-checkdrop__menu ul { list-style: none; margin: 0; padding: 0; }
.suke-checkdrop__menu li { padding: 0; }
.suke-checkdrop__menu label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  font-weight: 400;
  color: #333;
  cursor: pointer;
  padding: 5px 6px;
  border-radius: 6px;
  margin: 0;
}
.suke-checkdrop__menu label:hover { background: var(--suke-green-light); }
.suke-checkdrop__menu input[type="checkbox"] {
  margin: 0;
  accent-color: var(--suke-green);
  flex: 0 0 auto;
}

.wizard-progress {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
}
.wizard-progress__step {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.72rem;
  color: #adb5bd;
  padding-bottom: 8px;
  border-bottom: 3px solid #e8ece9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizard-progress__step--active {
  color: var(--suke-green);
  font-weight: 700;
  border-bottom-color: var(--suke-green);
}
.wizard-progress__step--done {
  color: #495057;
  border-bottom-color: var(--suke-green-light);
}
.wizard-progress__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  background: #dc3545;
  vertical-align: middle;
}
.wizard-progress__step--complete .wizard-progress__dot {
  background: var(--suke-green);
}
.wizard-step { display: none; }
.wizard-step--active { display: block; }
.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0;
}
.wizard-nav .btn {
  min-height: 44px;
  min-width: 100px;
}

/*
*page content formats
*/
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  .col-13 {width: 20%;}
}

/* ===================== suke UI kit (site-wide) =====================
   .suke-card/.suke-btn/.suke-stat-* were previously only defined inline
   in suke/base.html (the Suke shop-management app's own page-local
   <style> block) — promoted here so every app that already references
   them (payments, messaging, saved searches) actually gets them. */
.suke-card {
  background: #fff;
  border: 1px solid #e8ece9;
  border-radius: var(--suke-radius);
  box-shadow: 0 2px 10px rgba(27, 122, 61, 0.08);
  padding: 18px 20px;
}
.suke-stat-label { font-size: 0.8rem; color: #3a6b4a; }
.suke-stat-value { font-size: 1.5rem; font-weight: 700; color: #14532d; }
.suke-btn { background: var(--suke-green); border-color: var(--suke-green); color: #fff; }
.suke-btn:hover, .suke-btn:focus { background: var(--suke-green-dark); border-color: var(--suke-green-dark); color: #fff; }

/* Centered narrow card shell for auth pages (login/register/reset) */
.suke-auth-shell {
  max-width: 440px;
  margin: 32px auto;
  padding: 0 16px;
}
.suke-auth-shell .suke-card { padding: 28px 24px; }
.suke-auth-shell__brand {
  text-align: center;
  margin-bottom: 18px;
  font-weight: 700;
  color: var(--suke-green);
}
.suke-auth-shell__footer {
  text-align: center;
  margin-top: 16px;
  font-size: 0.9rem;
  color: #6c757d;
}
.suke-auth-shell .suke-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.suke-auth-shell .suke-social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--suke-green-light);
  color: var(--suke-green);
}
.suke-auth-shell .suke-social a:hover { background: var(--suke-green); color: #fff; }
.suke-auth-shell__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #adb5bd;
  font-size: 0.85rem;
  margin: 16px 0;
}
.suke-auth-shell__divider::before,
.suke-auth-shell__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e8ece9;
}

/* Avatar + name/stats header, shared by profile dashboard and public
   storefront profile pages */
.suke-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.suke-avatar {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--suke-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--suke-green);
  font-size: 1.8rem;
}
.suke-avatar img { width: 100%; height: 100%; object-fit: cover; }
.suke-profile-header__body { flex: 1 1 auto; min-width: 0; }
.suke-profile-header__name { font-weight: 700; font-size: 1.2rem; color: #212529; margin: 0; }
.suke-profile-header__meta { color: #6c757d; font-size: 0.88rem; }
.suke-profile-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.suke-profile-header__actions .btn { min-height: 40px; }

/* Icon-button row used for the "contact with" social/message links */
.suke-icon-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.suke-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--suke-green-light);
  color: var(--suke-green);
}
.suke-icon-btn:hover { background: var(--suke-green); color: #fff; }

/* Tab-style menu used by profile dashboard / public profile submenus */
.suke-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 1px solid #e8ece9;
  padding-bottom: 0;
}
.suke-tabs a {
  padding: 10px 14px;
  color: #495057;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}
.suke-tabs a.active, .suke-tabs a:hover { color: var(--suke-green); border-bottom-color: var(--suke-green); }

/* activity-feed timestamp on "your page" (usersactions/action/detail_*.html) */
.date { display: block; font-size: 0.78rem; color: #6c757d; margin-bottom: 2px; }


a{
    text-decoration: none;
}



.footer a{
    text-decoration: none;
    color:white;
}

.footer ul li {
    display: inline;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2);
    padding: 5px 0;
}

.footer-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

p a{
    text-decoration: none;
    color:white;
}

  li {
    padding-left: 0%;
    margin-left: 0;
    display: inline;
    text-decoration: none;
  }

  .bg-site {
    background-color: var(--suke-green);
    color:whitesmoke;
  }

  .bg-site2 {
    background-color: var(--suke-green-light);
    color:whitesmoke;
  }

  .btn-primary,
  .page-item.active .page-link,
  .dropdown-item.active,
  .dropdown-item:active {
    background-color: var(--suke-green) !important;
    border-color: var(--suke-green) !important;
  }
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: var(--suke-green-dark) !important;
    border-color: var(--suke-green-dark) !important;
  }
  .btn-outline-primary {
    color: var(--suke-green) !important;
    border-color: var(--suke-green) !important;
  }
  .btn-outline-primary:hover {
    background-color: var(--suke-green) !important;
    color: whitesmoke !important;
  }
  .text-primary {
    color: var(--suke-green) !important;
  }
  .bg-primary {
    background-color: var(--suke-green) !important;
  }
  .border-primary {
    border-color: var(--suke-green) !important;
  }
  .page-link {
    color: var(--suke-green);
  }
  .form-check-input:checked {
    background-color: var(--suke-green);
    border-color: var(--suke-green);
  }

  .bg-site-color {
    color:whitesmoke;
  }

  .ulsquare {
    list-style-type: square;
  }

  .quileditorheight {
    height: 500px;
  }
  
  body.with-cookie-bar {
    padding-top: 35px;
  }
  .cookie-bar {
    position: fixed;
    width: 100%;
    top:0;
    text-align:center;
    height:25px;
    line-height: 25px;
    background: #eee;
  }

  #consent-popup {
    position: fixed;
    bottom:0;
    left: 0;
    right: 0;
    padding: 1em;
    background-color: rgb(200, 206, 36);
    opacity: 1;
    transition: opacity 0.5s, opacity 0.5s ease;
    /* Below .suke-topnav (1020) and Bootstrap's offcanvas/backdrop
       (1040/1045) — otherwise, on a first visit (cookie not yet
       accepted), this fixed bottom banner sits on top of the lower
       links in the mobile nav drawer (sign in/up, contact) and blocks
       clicks on them — reads as "the menu is covered by something". */
    z-index: 1010;
  }

  .hidden{
    opacity: 0;
    visibility: hidden;
  }

/* ===================== modernized nav / footer / landing =====================
   Replaces the old 3-column navbar (hamburger + nested category
   dropdowns-inside-a-collapse) with one sticky row: logo, primary
   category links visible directly on desktop, account + language
   controls, and a single flat offcanvas drawer on mobile instead of a
   dropdown-within-a-collapse. */

.suke-topnav {
  /* Not position:sticky — a pre-existing site-wide rule
     (html, body { overflow-x: hidden }) forces body's overflow-y to
     compute to `auto` (a CSS spec quirk: setting overflow-x alone on an
     element forces the other axis away from `visible`), which silently
     breaks position:sticky for any descendant — the nav would scroll
     away with the page instead of sticking. Fixed positioning sidesteps
     that ancestor-overflow dependency entirely. See .suke-topnav-spacer
     below, which reserves the space fixed positioning removes from flow. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--suke-green);
  padding: 10px 16px;
}
.suke-topnav-spacer { height: 60px; }
.suke-topnav__brand { display: flex; align-items: center; flex: 0 0 auto; }
.suke-topnav__brand img { display: block; border-radius: 8px; }
.suke-topnav__links {
  display: none;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
}
.suke-topnav__links a {
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
}
.suke-topnav__links a:hover,
.suke-topnav__links a.active { background: rgba(255,255,255,0.16); }
.suke-topnav__spacer { flex: 1 1 auto; }
.suke-topnav__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.suke-topnav__iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  border: none;
  position: relative;
}
.suke-topnav__iconbtn:hover { background: rgba(255,255,255,0.16); }
/* Inline SVG flags (sharedutilities/ui/flag.html), not <img> or emoji —
   the external flag-image host this used to point at
   (countryflagicons.com) doesn't reliably resolve/load, and flag emoji
   render as bare two-letter codes on Windows (no color-flag glyphs in
   the fallback font there). Inline SVG has no network or font
   dependency at all, so it always renders. */
.suke-flag-svg {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  vertical-align: -2px;
  margin-right: 2px;
}
.suke-topnav__langbtn .suke-flag-svg { width: 24px; height: 17px; margin-right: 0; vertical-align: middle; }
.suke-topnav__langbtn { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.suke-topnav__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #e24b4a;
  color: #fff;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.suke-topnav__account {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: none;
  background: transparent;
}
.suke-topnav__account:hover { background: rgba(255,255,255,0.16); }
.suke-topnav__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
@media (min-width: 992px) {
  .suke-topnav__links { display: flex; }
  .suke-topnav__hamburger { display: none; }
}

/* mobile nav drawer (Bootstrap 5 offcanvas) — one flat scroll, section
   labels instead of nested dropdown-in-dropdown */
/* Bootstrap 5.0.2's Offcanvas component (this project's pinned version)
   reuses the shared Backdrop class internally and stamps it with the
   .modal-backdrop class name — the dedicated .offcanvas-backdrop class
   only exists in later Bootstrap versions. .modal-backdrop's default
   z-index (1050) is HIGHER than .offcanvas's (1045), so that backdrop
   sits on top of the drawer's own content and silently blocks clicks
   on it (looks like "the menu is covered by something"). Force the
   drawer itself above any backdrop, whatever class it's using. */
.suke-navdrawer { z-index: 1060; }
.suke-navdrawer .offcanvas-header { background: var(--suke-green); color: #fff; }
.suke-navdrawer .offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.suke-navdrawer__section {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
  margin: 18px 0 6px;
}
.suke-navdrawer__section:first-child { margin-top: 0; }
.suke-navdrawer a.suke-navdrawer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  color: #212529;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid #f0f2f0;
  min-height: 44px;
}
.suke-navdrawer a.suke-navdrawer__link i { width: 20px; text-align: center; color: var(--suke-green); }
.suke-navdrawer a.suke-navdrawer__link:hover { color: var(--suke-green); }

/* ---- footer ---- */
.suke-footer {
  background: var(--suke-green-dark);
  color: rgba(255,255,255,0.9);
  padding: 40px 16px 20px;
}
.suke-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.suke-footer__col { flex: 1 1 200px; min-width: 160px; }
.suke-footer__heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}
.suke-footer__col a {
  display: block;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 5px 0;
}
.suke-footer__col a:hover { color: #fff; text-decoration: underline; }
.suke-footer__social { display: flex; gap: 10px; margin-top: 4px; }
.suke-footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.suke-footer__social a:hover { background: rgba(255,255,255,0.24); }
.suke-footer__bottom {
  max-width: 1100px;
  margin: 28px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
}

/* ---- landing page ---- */
.suke-hero {
  background: linear-gradient(180deg, var(--suke-green) 0%, var(--suke-green-dark) 100%);
  padding: 36px 16px 56px;
  color: #fff;
  text-align: center;
}
.suke-hero__title { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; }
.suke-hero__subtitle { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin: 0 auto 20px; max-width: 480px; }
.suke-hero__search {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.suke-hero__search select {
  border: none;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--suke-green-dark);
  flex: 0 0 auto;
  max-width: 130px;
  min-width: 0;
}
.suke-hero__search input {
  flex: 1 1 160px;
  min-width: 0;
  border: none;
  border-radius: 999px;
  padding: 13px 18px;
  font-size: 0.95rem;
}
.suke-hero__search input:focus { outline: 3px solid rgba(255,255,255,0.4); }
.suke-hero__search button {
  flex: 1 1 auto;
  border: none;
  border-radius: 999px;
  padding: 0 22px;
  min-height: 44px;
  background: #fff;
  color: var(--suke-green-dark);
  font-weight: 700;
  white-space: nowrap;
}
/* Below ~380px even select+input alone are tight — give the button its
   own full-width row instead of forcing everything to shrink below a
   usable size (that's what let the row overflow the viewport at all,
   which then leaves document.body horizontally scrollable — offcanvas
   opening/closing nudges that scroll position and it never resets,
   which is what made the hamburger look "stuck" afterwards). */
@media (max-width: 420px) {
  .suke-hero__search select { flex: 1 1 110px; max-width: none; }
  .suke-hero__search button { flex: 1 1 100%; padding: 12px 22px; }
}
.suke-hero__quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.suke-hero__quicklinks a {
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  text-decoration: none;
}
.suke-hero__quicklinks a:hover { background: rgba(255,255,255,0.15); }
.suke-hero__quicklinks a.suke-hero__quicklinks--primary {
  background: #fff;
  color: var(--suke-green-dark);
  border-color: #fff;
  font-weight: 700;
}
.suke-hero__quicklinks a.suke-hero__quicklinks--primary:hover { background: rgba(255,255,255,0.85); }

.suke-catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 24px auto 40px;
  padding: 0 16px;
  position: relative;
}
.suke-catcard {
  background: #fff;
  border-radius: var(--suke-radius);
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suke-catcard__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--suke-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--suke-green);
}
.suke-catcard h3 { font-size: 1.1rem; font-weight: 700; margin: 4px 0 0; }
.suke-catcard p { color: #6c757d; font-size: 0.88rem; margin: 0; flex: 1 1 auto; }
.suke-catcard__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.suke-catcard__links a {
  font-size: 0.82rem;
  color: var(--suke-green);
  text-decoration: none;
  font-weight: 600;
}
.suke-catcard__links a:hover { text-decoration: underline; }
.suke-catcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--suke-green);
  color: #fff;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: 6px;
  min-height: 44px;
}
.suke-catcard__cta:hover { background: var(--suke-green-dark); color: #fff; }
.suke-catcard__cta--outline {
  background: #fff;
  color: var(--suke-green);
  border: 1.5px solid var(--suke-green);
}
.suke-catcard__cta--outline:hover { background: var(--suke-green-light); }
.suke-catcard__links span {
  font-size: 0.82rem;
  color: #6c757d;
  background: #f4f6f5;
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* "create advertisements" hub (gebeyet/templates/home/createadvertisements.html) */
.suke-createhub__intro {
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 0 16px;
}
.suke-createhub__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; }
.suke-createhub__subtitle { color: #6c757d; font-size: 0.95rem; margin: 0; max-width: 560px; }
.suke-createhub__grid { margin-top: 20px; }
.suke-createhub__tips {
  max-width: 1100px;
  margin: 8px auto 48px;
  padding: 0 16px;
}
.suke-createhub__tipstitle {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--suke-green-dark);
}
.suke-createhub__tipslist {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  background: var(--suke-green-light);
  border-radius: var(--suke-radius);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 20px;
}
.suke-createhub__tipslist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: #3c4043;
  margin: 0;
}
.suke-createhub__tipslist li i {
  color: var(--suke-green);
  margin-top: 3px;
  flex: 0 0 auto;
}

/* About us page (gebeyet/templates/home/about.html) */
.suke-about__whyus, .suke-about__contact {
  max-width: 1100px;
  margin: 8px auto 40px;
  padding: 0 16px;
}
.suke-about__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.suke-about__point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.suke-about__point i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--suke-green-light);
  color: var(--suke-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.suke-about__point h3 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.suke-about__point p { color: #6c757d; font-size: 0.88rem; margin: 0; }
.suke-about__contact p { color: #6c757d; margin: 4px 0 14px; }

.suke-empty {
  width: 100%;
  text-align: center;
  color: #6c757d;
  background: #fff;
  border: 1px solid #e8ece9;
  border-radius: var(--suke-radius);
  padding: 32px 20px;
}
.suke-empty--noresults i {
  font-size: 1.8rem;
  color: #adb5bd;
  margin-bottom: 10px;
  display: block;
}
.suke-empty__title {
  font-weight: 700;
  color: #212529;
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.suke-empty__subtitle {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0 0 14px;
}