/* ── ToolRent Module Styles ───────────────────────────────────────────────
   Restored 2026-08-28 to the module's own original design: "Промышленная
   навигация" ("Industrial navigation") — a construction-white paper
   surface, graphite ink, and ToolRent Orange as the single accent, with
   Manrope headings (800 weight, tight tracking) over IBM Plex Sans body
   text. Source of truth: the ported React/Tailwind template's own
   client/src/index.css (see the top-of-file design-contract comment there:
   "ToolRent visual direction: «Промышленная навигация» — строительный
   белый, графит, ToolRent Orange").

   An earlier build pass ("2026-08-27 identity unification") deliberately
   stripped this out and made every color below fall back to bimbly.eu's
   generic site-wide purple (var(--brand)#7657ff / var(--brand2)#9a7dff).
   That homogenization is reverted here — ToolRent gets its own palette
   back.

   How it's scoped: everything below lives inside `.tr-scope`, the wrapper
   div that templates/header.php opens (right after the shared header, so
   it also wraps this module's own account-bar sub-nav) and
   templates/footer.php closes (right before the shared footer include).
   Custom properties only cascade downward, so redefining
   --brand/--surface/--muted/--line/etc. here can never leak into bimbly's
   shared site-wide header, module-nav or footer, which render outside
   `.tr-scope` and keep the site-wide purple untouched. This also means the
   many inline `style="color:var(--muted)"` / `var(--brand)` attributes
   scattered across index.php, request.php, point.php, offer.php and
   request-submit.php automatically resolve to ToolRent's own palette
   without any changes to those files.

   Class names tr-* remain module-scoped, unchanged from before — only
   their declarations changed.
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --tr-available: #22c55e;
  --tr-on-request: #f59e0b;
  --tr-unavailable: #ef4444;
}

.tr-scope {
  /* Module's own palette tokens (from the source template's :root design tokens) */
  --tr-bg: #f6f4ef;            /* construction-white paper */
  --tr-surface: #ffffff;       /* card surface */
  --tr-surface-2: #ece9e2;     /* secondary section fill */
  --tr-surface-soft: #fff1e9;  /* soft orange-tinted accent fill */
  --tr-text: #202a31;          /* graphite ink */
  --tr-muted: #68737a;         /* muted slate */
  --tr-line: #dedbd2;          /* hairline border */
  --tr-orange: #f26622;        /* ToolRent Orange — primary accent */
  --tr-orange-deep: #d84d10;   /* pressed / hover orange */
  --tr-orange-soft: #ab3f12;   /* readable orange-brown for text on light fills */
  --tr-sage: #5d8271;          /* secondary accent (availability / trust notes) */
  --tr-dark: #263139;          /* dark graphite panel fill */
  --tr-dark-deep: #1d292f;     /* deepest graphite (footer / prefooter bands) */
  --tr-danger: #bd3d2d;
  --tr-radius: 14px;
  --tr-radius-lg: 18px;
  --tr-shadow: 0 12px 28px rgba(32, 42, 49, .1);
  --tr-shadow-sm: 0 4px 12px rgba(32, 42, 49, .07);
  --tr-font-sans: "IBM Plex Sans", Arial, sans-serif;
  --tr-font-display: "Manrope", Arial, sans-serif;
  --tr-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Back-compat: the generic tokens bimbly.css exposes site-wide, overridden
     here only inside this wrapper — inline `style="color:var(--muted)"` etc.
     used across the module's PHP templates keep working, now resolving to
     ToolRent's own palette instead of the shared purple identity. This also
     restyles the shared .hero-section/.eyebrow/.section classes reused on
     this module's pages, since they're built on the same token names. */
  --brand: var(--tr-orange);
  --brand2: var(--tr-orange-deep);
  --bg: var(--tr-bg);
  --surface: var(--tr-surface);
  --surface2: var(--tr-surface-2);
  --surface-soft: var(--tr-surface-soft);
  --text: var(--tr-text);
  --muted: var(--tr-muted);
  --line: var(--tr-line);
  --radius: var(--tr-radius);
  --shadow: var(--tr-shadow);

  display: block;
  background: var(--tr-bg);
  color: var(--tr-text);
  font-family: var(--tr-font-sans);
}
.tr-scope h1, .tr-scope h2, .tr-scope h3 {
  font-family: var(--tr-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tr-text);
}
.tr-scope em { color: var(--tr-orange); font-style: normal; }

