/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 20px;
  position: relative;
  min-height: 100vh;
  /* Festive holiday background with snowflakes */
  background: 
    /* Snowflake pattern 1 */
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    /* Snowflake pattern 2 */
    radial-gradient(circle at 45% 15%, rgba(255, 255, 255, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 45% 15%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    /* Snowflake pattern 3 */
    radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    /* Snowflake pattern 4 */
    radial-gradient(circle at 25% 65%, rgba(255, 255, 255, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 25% 65%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    /* Snowflake pattern 5 */
    radial-gradient(circle at 65% 75%, rgba(255, 255, 255, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 65% 75%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    /* Snowflake pattern 6 */
    radial-gradient(circle at 85% 55%, rgba(255, 255, 255, 0.5) 3px, transparent 3px),
    radial-gradient(circle at 85% 55%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    /* More snowflakes */
    radial-gradient(circle at 35% 45%, rgba(255, 255, 255, 0.45) 2px, transparent 2px),
    radial-gradient(circle at 55% 25%, rgba(255, 255, 255, 0.45) 2px, transparent 2px),
    radial-gradient(circle at 95% 70%, rgba(255, 255, 255, 0.45) 2px, transparent 2px),
    /* Darker gradient background with more pronounced blues */
    linear-gradient(135deg, #c8e4f0 0%, #d0e8f8 25%, #e0f0ff 50%, #f0e8f0 75%, #f8f0f8 100%);
  background-size: 
    300px 300px,
    300px 300px,
    250px 250px,
    250px 250px,
    280px 280px,
    280px 280px,
    270px 270px,
    270px 270px,
    260px 260px,
    260px 260px,
    290px 290px,
    290px 290px,
    220px 220px,
    240px 240px,
    230px 230px,
    100% 100%;
  background-position:
    0 0,
    0 0,
    100px 50px,
    100px 50px,
    200px 150px,
    200px 150px,
    50px 200px,
    50px 200px,
    300px 300px,
    300px 300px,
    400px 100px,
    400px 100px,
    150px 300px,
    350px 150px,
    500px 400px,
    0 0;
  background-attachment: fixed;
  animation: snowdrift 30s linear infinite;
}

@keyframes snowdrift {
  0% {
    background-position:
      0 0,
      0 0,
      100px 50px,
      100px 50px,
      200px 150px,
      200px 150px,
      50px 200px,
      50px 200px,
      300px 300px,
      300px 300px,
      400px 100px,
      400px 100px,
      150px 300px,
      350px 150px,
      500px 400px,
      0 0;
  }
  100% {
    background-position:
      0 400px,
      0 400px,
      100px 450px,
      100px 450px,
      200px 550px,
      200px 550px,
      50px 600px,
      50px 600px,
      300px 700px,
      300px 700px,
      400px 500px,
      400px 500px,
      150px 700px,
      350px 550px,
      500px 800px,
      0 0;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.flash-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flash-notice {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.flash-alert {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.flash-icon {
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}

.flash-text {
  flex: 1;
}

h1 {
  color: #2c3e50;
  margin-top: 0;
}

h2 {
  color: #34495e;
  margin-top: 30px;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 10px;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #555;
}

.field input[type="text"],
.field input[type="url"],
.field input[type="number"],
.field input[type="datetime-local"],
.field input[type="date"],
.field textarea,
.field select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.field textarea {
  resize: vertical;
  min-height: 100px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #95a5a6;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-right: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  line-height: 1.42857143;
  vertical-align: middle;
}

.btn:hover {
  background-color: #7f8c8d;
}

.btn-primary {
  background-color: #3498db;
}

.btn-primary:hover {
  background-color: #2980b9;
}

.btn-danger {
  background-color: #e74c3c;
}

.btn-danger:hover {
  background-color: #c0392b;
}

.btn-small {
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.42857143;
  box-sizing: border-box;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-small.btn-danger {
  min-width: 28px;
  text-align: center;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.42857143;
  height: 28px;
}

.btn:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

.offers-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.offers-table th,
.offers-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ecf0f1;
}

.offers-table th {
  background-color: #ecf0f1;
  font-weight: 600;
}

.offers-table tr:hover {
  background-color: #f8f9fa;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.status.active {
  background-color: #2ecc71;
  color: white;
}

.status.inactive {
  background-color: #95a5a6;
  color: white;
}

.image-gallery {
  margin-top: 20px;
}

.images {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
}

.gallery-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.errors {
  background-color: #fee;
  border: 1px solid #fcc;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
}

.errors h3 {
  color: #c0392b;
  margin-top: 0;
}

.errors ul {
  margin: 10px 0;
  padding-left: 20px;
}

.generated-content {
  margin-top: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.content-display {
  margin-top: 15px;
}

#generated-text {
  width: 100%;
  min-height: 200px;
  padding: 15px;
  border: 2px solid #3498db;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 15px;
}

.help-text {
  font-size: 14px;
  color: #7f8c8d;
  margin-top: 5px;
}

.error-text {
  color: #e74c3c;
  font-weight: 600;
}

.actions {
  margin-top: 20px;
}

.organization-info,
.offers-section,
.content-generation-section {
  margin-bottom: 40px;
}

/* Admin Styles */
.admin-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #ecf0f1;
}

.admin-header h1 {
  margin: 0;
}

.admin-nav {
  display: flex;
  gap: 10px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.stat-card h2 {
  font-size: 48px;
  margin: 0;
  color: #3498db;
}

.stat-card p {
  margin: 10px 0 0 0;
  color: #7f8c8d;
}

.recent-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 30px;
}

.recent-box {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.recent-box h2 {
  margin-top: 0;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 10px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.admin-table th,
.admin-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ecf0f1;
}

.admin-table th {
  background-color: #ecf0f1;
  font-weight: 600;
}

.admin-table tr:hover:not(.org-ready-to-send) {
  background-color: #f8f9fa;
}

.admin-table tr.org-ready-to-send {
  background-color: #e8f9f0;
}

.admin-table tr.org-ready-to-send:hover {
  background-color: #e1f5ea;
}

.admin-table code {
  background-color: #f1f1f1;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}

.admin-table td strong[title] {
  cursor: help;
  display: inline-block;
  max-width: 150px;
}

.admin-table td span[title] {
  cursor: help;
  display: inline-block;
  max-width: 200px;
}

.org-details {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.org-details h2 {
  margin-top: 0;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 10px;
}

.org-details p {
  margin: 10px 0;
}

/* Restaurant-facing page styles */
.restaurant-page {
  max-width: 900px;
  position: relative;
  z-index: 1;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, #4a90c2 0%, #5ba3d4 50%, #6bb6e6 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(74, 144, 194, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.welcome-section::before {
  content: '❄️';
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 24px;
  opacity: 0.3;
  animation: float 3s ease-in-out infinite;
}

.welcome-section::after {
  content: '❄️';
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 20px;
  opacity: 0.3;
  animation: float 3s ease-in-out infinite 1.5s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.welcome-section h1 {
  color: white;
  margin-bottom: 8px;
  font-size: 2.5em;
}

.welcome-section h2.content-guide-subtitle {
  color: white;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.2em;
  font-weight: 400;
  opacity: 0.9;
  position: relative;
  top: -10px;
}

.intro-text {
  font-size: 1.1em;
  line-height: 1.6;
  opacity: 0.95;
}

.video-guide-link {
  margin-top: 25px;
  text-align: center;
}

.video-link-btn {
  display: inline-block;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.95);
  color: #4a90c2;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1.05em;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.video-link-btn:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  color: #3a7ba2;
}

.video-link-btn:active {
  transform: translateY(0);
}

.offers-section {
  margin-bottom: 30px;
}

.offers-social-layout {
  display: grid;
  /* Desktop: 2/1 ratio between offers and social image (clear midpoint between previous options) */
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.offers-grid {
  grid-column: 1 / 2;
}

.social-images-panel {
  grid-column: 2 / 3;
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.social-images-header h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.social-images-copy {
  margin: 0 0 15px 0;
  color: #7f8c8d;
  font-size: 0.95em;
}

.btn-social-image {
  width: 100%;
  text-align: center;
  margin-top: 0;
}

.social-image-preview {
  margin-top: 15px;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  border: none;
  background: transparent;
  min-height: 220px;
  max-width: 100%;
}

.social-image-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-images-more {
  margin-top: 12px;
  text-align: center;
}

.social-images-more-link {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-block;
  padding: 6px 10px;
  font-size: 12px;
  color: #2c3e50;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.social-images-more-link:hover {
  background: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.social-images-additional {
  margin-top: 12px;
}

.social-images-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.social-image-gallery-item {
  background: white;
  border-radius: 10px;
  border: 2px solid #e9ecef;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.social-image-gallery-preview {
  position: relative;
  background: #f8f9ff;
  padding-top: 100%; /* 1:1 square */
  overflow: hidden;
}

.social-image-gallery-preview img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.social-image-gallery-actions {
  padding: 10px 15px 15px 15px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .offers-social-layout {
    grid-template-columns: 1fr;
  }

  .offers-grid {
    grid-column: 1 / -1;
  }

  .social-images-panel {
    grid-column: 1 / -1;
  }
}

.offers-list,
.offers-list-compact {
  display: grid;
  gap: 12px;
  margin-top: 15px;
}

.offers-heading {
  margin: 0 0 10px 0;
}

.offers-list-compact {
  gap: 10px;
}

.offer-card,
.offer-card-compact {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.offer-card-compact {
  padding: 12px 15px;
}

.offer-card:hover,
.offer-card-compact:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-color: #667eea;
}

.offer-card.active,
.offer-card-compact.live {
  border-color: #2ecc71;
  background: #f8fff9;
}

.offer-header,
.offer-compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.offer-compact-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.offer-compact-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.offer-compact-title strong {
  color: #2c3e50;
  font-size: 1em;
  flex: 1;
}

.offer-compact-dates {
  font-size: 0.9em;
  color: #7f8c8d;
}

.offer-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.3em;
}

.status-badge,
.status-badge-compact {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge-compact {
  padding: 3px 8px;
  font-size: 0.7em;
}

.status-badge.active,
.status-badge-compact.live {
  background-color: #2ecc71;
  color: white;
}

.status-badge.inactive,
.status-badge-compact.upcoming {
  background-color: #3498db;
  color: white;
}

.offer-details p {
  margin: 8px 0;
  color: #555;
}

.offer-details .notes {
  font-style: italic;
  color: #7f8c8d;
}

.no-offers {
  text-align: center;
  padding: 40px;
  color: #7f8c8d;
  font-size: 1.1em;
}

.offer-help-text {
  margin-top: 16px;
  padding: 12px 16px;
  background-color: #e8f4f8;
  border-left: 4px solid #3498db;
  border-radius: 4px;
  color: #2c3e50;
  font-size: 14px;
  line-height: 1.5;
}

.support-section {
  margin-top: 20px;
  padding-top: 0;
  text-align: center;
  color: #7f8c8d;
  font-size: 14px;
}

.support-section p {
  margin: 0;
}

.support-section a {
  color: #3498db;
  text-decoration: none;
}

.support-section a:hover {
  text-decoration: underline;
}

.content-generation-section {
  background: #f8f9fa;
  padding: 15px 30px 30px 30px;
  border-radius: 12px;
  margin-top: 40px;
}

.content-generation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.content-generation-section h2 {
  margin: 0;
}

.form-step {
  margin-bottom: 30px;
}

.form-step h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.2em;
}

.offer-selection,
.day-selection {
  display: grid;
  gap: 12px;
}

.date-selection {
  margin-top: 10px;
}

.date-dropdown {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.date-dropdown:hover {
  border-color: #667eea;
}

.date-dropdown:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.offer-radio,
.day-radio {
  display: block;
  cursor: pointer;
}

.offer-radio input[type="radio"],
.day-radio input[type="radio"] {
  display: none;
}

.offer-radio-content,
.day-radio-content {
  padding: 15px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.2s ease;
  text-align: center;
  font-weight: 500;
  color: #2c3e50;
}

.offer-radio input[type="radio"]:checked + .offer-radio-content,
.day-radio input[type="radio"]:checked + .day-radio-content {
  border-color: #667eea;
  background: #f0f4ff;
}

.offer-radio-content strong {
  display: block;
  color: #2c3e50;
  margin-bottom: 5px;
}

.offer-dates {
  color: #7f8c8d;
  font-size: 0.9em;
}

.custom-date-field {
  margin-top: 20px;
  padding: 15px;
  background: white;
  border: 2px solid #667eea;
  border-radius: 8px;
  box-sizing: border-box;
  max-width: 100%;
}

.custom-date-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
}

.custom-date-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  background-color: white;
  cursor: pointer;
}

.custom-date-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Flatpickr styling */
.flatpickr-calendar {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 99999 !important;
  position: absolute !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #667eea;
  border-color: #667eea;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #5568d3;
  border-color: #5568d3;
}

.flatpickr-day.today {
  border-color: #667eea;
}

.flatpickr-day.today:hover {
  background: #667eea;
  color: white;
}

.flatpickr-months .flatpickr-month {
  color: #2c3e50;
}

.flatpickr-weekdays {
  background: #f8f9fa;
}

.flatpickr-weekday {
  color: #7f8c8d;
  font-weight: 600;
}

.offer-info {
  margin-top: 20px;
  padding: 15px;
  background: #e8f4f8;
  border-left: 4px solid #3498db;
  border-radius: 4px;
}

.info-text {
  margin: 0;
  color: #2c3e50;
}

.style-selection {
  margin-top: 10px;
}

.style-dropdown {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.style-dropdown:hover {
  border-color: #667eea;
}

.style-dropdown:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.emoji-toggle {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px 20px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 180px;
  justify-content: center;
}

.toggle-label:hover {
  border-color: #667eea;
  background: #f8f9fa;
}

.toggle-label input[type="radio"] {
  margin-right: 10px;
  cursor: pointer;
}

.toggle-label input[type="radio"]:checked + .toggle-option {
  font-weight: 600;
  color: #667eea;
}

.toggle-label:has(input[type="radio"]:checked) {
  border-color: #667eea;
  background: #f0f4ff;
}

.toggle-option {
  font-size: 16px;
  color: #2c3e50;
}

.special-instructions-field {
  margin-top: 10px;
}

.special-instructions-textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  background: white;
  resize: vertical;
  transition: border-color 0.2s ease;
  line-height: 1.5;
}

.special-instructions-textarea:hover {
  border-color: #667eea;
}

.special-instructions-textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.special-instructions-field .help-text {
  margin-top: 8px;
  font-size: 14px;
  color: #6c757d;
  font-style: italic;
}

.platform-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.platform-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  pointer-events: auto;
  user-select: none;
}

.platform-button:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.platform-button input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.platform-button.selected {
  border-color: #667eea;
  background: #f0f4ff;
}

.platform-button:active {
  transform: translateY(0);
}

.platform-icon {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.platform-name {
  font-weight: 600;
  color: #2c3e50;
}

.occasion-select {
  margin-top: 10px;
}

.occasion-dropdown {
  width: 100%;
  padding: 12px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 16px;
  background: white;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
}

.btn-large {
  padding: 15px 40px;
  font-size: 1.1em;
}

.loading-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 15px;
  font-size: 0.9em;
  color: #2c3e50;
  vertical-align: middle;
}

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d0d7ff;
  border-top-color: #667eea;
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.generated-content-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid #e9ecef;
}

.generated-content-section h3 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.content-display {
  background: white;
  padding: 25px;
  border-radius: 8px;
  border: 2px solid #667eea;
}

#generated-text {
  width: 100%;
  max-width: 100%;
  min-height: 300px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 20px;
  resize: vertical;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.copy-success {
  color: #2ecc71;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
}

.date-presets {
  margin-top: 10px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

.checkbox-label,
.radio-label {
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
  font-weight: normal;
}

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
  margin-right: 8px;
  cursor: pointer;
  /* Make checkboxes more prominent (about 2x size in admin tables) */
  transform: scale(1.8);
  transform-origin: center;
}

.checkbox-label:last-child,
.radio-label:last-child {
  margin-bottom: 0;
}

/* Login Form */
.login-form {
  max-width: 400px;
  margin: 50px auto;
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.login-form h1 {
  text-align: center;
  margin-bottom: 30px;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Previous Content Generations */
.link-previous-content {
  font-size: 0.9em;
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid #667eea;
  border-radius: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.link-previous-content:hover {
  background: #667eea;
  color: white;
}

.previous-content-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e9ecef;
}

.previous-content-page-header h1 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.btn-back {
  padding: 10px 20px;
  background: #667eea;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn-back:hover {
  background: #5568d3;
}

.no-content-message {
  text-align: center;
  padding: 60px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #e9ecef;
}

.no-content-message p {
  font-size: 1.1em;
  color: #7f8c8d;
  margin: 0;
}

.no-content-message a {
  color: #667eea;
  font-weight: 600;
  text-decoration: none;
}

.no-content-message a:hover {
  text-decoration: underline;
}

.previous-content-table-wrapper {
  margin-top: 15px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: visible;
}

.previous-content-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.previous-content-table thead {
  background: #f8f9fa;
}

.previous-content-table th {
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  color: #2c3e50;
  border-bottom: 2px solid #e9ecef;
  font-size: 0.9em;
}

.previous-content-table th.actions-column {
  width: 180px;
  min-width: 180px;
}

.previous-content-table td:last-child {
  width: 180px;
  min-width: 180px;
}

.previous-content-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  color: #555;
  font-size: 0.9em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.previous-content-table tbody tr:hover {
  background: #f8f9fa;
}

.content-row {
  cursor: pointer;
}

.content-details-row {
  background: #f8f9fa;
}

.content-details-row td {
  padding: 20px;
  max-width: 100%;
  overflow: hidden;
}

.content-details {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.content-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.content-details-header strong {
  color: #2c3e50;
  font-size: 1.1em;
}

.content-actions {
  display: flex;
  gap: 8px;
}

.content-edit-form {
  margin: 0;
}

.content-textarea {
  width: 100%;
  min-height: 300px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  resize: vertical;
  margin-bottom: 15px;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.content-meta {
  display: flex;
  gap: 20px;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
  font-size: 0.9em;
  color: #7f8c8d;
}

.content-meta p {
  margin: 0;
}

.btn-view-content,
.btn-copy-content {
  padding: 6px 12px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn-view-content:hover,
.btn-copy-content:hover {
  background: #5568d3;
}

.btn-edit-content {
  padding: 6px 12px;
  background: #f39c12;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn-edit-content:hover {
  background: #e67e22;
}

.edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-save-content {
  padding: 8px 16px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn-save-content:hover {
  background: #27ae60;
}

.btn-cancel-content {
  padding: 8px 16px;
  background: #95a5a6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn-cancel-content:hover {
  background: #7f8c8d;
}

.btn-delete-content {
  padding: 6px 12px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  transition: background 0.2s ease;
  margin-left: 8px;
}

.btn-delete-content:hover {
  background: #c0392b;
}

.delete-form {
  display: inline;
  margin: 0;
}

.table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Activity Log Styles */
.filters {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filters h2 {
  margin-top: 0;
  margin-bottom: 15px;
}

.filter-form {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-weight: 600;
  color: #555;
  font-size: 14px;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: white;
  cursor: pointer;
}

.activity-logs {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.action-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.action-badge.action-create {
  background-color: #2ecc71;
  color: white;
}

.action-badge.action-update {
  background-color: #3498db;
  color: white;
}

.action-badge.action-destroy {
  background-color: #e74c3c;
  color: white;
}

.log-details {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h2 {
  margin-top: 0;
  margin-bottom: 15px;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table th,
.detail-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ecf0f1;
}

.detail-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  width: 200px;
  color: #555;
}

.detail-table td {
  color: #333;
}

.content-box {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.content-preview {
  background: white;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #ddd;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 400px;
  overflow-y: auto;
}

.changes-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.changes-table thead {
  background: #f8f9fa;
}

.changes-table th,
.changes-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ecf0f1;
}

.changes-table th {
  font-weight: 600;
  color: #555;
}

.changes-table .before-value {
  color: #e74c3c;
  font-style: italic;
}

.changes-table .after-value {
  color: #2ecc71;
  font-weight: 500;
}

.changes-table tr:hover {
  background-color: #f8f9fa;
}