/* style.css for CSS Clip Path Maker */

/* --- Main Layout & Preview Area --- */
.clip-path-maker-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Preview on left, controls on right */
    gap: 30px;
    padding: 20px;
    background-color: var(--card-bg-color); /* Assuming you have a CSS variable for card background */
    border-radius: 8px;
    box-shadow: var(--shadow-md); /* Assuming you have a CSS variable for shadow */
    margin-bottom: 30px;
}

@media (max-width: 992px) {
    .clip-path-maker-container {
        grid-template-columns: 1fr; /* Stack on smaller screens */
    }
}

.clip-path-preview-area {
    grid-column: 1 / 2; /* Occupy first column */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    /* Set a fixed aspect ratio or max-width/height for the preview area */
    /* Example: 16:9 aspect ratio */
    padding-bottom: 56.25%; /* 9 / 16 * 100% */
    height: 0;
    overflow: hidden;
    background-color: var(--bg-color-light); /* Light background for preview area */
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

.clipped-element-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Important for clip-path to work within bounds */
    display: flex; /* For centering the image if it doesn't fill */
    justify-content: center;
    align-items: center;
}

#clipped-element {
    width: 100%;
    height: 100%;
    /* Default background color from JS, or set here */
    background-color: #007bff; /* Default if no image */
    transition: clip-path 0.1s ease-out; /* Smooth transition for clip-path changes */
    position: relative; /* Must be positioned for clip-path to apply correctly within parent */
    display: flex;
    justify-content: center;
    align-items: center;
}

#clipped-element img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* or cover, depending on desired image scaling */
    display: block; /* Ensure image is a block element */
}

/* --- SVG Overlay for Drawing --- */
.clip-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto; /* Allow clicks/drags on SVG itself */
    cursor: crosshair;
}

/* SVG grid lines */
.svg-grid line {
    stroke: rgba(150, 150, 150, 0.3); /* Light grey, semi-transparent */
    stroke-width: 0.5;
}

/* SVG shapes (polygon, circle, ellipse, rect for inset) */
.svg-polygon-fill,
.svg-circle,
.svg-ellipse,
.svg-inset-rect {
    fill: rgba(0, 123, 255, 0.1); /* Light blue, semi-transparent fill */
    stroke: var(--primary-color); /* Blue border */
    stroke-width: 2;
    vector-effect: non-scaling-stroke; /* Keep stroke width constant on zoom */
}

.svg-polygon-line {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* Draggable points on SVG */
.svg-point {
    fill: var(--danger-color); /* Red points */
    stroke: white;
    stroke-width: 1;
    cursor: grab;
    transition: r 0.1s ease;
}

.svg-point:hover {
    r: 6; /* Slightly larger on hover */
    fill: var(--danger-color-dark);
}

.svg-point.active {
    cursor: grabbing;
    fill: var(--accent-color); /* Change color when dragging */
}

/* --- Controls Section --- */
.controls-grid {
    grid-column: 2 / 3; /* Occupy second column */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 992px) {
    .controls-grid {
        grid-column: 1 / 2; /* Stack on smaller screens */
    }
}

.control-section {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color-light);
}

.control-section h3 {
    margin-top: 0;
    color: var(--text-color-dark);
    margin-bottom: 15px;
    font-size: 1.1em;
}

.control-group {
    margin-bottom: 10px;
}

.control-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-color-secondary);
}

.control-group input[type="number"],
.control-group input[type="color"],
.control-group input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    background-color: var(--input-bg-color);
    color: var(--text-color-primary);
}

.control-group input[type="file"] {
    padding: 6px;
    cursor: pointer;
}

.radio-group label {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 8px;
    font-weight: normal;
    cursor: pointer;
}

.radio-group input[type="radio"] {
    margin-right: 8px;
    width: auto; /* Override 100% width */
}

.shape-controls {
    display: none; /* Hidden by default, shown by JS based on currentShape */
}

.shape-controls.active {
    display: block;
}

.hint-text {
    font-size: 0.85em;
    color: var(--text-color-secondary);
    margin-top: -5px;
    margin-bottom: 10px;
}

.points-display span {
    display: block;
    font-family: monospace;
    font-size: 0.8em;
    color: var(--text-color-secondary);
    margin-bottom: 3px;
}

/* --- Output Area & Buttons --- */
.output-area {
    grid-column: 1 / -1; /* Span all columns */
    margin-top: 20px;
}

.output-area label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color-dark);
}

#output-code {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-color-light);
    font-family: monospace;
    font-size: 0.9em;
    resize: vertical;
    min-height: 100px;
    color: var(--text-color-primary);
}

.main-action-buttons {
    grid-column: 1 / -1; /* Span all columns */
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
}

/* --- How to Use Section --- */
.how-to-use {
    padding: 20px;
    margin-top: 30px; /* Added in index.html already */
}

.how-to-use ol {
    list-style-type: decimal;
    padding-left: 25px;
    margin-bottom: 20px;
}

.how-to-use li {
    margin-bottom: 10px;
    color: var(--text-color-primary);
}

.how-to-use li strong {
    color: var(--text-color-dark);
}

.how-to-use ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.how-to-use p {
    color: var(--text-color-secondary);
    line-height: 1.6;
}

/* Reusable Button Styles (assuming from index.css or global stylesheet) */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn i {
    margin-right: 8px;
}

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

.btn-primary:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-bg-hover);
    transform: translateY(-1px);
}

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

.btn-danger:hover {
    background-color: var(--danger-color-dark);
    transform: translateY(-1px);
}

.btn-sm {
    padding: 8px 15px;
    font-size: 0.9em;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .clip-path-maker-container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 15px;
    }

    .clip-path-preview-area {
        padding-bottom: 75%; /* Adjust aspect ratio for mobile if needed, e.g., 4:3 */
    }

    .controls-grid {
        gap: 15px;
    }

    .main-action-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}