/* Styles for the "Deliverable Instructions to Gallery JSON Converter" page (ditgjsonc). Everything is inside .ditg so it does not affect the rest of the site. */
.ditg * { margin: 0; padding: 0; box-sizing: border-box; }
.ditg { font-family: "Montserrat", sans-serif; background: #201f1f; color: #f6f6f6; padding: 80px 100px; }
@media (max-width: 975px) { .ditg { padding: 48px 20px; } }
.ditg .button-group { display: flex; justify-content: center; gap: 1rem; margin: 2rem auto; }
.ditg .button-group .transform-btn { margin: 0; }
.ditg .container { max-width: 1400px; margin: 0 auto; background: #343333; border-radius: 1rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); overflow: hidden; }
.ditg .header { background: #343333; color: #f6f6f6; padding: 2rem; text-align: center; }
.ditg .header h1 { font-family: "Libre Franklin", sans-serif; font-size: 2.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.ditg .header p { font-size: 1.1rem; opacity: 0.85; }
.ditg .instructions { background: #2a2929; border: 1px solid #444; color: #f6f6f6; border-radius: 1rem; padding: 1.5rem; margin: 1rem 2rem; }
.ditg .instructions h3 { font-family: "Libre Franklin", sans-serif; font-size: 1.2rem; margin-bottom: 0.5rem; text-transform: uppercase; }
.ditg .instructions p { line-height: 1.5; font-size: 1rem; }
.ditg .main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 20rem; border-top: 2px solid #2a2929; }
.ditg .input-section, .ditg .output-section { padding: 2rem; display: flex; flex-direction: column; }
.ditg .input-section { border-right: 2px solid #2a2929; }
.ditg .section-title { font-family: "Libre Franklin", sans-serif; font-size: 1.2rem; font-weight: 500; color: #da9605; margin-bottom: 1rem; text-transform: uppercase; }
.ditg textarea { min-height: 15rem; width: 100%; flex: 1; background: #1b1b1b; border: 2px solid #444; border-radius: 0.75rem; color: #f6f6f6; padding: 1.25rem; font-family: 'Monaco', 'Menlo', monospace; font-size: 0.9rem; resize: vertical; line-height: 1.5; transition: border-color 0.3s ease; }
.ditg textarea:focus { border-color: #da9605; outline: none; box-shadow: 0 0 0 2px rgba(218, 150, 5, 0.4); }
.ditg .output-textarea { background: #2a2929; border-color: #da9605; }
.ditg .output-textarea:focus { border-color: #da9605; box-shadow: 0 0 0 2px rgba(218, 150, 5, 0.4); }
.ditg .copy-btn, .ditg .transform-btn { background: #da9605; color: #201f1f; font-family: "Montserrat", sans-serif; font-weight: 600; border: none; padding: 0.8rem 2rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; margin: 1rem 2rem; box-shadow: none; }
.ditg .copy-btn:hover, .ditg .transform-btn:hover { background: #f6f6f6; color: #201f1f; }
.ditg .status { padding: 1rem 2rem; margin: 0 2rem 1rem; border-radius: 0.5rem; font-weight: 500; text-align: center; display: none; }
.ditg .status.success { background: #0f5132; color: #d1fae5; border: 1px solid #198754; }
.ditg .status.error { background: #58151c; color: #fee2e2; border: 1px solid #dc3545; }
@media (max-width: 1024px) {
  .ditg .main-content { grid-template-columns: 1fr; }
  .ditg .input-section { border-right: none; border-bottom: 2px solid #2a2929; }
}
.ditg .loading { opacity: 0.7; pointer-events: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.ditg .loading .transform-btn { animation: pulse 1.5s ease-in-out infinite; }