/* --- General & Reset --- */

:root {
    --primary-color: #230046; /* Entain Dark Purple */
    --primary-hover: #1a0033; /* Darker Purple */
    --background-color: #f8f8f8; /* Light Grey Background */
    --container-bg: #ffffff;
    --text-color: #333;
    --border-color: #ddd;
    --font-family: 'Poppins', sans-serif;
    --font-family-code: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --accent-main: #E6007E; /* Entain Pink/Magenta */
    --accent-main-hover: #c4006b; /* Darker Pink/Magenta */
    --danger-color: #e74c3c;
    --danger-hover-color: #c0392b;
    --secondary-color: #7f8c8d;
    --success-color: #2ecc71;
    --success-hover-color: #27ae60;
    --secondary-hover-color: #6c7a7b;
}

/*
  FIX: Prevents the main layout from shifting when the modal is opened.
  This is a common issue caused by the scrollbar disappearing. This rule
  ensures the scrollbar's space is always reserved, preventing any change
  in the page's content width.
*/
html { overflow-y: scroll; }

@font-face {
    font-family: "midnightsans-12black";
    src: url(https://d2vxgxvhgubbj8.cloudfront.net/images/client/11950/fileassets/cstfont-29860253-96335358.ttf);
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: var(--font-family);
    background-color: #000; /* Match the gradient start color */

    /* New styles for full-height layout */
    height: 100vh;
    display: flex;
    flex-direction: column;

    color: var(--text-color);
    padding: 2rem;
    position: relative; /* Required for pseudo-element positioning */
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;

    /* New gradient background from black to the Entain primary color */
    background-color: #000; /* Fallback for older browsers */
    background-image: radial-gradient(ellipse at center, var(--primary-color) 0%, #000000 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

/* --- Main Container & Header --- */
.container {
    /* New styles for full-height layout */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow container to grow and fill body */

    width: 100%;
    max-width: 1140px; /* Adjusted width for a more compact view */
    margin-left: auto;
    margin-right: auto;
    background-color: var(--container-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    text-align: left;
}

.title {
    font-size: 2.8rem;
    margin-bottom: 2rem !important; /* Override Bootstrap */
    font-family: "midnightsans-12black", sans-serif;
    color: #fff;
    background-color: var(--primary-color);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    text-transform: uppercase;
    text-align: center;
}

label.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #555;
}

.form-control, .form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem; /* Reduced font size for inputs */
    font-family: var(--font-family);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fff;
    color: var(--text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--accent-main);
    box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.25);
}

textarea.form-control {
    font-family: var(--font-family-code);
    font-size: 0.85rem; /* Smaller font for code */
    line-height: 1.5; /* Improve readability for code blocks */
    /* Use flex-grow to allow the textarea to fill available vertical space */
    flex-grow: 1;
    height: 0; /* A common flexbox technique to ensure proper height calculation */
    resize: none; /* Prevent user from resizing */
    border: none;
    border-radius: 0; /* No radius, as it's inside a container */
    box-shadow: none !important; /* Remove focus shadow from textarea itself */
    padding-bottom: 0.5rem;
}

/* --- Choices.js Customization --- */
.choices {
  margin-bottom: 0;
}

.choices__inner {
  width: 100%;
  padding: 0.5rem 1rem !important;
  font-size: 0.9rem;
  font-family: var(--font-family);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #fff;
  color: var(--text-color);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  min-height: auto;
}

.choices.is-focused {
    outline: none; /* Prevent default browser outline on the container */
}

/* Ensure the selected item doesn't have its own background, so the parent's rounded corners are visible */
.choices__list--single .choices__item {
    background-color: transparent !important; /* Force remove the default background */
    border: none !important; /* Force remove the default border */
    color: var(--text-color) !important; /* Ensure text is always readable */
}

.choices.is-focused .choices__inner {
  border-color: var(--accent-main);
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.25);
  outline: none; /* Explicitly remove outline from the inner element as well */
}

/* Style the dropdown arrow with the accent color */
.choices[data-type*='select-one']::after {
    border-color: var(--accent-main) transparent transparent transparent;
}

.choices.is-open[data-type*='select-one']::after {
    border-color: transparent transparent var(--accent-main) transparent;
}

/* Style the highlighted/hovered item in the dropdown list */
.choices__list--dropdown .choices__item--selectable:hover,
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(230, 0, 126, 0.07) !important; /* More subtle pink highlight */
    color: var(--text-color) !important; /* Dark text for readability */
}

.choices__list--dropdown {
  background-color: var(--container-bg); /* Ensure dropdown has a solid background for readability */
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.choices__input {
  font-size: 0.9rem;
  background-color: #fff !important;
}


.btn {
  border-radius: 8px;
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.btn-primary { background-color: var(--accent-main); color: white; }
.btn-primary:hover { background-color: var(--accent-main-hover); color: white; }

.btn-secondary { background-color: var(--secondary-color); }
.btn-secondary:hover { background-color: var(--secondary-hover-color); }

.btn-info { background-color: var(--accent-main); color: white; }
.btn-info:hover { background-color: var(--accent-main-hover); color: white; }

.btn-danger { background-color: var(--danger-color); }
.btn-danger:hover { background-color: var(--danger-hover-color); }

.btn-success { background-color: var(--success-color); color: white; }
.btn-success:hover { background-color: var(--success-hover-color); color: white; }

/* Style for SVG icons placed within any button */
.btn svg {
    width: 20px; /* Standardize icon size */
    height: 20px;
}

.modal-content {
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-color);
}

.modal-header { border-bottom: 1px solid var(--border-color); }
.modal-footer { border-top: 1px solid var(--border-color); }
.btn-close { /* Use Bootstrap default for light background */ }

/* Add blur effect to modal backdrop */
.modal-backdrop.show {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* --- Preview Modal Specific Styles --- */
/*
  The following styles target the preview modal specifically (assuming it has an id="previewModal").
  It sets the width to match the main application container, uses the standard header close icon,
  and hides the footer to remove the redundant "Close" button.
*/
#previewModal .modal-dialog {
    max-width: 900px; /* Match the main container width */
}

/* Style the modal title to match the body text font and color */
#previewModal .modal-title {
    font-family: "midnightsans-12black", sans-serif;
    color: var(--primary-color);
    font-size: 1.3rem; /* Increased font size */
    font-weight: normal; /* The font itself is bold */
    text-transform: uppercase; /* Match other titles using this font */
}

