/* --- Import Font --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

/* --- CSS Variables (Customize Colors Here) --- */
:root {
    --primary-color: #007bff; /* Blue */
    --primary-hover: #0056b3;
    --secondary-color: #6c757d; /* Grey */
    --secondary-hover: #5a6268; /* Darker Grey */
    --background-color: #f8f9fa; /* Very light grey */
    --card-background: #ffffff; /* White */
    --text-color: #343a40;      /* Dark grey */
    --text-muted: #6c757d;     /* Lighter grey */
    --border-color: #dee2e6;    /* Light border */
    --success-color: #28a745;
    --danger-color: #dc3545;
    --font-family: 'Nunito', sans-serif;
    --border-radius: 8px; /* Consistent rounded corners */
    --input-height: 40px;
    --border-color-button: #cdd2d8; /* A slightly darker border for buttons */
    --primary-border-color: #0056b3; /* Border for primary button */
    --secondary-border-color: #5a6268; /* Border for secondary buttons */
}

/* --- General Styles --- */
* { box-sizing: border-box; }
body { font-family: var(--font-family); margin: 0; padding: 20px; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; font-size: 16px; }
h1, h2 { color: var(--text-color); font-weight: 700; text-align: center; margin-bottom: 1.5em; }
h1 { font-size: 2.2em; }
h2 { font-size: 1.6em; margin-top: 2em; }
label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9em; color: var(--text-muted); }
input, button, select, textarea { font-family: inherit; font-size: 1rem; }
small { font-size: 0.85em; color: var(--text-muted); }

