:root {
    --betmgm-black: #0a0a0a;
    --betmgm-gold: #CDB45F;
    --betmgm-white: #FFFFFF;
    --betmgm-gray: #222222;
    --betmgm-light-gray: #333333;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--betmgm-black); /* Fallback */
    background-image: radial-gradient(ellipse at top, var(--betmgm-gray) 0%, var(--betmgm-black) 70%);
    color: var(--betmgm-white);
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 800px;
    background-color: var(--betmgm-gray);
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--betmgm-light-gray);
    padding-bottom: 20px;
}

.logo {
    max-width: 200px;
    margin-bottom: 10px;
}

header h1 {
    color: var(--betmgm-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.form-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

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

.form-header h3 {
    font-weight: 500;
}

.form-groups-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.form-groups-wrapper#event-ids-wrapper {
    margin-top: 20px;
}

.form-group-dynamic {
    margin-top: 20px;
}

.form-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--betmgm-white);
}

.form-input {
    width: 100%;
    padding: 12px;
    background-color: var(--betmgm-light-gray);
    color: var(--betmgm-white);
    border: 1px solid var(--betmgm-gold);
    border-radius: 4px;
    font-size: 16px;
}

.form-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--betmgm-gold);
}

select {
    width: 100%;
    padding: 12px;
    background-color: var(--betmgm-light-gray);
    color: var(--betmgm-white);
    border: 1px solid var(--betmgm-gold);
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

/* Hide the default select focus, as Choices.js has its own */
select:focus {
    outline: none;
}

/* Style for the dropdown options list */
select option {
    background: var(--betmgm-gray);
    color: var(--betmgm-white);
}

.btn {
    padding: 12px 20px;
    border: 1px solid var(--betmgm-gold);
    border-radius: 4px;
    background-color: transparent;
    color: var(--betmgm-gold);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn:hover {
    background-color: var(--betmgm-gold);
    color: var(--betmgm-black);
}

.btn-primary {
    background-color: var(--betmgm-gold);
    color: var(--betmgm-black);
    flex-shrink: 0;
}

.btn-primary:hover {
    background-color: #e0c870; /* Lighter gold */
    border-color: #e0c870;
}

.btn-text {
    background: none;
    border: none;
    color: var(--betmgm-gold);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 5px;
    transition: color 0.2s ease;
}

.btn-text:hover {
    color: #e74c3c;
}

/* The #code-output styles are now more focused on the text itself,
as layout/scrolling is handled by its parent <pre> tag. */
#code-output {
    /* Remove layout properties that are now on parent elements */
    width: auto;
    height: auto;
    resize: none;
    border: none;
    /* Keep text styling as a fallback for Prism's theme */
    background-color: transparent; /* Let parent <pre> handle background */
    padding: 15px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    display: block; /* Ensure padding is applied correctly */
    /* Add wrapping styles directly here for maximum specificity, overriding Prism's defaults */
    white-space: pre-wrap;       /* Ensures wrapping */
    overflow-wrap: break-word; /* Standard property for breaking long words */
    word-break: break-all;       /* More aggressive wrapping for very long unbreakable strings */
}

#gtg-link {
    width: 100%;
    height: 80px;
    background-color: var(--betmgm-gray);
    color: var(--betmgm-white);
    border: 1px solid var(--betmgm-gold);
    border-radius: 4px;
    padding: 10px 45px 10px 10px; /* Make space for icon on the right */
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    resize: none; /* Fixed dimension */
}

#gtg-link[readonly] {
    cursor: text; /* Allow text selection for copying */
    color: #a0a0a0;
}

#gtg-link:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--betmgm-gold);
}

.gtg-container {
    margin-top: 20px;
}

.gtg-legend {
    margin-bottom: 5px;
    font-weight: 500;
    display: block; /* Ensures margin-bottom is applied */
    color: var(--betmgm-white);
    font-size: 14px;
}

.gtg-explanation {
    font-size: 12px;
    color: #a0a0a0;
    font-style: italic;
    margin-bottom: 10px;
}

.gtg-editor {
    position: relative;
}

/* --- Code Editor Styling --- */
.code-editor {
    position: relative;
    margin-top: 20px;
    border: 1px solid var(--betmgm-gold);
    border-radius: 4px;
    background-color: var(--betmgm-gray);
    overflow: hidden; /* Ensures children conform to the border-radius */
    /* Make this a flex container to manage header and code area */
    display: flex;
    flex-direction: column;
    height: 250px; /* Set a fixed height for the whole editor */
}