/* --- Preview Modal Header Adjustments --- */
#previewModal .modal-header {
    align-items: flex-start; /* Align title/note block and close button to the top */
}

/* Style for the note inside the preview modal */
#preview-note {
    font-size: 0.65rem; /* Match generator note */
    font-style: italic; /* Match generator note */
    color: var(--secondary-color);
    line-height: 1.1; /* Match generator note */
}

/* Override default right-alignment for the preview modal's footer */
#previewModal .modal-footer {
    justify-content: flex-start;
}

/*
  NOTE: The styles for the content *inside* the preview iframe cannot be
  controlled from this stylesheet. They must be included in the HTML
  document that is loaded into the iframe. See the response for the
  required CSS to ensure consistent font styling.
*/
#preview-iframe {
  width: 100%;
  border: none;
  display: block; /* Remove any default spacing */
  transition: height 0.3s ease-in-out;
}

.textarea-container {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

/* New panel to wrap textareas and handle the border/focus state */
.textarea-panel {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Crucial for containing the child border-radii */
}

.textarea-panel:focus-within {
    border-color: var(--accent-main);
    box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.25);
}

.textarea-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: #f8f8f8;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 7px 7px; /* Match container rounding */
}

.textarea-actions .btn {
    background-color: transparent;
    border: none;
    color: #aaa; /* Muted grey for icons */
    box-shadow: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Overrides for icon buttons */
    padding: 0.5rem;
    width: 38px;
    height: 38px;
    text-transform: none;
    letter-spacing: normal;
}

.textarea-actions .btn:hover {
    background-color: #e9e9e9; /* Darker background on hover for better visibility */
    transform: none;
    box-shadow: none;
}

/* Color on hover */
.textarea-actions .btn.btn-primary:hover { color: var(--accent-main) !important; }
.textarea-actions .btn.btn-danger:hover { color: var(--danger-color); }
.textarea-actions .btn.btn-secondary:hover { color: var(--accent-main); }

/* Special case for success state on copy */
.textarea-actions .btn.btn-success, .textarea-actions .btn.btn-success:hover {
    background-color: rgba(46, 204, 113, 0.15); /* Light green background */
    color: var(--success-color); /* Green icon */
}

/* --- Update Notification --- */
.update-notification {
    background-color: rgba(46, 204, 113, 0.1);
    color: var(--success-color);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 1rem;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.update-notification.show {
    max-height: 50px;
    opacity: 1;
    padding: 0.5rem 1rem;
}

/* --- Validation Shake Animation --- */
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.is-invalid {
  border-color: var(--danger-color) !important;
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

.form-error-message {
    color: var(--danger-color);
    font-size: 0.75rem; /* Made the font smaller */
    text-align: center;
    width: 100%;
    margin-top: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
}
.form-error-message.show {
    opacity: 1;
    max-height: 50px; /* Animate height for smooth appearance */
    margin-top: 0.75rem;
}
/* --- Fieldset for Grouping --- */
fieldset {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

legend {
    float: none; /* Override Bootstrap's float to allow the legend to sit on the border */
    font-weight: 600;
    font-size: 1.3rem;
    padding: 0 0.5rem;
    margin-left: 1rem; /* Indent the legend from the left edge of the fieldset */
    color: var(--primary-color);
    font-family: "midnightsans-12black", sans-serif;
    text-transform: uppercase;
    width: auto; /* Required to override Bootstrap's default legend width */
}

/* New helper class for side-by-side form controls within a fieldset */
.fieldset-row {
    display: flex;
    gap: 1rem;
}

.fieldset-row > * {
    flex: 1; /* Each direct child takes equal space */
}

/* --- Conditional Sections --- */
#conditional-sections-wrapper {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}
#conditional-sections-wrapper.show {
    max-height: 1000px; /* Large enough to not clip content */
    opacity: 1;
}

/* --- Instructions Section --- */
.instructions-container {
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fdfdfd;
    overflow: hidden; /* Ensures content doesn't spill out during animation */
}

.instructions-toggle-btn {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 1rem 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
}

.instructions-toggle-btn svg {
    color: var(--accent-main);
    transition: transform 0.3s ease;
}

/* Use the ID for specificity to ensure the active state is always applied */
#toggleInstructionsBtn.active svg {
    transform: rotate(180deg);
}

#instructions-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 1.5rem;
}

#instructions-content.show {
    max-height: 500px; /* Large enough for content */
    opacity: 1;
    padding: 0 1.5rem 1.5rem 1.5rem;
}
#instructions-content ol {
    padding-left: 1.2rem;
    margin-bottom: 0;
    font-size: 0.8rem; /* Made font smaller */
}

#instructions-content li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

#instructions-content li:last-child {
    margin-bottom: 0;
}