/* sketchpad/sketchpad.css
General Box Sizing for consistency */
*, *:before, *:after {
    box-sizing: inherit;
}

/* Overall container for the shortcode */
.gs-sketchpad-container {
    display: flex;
    flex-direction: column; /* Default to column for mobile */
    width:80%;
    max-width: 1000px; /* Max width for the whole component */
    border-radius: 3px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background-color: #f4eeea;
    /* Ensure the container doesn't get too tall for the viewport, while respecting its width */
    max-height: calc(100vh - 40px); /* Adjust based on your WordPress theme's surrounding padding */
    /* IMPORTANT CHANGES FOR HEIGHT: */
    height: auto; /* Revert to auto, letting content and min-height do their job better */
    min-height: 400px; /* Significantly increase min-height to ensure it's not too short */
    /* Center the container horizontally */
    margin: 20px auto; /* Add vertical margin (e.g., 20px) and auto for horizontal centering */
}

/* Removed .gs-sketchpad-coil styles */

.gs-sketchpad-drawing-board {
    flex-grow: 3;
    flex-shrink: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: transparent;
    overflow: hidden;
    flex-basis: 0; /* Helps flex-grow work proportionally */

    /* --- IMPORTANT CHANGES HERE TO FORCE SQUARE SHAPE --- */
    aspect-ratio: 1 / 1; /* This makes the drawing board a square based on its width */
    width: 100%; /* Allows its width to be responsive to its parent */
    height: auto; /* Let aspect-ratio define height based on width */
    min-width: 300px; /* Ensures a minimum size for the square */
    min-height: 300px; /* Ensures a minimum size for the square */
    max-width: 100%; /* Prevents it from getting too big relative to its container */
    max-height: 100%; /* Prevents it from getting too big relative to its container */
}

.gs-sketchpad-drawing-board canvas {
    width: 100%; /* Canvas fills its square parent */
    height: 100%; /* Canvas fills its square parent */
    display: block;
    /* Removed min/max width/height directly on canvas as parent handles sizing */
    /* Removed aspect-ratio and object-fit, as parent handles shape */
    border: 2px solid #e0e0e0;
}

.gs-sketchpad-tools-board {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: auto;
    padding: 10px 22px; /* Reduced vertical padding */
    background-color: transparent;
    overflow-y: auto;
    border-radius: 20px;
    flex-basis: content;
    min-height: 150px;
}

