:root {
    --primary-color: #6a1b9a;
    --secondary-color: #4caf50;
    --danger-color: #f44336;
    --background-color: #f4f7f6;
    --surface-color: #ffffff;
    --on-surface-color: #333333;
    --border-color: #e0e0e0;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --border-radius: 8px;
    --box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--on-surface-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.header {
    background-color: var(--surface-color);
    padding: 1rem 2rem;
    box-shadow: var(--box-shadow);
    border-bottom: 1px solid var(--border-color);
}
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.view-as-user-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.view-as-user-input {
    padding: 0.45rem 0.65rem;
    border: 1px solid #cbd5e0;
    border-radius: var(--border-radius);
    min-width: 7rem;
    max-width: 11rem;
}
.view-as-user-inline-form .btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    white-space: nowrap;
}
.claim-preview-note {
    margin: 0.75rem 0 0;
    color: #64748b;
}
.view-as-user-banner .view-as-user-note {
    margin: 0.5rem 0 0;
}
.header .brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}
.header .user-info a {
    color: var(--primary-color);
    text-decoration: none;
    margin-left: 1rem;
    font-weight: 500;
}

.container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.card {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 2rem;
    margin-bottom: 2rem;
}

h1, h2, h3 {
    margin-top: 0;
    font-weight: 600;
}
h1 { font-size: 2.25rem; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; }

.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-hint {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: var(--text-muted, #666);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="file"],
textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
textarea {
    min-height: 120px;
    resize: vertical;
}
input:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.15);
}

.choice-group-container {
    padding-top: .5rem;
}
.choice-group {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.choice-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
}
.choice-group input {
    height: 1.25em;
    width: 1.25em;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.btn-primary:hover {
    background-color: #5a188a;
}
.btn-danger {
    background-color: var(--danger-color);
    color: white;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}
.btn-secondary {
    background-color: #e2e8f0;
    color: #2d3748;
}
.btn-secondary:hover {
    background-color: #cbd5e0;
}

/* Compact buttons (tables, toolbars) — global so admin dashboard & copy-tags work */
.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
}
.btn-sm:hover {
    transform: translateY(-1px);
}
.btn-primary.btn-sm {
    padding: 0.35rem 0.75rem;
}
.btn-danger.btn-sm {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
}
.btn-secondary.btn-sm {
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
}

/* Status chips (giveaways, labels) */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.status-pill--active {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}
.status-pill--inactive {
    background: #f5f5f5;
    color: #616161;
    border: 1px solid #e0e0e0;
}
.status-pill--claimed {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #90caf9;
}
.status-pill--waiting {
    background: #fff8e1;
    color: #e65100;
    border: 1px solid #ffcc80;
}
.status-pill--disqualified {
    background: #ffebee;
    color: #b71c1c;
    border: 1px solid #ef9a9a;
}
.status-label.status-pill,
span.status-label.status-pill {
    margin-left: 0;
}

.view-as-user-back {
    margin-right: 1rem;
    font-size: 0.9rem;
    color: var(--primary-color);
}
.view-as-user-back:hover {
    text-decoration: underline;
}
.admin-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.admin-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: #475569;
    font-weight: 600;
    font-size: 0.875rem;
    background: #f8fafc;
}
.admin-tab--active {
    background: #ede9fe;
    border-color: #c4b5fd;
    color: #5b21b6;
}
.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
th, td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
thead th {
    font-weight: 600;
    background-color: #f8f9fa;
}
tbody tr:last-child td {
    border-bottom: none;
}
tbody tr:hover {
    background-color: #f1f3f5;
}

/* Delivered winner row */
tbody tr.row-delivered {
    background-color: #e8f5e9;
}
tbody tr.row-delivered:hover {
    background-color: #c8e6c9;
}

/* Disqualified winner row */
tbody tr.row-disqualified {
    background-color: #ffebee;
}
tbody tr.row-disqualified:hover {
    background-color: #ffcdd2;
}

