/* Global from lander.css */
body {
  font-family: "DM Sans", sans-serif;
}

/* Background from lander.css - STEP 3 */
body {
  background-repeat: no-repeat;
  background: #f0f0f0;
  color: rgb(25, 31, 31);
  margin: 0;
  padding: 0;
}
   

a {
  text-decoration: none; /* From lander.css */
}

/* Header from lander.css */
#header {
  position: relative;
  width: 100%;
  padding: 20px 0;
}

#header #header-inner {
  max-width: 1220px;
  max-width: calc(1220px + 4rem);
  padding: 0 2rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

#header #logo h1 {
  font-size: 28px;
  line-height: 1;
}

#header #logo h1 a {
  color: #000;
}

#header #navigation {
  margin-left: 40px;
}

#header #navigation a {
  color: rgb(25, 31, 31);
}

#header #navigation ul {
  display: flex;
}

#header #navigation ul li {
  margin: 0 15px;
}

#header #navigation ul li a {
  color: rgb(25, 31, 31);
  padding: 0.25rem 0; /* Baseline vertical padding for all nav links */
  display: inline-block; /* Allow padding and border to take effect */
  border-radius: 99999px; /* Keep shape consistent, will be visible on active */
  margin: 0; /* LI still has margin: 0 15px */
}

#header #ctas {
  margin-left: auto;
}

#header #ctas .cta-button svg {
  width: 1.25rem;
}

#header #ctas .cta-button {
  background-color: rgb(255, 255, 255);
  color: rgb(25, 31, 31);
  font-size: 16px;
  padding: 9.5px 25px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  box-shadow: 5px 4px 16px 0px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#header #ctas .cta-button.black {
  background-color: #000;
  color: #fff;
}

#header #ctas-inner {
  display: flex;
  gap: 16px;
  min-height: 37px; /* Approx height of one lander CTA button to stabilize header flex alignment */
  align-items: center; /* Align items within this (if any were present) */
}
/* /Header from lander.css */

/* Logo SVG styling from lander.css */
#logo svg {
  width: 140px;
  height: auto;
}

#logo svg * {
  fill: #444; /* This will override the SVG's inline fill */
}

/* User badge styling from lander.css */
.user-badge-link {
  text-decoration: none;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 9.5px 16px;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.02), 0px 0px 0px 1px rgba(0, 0, 0, 0.01);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.user-badge svg.user-badge-icon { /* Made selector more specific for the placeholder SVG */
  width: 1.25rem;
  height: 1.25rem;
  fill: #333;
}

.user-badge-link:hover .user-badge {
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.03);
  background-color: rgba(0, 0, 0, 0.06);
}

.user-identifier {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
}

.user-identifier:hover {
  text-decoration: none;
}
/* /User badge styling from lander.css */

/* Responsive Header Styles from lander.css */
@media screen and (max-width: 768px) {
  #header #header-inner {
    padding: 0 1.4rem;
    flex-wrap: wrap;
  }

  #logo svg {
    width: 100px;
    top: -2px;
    position: relative;
  }

  #header #navigation {
    margin-left: auto;
  }

  #ctas {
    width: 100%;
    margin-top: 20px;
  }

  .user-badge,
  #header #ctas .cta-button {
    padding: 7px 12px;
    font-size: 15px;
  }

  #header #ctas-inner > .cta-button { /* Ensure space before > */
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .user-badge svg.user-badge-icon, /* Made selector more specific */
  #header #ctas .cta-button svg {
    width: 1rem;
    height: 1rem;
  }
}
#header #navigation ul li:last-child {
  margin-right: 0;
}
/* Styling for active navigation link */
#header #navigation ul li a.active {
  
  color: #333; /* Darker text color for contrast */
  
  border-bottom: 2px solid #000;
  border-radius: 0;
  
  
}

@media screen and (min-width: 769px) {
  #header #header-inner {
    min-height: 41px;
  }  
}
/* /Responsive Header Styles from lander.css */

/* Original memes.css content starts below */
 
/* Style for the H1 'Meme Database' title */
.memes-page-container > h1 {
  font-size: 3.8rem; /* Match lander #hero h2 */
  line-height: 1; /* Match lander #hero h2 */
  font-weight: 500; /* Match lander #hero h2 */
  letter-spacing: 0.2rem; /* Match lander #hero h2 */
  color: #333; /* Consistent dark color */
  text-align: center;
  margin-top: 1.5rem; /* Space above title */
  margin-bottom: 0.75rem; /* Space below title, before subtitle */
}


@media screen and (max-width: 768px) {
  .memes-page-container > h1 {
    margin-top: 0.5rem;
  }
}