.gs-sketchpad-container .gs-sketchpad-tools-board {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.gs-sketchpad-container .gs-sketchpad-drawing-board canvas {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.gs-sketchpad-tools-board .gs-sketchpad-row {
    margin-bottom: 10px; /* Reduced vertical margin */
}

.gs-sketchpad-tools-board .gs-sketchpad-row:nth-child(1) { /* Size row */
    display: flex;
    align-items: center;
}

.gs-sketchpad-tools-board .gs-sketchpad-row:nth-child(2) { /* Colors row */
    margin-top: 5px; /* Adjust spacing between Size and Colors */
}

.gs-sketchpad-row .gs-sketchpad-options {
    list-style: none;
    margin: 5px 0 0 5px; /* Reduced top margin */
    padding: 0;
    display: flex; /* Make options flow in a row */
    align-items: center;
}

.gs-sketchpad-row:nth-child(1) .gs-sketchpad-options { /* Style for the Size options row */
    margin-left: 15px; /* Align with color labels */
}

.gs-sketchpad-row .gs-sketchpad-options .gs-sketchpad-option {
    display: flex;
    cursor: pointer;
    align-items: center;
    margin-bottom: 0; /* Remove vertical margin */
    padding: 0; /* Remove padding */
    margin-right: 5px; /* Space out the size options */
}

.gs-sketchpad-option:is(:hover, .active) img {
    filter: grayscale(20%);
}

.gs-sketchpad-option :where(span, label) {
    color: black;
    cursor: pointer;
    padding-left: 0; /* Remove padding */
    margin-right: 5px; /* Space out label */
}

.gs-sketchpad-row .title { /* Style for all labels */
    padding-left: 0;
    margin-right: 5px; /* Space out label */
}

.gs-sketchpad-option:is(:hover, .active) :where(span, label) {
    color: #f4130b;
}

/* New: Styling for the brush sizes */
.gs-sketchpad-sizes .gs-sketchpad-options {
    gap: 5px;
    margin-left: 15px; /* Align with color labels */
}

.gs-sketchpad-sizes .gs-sketchpad-option {
    height: 30px; /* Fixed height for the square */
    width: 30px; /* Fixed width for the square */
    border-radius: 0; /* No rounding for the square */
    background-color: black;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.gs-sketchpad-sizes .gs-sketchpad-option[data-size="1"] { width: 10px; }
.gs-sketchpad-sizes .gs-sketchpad-option[data-size="3"] { width: 14px; }
.gs-sketchpad-sizes .gs-sketchpad-option[data-size="8"] { width: 18px; }
.gs-sketchpad-sizes .gs-sketchpad-option[data-size="16"] { width: 22px; }
.gs-sketchpad-sizes .gs-sketchpad-option[data-size="28"] { width: 26px; }

.gs-sketchpad-sizes .gs-sketchpad-option:hover,
.gs-sketchpad-sizes .gs-sketchpad-option.selected {
    border-color: #4A90E2;
}


/* All color options are now a fixed size with consistent styling */
.gs-sketchpad-colors .gs-sketchpad-options,
.gs-sketchpad-custom-colors .gs-sketchpad-options {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
    padding-left: 0;
}

.gs-sketchpad-colors .gs-sketchpad-option,
.gs-sketchpad-custom-colors .gs-sketchpad-option {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    margin-top: 3px;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.gs-sketchpad-custom-colors .gs-sketchpad-option {
    background-color: #424242;
}

.gs-sketchpad-colors .gs-sketchpad-option:nth-child(1) { background-color: #ffffff; border-color: #848484; }
.gs-sketchpad-colors .gs-sketchpad-option:nth-child(2) { background-color: #101010; }
.gs-sketchpad-colors .gs-sketchpad-option:nth-child(3) { background-color: #ff2b83; }
.gs-sketchpad-colors .gs-sketchpad-option:nth-child(4) { background-color: #1fc827; }
.gs-sketchpad-colors .gs-sketchpad-option:nth-child(5) { background-color: #446fc0; }

.gs-sketchpad-colors .gs-sketchpad-option.selected,
.gs-sketchpad-custom-colors .gs-sketchpad-option.selected {
    border-color: #4A90E2;
    transform: scale(1.1);
}

.gs-sketchpad-custom-colors .gs-sketchpad-option input {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1;
}

.gs-sketchpad-custom-colors .gs-sketchpad-option input::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
    padding: 0;
}

.gs-sketchpad-custom-colors .gs-sketchpad-option input::-moz-color-swatch {
    border: none;
    border-radius: 50%;
    padding: 0;
}

.gs-sketchpad-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px; /* Reduced top margin */
}

.gs-sketchpad-buttons button {
    width: 80%;
    color: #fff;
    border: none;
    outline: none;
    font-size: 0.9rem;
    padding: 6px 0; /* Reduced vertical padding */
    margin-bottom: 8px; /* Reduced vertical margin */
    background: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gs-sketchpad-buttons .gs-sketchpad-clear-canvas {
    visibility: hidden;
    color: black;
    border: 2px solid #9fc39f;
    background-color: #f0f0f0;
}

.gs-sketchpad-clear-canvas:hover {
    color: #fff;
    background: #6c757d;
    border-color: #6c757d;
}

.gs-sketchpad-buttons .gs-sketchpad-black-canvas {
    color: rgb(255, 255, 255);
    background-color: black;
    border: 2px solid black;
}

.gs-sketchpad-black-canvas:hover {
    color: #fff;
    background: #333;
    border-color: #333;
}

.gs-sketchpad-buttons .gs-sketchpad-light-canvas {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border: 2px solid #ccc;
}

.gs-sketchpad-light-canvas:hover {
    color: #fff;
    background: #6c757d;
    border-color: #6c757d;
}

.gs-sketchpad-buttons .gs-sketchpad-save-img {
    background: #ff0055;
    color: white;
}
.gs-sketchpad-save-img:hover {
    background: rgb(199, 30, 86);
}
.gs-sketchpad-save-img:disabled {
    background: #ccc;
    cursor: not-allowed;
}


.gs-sketchpad-buttons .gs-sketchpad-invert-colors {
    background: #6c757d;
    color: #fff;
    border: 2px solid #6c757d;
}

.gs-sketchpad-invert-colors:hover {
    background: #565e64;
    border-color: #565e64;
}

/* NEW: Cooldown timer styles */
#status-message {
    display: none; /* Initially hidden */
    text-align: center;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #fff;
    background-color: #333;
    padding: 5px;
    border-radius: 5px;
}

#footer {
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: #eee;
    color: #555;
}

#message {
    margin-top: 10px; /* Reduced top margin */
    font-size: 0.85rem;
    color: #555;
    text-align: center;
    min-height: 20px;
}
#message2 a {
    color: #ff2b83;
}

@media (min-width: 768px) {
    .gs-sketchpad-container {
        flex-direction: row;
        max-height: 1200px;
        max-width: 1000px;
        aspect-ratio: auto;
    }
    .gs-sketchpad-tools-board {
        width: 250px;
        height: 100%;
        flex-shrink: 0;
        border-bottom-left-radius: 20px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        flex-grow: 0;
        flex-basis: auto;
        min-height: auto;
        padding: 10px 22px; /* Ensure vertical padding remains consistent for desktop */
    }

    .gs-sketchpad-drawing-board {
        flex-grow: 1;
        flex-shrink: 1;
        min-height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-basis: auto;

        /* --- IMPORTANT CHANGES HERE FOR DESKTOP SQUARE SHAPE --- */
        aspect-ratio: 1 / 1; /* Ensure it's square on desktop too */
        width: auto; /* Let flex-grow handle its width */
        height: 100%; /* Its height is now constrained by the container, and aspect-ratio makes it square */
        max-width: 100%; /* Ensure it doesn't break out */
        max-height: 100%; /* Ensure it doesn't break out */
    }

    .gs-sketchpad-drawing-board canvas {
        /* Keep border-radius adjustments here as needed */
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}

@media (min-width: 1200px) {
    .gs-sketchpad-container {
        max-width: 1200px;
    }
}
/* gsgallery-tools/sketchpad/sketchpad.css */

.gs-sketchpad-custom-colors {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens if needed */
    align-items: center;
    gap: 10px;
}

.gs-sketchpad-custom-colors-header {
    display: flex;
    align-items: center;
    gap: 8px; /* Spacing between the title, divider, and radio buttons */
}

.color-set-divider {
    font-weight: bold;
}

.color-set-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-btn {
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.radio-btn:hover {
    transform: scale(1.1);
}

.radio-btn[data-set="greyscale"] {
    border-color: #777777;
}

.radio-btn[data-set="neon"] {
    border-color: #ff00ff; /* A neon color for the outline */
}

/* Style for the selected (active) radio button */
.radio-btn.active {
    background-color: #000000; /* White fill to mimic a pressed-down look */
    border-width: 4px;
    transform: scale(0.95);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Greyscale radio button active state */
.radio-btn[data-set="greyscale"].active {
    border-color: #777777;
}

/* Neon radio button active state */
.radio-btn[data-set="neon"].active {
    border-color: #ff00ff;
}