/* ── Account bar ──────────────────────────────────────────────────────────── */
.tr-account-link { color: var(--tr-text); text-decoration: none; font-weight: 600; transition: color .16s var(--tr-ease-out); }
.tr-account-link:hover { color: var(--tr-orange); }
.tr-account-link-cta { color: var(--tr-orange-deep); font-weight: 800; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.tr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; padding: 12px 20px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-size: .95rem;
  transition: opacity .18s var(--tr-ease-out), transform .16s var(--tr-ease-out), background-color .18s var(--tr-ease-out), box-shadow .18s var(--tr-ease-out);
}
.tr-btn-primary { background: var(--tr-orange); color: #fff; }
.tr-btn-primary:hover { background: var(--tr-orange-deep); box-shadow: 0 9px 20px rgba(216, 77, 16, .22); }
.tr-btn-primary:active { transform: scale(.97); }
.tr-btn-ghost { background: transparent; border-color: var(--tr-line); color: var(--tr-text); }
.tr-btn-ghost:hover { background: var(--tr-surface-2); }
.tr-btn-full { width: 100%; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.tr-card { background: var(--tr-surface); border: 1px solid var(--tr-line); border-radius: var(--tr-radius); padding: 20px 22px; margin-bottom: 18px; }
.tr-card-title { font-family: var(--tr-font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; letter-spacing: -.01em; }

/* ── Search / hero ────────────────────────────────────────────────────────── */
.tr-search-form {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; padding: 8px;
  background: var(--tr-surface); border: 1px solid var(--tr-line); border-radius: 10px;
  box-shadow: var(--tr-shadow-sm);
}
.tr-input, .tr-select {
  border: 1px solid var(--tr-line); border-radius: 7px; padding: 12px 16px;
  font-size: 1rem; font-family: var(--tr-font-sans); background: var(--tr-surface); color: var(--tr-text);
  transition: border-color .18s var(--tr-ease-out), box-shadow .18s var(--tr-ease-out);
}
.tr-input:focus, .tr-select:focus { outline: none; border-color: var(--tr-orange); box-shadow: 0 0 0 3px rgba(242, 102, 34, .16); }
.tr-search-form .tr-input { flex: 1 1 260px; border: 0; }
.tr-search-form .tr-select { border: 0; border-left: 1px solid var(--tr-line); border-radius: 0; }
.tr-search-form .tr-btn-primary { border-radius: 7px; }

/* ── Offer grid / cards ───────────────────────────────────────────────────── */
.tr-offer-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 20px 0; }
.tr-offer-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--tr-radius);
  border: 1px solid var(--tr-line); background: var(--tr-surface); text-decoration: none; color: inherit;
  transition: transform .18s var(--tr-ease-out), box-shadow .18s var(--tr-ease-out), border-color .18s var(--tr-ease-out);
}
.tr-offer-card:hover { transform: translateY(-2px); border-color: #c6cac4; box-shadow: var(--tr-shadow); }
.tr-offer-card-cat { font-size: .72rem; font-weight: 700; color: var(--tr-orange-deep); text-transform: uppercase; letter-spacing: .06em; }
.tr-offer-card-title { font-family: var(--tr-font-display); font-weight: 800; font-size: 1.05rem; color: var(--tr-text); letter-spacing: -.01em; }
.tr-offer-card-loc { font-size: .82rem; color: var(--tr-muted); }
.tr-offer-card-price { font-family: var(--tr-font-display); font-weight: 800; font-size: 1.15rem; color: var(--tr-text); letter-spacing: -.02em; margin-top: 6px; }

/* ── Status badges ────────────────────────────────────────────────────────── */
.tr-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; color: #fff; background: var(--badge-color, var(--tr-muted)); white-space: nowrap;
}
.tr-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--dot-color, var(--tr-muted)); }

