/* ============================================================
   BROBOTCLUB 3D CATALOG – FINAL STYLE
   ============================================================ */

/* ---------- Base / Reset ---------- */
* { box-sizing: border-box; }

:root{
  --bg: #F7FFA1;
  --banner-bg: #FFD84D;
  --banner-text: #D63D0D;

  --card-bg: #ffffff;
  --text: #111;
  --muted: #666;

  --shadow-1: 0 2px 4px rgba(0,0,0,0.10);
  --shadow-2: 0 4px 10px rgba(0,0,0,0.18);
  --shadow-3: 0 6px 12px rgba(0,0,0,0.25);

  --radius-1: 10px;
  --radius-2: 12px;

  /* Buttons */
  --btn-back: #15D495;
  --btn-back-hover: #10b684;
  --btn-download: #1f4bd8;
  --btn-download-hover: #173aa8;
}

body{
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: var(--bg);
  color: var(--text);
}

h1, h2{ margin: 0 0 12px; }

/* ============================================================
   Banner
   ============================================================ */
.banner{
  background: var(--banner-bg);
  color: var(--banner-text);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  padding: 14px 10px;
  border-radius: 14px;
}

/* ============================================================
   Catalog grid (index.html)
   ============================================================ */
.grid{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
}

/* Самият <a class="model-card"> е карта */
.model-card{
  width: 220px;
  height: 320px;
  padding: 12px 12px 16px;
  background: var(--card-bg);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: inherit;
  display: flex;
}

/* вътрешна подредба: снимка горе, текстовете долу подравнени */
.model-card-inner{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* миниатюра зона */
.model-thumb,
.model-card img{
  width: 100%;
  height: 210px;
  object-fit: contain;
  border-radius: 6px;
}

/* placeholder, ако липсва картинка */
.placeholder{
  width: 100%;
  height: 210px;
  border-radius: 6px;
  border: 1px dashed #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 14px;
  background-color: #fff;
}

/* Текстов блок – винаги долу */
.model-card-text{
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding-top: 10px;
}

/* заглавие (кликаемо, синьо като линк) */
.model-title{
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  color: #1a0dab;
  line-height: 1.15;
}

.model-card:hover .model-title{
  text-decoration: underline;
}

/* ID “badge” в картата */
.model-card .model-id{
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.18);
  font-weight: 800;
  color: #1b1b1b;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ============================================================
   View page layout (view_model.html)
   ============================================================ */
.model-layout{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  margin-top: 10px;
}

.model-info-block{
  width: 400px;
  min-height: 500px;
  background: rgba(255,255,255,0.90);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  padding: 20px;
  text-align: left;
  line-height: 1.45;
  font-size: 16px;
}

.model-info-block h2{
  text-align: center;
  margin-bottom: 10px;
}

.viewer-box{
  width: 800px;
  height: 600px;
  background: #fff;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  padding: 10px;
}

/* ============================================================
   Top actions (view_model.html): Back + ID badge + Download
   ============================================================ */
.top-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px auto 14px;
  padding: 6px 10px;
  flex-wrap: wrap;
}

.top-actions .btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.top-actions .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

.top-actions .btn:active{
  transform: translateY(0px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}

.top-actions .btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.10);
}

/* Back button */
.top-actions .btn-ghost{
  background: var(--btn-back);
  color: #0b3a2e;
  border-color: rgba(0,0,0,0.20);
}

.top-actions .btn-ghost:hover{
  background: var(--btn-back-hover);
  border-color: rgba(0,0,0,0.35);
}

/* Download button */
.top-actions .btn-primary{
  background: var(--btn-download);
  color: #fff;
  border-color: rgba(0,0,0,0.10);
}

.top-actions .btn-primary:hover{
  background: var(--btn-download-hover);
}

/* ID badge in the middle (view page) */
.top-actions .model-id{
  min-width: 160px;
}

/* ============================================================
   Small helpers
   ============================================================ */
#status{
  text-align: center;
  margin-bottom: 10px;
  color: #1b1b1b;
}

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 1400px){
  .viewer-box{ width: 680px; }
  .model-info-block{ width: 360px; }
}

@media (max-width: 1150px){
  .model-layout{
    flex-direction: column;
    align-items: center;
  }
  .model-info-block{
    width: min(920px, 92vw);
    min-height: auto;
  }
  .viewer-box{
    width: min(920px, 92vw);
    height: 520px;
  }
}

@media (max-width: 520px){
  body{ margin: 12px; }
  .banner{ font-size: 30px; }
  .model-card{ width: 92vw; height: 340px; }
}