/* ===== حاسبة تكاليف المباني — تنسيقات الصفحة (تعمل فوق empire-ui.css) ===== */

/* شريط النتائج الإجمالية الثابت */
.bd-totals { position: sticky; top: var(--topbar-h); z-index: 50; padding: 10px 0 6px; }
.bd-totals__in { padding: 14px 18px 16px; background: var(--bg-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bd-totals__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.bd-totals__head img { width: 32px; height: 32px; object-fit: contain; }
.bd-totals__head h2 { font-size: 1.05rem; color: var(--gold-2); margin: 0; flex: 1; }
.resources-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.resource-card { padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.resource-card .resource-header { position: relative; display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: .78rem; font-weight: 700; }
.resource-card .resource-header .resource-icon { width: 28px; height: 28px; object-fit: contain; margin: 0; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.resource-card .resource-value { font-size: 1.5rem; }

/* بطاقات المباني */
.buildings-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.building-card { position: relative; border-radius: var(--radius-l); border: 1px solid var(--line); background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); box-shadow: var(--shadow-1); overflow: hidden; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; animation: bdIn .6s var(--ease) both; }
@keyframes bdIn { from { opacity: 0; transform: translateY(18px); } }
.building-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-2), var(--glow-gold); }
.building-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-3), var(--gold-2), var(--ember)); opacity: 0; transition: opacity .3s; }
.building-card:hover::before { opacity: 1; }
.building-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(var(--gold-rgb), .08), transparent); font-family: var(--font-display); font-weight: 700; color: var(--gold-2); font-size: 1.02rem; }
.building-icon { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: rgba(0,0,0,.3); padding: 4px; border: 1px solid var(--line); filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); transition: transform .4s var(--ease-bounce); }
.building-card:hover .building-icon { transform: scale(1.1) rotate(-4deg); }
.building-content { padding: 14px 16px 16px; }
.building-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.building-input label { display: block; font-size: .7rem; letter-spacing: .04em; color: var(--text-3); margin-bottom: 5px; font-weight: 700; }
.building-input select, .building-input input { min-height: 42px !important; padding: 8px 10px !important; font-size: .95rem !important; }
.building-input select { padding-inline-end: 28px !important; background-size: 12px !important; background-position: right 8px center !important; }
html[dir="rtl"] .building-input select { background-position: left 8px center !important; }
.resources-list { display: grid; gap: 4px; }
.resource-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.18); font-size: .84rem; transition: background .2s; }
.resource-item:hover { background: rgba(var(--gold-rgb), .08); }
.resource-name { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.resource-name .resource-icon { width: 22px; height: 22px; object-fit: contain; }
.resource-item .resource-value { font-family: var(--font-num); font-weight: 700; color: var(--gold-2); font-size: 1rem; }

/* حاسبة قشور التنين */
.calculator-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.calculator-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calculator-results .result-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.calculator-results .result-item img { width: 38px; height: 38px; object-fit: contain; margin: 0; }
.calculator-results .result-item .resource-value { font-family: var(--font-num); font-size: 1.8rem; font-weight: 700; color: var(--gold-2); position: relative; }

/* نافذة الفلتر */
.filter-modal { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; overflow-y: auto; padding: 30px 16px; }
.filter-modal.show { opacity: 1; }
.filter-modal-content { max-width: 820px; margin: 0 auto; transform: translateY(20px) scale(.98); transition: transform .35s var(--ease); }
.filter-modal.show .filter-modal-content { transform: none; }
.filter-modal-header h2 { font-size: 1.15rem; }
.filter-modal-body { padding: 18px 22px; }
.filter-search { position: relative; margin-bottom: 16px; }
.filter-search input { padding-inline-end: 44px !important; }
.filter-search i { position: absolute; top: 50%; inset-inline-end: 16px; transform: translateY(-50%); color: var(--gold); }
.selection-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.selection-header h3 { font-size: .95rem; color: var(--text-2); margin: 0; }
.selection-actions { display: flex; gap: 8px; }
.buildings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 4px; }
.building-option { display: flex; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(0,0,0,.2); cursor: pointer; transition: all .2s; }
.building-option:hover { border-color: var(--line-strong); background: rgba(var(--gold-rgb), .06); }
.building-option.selected { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); }
.building-option-label { display: flex; align-items: center; gap: 10px; width: 100%; font-size: .85rem; color: var(--text); cursor: pointer; }
.building-option-icon { width: 30px; height: 30px; object-fit: contain; }
.selected-count { margin-top: 14px; }
.filter-modal-footer { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 22px 20px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .resources-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .resource-card { padding: 8px 4px; }
  .resource-card .resource-header span { display: none; }
  .resource-card .resource-value { font-size: 1.1rem; }
  .calculator-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bd-totals { position: static; }
  .building-inputs { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .buildings-container { grid-template-columns: 1fr; }
  .calculator-results { grid-template-columns: 1fr; }
  .filter-modal-footer .eu-btn { flex: 1; }
}