/* Extracted from style.css: common styles */

/* Shared site styles */
/* Shared site chrome for every page: header, search, account, navigation, cookies and footer. */
:root {
  --brand-blue:#3657E8; --brand-blue-dark:#263B9C; --brand-magenta:#E83E8C;
  --brand-soft-blue:#EEF2FF; --ink:#1f2836; --muted:#667085; --border:#cfd4dc;
  --page:#f3f4f7; --surface:#fff; --stripe:#2B3340;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--page); color:var(--ink); padding-top:118px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.site-header { min-height:118px; background:#fff; border-bottom:0; box-shadow:none; }
.header-main-row { min-height:68px; }
.navbar-brand { color:var(--brand-blue)!important; font-size:1.38rem; font-weight:750; letter-spacing:-.045em; white-space:nowrap; }
.search-wrap { min-width:min(700px,52vw); }
.search-wrap .input-group { background:#fff; border:1px solid #aeb4ba; border-radius:0; overflow:visible; }
.search-wrap .input-group-text,.search-wrap .form-control { min-height:42px; border:0!important; border-radius:0!important; background:#fff!important; }
.search-wrap .form-control:focus { box-shadow:none; }
.header-search-btn { min-width:50px; border:0; border-left:1px solid #0d8dcc; border-radius:0!important; background:#139FF0; color:#fff; }
.header-search-btn:hover,.header-search-btn:focus { background:#0D8DCC; color:#fff; }
.site-header .btn { border-radius:0; }
.sign-in-btn { border:1px solid #9fa6ad; color:var(--ink); background:#fff; }
.sign-in-btn:hover { background:#f2f3f5; color:var(--ink); border-color:#9fa6ad; }
.profile-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 0 0 1px var(--border); }
.mobile-search-row { display:none; background:#fff; border-top:1px solid #e5e7eb; }
.category-row { min-height:50px; background:var(--brand-blue-dark); white-space:nowrap; scrollbar-width:none; overflow-x:auto; overflow-y:hidden; }
.category-row::-webkit-scrollbar { display:none; }
.category-row>.container-fluid { display:flex; align-items:stretch; flex-wrap:nowrap; width:max-content; min-width:100%; }
.category-link,.category-button { position:relative; display:inline-flex; align-items:center; min-height:50px; padding:0 1rem; flex:0 0 auto; border:0; background:transparent; color:#fff; text-decoration:none; font-size:.86rem; font-weight:600; }
.category-link:hover,.category-button:hover,.category-button:focus { background:#3048b7; color:#fff; }
.category-link.active { background:var(--brand-blue); }
.category-link.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--brand-magenta); }
.finance-menu { display:none; position:fixed; z-index:5000; min-width:190px; padding:.35rem 0; background:#fff; border:1px solid #adb4bd; box-shadow:0 10px 26px rgba(20,28,45,.14); }
.finance-menu.show { display:block; }
.finance-menu a { display:block; padding:.65rem .9rem; text-decoration:none; color:var(--ink); font-size:.9rem; }
.finance-menu a:hover { background:var(--brand-soft-blue); color:var(--brand-blue-dark); }
.cookie-banner { position:fixed; z-index:6000; left:18px; right:18px; bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; background:#fff; border:1px solid #aeb4bd; box-shadow:0 8px 28px rgba(20,28,45,.16); }
.cookie-banner p { margin:0; font-size:.88rem; }
.cookie-banner .btn { flex:0 0 auto; border-radius:0; background:var(--brand-blue); border-color:var(--brand-blue); }
footer { margin-top:2.5rem; background:var(--stripe); color:#c8d0da; border-top:4px solid var(--brand-magenta); }
footer a { color:#c8d0da; text-decoration:none; }
footer a:hover { color:#fff; }
footer .text-white { color:#fff!important; }
footer .form-control,footer .btn { border-radius:0; }
footer .form-control { background:#353e4b; border-color:#505b69; color:#fff; }
@media (max-width:767.98px) {
  body { padding-top:168px; }
  .site-header { min-height:168px; }
  .header-main-row { min-height:62px; }
  .mobile-search-row { display:block; min-height:56px; padding:.45rem 0; }
  .mobile-search-row .search-wrap { min-width:0; width:100%; }
  .navbar-brand { max-width:calc(100% - 95px); overflow:hidden; text-overflow:ellipsis; }
  .category-link,.category-button { min-height:44px; }
  .cookie-banner { left:10px; right:10px; bottom:10px; align-items:stretch; flex-direction:column; }
}



/* =========================================================
   FLAT MARKETPLACE REFRESH
   Fiverr-inspired visual language: clean, bold, flat, green.
   ========================================================= */
:root {
  --brand-blue:#1dbf73;
  --brand-blue-dark:#126f43;
  --brand-magenta:#1dbf73;
  --brand-magenta-dark:#168a55;
  --brand-soft-blue:#eaf8f1;
  --brand-soft-magenta:#eef9f3;
  --ink:#222325;
  --muted:#62646a;
  --border:#e4e5e7;
  --page:#f7f7f7;
  --surface:#ffffff;
  --stripe:#404145;
  --green:#1dbf73;
  --green-dark:#168a55;
  --green-deep:#0d5f3a;
  --mint:#eaf8f1;
  --charcoal:#222325;
  --grey:#62646a;
}

body { background:#fff; color:var(--charcoal); }

/* Header */
.site-header {
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:none;
}
.header-main-row { padding-top:8px; padding-bottom:8px; }
.navbar-brand {
  color:var(--charcoal)!important;
  font-size:1.28rem;
  font-weight:800;
  letter-spacing:-.045em;
}
.navbar-brand::after {
  content:".";
  color:var(--green);
  font-size:1.45em;
  line-height:0;
}
.search-wrap .input-group {
  border:1px solid #b5b6ba;
  border-radius:4px;
  overflow:hidden;
  background:#fff;
  box-shadow:none;
}
.search-wrap .input-group:focus-within { border-color:var(--charcoal); }
.search-wrap .input-group-text,.search-wrap .form-control { background:#fff!important; }
.header-search-btn {
  min-width:52px;
  border:0;
  border-left:1px solid var(--green-dark);
  border-radius:0!important;
  background:var(--green);
  color:#fff;
  font-weight:700;
}
.header-search-btn:hover,.header-search-btn:focus { background:var(--green-dark); color:#fff; }
.site-header .btn { border-radius:4px; }
.sign-in-btn,.site-header .btn-outline-primary {
  border:1px solid var(--green)!important;
  background:#fff!important;
  color:var(--green-dark)!important;
  font-weight:700;
}
.sign-in-btn:hover,.site-header .btn-outline-primary:hover { background:var(--green)!important; color:#fff!important; }
.profile-avatar { width:38px; height:38px; border:1px solid var(--border); box-shadow:none; }
.category-row {
  min-height:48px;
  background:#fff;
  border-top:1px solid #f1f1f1;
  border-bottom:1px solid var(--border);
}
.category-link,.category-button {
  min-height:48px;
  padding:0 1rem;
  color:#74767e;
  font-size:.84rem;
  font-weight:600;
}
.category-link:hover,.category-button:hover,.category-button:focus { background:#f5f5f5; color:var(--charcoal); }
.category-link.active { background:#fff; color:var(--green-dark); }
.category-link.active::after { left:1rem; right:1rem; bottom:0; height:3px; background:var(--green); }
.finance-menu,.dropdown-menu {
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.finance-menu a,.dropdown-item { border-radius:3px; margin:2px 5px; width:auto; }

/* Category dropdowns live inside a horizontally scrollable nav strip.
   Keep the menu fixed to the viewport so it cannot be clipped by the strip. */
.category-row .category-dropdown {
  position:relative;
  flex:0 0 auto;
}
.category-row .category-dropdown .dropdown-menu {
  position:fixed!important;
  z-index:5500!important;
  min-width:220px;
  max-height:min(70vh,520px);
  overflow-y:auto;
  margin-top:0;
}
.category-row .dropdown-divider {
  margin:.4rem .5rem;
}


/* Cookie + footer */
.cookie-banner {
  left:50%;
  right:auto;
  width:min(760px,calc(100% - 28px));
  transform:translateX(-50%);
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.cookie-banner .btn { border:1px solid var(--green); border-radius:4px; background:var(--green); }
.cookie-banner .btn:hover { background:var(--green-dark); border-color:var(--green-dark); }
footer {
  margin-top:3rem!important;
  border:0;
  border-radius:0;
  background:#404145;
  color:#c5c6c9;
}
footer .form-control,footer .btn { border-radius:4px; }
footer .form-control { background:#55565a; border-color:#68696d; color:#fff; }
footer .btn { background:var(--green); border-color:var(--green); color:#fff; }
footer a:hover { color:#fff; }

@media (max-width:991.98px) {
  .home-content .hero h1 { font-size:clamp(2.6rem,10vw,4.8rem); }
}
@media (max-width:767.98px) {
  .mobile-search-row,.category-row { background:#fff; }
  .home-content .hero { padding:3.4rem 0 3rem; }
  .home-content .hero h1 { letter-spacing:-.055em; }
  .home-content .category-grid,.home-content .calculator-grid { gap:10px; }
  .cookie-banner { bottom:10px; flex-direction:column; transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}


/* =========================================
   Header logo
========================================= */
.site-header .navbar-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 0;
  padding: 0;
  line-height: 1;
  text-decoration: none;
}

.site-header .site-logo {
  display: block;
  width: auto;
  height: 44px;
  max-width: 200px;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .site-header .navbar-brand {
    max-width: 165px;
  }

  .site-header .site-logo {
    width: auto;
    height: 36px;
    max-width: 160px;
  }
}

@media (max-width: 380px) {
  .site-header .navbar-brand {
    max-width: 145px;
  }

  .site-header .site-logo {
    height: 32px;
    max-width: 140px;
  }
}

/* Final logo safeguards */
.site-header .navbar-brand,
.site-header .site-logo {
  position: relative;
  z-index: 10;
}

.site-header .site-logo {
  display: block;
  width: auto;
  height: 44px;
  max-width: 200px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.site-header .navbar-brand::before,
.site-header .navbar-brand::after,
.site-header .site-logo::before,
.site-header .site-logo::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 767.98px) {
  .site-header .site-logo {
    height: 36px;
    max-width: 160px;
  }
}

/* =========================================
   Footer logo
========================================= */
footer .footer-brand {
  line-height: 1;
  text-decoration: none;
}

footer .footer-logo {
  display: block;
  width: auto;
  height: 42px;
  max-width: 210px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

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

@media (max-width: 767.98px) {
  footer .footer-logo {
    height: 38px;
    max-width: 185px;
  }
}


/* Responsive category navigation */
.mobile-nav-toggle {
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid var(--border)!important;
  background:#fff!important;
  color:var(--charcoal)!important;
  font-size:1.05rem;
}
.mobile-nav-toggle:hover,.mobile-nav-toggle:focus {
  border-color:var(--green)!important;
  color:var(--green-dark)!important;
}
.mobile-category-menu { width:min(360px,88vw); }
.mobile-category-menu .offcanvas-header { border-bottom:1px solid var(--border); }
.mobile-nav-group + .mobile-nav-group { border-top:1px solid var(--border); }
.mobile-nav-heading {
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1rem;
  border:0;
  background:#fff;
  color:var(--charcoal);
  font-weight:700;
  text-align:left;
}
.mobile-nav-heading:hover { background:#f7f7f7; }
.mobile-nav-heading i { transition:transform .18s ease; }
.mobile-nav-heading[aria-expanded="true"] i { transform:rotate(180deg); }
.mobile-nav-list { padding:0 .65rem .75rem; }
.mobile-nav-list a {
  display:block;
  padding:.65rem .7rem;
  border-radius:4px;
  color:var(--charcoal);
  text-decoration:none;
  font-size:.9rem;
}
.mobile-nav-list a:hover { background:var(--mint); color:var(--green-dark); }
.mobile-nav-list hr { margin:.4rem .7rem; border-color:var(--border); opacity:1; }

@media (max-width:991.98px) {
  body { padding-top:68px; }
  .site-header { min-height:68px; }
  .category-row { display:none!important; }
}
@media (max-width:767.98px) {
  body { padding-top:124px; }
  .site-header { min-height:124px; }
}
