/* BuildCraft Tools - theme on top of Bootstrap 5.3 */
:root {
  --bc-brand: #f26a1b;
  --bc-charcoal: #1f2328;
  --bc-charcoal-2: #2b3138;
}
[data-bs-theme="light"] { --bc-surface-soft: #f7f5f2; }
[data-bs-theme="dark"]  { --bc-surface-soft: #22262b; }

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--bc-brand); }
a:hover { filter: brightness(.9); }
.text-brand { color: var(--bc-brand) !important; }

.btn-brand {
  --bs-btn-color: #fff; --bs-btn-bg: var(--bc-brand); --bs-btn-border-color: var(--bc-brand);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d95a10; --bs-btn-hover-border-color: #d95a10;
  --bs-btn-focus-shadow-rgb: 242, 106, 27;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #c4510d; --bs-btn-active-border-color: #c4510d;
  font-weight: 600;
}
.form-control:focus, .form-select:focus { border-color: var(--bc-brand); box-shadow: 0 0 0 .2rem rgba(242, 106, 27, .2); }
.accordion-button:not(.collapsed) { color: var(--bc-brand); background-color: rgba(242, 106, 27, .08); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(242, 106, 27, .2); }

/* Navbar */
.bc-nav { background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.bc-nav .navbar-brand { color: var(--bs-body-color); }
.bc-nav .nav-link { color: var(--bs-body-color); font-weight: 500; }
.bc-nav .nav-link:hover { color: var(--bc-brand); }
.bc-search { min-width: 220px; }
.bc-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .6rem;
  max-height: 340px; overflow: auto; min-width: 280px;
}
.bc-search-results a { display: flex; gap: .75rem; padding: .6rem .85rem; text-decoration: none; color: var(--bs-body-color); align-items: center; }
.bc-search-results a:hover, .bc-search-results a.active { background: var(--bc-surface-soft); }
.bc-search-results i { color: var(--bc-brand); font-size: 1.15rem; }
.bc-search-results small { display: block; color: var(--bs-secondary-color); line-height: 1.25; }
.bc-search-results .empty { padding: .8rem 1rem; color: var(--bs-secondary-color); }

/* Hero */
.bc-hero {
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(135deg, var(--bc-charcoal) 0%, var(--bc-charcoal-2) 100%);
}
.bc-hero .badge { font-weight: 600; }
.bc-search-hero { max-width: 560px; }
.bc-search-hero .bc-search-results { color: var(--bs-body-color); }
.bc-hero-card { background: var(--bs-body-bg); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.mini-stat { background: var(--bc-surface-soft); border-radius: .6rem; padding: .7rem .3rem; }
.mini-stat b { display: block; font-size: 1.5rem; color: var(--bc-brand); line-height: 1.1; }
.mini-stat span { font-size: .75rem; color: var(--bs-secondary-color); }

/* Cards */
.tool-card, .cat-card { border: 1px solid var(--bs-border-color); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; color: var(--bs-body-color); }
.tool-card:hover, a.cat-card:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .12); border-color: var(--bc-brand); }
.tool-icon {
  width: 44px; height: 44px; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(242, 106, 27, .12); color: var(--bc-brand); font-size: 1.35rem;
}
.tool-icon-lg { width: 56px; height: 56px; font-size: 1.7rem; flex-shrink: 0; }
.tool-filter { max-width: 320px; }
.page-narrow { max-width: 820px; }

/* Tool page */
.unit-select { max-width: 8.5rem; flex: 0 0 auto; }
.result-panel { border-top: 4px solid var(--bc-brand); top: 5rem; }
.stat {
  background: var(--bc-surface-soft); border-radius: .7rem; padding: .8rem .9rem; height: 100%;
  border: 1px solid var(--bs-border-color);
}
.stat .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }
.stat .value { font-size: 1.55rem; font-weight: 700; line-height: 1.15; color: var(--bc-brand); word-break: break-word; }
.stat .unit { font-size: .78rem; color: var(--bs-secondary-color); }
.result-table td:last-child { text-align: end; font-weight: 600; }
.result-table td { vertical-align: middle; }
.fade-in { animation: bcFade .25s ease; }
@keyframes bcFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Footer */
.bc-footer { background: var(--bc-surface-soft); border-top: 1px solid var(--bs-border-color); }
.bc-footer a { text-decoration: none; color: var(--bs-body-color); }
.bc-footer a:hover { color: var(--bc-brand); }
.bc-footer li { margin-bottom: .35rem; }

.print-only { display: none; }

