/**
 * Arsova Caption Generator - Styles
 */

/* ═══════════════════════════════════════════════════════════════
   FONTS
═══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   BASE STYLES
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════════════════════════ */
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(139, 125, 82, 0.55) !important;
  outline: none;
}

button {
  border: none;
  outline: none;
  font-family: 'Roboto', sans-serif;
}

select {
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
}

textarea {
  font-family: 'Roboto', sans-serif;
}

::placeholder {
  color: #b0ada5;
}

/* ═══════════════════════════════════════════════════════════════
   GRID LAYOUTS
═══════════════════════════════════════════════════════════════ */
.caption-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .caption-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .caption-grid {
    grid-template-columns: 1fr;
  }
}

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

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr !important;
  }
}