.memes-subtitle {
  /* Styles for the "The Highest Quality..." subtitle */
  font-size: 1.25rem; /* Larger than paragraph, smaller than title */
  line-height: 1.6;
  font-weight: 400;
  color: rgb(55, 65, 81); /* Softer color than main title */
  text-align: center;
  margin-top: 0;
  margin-bottom: 2.5rem; /* Space below subtitle, before search */
  /* max-width: 600px; Removed to allow full width */
  margin-left: auto;
  margin-right: auto;
}

.memes-page-container {
  position: relative;
  width: 100%;
  max-width: calc(1220px + 4rem); /* Updated from lander.css */
  padding: 0 2rem; /* Updated from lander.css */
  margin: 0 auto; /* Updated from lander.css */
}

.memes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.meme-card img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block; /* Remove extra space below image */
}

.meme-detail-page img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.meme-template {
  max-width: 600px;
  overflow: hidden;
  border: 1px solid #ababab;
}

/* General meme page styling */
.memes-page {
  padding-bottom: 60px;
  /* background: white; Removed, body now has gradient */
}

/* Meme grid styling */
.memes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px; /* Adjusted gap */
}

.meme-card-wrapper {
  position: relative;
  
   
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  overflow: hidden; /* Ensure image respects border-radius */
}

 
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0;
  padding: 1rem;
  align-items: center;
}

.pagination .page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination a,
.pagination span.current {
  padding: 0.5rem 1rem;
  border: 2px solid #c2c2c2;
  border-radius: 0.5rem;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.pagination span.current {
  background: #ddd;
  color: #444;
  border-color: #8d8d8d;
}

.pagination a:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: #5f5f5f;
}

.pagination .gap {
  border: none;
}

@media (max-width: 768px) {
  .pagination {
    gap: 0.25rem;
  }

  .pagination a,
  .pagination span.current {
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
  }

  .pagination {
    margin: 0 auto;
  }
}

.pagination span.last {
  display: none;
}

.pagination span.page.gap {
  display: none;
}

.pagination .page {
  display: none;
}

.pagination .page.current {
  display: block;
}

.pagination {
  margin-bottom: 0;
  margin-top: 10px;
}

.meme-card {
  text-decoration: none;
  color: inherit;
  display: block; /* Ensure it fills the wrapper */
  font-family: 'Arial';
}

.meme-info {
  padding: 8px 0;
}

.meme-name {
  font-size: 15px; /* Adjusted size */
  margin-bottom: 4px;
  color: rgb(51, 102, 204); /* Darker, more modern text color */
  font-weight: bold; /* Medium weight */
  line-height: 1.4;
}

.meme-year {
  font-size: 11px;
  color: #555; /* Softer color */
  background: #cccccc;
    padding: 3px;
    border-radius: 6px;
}

/* Meme detail page styling */
.meme-detail {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 0px;
}

.meme-title .meme-title-all-memes a {
  color: #0056b3; /* Original color */
}

.meme-title {
  font-size: 21px;
  margin-bottom: 30px;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex-wrap: wrap;
}

.meme-title a {
  color: #0056b3;
  text-decoration: none;
}

.meme-title .meme-title-arrow {
  font-size: 19px;
  margin: 0 7px;
}

.meme-title .meme-title-meme-name,
.meme-title .meme-title-meme-name a {
 font-weight: bold;
}

.meme-template {
  margin-bottom: 40px;
}

.meme-description {
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.6;
}

.meme-description h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 30px 0 15px;
  color: rgba(0, 0, 0, 0.9);
}

.meme-description p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 26px;
  color: rgb(32, 33, 34);
  font-weight: 500;
}

.meme-description a {
  color: #000fff;
  text-decoration: none;
}

.meme-description a:hover {
  text-decoration: underline;
}

.meme-origin, .meme-aliases {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 20px;
}

.meme-template img {
  vertical-align: bottom;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .memes-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; /* Adjusted gap */
  }
  .meme-title {
    font-size: 24px;
  }
 
}

@media (max-width: 480px) {
  .memes-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px; /* Adjusted gap */
  }
  .memes-page > h1.main-title {
    font-size: 18px;
  }
  .memes-page-container {
    padding: 0 1rem; /* Adjusted padding */
  }
  #memes-navigation-placeholder .h1 {
    font-size: 2.0rem;
  }
  .memes-subtitle {
    font-size: 1.0rem;
    margin-bottom: 1.5rem;
  }
 
}

.meme-template-actions {
  margin-top: 20px;
  text-align: center;
}

.edit-in-canvas-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 8px; /* Slightly more rounded */
  transition: background-color 0.3s;
  font-weight: 500;
}

.edit-in-canvas-button:hover {
  background-color: #0056b3;
  text-decoration: none;
  color: white;
}

