/* ===============================
   Tribute Builder + Template CSS
   =============================== */

:root {
  --tg-bg: #f5f7fb;
  --tg-panel: #ffffff;
  --tg-border: #dce3ee;
  --tg-text: #111827;
  --tg-muted: #52607a;
  --tg-accent: #0f62fe;
  --tg-accent-soft: #e7f0ff;
  --tg-shadow: 0 10px 28px rgba(19, 38, 73, 0.08);
}

.tribute-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 560px);
  gap: 22px;
  align-items: start;
  background: var(--tg-bg);
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  padding: 18px;
}

.tribute-layout.preview-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.tribute-left,
.tribute-right {
  background: var(--tg-panel);
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  box-shadow: var(--tg-shadow);
}

.tribute-left {
  padding: 16px;
}

#tribute-builder,
#template-selection,
#obituary-form {
  background: #fff;
  color: var(--tg-text);
  padding: 14px;
  border: 1px solid var(--tg-border);
  border-radius: 10px;
  text-align: left;
}

#tribute-builder h2,
#template-selection h2 {
  margin: 0 0 12px;
  color: var(--tg-text);
  font-size: 22px;
  font-weight: 700;
  text-align: left;
}

.form-fields {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.form-label,
.form-row label {
  font-size: 13px;
  color: var(--tg-muted);
  font-weight: 600;
}

.form-fields input,
.form-fields select,
#obituary-form input,
#obituary-form select,
#obituary-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  background: #fff;
  color: var(--tg-text);
}

.form-fields input:focus,
.form-fields select:focus,
#obituary-form input:focus,
#obituary-form select:focus,
#obituary-form textarea:focus {
  outline: none;
  border-color: var(--tg-accent);
  box-shadow: 0 0 0 3px var(--tg-accent-soft);
}

.form-fields button,
#template-selection button,
#obituary-form .btn-submit,
#downloadPreview {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 700;
  cursor: pointer;
}

#chooseTemplateBtn,
.preview-btn,
#obituary-form .btn-submit,
#downloadPreview {
  background: var(--tg-accent);
  color: #fff;
}

#chooseTemplateBtn:hover,
.preview-btn:hover,
#obituary-form .btn-submit:hover,
#downloadPreview:hover {
  filter: brightness(0.95);
}

.secondary-btn {
  background: #eef2f8;
  color: #1f2a44;
  border: 1px solid #ccd6e7 !important;
}

.secondary-btn:hover {
  background: #e3ebf7;
}

button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

#template-selection {
  margin-top: 14px;
}

.template-grid {
  width: 100%;
  margin: 8px 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.template-card {
  background: #fff;
  border: 1px solid var(--tg-border);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tg-text);
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.template-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 8px;
  border: 1px solid var(--tg-border);
}

.template-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(12, 35, 74, 0.12);
}

.template-card.active {
  border-color: var(--tg-accent);
  box-shadow: 0 0 0 3px var(--tg-accent-soft);
}

.tribute-right {
  padding: 14px;
  position: relative;
}

#preview-loading {
  position: absolute;
  inset: 16px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--tg-border);
  background: rgba(255, 255, 255, 0.86);
  color: #0b254f;
  font-size: 14px;
  font-weight: 700;
  backdrop-filter: blur(1px);
}

#canvas {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--tg-border);
  background: #f8fafc;
}

.preview-controls {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tg-border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.preview-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tg-muted);
  font-size: 13px;
}

#downloadFormat {
  min-width: 100px;
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

@media (max-width: 980px) {
  .tribute-layout {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 14px;
  }

  .tribute-left,
  .tribute-right {
    padding: 12px;
  }

  #tribute-builder h2,
  #template-selection h2 {
    font-size: 20px;
  }

  .template-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
  }
}