/* General Body Styles */
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #020203; /* Very light grey background, similar to Celtra */
color: #FFF; /* Dark grey for general text */
line-height: 1.6;
}

/* Main Heading */
h1 {
color: #e7e8eb; /* A slightly darker blue for the main page title */
text-align: center;
margin-bottom: 30px;
font-size: 2.5em;
}

/* Introduction Text */
.intro-text {
text-align: center;
margin-bottom: 40px;
font-size: 1.1em;
color: #e7e8eb; /* Medium grey for introductory text */
}

/* Section for a collection of creative groups */
.creative-section {
background-color: #020203; /* Pure white for the main content block */
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Subtle shadow for depth */
margin-bottom: 35px;
padding: 25px;
}

/* Sub-heading for a creative section */
.creative-section h2 {
color: #e7e8eb; /* Vibrant blue for section headings */
margin-top: 0;
border-bottom: 2px solid #e0e0e0; /* Light grey separator */
padding-bottom: 15px;
margin-bottom: 25px;
font-size: 2em;
text-align: center;
}

/* Container for a single creative concept and its variations */
.creative-group {
margin-bottom: 40px; /* Space between different creative groups */
border: 1px solid #e0e0e0; /* Light grey border */
border-radius: 8px;
padding: 20px;
background-color: #020203; /* Pure white background for the group */
box-shadow: 0 1px 4px rgba(0,0,0,0.05); /* Very subtle shadow */
}

/* Heading for a specific creative concept */
.creative-group h3 {
text-align: center;
color: #e7e8eb; /* Dark grey for concept titles */
font-size: 1.8em;
margin-top: 0;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px dashed #e0e0e0; /* Light grey dashed separator */
}

/* Flex container for the A, B, C variations */
.creative-variations {
  display: flex;
  flex-wrap: wrap; /* Allows variations to wrap to the next line */
  gap: 25px; /* Space between individual variations (A, B, C) */
  justify-content: center; /* Center items if they don't fill the row */
}

/* Individual variation item (e.g., Variation A, B, or C) */
.variation-item {
  flex: 1 1 30%; /* Aims for 3 variations per row */
  min-width: 350px; /* Increased minimum width for each variation */
  border: 2px solid #e0e0e0; /* Light grey border */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
  background-color: #ffffff; /* Pure white background for each item   */
  padding-bottom: 10px;
  display: flex;
  flex-direction: column; /* Stack title, iframe, notes */
  position: relative;
  padding-right: 40px;
  margin-bottom: 20px;
}

.variation-approve {
    color: #000;
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .variation-approve input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .variation-approve input[type="checkbox"]:checked {
    border-color: #2ecc71;
    background-color: #2ecc71;
  }

  .variation-approve input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    top: 0;
    left: 4px;
    color: white;
    font-weight: bold;
    font-size: 14px;
  }


/* Heading for an individual variation */
.variation-item h4 {
  text-align: center;
  margin: 15px 10px 10px;
  color: #444444; /* Slightly lighter dark grey for variation titles */
  font-size: 1.2em;
}
/* Hover effect for individual variation item */
.variation-item:hover {
  border-color: #1966ff; /* Border color on hover */
  box-shadow: 2px 4px 12px rgba(0,0,0,0.1); /* Slightly more pronounced shadow on hover */
}

/* Iframe styles */
iframe {
width: 100%;
height: 700px; /* Increased height for the iframe */
border: none;
display: block;
flex-grow: 1; /* Allow iframe to take up available space */
}

/* Notes/Descriptions for variations */
.notes {
margin-top: 15px;
padding: 0 15px;
font-style: italic;
color: #666666; /* Medium grey for notes */
text-align: center;
font-size: 0.95em;
}

/* Footer Styles */
footer {
text-align: center;
margin-top: 50px;
padding: 20px;
color: #888888; /* Lighter grey for footer text */
font-size: 0.9em;
border-top: 1px solid #e0e0e0; /* Light grey border */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
.variation-item {
    flex: 1 1 45%; /* Two columns on medium screens */
}
}
@media (max-width: 768px) {
body {
    margin: 15px;
}
h1 {
    font-size: 2em;
}
.creative-section {
    padding: 15px;
}
.creative-section h2 {
    font-size: 1.7em;
}
.creative-group h3 {
    font-size: 1.5em;
}
.variation-item {
    flex: 1 1 100%; /* Stack variations on smaller screens */
    min-width: unset; /* Remove min-width constraint */
}
iframe {
    height: 400px;
}
}
@media (max-width: 480px) {
h1 {
    font-size: 1.8em;
}
.creative-section h2 {
    font-size: 1.5em;
}
.creative-group h3 {
    font-size: 1.3em;
}
iframe {
    height: 350px;
}
}