.meme-description h2 span {
  display: block;
  font-size: 80%;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
}

/* URL Preview Card Styling (Keep as is or adapt if necessary) */
.url-preview-card {
  display: block;
  border: 1px solid #e1e1e1;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  max-width: 600px;
  background: #f8f8f8;
  text-decoration: none;
  color: inherit;
  text-align: left;
  margin: 15px 0;
  transition: background-color 0.2s, border-color 0.2s;
}

.url-preview-card:hover {
  background: #f0f0f0;
  border-color: #d1d1d1;
  text-decoration: none;
}

.preview-image {
  flex: 0 0 130px;
}

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

.preview-content {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.preview-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.8);
}

.preview-description {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-domain {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .preview-content {
    padding: 12px;
  }
}

/* Reference styling */
.reference {
  font-size: 10px;
  vertical-align: super;
  line-height: 0;
  color: rgba(0, 0, 0, 0.6);
}

.reference-item {
  position: relative;
  padding-left: 26px;
  margin: 15px 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}

.reference-number {
  position: absolute;
  left: 0;
  top: 0;
}

.reference-item a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.reference-item a:hover {
  text-decoration: underline;
}

.meme-image {
  width: 100%;
  padding-bottom: 100%; /* Creates a 1:1 aspect ratio */
  position: relative;
  overflow: hidden;
  background-color: #f0f0f0;
}

.meme-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.search-container {
  margin-bottom: 2.5rem; /* Space after search before grid */
}

.search-input-wrapper {
  margin-bottom: 24px;
  position: relative; /* For icon positioning */
}

.search-input-inner {
  position: relative;
}

.search-input {
  width: 100%;
  padding: 14px 20px 14px 50px;  /* Increased padding for icon and feel */
  font-size: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 16px; /* Rounded like lander buttons */
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.02), 0px 0px 0px 1px rgba(0,0,0,0.01); /* Subtle shadow */
  outline: none;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background-color: #fff;
}

.search-icon {
  position: absolute;
  left: 18px; /* Adjusted for new padding */
  top: 50%;
  transform: translateY(-50%);
  color: #888; /* Softer icon color */
  pointer-events: none;
  font-size: 1.2rem;
}

.search-input:focus {
  border-color: #FF5500; /* Lander orange for focus */
  box-shadow: 0px 3px 8px rgba(0,0,0,0.05), 0 0 0 1px #FF5500;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 16px; /* Match input */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  margin-top: 8px; /* Space from input */
}

.search-result {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: inherit;
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover {
  background-color: #f5f5f5;
}

.search-result-image {
  width: 50px; /* Slightly smaller */
  height: 50px;
  margin-right: 12px;
}

.search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px; /* Rounded images */
}

.search-result-info h3 {
  margin: 0 0 4px 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.search-result-info p {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
}

.no-results {
  padding: 20px;
  text-align: center;
  color: #666;
}

/* Admin button styling (largely unchanged but ensure consistency) */
.dev-delete-form {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}

.dev-delete-button {
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 8px; /* Consistent rounding */
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s, background-color 0.2s;
}

.dev-delete-button:hover {
  opacity: 1;
  background-color: #e03030;
}

/* Admin Actions section and forms */
.admin-actions {
  margin-top: 40px;
  padding: 25px;
  background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white against gradient */
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.admin-buttons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 8px;
  justify-content: space-between;
  position: absolute;
  top: 12px; /* Adjusted for new card style */
  right: 12px;
  z-index: 10;
  width: auto;
}

.admin-buttons .dev-delete-form {
  position: static;
}

.admin-buttons .dev-delete-button {
  margin-right: 0;
}

.dev-edit-button {
  background: #17a2b8;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
  text-decoration: none;
  display: inline-block;
}

.dev-edit-button:hover {
  opacity: 1;
  color: white;
  text-decoration: none;
}

.hq-button, .notable-button {
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s, background-color 0.2s;
}

.hq-button:hover, .notable-button:hover {
  opacity: 1;
}

.hq-button.active {
  background-color: #ffc107;
  color: #212529;
  opacity: 1;
}

.notable-button.active {
    background-color: #17a2b8; /* Example: teal for notable */
    color: white;
    opacity: 1;
}

.template-upload-form,
.meme-details-form,
form.merge-form,
.delete-meme-section,
.kym-data-removal-section,
.meme-raw-data-section {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa; /* Slightly off-white for forms inside admin area */
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.admin-actions h3, .admin-actions h4 {
  margin: 0 0 15px 0;
  font-size: 1.1rem; /* Adjusted admin section titles */
  font-weight: 600;
  color: #343a40;
}

.admin-actions .field {
  margin-bottom: 15px;
}

.admin-actions .field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500; /* Slightly lighter label */
  font-size: 0.9rem;
  color: #495057;
}

.admin-actions .field input[type="text"],
.admin-actions .field input[type="file"],
.admin-actions .field .template-file-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 8px; /* Rounded inputs */
  font-size: 0.95rem;
  color: #495057;
  box-sizing: border-box;
}