/* Click-to-copy email */
.copy-email {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.copy-email:hover {
    color: var(--primary-color);
}

/* Admin notes form in table */
.admin-notes-form textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.5rem;
}
.admin-notes-form .btn-sm {
    margin-top: 0.5rem;
}

.login-container {
    max-width: 450px;
    margin: 5rem auto;
    padding: 3rem;
    text-align: center;
}

.winnings-list .card h2 {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}
.prize-link {
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}
.claimed {
    background-color: #f8f9fa;
    opacity: 0.8;
}

a {
    color: var(--primary-color);
}

.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-decoration: none;
}
.back-link:hover {
    text-decoration: underline;
}

.prize-form {
    margin-top: 2rem;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}
.prize-form:first-child {
    margin-top: 1rem;
    border-top: none;
    padding-top: 0;
}

hr {
    border: none;
    border-top: 1px dashed #ddd;
    margin: 2rem 0;
}

/* Check/Winnings Page Specific Styles */
.giveaway-section {
    margin-bottom: 2.5rem;
}

.giveaway-section h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #4a5568;
}

.winning-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.winning-item .giveaway-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.winning-item .giveaway-name {
    font-weight: 600;
}

.winning-item .timestamp {
    font-size: 0.875rem;
    color: #718096;
}

.winning-item.unclaimed {
    border-left: 5px solid var(--primary-color);
}

.winning-item.claimed {
    /* Let's reset the opacity to make it clear and use flexbox for internal alignment */
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem; /* Ensure padding is consistent */
    background-color: var(--surface-color); /* Match other cards */
}

.claimed-prizes .prizes-grid {
    /* Use a responsive grid layout */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: stretch; /* Ensure all grid items stretch to the same height */
}

/* This is a new rule to override default margin from .card */
.claimed-prizes .prizes-grid .winning-item {
    margin-bottom: 0;
}

.prize-preview {
    width: 100%;
    height: 200px;
    margin: 1rem 0;
    background-color: #f7fafc;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e2e8f0;
    flex-grow: 1; /* Allow preview area to grow */
}

.prize-preview img,
.prize-preview iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

.prize-preview iframe {
    object-fit: contain;
}

.manual-data-preview {
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.5rem;
    text-align: left;
    height: auto;
    background: linear-gradient(135deg, #f8f9fb 0%, #eef2f7 100%);
    border: 1px solid #eaf0f6;
}

.manual-data-preview h4 {
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 1.1rem;
    color: #2d3748;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.manual-data-preview ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.manual-data-preview li {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.manual-data-preview li:last-child {
    margin-bottom: 0;
}

.manual-data-preview .data-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #4a5568;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.manual-data-preview .data-value {
    font-weight: 400;
    color: var(--on-surface-color);
}

.prize-delivery {
    width: 100%;
    /* This is the key change to push the delivery info to the bottom of the card */
    margin-top: auto;
    padding-top: 1.5rem; /* A bit more space for the top border */
    border-top: 1px solid var(--border-color);
}

.prize-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
}

.prize-display code {
    background-color: #edf2f7;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    color: #2d3748;
}

.prize-key .btn-secondary {
    background-color: #e2e8f0;
    color: #2d3748;
    border: none;
}
.prize-key .btn-secondary:hover {
    background-color: #cbd5e0;
}