/* --- Layout Containers --- */
.main-container { max-width: 1200px; margin: 20px auto; padding: 20px; background-color: var(--card-background); border-radius: var(--border-radius); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 992px) { .main-container { grid-template-columns: 2fr 1fr; } .action-section { position: sticky; top: 20px; align-self: start; } }
.upload-section, .action-section, .template-section, .instructions, .grid-margins, .background-options-section { padding: 20px; border-radius: var(--border-radius); background-color: var(--card-background); }
.instructions { background-color: #e9ecef; margin-bottom: 30px; border: 1px solid var(--border-color); }
.instructions p { margin: 0.5em 0; font-size: 0.95em; }

/* --- Photo Upload Area --- */
.photo-upload-area { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 25px; padding: 15px; background-color: var(--background-color); border-radius: var(--border-radius); border: 1px solid var(--border-color); }
.photo-upload-area label { margin-bottom: 0; flex-basis: 100%; font-weight: 700; }
.photo-upload-area input[type="file"] { flex-grow: 1; min-width: 200px; }
.secondary-button, .clear-slot-btn, .clear-bg-btn { padding: 8px 15px; color: white; border-radius: var(--border-radius); cursor: pointer; font-size: 0.9em; font-weight: 600; transition: background-color 0.2s ease, border-color 0.2s ease; white-space: nowrap; background-color: var(--secondary-color); border: 1px solid var(--secondary-border-color); }
.secondary-button:hover, .clear-slot-btn:hover, .clear-bg-btn:hover { background-color: var(--secondary-hover); border-color: #545b62; }

/* --- Photo Grid Editor --- */
.photo-grid-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-bottom: 30px; }
.photo-slot { border: 1px solid var(--border-color); padding: 15px; border-radius: var(--border-radius); background-color: var(--background-color); display: flex; flex-direction: column; gap: 15px; }
.preview-container { width: 100%; padding-top: 100%; position: relative; border: 1px dashed var(--border-color); border-radius: calc(var(--border-radius) / 2); overflow: hidden; background-color: #e9ecef; }
.preview-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: background-position 0.1s ease; }
.slot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.slot-header span { font-weight: 600; font-size: 0.9em; color: var(--text-muted); }
.clear-slot-btn { background-color: var(--danger-color); border-color: #b02a37; padding: 3px 8px; font-size: 0.8em; line-height: 1; }
.clear-slot-btn:hover { background-color: #c82333; border-color: #b02a37; }

/* --- Controls --- */
.controls-group { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.controls-group label { margin-bottom: 0; }
input[type="range"] { appearance: none; width: 100%; height: 8px; background: #e9ecef; border-radius: 5px; outline: none; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; background: var(--primary-color); border-radius: 50%; cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-color); border-radius: 50%; cursor: pointer; border: none; }
input[type="file"] { border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 0; width: 100%; background-color: #fff; cursor: pointer; font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; height: var(--input-height); overflow: hidden; }
input[type="file"]::file-selector-button { background-color: var(--secondary-color); color: white; border: none; border-right: 1px solid var(--secondary-border-color); padding: 0 15px; height: 100%; cursor: pointer; margin-right: 10px; font-family: inherit; font-weight: 600; transition: background-color 0.2s ease; flex-shrink: 0; }
input[type="file"]::file-selector-button:hover { background-color: var(--secondary-hover); }

/* --- Template Section --- */
.template-section { border-top: 1px solid var(--border-color); padding-top: 25px; margin-top: 25px; }
.template-selection { display: flex; flex-direction: column; gap: 20px; margin-bottom: 25px; }
.preset-selector, .template-upload { padding: 15px; background-color: var(--background-color); border-radius: var(--border-radius); border: 1px solid var(--border-color); }
.preset-selector label, .template-upload label { display: block; margin-bottom: 8px; font-weight: 600; }
#templatePresets { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: #fff; font-size: 1rem; height: var(--input-height); cursor: pointer; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px auto; }
.selected-template-preview-area { margin-top: 10px; text-align: center; min-height: 60px; }
.template-preview-small { max-width: 150px; max-height: 100px; height: auto; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: #e9ecef; }
.template-preview-small[src="#"] { display: none; }
.template-upload input[type="file"] { margin-bottom: 10px; }
#customTemplateUpload[style*="display: none"] { display: none !important; }

/* --- Grid Margin Styles --- */
.grid-margins { margin-top: 20px; padding: 20px; background-color: #e9ecef; border: 1px solid var(--border-color); border-radius: var(--border-radius); text-align: center; }
.grid-margins p { margin-top: 0; margin-bottom: 15px; font-weight: 600; color: var(--text-muted); }
.margin-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 15px; align-items: center; justify-content: center; max-width: 500px; margin: 0 auto 10px auto; }
.margin-input-group { display: flex; flex-direction: column; align-items: center; text-align: center; }
.margin-input-group label { font-size: 0.85em; margin-bottom: 4px; color: var(--text-muted); }
.margin-input-group input[type="number"] { width: 80px; height: var(--input-height); padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius); text-align: center; font-size: 0.9em; background-color: #fff; appearance: textfield; }
.margin-input-group input[type="number"]::-webkit-outer-spin-button, .margin-input-group input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.grid-margins input[type="number"]:disabled { background-color: #e9ecef; cursor: not-allowed; opacity: 0.7; }

/* --- Background Options Section --- */
.background-options-section { margin-top: 30px; border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 20px; }
.background-type-selector label { font-weight: 600; margin-bottom: 8px; display: block; }
.radio-group { display: flex; gap: 20px; align-items: center; }
.radio-group label { font-weight: normal; margin-bottom: 0; display: inline-flex; align-items: center; cursor: pointer; }
.radio-group input[type="radio"] { margin-right: 6px; accent-color: var(--primary-color); cursor: pointer; }
.background-setting { padding: 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--background-color); }
#bgColorSetting { display: flex; align-items: center; gap: 15px; }
#bgColorPicker { border: 1px solid var(--border-color); padding: 2px; height: 35px; width: 60px; cursor: pointer; background-color: #fff; border-radius: calc(var(--border-radius) / 2); }
#bgColorSetting label { margin-bottom: 0; }
#bgImageInput { margin-bottom: 15px; }
.bg-image-preview-area { margin-bottom: 15px; text-align: center; min-height: 50px; }
.bg-image-preview-small { max-width: 200px; max-height: 100px; height: auto; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: #e9ecef; display: inline-block; }
.bg-image-preview-small[src="#"] { display: none; }
.clear-bg-btn { display: block; margin: 10px auto 0 auto; /* Adjusted margin */ max-width: 200px; background-color: var(--danger-color); border-color: #bd2130; }
.clear-bg-btn:hover { background-color: #c82333; border-color: #bd2130; }
/* Styles for disabled background controls (optional) */
.background-setting[disabled], #bgColorPicker:disabled, #bgImageInput:disabled, .clear-bg-btn:disabled { opacity: 0.6; cursor: not-allowed; }
div[style*="opacity: 0.6"] { /* Target via inline style */ cursor: not-allowed; } /* Added cursor style */


/* --- Action Section --- */
.action-section h2 { margin-bottom: 1em; text-align: center; }
.live-preview-container { width: 100%; max-width: 400px; margin: 0 auto 25px auto; border: 2px dashed var(--primary-color); padding: 5px; background-color: var(--background-color); border-radius: var(--border-radius); }
#livePreviewCanvas { display: block; width: 100%; height: auto; max-height: 400px; }
#generateBtn, #downloadLink { display: block; width: 100%; padding: 12px 20px; font-size: 1.1em; font-weight: 600; text-align: center; border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; text-decoration: none; margin-bottom: 15px; }
#generateBtn { background-color: var(--primary-color); color: white; border: 1px solid var(--primary-border-color); }
#generateBtn:hover:not(:disabled) { background-color: var(--primary-hover); border-color: var(--primary-hover); }
#generateBtn:disabled { background-color: var(--secondary-color); border-color: var(--secondary-border-color); opacity: 0.7; cursor: not-allowed; }
#status { text-align: center; margin: 15px 0; font-weight: 600; min-height: 1.6em; }
#status.success { color: var(--success-color); } #status.error { color: var(--danger-color); } #status.loading { color: var(--secondary-color); }

/* --- Result Display --- */
.result-display { margin-top: 20px; }
.result-img { max-width: 100%; height: auto; display: block; margin: 0 auto 15px auto; border: 1px solid var(--border-color); border-radius: var(--border-radius); }
.result-img[src="#"] { display: none; }
.mobile-hint { text-align: center; margin-top: 10px; margin-bottom: 15px; padding: 8px; background-color: #e9ecef; border-radius: calc(var(--border-radius) / 2); border: 1px solid var(--border-color); }
.mobile-hint small { color: var(--text-muted); font-size: 0.85em; }
.mobile-hint b { color: var(--text-color); }
#downloadLink { background-color: var(--success-color); color: white; border: none; }
#downloadLink:hover { background-color: #218838; }
#downloadLink[style*="display: none"] { display: none !important; }

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    body { padding: 10px; }
    .main-container { padding: 15px; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.4em; }
    .photo-grid-editor { grid-template-columns: 1fr; }
    .margin-inputs { grid-template-columns: 1fr 1fr; }
    .live-preview-container { max-width: 95%; }
}