.admin-actions .field input[type="text"]:focus,
.admin-actions .field input[type="file"]:focus {
  border-color: #FF5500; /* Lander orange for focus */
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 85, 0, 0.25);
}

.admin-actions .field input[type="file"] {
  padding: 8px; /* Adjust padding for file input */
}

.template-file-input {
  width: 100%;
  margin-bottom: 10px;
}

/* General Button Styling in Admin Area */
.admin-actions button,
.admin-actions input[type="submit"],
.template-regions-controls .regions-button,
.regions-editor-controls .regions-button,
.variation-actions button,
.variation-actions input[type="submit"] {
  padding: 10px 18px; /* Standardized padding */
  border: none;
  border-radius: 8px; /* Consistent rounding */
  cursor: pointer;
  font-size: 0.9rem; /* Standardized font size */
  font-weight: 500;
  text-align: center;
  transition: background-color 0.2s, opacity 0.2s, transform 0.1s ease-out;
  color: white;
  background-color: #000;
}

.admin-actions button:hover,
.admin-actions input[type="submit"]:hover,
.template-regions-controls .regions-button:hover,
.regions-editor-controls .regions-button:hover,
.variation-actions button:hover,
.variation-actions input[type="submit"]:hover {
  opacity: 0.9;
}

.admin-actions button:active,
.admin-actions input[type="submit"]:active {
  transform: scale(0.98);
}

/* Specific Button Types in Admin Area */
.set-primary-button {
  background-color: #17a2b8; /* Info Blue */
}

.delete-template-button {
  background-color: #dc3545; /* Danger Red */
}

.upload-template-button {
  background-color: #28a745; /* Success Green */
}

.merge-button {
  background-color: #ffc107; /* Warning Yellow */
  color: #212529;
}

.update-details-button {
  background-color: #007bff; /* Primary Blue */
}

.remove-kym-button {
  background-color: #dc3545; /* Danger Red */
  margin-top: 15px;
}

/* Full-width buttons in admin forms */
.upload-template-button,
.merge-button,
.update-details-button,
.remove-kym-button,
.set-primary-button,
.delete-template-button {
    width: 100%;
    margin-top: 10px;
}
.upload-template-button { margin-top: 0; }

/* Template Regions Buttons */
.template-regions-controls,
.regions-editor-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
}

.regions-editor-controls {
  justify-content: center;
  margin-top: 15px;
}

.regions-button {
  font-size: 0.85rem; /* Smaller for control bar */
  padding: 8px 12px;
}

.regions-button.delete-button { background-color: #dc3545; }
.regions-button.save-button { background-color: #28a745; }
.regions-button.cancel-button { background-color: #6c757d; }

.dev-only {
  margin-bottom: 10px;
  justify-content: flex-start;
  display: flex;
  gap: 10px;
  align-items: center;
}

.template-admin-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}

.template-admin-actions .hq-button,
.template-admin-actions .notable-button {
    padding: 4px 8px;
    font-size: 12px;
    width: auto;
    margin-top: 0;
}

.variation-actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Increased gap */
}

.variation-actions .edit-in-canvas-button {
    width: 100%;
    box-sizing: border-box;
}

.variation-card .hq-button,
.variation-card .notable-button {
  font-size: 12px;
  padding: 4px 8px;
}

.template-admin-actions form {
  display: inline-block;
}

.meme-raw-data-section pre {
  font-size: 13px;
  line-height: 1.5;
  width: 100%;
  overflow: scroll;
  max-height: 344px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  background-color: #fdfdfd;
  padding: 10px;
  border-radius: 4px;
}

/* Ensure the dev-delete-button on the show page has consistent styling */
.dev-delete-button-show {
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px; /* Match other admin buttons */
  font-size: 0.9rem; /* Match other admin buttons */
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s, background-color 0.2s;
  width: 100%; /* Make it full width like other form buttons */
  margin-top: 10px;
}

.dev-delete-button-show:hover {
  opacity: 1;
  background-color: #e03030;
}

.dev-delete-form-show {
  margin: 0; /* Reset margin if any */
}
 


@media screen and (max-width: 768px) {
  .memes-page-container > h1 {
    font-size: 1.8rem;
    letter-spacing: 0.06rem;
    margin-bottom: 0.4rem;
  }
  
}