.code-editor:focus-within {
    box-shadow: 0 0 0 2px var(--betmgm-gold);
}

.code-editor-header {
    height: 45px; /* Height of the header bar */
    background-color: var(--betmgm-gray);
    border-bottom: 1px solid var(--betmgm-gold);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    flex-shrink: 0; /* Prevent header from shrinking */
}

/*
 * Style the <pre> tag which is the scrollable container.
 * We use a more specific selector to override the default Prism theme styles,
 * which add their own `overflow: auto` and `padding`.
 */
.output-container.code-editor pre {
    flex-grow: 1; /* Allow the pre to fill the remaining space */
    overflow-y: auto; /* Only allow vertical scrolling */
    overflow-x: hidden; /* Explicitly disable horizontal scrolling */
    margin: 0; /* Reset default pre margin */
    padding: 0; /* Prism themes add padding here; we want it on the <code> tag instead */
    background-color: var(--betmgm-gray); /* Set a consistent background, overriding Prism's theme */
}

.gtg-editor-actions {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.icon-btn {
    background-color: transparent;
    border: none;
    color: var(--betmgm-white);
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.icon-btn svg {
    transition: fill 0.2s ease;
}

.icon-btn:hover svg {
    color: var(--betmgm-gold);
}

/* Success state for icon buttons (e.g., after copying) */
.icon-btn.success {
    background-color: #2e7d32; /* A standard success green */
}

.icon-btn.success svg {
    color: var(--betmgm-white); /* Ensure icon is visible on green background */
}

/* --- Choices.js Custom Styling --- */

/* Main container */
.choices__inner {
    background-color: var(--betmgm-light-gray);
    color: var(--betmgm-white);
    border: 1px solid var(--betmgm-gold);
    font-size: 16px;
    border-radius: 4px;
    padding: 6.5px 7.5px 4px; /* Fine-tune padding to match original select */
    min-height: auto;
}

.choices[data-type*="select-one"]::after {
    border-color: var(--betmgm-gold) transparent transparent;
    right: 15px;
    margin-top: -4px;
}

.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent var(--betmgm-gold);
    margin-top: -6px;
}

/* Dropdown list */
.choices__list--dropdown {
    background-color: var(--betmgm-gray) !important; /* Use !important to force override */
    border: 1px solid var(--betmgm-gold);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    margin-top: -1px;
}

/* Search input */
.choices__input {
    background-color: var(--betmgm-light-gray) !important; /* Use !important to override inline styles */
    color: var(--betmgm-white);
}

/* Dropdown items */
.choices__list--dropdown .choices__item--selectable {
    color: var(--betmgm-white);
}

/* Highlighted/hovered item */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--betmgm-gold);
    color: var(--betmgm-black);
}

/* Focus state */
.is-focused .choices__inner {
    outline: none;
    box-shadow: 0 0 0 2px var(--betmgm-gold);
}

/* Disabled state for Choices.js dropdown */
.choices.is-disabled .choices__inner {
    background-color: var(--betmgm-black);
    color: #757575;
}

.choices.is-disabled[data-type*="select-one"]::after {
    border-color: #757575 transparent transparent;
}

/* --- Modal Styling --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background-color: #000000; /* Plain black for better contrast */
    padding: 20px;
    border: 1px solid var(--betmgm-gold);
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    max-height: 85vh; /* Set a maximum height */
    overflow-y: auto; /* Add vertical scrollbar when content overflows */
}

.modal-close {
    color: var(--betmgm-white);
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close:hover,
.modal-close:focus {
    color: var(--betmgm-gold);
    text-decoration: none;
}

#modal-body {
    margin-top: 20px;
}

.preview-wrapper {
    width: 75%;
    margin: 0 auto; /* Center the container */
}

.preview-loader {
    font-style: italic;
    color: #a0a0a0; /* A light gray for subtlety */
    text-align: center;
    padding-bottom: 15px;
    font-size: 14px;
    margin-top: 0;
}

/* --- UI Feedback States --- */

/* Shake animation for errors */
@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);
  }
}

/* Error state for textareas - applies a shake animation and red border */
.code-editor.error,
#gtg-link.error,
.form-input.error {
    border-color: #e74c3c; /* A clear but not overly bright red */
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

/* When an element with an error is focused, the glow should be red, not gold */
.code-editor.error:focus-within,
#gtg-link.error:focus,
.form-input.error:focus {
    box-shadow: 0 0 0 2px #e74c3c;
}