/* Icons */
.icon-gift, .icon-inbox, .icon-history, .icon-file, .icon-key, .icon-arrow-right {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-gift { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M12 2C9.243 2 7 4.243 7 7V9H4C3.447 9 3 9.447 3 10V12H21V10C21 9.447 20.553 9 20 9H17V7C17 4.243 14.757 2 12 2ZM9 7C9 5.346 10.346 4 12 4C13.654 4 15 5.346 15 7V9H9V7Z'/%3E%3Cpath d='M3 14H21V21C21 21.553 20.553 22 20 22H4C3.447 22 3 21.553 3 21V14Z'/%3E%3C/svg%3E"); }
.icon-inbox { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M20 2H4C2.897 2 2 2.897 2 4V20C2 21.103 2.897 22 4 22H20C21.103 22 22 21.103 22 20V4C22 2.897 21.103 2 20 2ZM20 4V8L13.883 12.446C12.754 13.238 11.246 13.238 10.117 12.446L4 8V4H20ZM4 10.551L10.117 15.001C10.63 15.352 11.314 15.552 12 15.552C12.686 15.552 13.37 15.352 13.883 15.001L20 10.551V20H4V10.551Z'/%3E%3C/svg%3E"); }
.icon-history { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z'/%3E%3Cpath d='M13 7H11V13H17V11H13V7Z'/%3E%3C/svg%3E"); }
.icon-file { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M6 2C4.897 2 4 2.897 4 4V20C4 21.103 4.897 22 6 22H18C19.103 22 20 21.103 20 20V8L14 2H6ZM6 4H13V9H18V20H6V4Z'/%3E%3C/svg%3E"); }
.icon-key { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M16.707 3.293C15.926 2.512 14.86 2 13.757 2C11.547 2 9.757 3.79 9.757 6C9.757 7.105 10.169 8.125 10.865 8.865L4 15.73V22H10.27L17.135 15.135C17.875 15.831 18.895 16.243 20 16.243C22.21 16.243 24 14.453 24 12.243C24 11.14 23.488 10.074 22.707 9.293L16.707 3.293ZM18.586 7.879C18.841 7.624 19 7.283 19 6.914C19 6.133 18.367 5.5 17.586 5.5C17.217 5.5 16.876 5.659 16.621 5.914L15 7.535V11L13 9H9V7L11.586 4.414C11.841 4.159 12 3.818 12 3.449C12 2.668 12.633 2.035 13.414 2.035C13.783 2.035 14.124 2.194 14.379 2.449L20.379 8.449C20.633 8.704 20.793 9.045 20.793 9.414C20.793 10.195 20.16 10.828 19.379 10.828C19.01 10.828 18.669 10.669 18.414 10.414L16 8V7L18.586 7.879Z'/%3E%3C/svg%3E"); }
.icon-manual { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M18 14V17H15V19H18V22H20V19H23V17H20V14H18Z'/%3E%3Cpath d='M15.932 5.00002L11.999 1L8.06799 5.00002L11.999 9L15.932 5.00002Z'/%3E%3Cpath d='M5.06802 8L1 12L5.06802 16L9.00002 12L5.06802 8Z'/%3E%3Cpath d='M15.932 15L11.999 19L8.06799 15L11.999 11L15.932 15Z'/%3E%3C/svg%3E"); }
.icon-arrow-right { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.025 1.975L11.975 3.025L19.925 11H2V13H19.925L11.975 20.975L13.025 22.025L24 12L13.025 1.975Z'/%3E%3C/svg%3E"); } 

.choice-group-container.checkbox-group {
    gap: 15px;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    padding-top: 60px;
}

.modal-content {
    background-color: #3a3a3a; /* A slightly less harsh dark background */
    color: #f0f0f0; /* Set a high-contrast default text color */
    margin: 5% auto;
    padding: 30px;
    border: 1px solid #555;
    width: 80%;
    max-width: 550px;
    border-radius: 10px; /* Slightly more rounded */
    position: relative;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

.modal-content h2 {
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #555;
    margin-bottom: 25px;
    font-size: 1.5rem; /* Use rem for better accessibility */
    color: #ffffff; /* Pure white for the heading */
}

.modal-content p {
    margin-bottom: 20px;
    font-size: 1rem;
    color: #dddddd; /* High-contrast light gray for paragraph text */
}

.modal-content .form-group {
    margin-bottom: 20px;
}

.modal-content .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #cccccc; /* Light gray for labels */
}

.modal-content select {
    width: 100%;
    padding: 12px;
    background-color: #2c2c2c;
    color: #f0f0f0;
    border: 1px solid #666;
    border-radius: 5px;
    font-size: 1rem;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
}

.close-button:hover,
.close-button:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}