@media (max-width: 991.98px) {
  .bc-search { min-width: 0; width: 100%; margin: .5rem 0; }
  .navbar .d-flex { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Print: show only the result (inputs are listed in #printInputs) */
@media print {
  .bc-nav, .bc-footer, nav[aria-label="breadcrumb"], .d-print-none, #toolForm { display: none !important; }
  .print-only { display: block !important; }
  .col-lg-5 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  .result-panel { border: 1px solid #999; position: static !important; }
  body { background: #fff !important; color: #000 !important; }
  .stat { border: 1px solid #bbb; background: #fff !important; }
  .stat .value { color: #000 !important; }
}

/* Cost breakdown table */
.breakdown { font-size: .82rem; }
.breakdown th.num, .breakdown td.num { text-align: end; white-space: nowrap; }
.breakdown th.group { background: var(--bc-surface-soft); color: var(--bc-brand); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.bc-ad img { max-height: 160px; }
.lang-switch { white-space: nowrap; font-weight: 600; }

/* Urdu / right-to-left */
body.lang-ur, body.lang-ur .form-control, body.lang-ur .form-select, body.lang-ur .btn {
  font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Segoe UI", Tahoma, serif;
}
body.lang-ur { line-height: 2.1; }
body.lang-ur h1, body.lang-ur h2, body.lang-ur h3, body.lang-ur h4, body.lang-ur h5, body.lang-ur h6, body.lang-ur .display-5 { line-height: 1.9; }
body.lang-ur .stat .label { text-transform: none; letter-spacing: 0; font-size: .85rem; }
body.lang-ur .stat .value { font-family: "Segoe UI", Tahoma, Arial, sans-serif; line-height: 1.3; }
body.lang-ur .breakdown th.group { text-transform: none; letter-spacing: 0; }
body.lang-ur .navbar .nav-link { line-height: 1.8; }
body.lang-ur .form-label { line-height: 1.8; }
body.lang-ur input[type=number] { direction: ltr; text-align: end; font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
[dir="rtl"] .bi-arrow-left-circle, [dir="rtl"] .bi-chevron-right { transform: scaleX(-1); }
[dir="rtl"] .bc-search-results { left: auto; right: 0; }
[dir="rtl"] .navbar-nav { padding-right: 0; }

/* Interior tools */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: .4rem; }
.swatch { height: 38px; border-radius: .4rem; border: 2px solid rgba(0,0,0,.2); cursor: pointer; padding: 0; }
.swatch:hover, .swatch:focus-visible { outline: 3px solid var(--bc-brand); outline-offset: 1px; }
#paintSvg { width: 100%; height: 100%; }
.gal-img { aspect-ratio: 4 / 3; object-fit: cover; }
.gal-item:hover { box-shadow: 0 .4rem 1rem rgba(0,0,0,.12); }
.quote-paper { background: #fff; color: #111; }
@media print {
  #quoApp .col-lg-5, #expApp .col-lg-4 { display: none !important; }
  #quoApp .col-lg-7 { width: 100% !important; flex: 0 0 100%; }
  .quote-paper { border: 0; }
}
.blog-body { font-size: 1.05rem; line-height: 1.8; }
.lang-ur .blog-body { line-height: 2.2; }

/* Tools mega menu and shop pages */
.bc-mega { max-height: 78vh; overflow-y: auto; }
@media (min-width: 1200px) { .bc-mega { column-gap: 0; } }
.bc-mega .dropdown-item { white-space: normal; border-radius: .25rem; padding-top: .15rem; padding-bottom: .15rem; }
.shop-card:hover, .work-item:hover { box-shadow: 0 .4rem 1rem rgba(0,0,0,.12); }
.work-item .gal-img, .shop-card .gal-img { width: 100%; }

/* ---- SARZAMEEN bar + Decoration & Contractors dashboard ---- */
.bc-plbar { background: #0b3d1e; color: #d8eadf; font-size: .82rem; padding: .3rem 0; }
.bc-plbar a { color: #d8eadf; text-decoration: none; }
.bc-plbar a:hover { color: #fff; text-decoration: underline; }
.bc-subnav { background: var(--bc-surface-soft); border-bottom: 1px solid var(--bs-border-color); }
.bc-subnav a { display: inline-block; padding: .65rem .9rem; color: var(--bs-body-color); text-decoration: none; font-weight: 600; font-size: .92rem; border-bottom: 3px solid transparent; }
.bc-subnav a:hover { color: var(--bc-brand); }
.bc-subnav a.active { color: var(--bc-brand); border-bottom-color: var(--bc-brand); }
.dash-hero { background: linear-gradient(135deg, #0b3d1e 0%, #0a6b2e 60%, #138a43 100%); color: #fff; }
.dash-hero h1 { color: #fff; }
.dash-hero .lead { color: #d8eadf; }
.dash-stat { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: .9rem 1rem; height: 100%; }
.dash-stat b { display: block; font-size: 1.7rem; line-height: 1.1; }
.dash-stat span { font-size: .8rem; color: #d8eadf; text-transform: uppercase; letter-spacing: .04em; }
.dash-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 1px solid var(--bs-border-color); border-radius: 999px; text-decoration: none; color: var(--bs-body-color); font-size: .9rem; background: var(--bs-body-bg); }
.dash-chip:hover { border-color: var(--bc-brand); color: var(--bc-brand); }
.dash-chip small { color: var(--bs-secondary-color); }
.dash-mosaic { column-count: 2; column-gap: .75rem; }
@media (min-width: 768px) { .dash-mosaic { column-count: 3; } }
@media (min-width: 1200px) { .dash-mosaic { column-count: 4; } }
.dash-mosaic .work-item { break-inside: avoid; display: block; margin-bottom: .75rem; position: relative; border-radius: 12px; overflow: hidden; }
.dash-mosaic .work-item img { width: 100%; height: auto; display: block; }
.dash-mosaic .work-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .7rem .55rem; color: #fff; font-size: .8rem; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.dash-mosaic .work-cap b { display: block; font-size: .88rem; }
.bc-nav .nav-link { white-space: nowrap; }