/* ── Detail page ──────────────────────────────────────────────────────────── */
.tr-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin: 24px 0; }
@media (max-width: 800px) { .tr-detail-grid { grid-template-columns: 1fr; } }
.tr-detail-price-box { background: var(--tr-dark); color: #fff; border-radius: var(--tr-radius); padding: 22px; }
.tr-detail-price-box strong { display: block; font-family: var(--tr-font-display); font-size: 1.6rem; letter-spacing: -.03em; color: #fff; margin: 6px 0; }
.tr-facts dt { font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tr-muted); margin-top: 12px; }
.tr-facts dd { margin: 2px 0 0; color: var(--tr-text); }

/* ── Review list / form ───────────────────────────────────────────────────── */
.tr-review-list { display: grid; gap: 14px; margin: 16px 0; }
.tr-review-item { border: 1px solid var(--tr-line); border-radius: var(--tr-radius); padding: 16px 18px; background: var(--tr-surface); }
.tr-review-stars { color: var(--tr-orange); letter-spacing: 2px; }
.tr-rating-input { display: flex; gap: 8px; }
.tr-rating-input label { cursor: pointer; }

/* ── Forms (request / review) ─────────────────────────────────────────────── */
.tr-form fieldset { border: none; padding: 0; margin: 0 0 20px; }
.tr-form legend { font-family: var(--tr-font-display); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tr-muted); margin-bottom: 10px; }
.tr-form label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 14px; }
.tr-form input, .tr-form select, .tr-form textarea {
  display: block; width: 100%; margin-top: 6px; border: 1px solid var(--tr-line); border-radius: 7px;
  padding: 11px 14px; font-size: .95rem; font-family: var(--tr-font-sans); background: var(--tr-surface); color: var(--tr-text); box-sizing: border-box;
  transition: border-color .18s var(--tr-ease-out), box-shadow .18s var(--tr-ease-out);
}
.tr-form input:focus, .tr-form select:focus, .tr-form textarea:focus {
  outline: none; border-color: var(--tr-orange); box-shadow: 0 0 0 3px rgba(242, 102, 34, .16);
}
.tr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .tr-form-row { grid-template-columns: 1fr; } }
.tr-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.tr-checkbox { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; }
.tr-checkbox input { width: auto; margin: 3px 0 0; }
.tr-field-help { font-size: .78rem; color: var(--tr-muted); margin-top: -8px; }

/* ── Alerts / empty state ─────────────────────────────────────────────────── */
.tr-alert { border-radius: 10px; padding: 14px 18px; font-size: .88rem; }
.tr-alert-info { background: var(--tr-surface-soft); color: var(--tr-orange-soft); }
.tr-alert-error { background: #fff4ee; color: #7a3a1f; border: 1px solid #f2cab6; }
.tr-empty-state { text-align: center; padding: 32px 24px; }

/* ── Pre-footer CTA band ──────────────────────────────────────────────────── */
.tr-prefooter { background: var(--tr-dark-deep); color: #f6f5f1; padding: 44px 0; }
.tr-prefooter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tr-prefooter-eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tr-orange); }
.tr-prefooter h2 { color: #fff; }
.tr-prefooter-lead { color: #c8d3cf; }
.tr-prefooter-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tr-prefooter .tr-btn-ghost { border-color: rgba(255, 255, 255, .28); color: #f6f5f1; }
.tr-prefooter .tr-btn-ghost:hover { background: rgba(255, 255, 255, .1); }


/* layout-fix-2026-09-29 (screenshot review) */
.hero-section.tr-hero-section{padding-top:clamp(28px, 5vw, 56px)}