@font-face {
    font-family: 'Crass';
    src: url('font/crass.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.canvas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background: var(--pico-card-background-color, #2a2a2a);
    border-radius: var(--pico-border-radius, 0.25rem);
}

#logoCanvas {
    border: 2px solid var(--pico-border-color, #444);
    display: block;
    max-width: 100%;
    height: auto;
}

/* Style export button below canvas */
.grid > section:last-child {
    display: flex;
    flex-direction: column;
}

#exportBtn {
    margin-top: 1rem;
    width: auto;
}

/* Hide background color group when transparent or newspaper background is active */
#backgroundColorGroup[style*="display: none"] {
    display: none !important;
}

/* Grid layout: controls take 1/3, canvas takes 2/3 */
.grid {
    grid-template-columns: 1fr 2fr;
}

/* Smaller font size for controls section */
.grid > section:first-child {
    font-size: 0.7rem;
}

/* Add borders and padding to fieldsets */
.grid > section:first-child fieldset {
    border: 1px solid var(--pico-muted-border-color) !important;
    border-radius: 0.25rem !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.grid > section:first-child fieldset legend {
    padding: 0 0.5rem !important;
    font-weight: 600 !important;
}

/* Reduce input element sizes in controls section */
.grid > section:first-child input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
.grid > section:first-child select,
.grid > section:first-child button {
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
    height: auto;
    min-height: 2rem;
}

/* Display text inputs in uppercase to match canvas */
#topText,
#bottomText {
    text-transform: uppercase;
}

/* Make file input smaller */
.grid > section:first-child input[type="file"] {
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
    height: auto;
    min-height: 2rem;
}

/* Style the file input button (browser-specific) */
.grid > section:first-child input[type="file"]::file-selector-button {
    padding: 0.3rem 0.5rem;
    font-size: 0.65rem;
    margin-right: 0.5rem;
    height: auto;
    min-height: 1.8rem;
}

/* Make checkboxes and switches smaller and square - override Pico switch styling */
.grid > section:first-child input[type="checkbox"],
.grid > section:first-child input[role="switch"] {
    width: 0.9rem !important;
    height: 0.9rem !important;
    min-height: 0.9rem !important;
    min-width: 0.9rem !important;
    margin-right: 0.5rem;
    border-radius: 0.2rem !important;
    flex-shrink: 0;
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    background: var(--pico-background-color) !important;
    border: 1px solid var(--pico-border-color) !important;
    position: relative !important;
}

/* Remove Pico's switch track and slider */
.grid > section:first-child input[role="switch"]::before,
.grid > section:first-child input[role="switch"]::after {
    display: none !important;
}

/* Style checked state */
.grid > section:first-child input[type="checkbox"]:checked,
.grid > section:first-child input[role="switch"]:checked {
    background: var(--pico-primary-background) !important;
    border-color: var(--pico-primary-border) !important;
}

.conditional-group {
	margin-top: calc(var(--pico-spacing) * 2);
}

/* Ensure grid layout works well on mobile */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}