/* -------------------------------
   THEME VARIABLES
--------------------------------*/
:root {
    --bg: #f5f7fa;
    --text: #222;
    --card-bg: #ffffff;
    --border: #d3d7de;
    --accent: #6a8dff;
    --subtle: #666;
}

body[data-theme="dark"] {
    --bg: #121212;
    --text: #e6e6e6;
    --card-bg: #1e1e1e;
    --border: #3a3a3a;
    --accent: #8da1ff;
    --subtle: #999;
}

/* -------------------------------
   GLOBAL STYLES
--------------------------------*/
body {
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 600px;
    margin: 60px auto;
    text-align: center;
}

h1 {
    font-size: 32px;
    margin-bottom: 5px;
    color: var(--text);
    transition: color 0.3s ease;
}

.subtitle {
    color: var(--subtle);
    margin-bottom: 30px;
}

/* -------------------------------
   THEME TOGGLE SWITCH
--------------------------------*/
.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-label {
    color: var(--text);
    font-size: 14px;
    transition: color 0.3s ease;
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: #777;
    border-radius: 20px;
    top: 0; left: 0;
    right: 0; bottom: 0;
    transition: .3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
}

input:checked + .slider {
    background-color: var(--accent);
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* -------------------------------
   FORM CARD
--------------------------------*/
.card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-align: left;
    transition: background 0.3s ease;
}

h2 {
    font-size: 20px;
    color: var(--text);
    margin-top: 25px;
}

label {
    display: block;
    margin-top: 12px;
    margin-bottom: 4px;
    color: var(--subtle);
    font-weight: 500;
    transition: color 0.3s ease;
}

input[type="text"],
input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    background: var(--bg);
    color: var(--text);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    box-sizing: border-box;
}

/* Only the description textarea should be large */
textarea#descInput {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    background: var(--bg);
    color: var(--text);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="file"]:focus,
textarea#descInput:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(106,141,255,0.25);
}

button {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

button:hover {
    background: #5874e8;
}

button:active {
    transform: scale(0.98);
}

/* -------------------------------
   Background
--------------------------------*/

/* Add to the top of `style.css` (or merge into the existing :root / dark theme blocks) */
:root {
    --bg-overlay: rgba(255,255,255,0.55); /* light overlay */
}

body[data-theme="dark"] {
    --bg-overlay: rgba(0,0,0,0.55); /* dark overlay */
}

/* Replace the existing body background rules in `style.css` with this */
body {
    background-color: var(--bg); /* fallback color */
    /* gradient overlay first, then the image */
    background-image:
        linear-gradient(var(--bg-overlay), var(--bg-overlay)),
        url('/static/background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    font-family: "Inter", Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Optional: slightly dim the container to improve readability */
.container {
    max-width: 600px;
    margin: 60px auto;
    text-align: center;
    /* subtle backdrop to improve contrast */
    background: rgba(255,255,255,0.02);
    padding: 0 20px;
}

/* For dark theme, you may want a stronger container backdrop */
body[data-theme="dark"] .container {
    background: rgba(0,0,0,0.25);
    border-radius: 12px;
    padding: 20px;
}

/* -------------------------------
   IMAGE PREVIEW
--------------------------------*/
/* Image preview inside the form (centered, responsive, not too large) */
.form-image-preview {
    text-align: center;
    margin-bottom: 16px;
}

.example-img {
    display: inline-block;
    width: clamp(160px, 500px); /* minimum 160px, preferred 60% of container, max 360px */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    object-fit: contain;
    max-width: 100%;
}

/* -------------------------------
   FILE INPUT ROW + CLEAR BUTTON
--------------------------------*/
.file-row {
    display: flex;
    gap: 8px;
    align-items: center; /* vertical center alignment */
}

.file-row input[type="file"] {
    flex: 1 1 auto;
    margin-bottom: 0; /* override global bottom margin so it's horizontally aligned with the button */
    padding: 8px; /* ensure input height is similar to the button */
    box-sizing: border-box;
}

/* Input-row: similar to file-row but for text URL inputs */
.input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-row input[type="text"] {
    flex: 1 1 auto;
    margin-bottom: 0; /* align with the clear button */
    padding: 8px;
    box-sizing: border-box;
}

.clear-btn {
    display: none; /* JS will show when a file is selected */
    width: 48px; /* slightly smaller */
    height: 34px; /* match input height */
    padding: 6px 6px;
    border-radius: 8px;
    border: 1px solid #b93a3a;
    background: #e53a3a; /* red background */
    color: white;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    align-self: center;
    margin-top: 0; /* override the generic button margin */
    flex: 0 0 auto; /* don't grow/shrink */
}

.clear-btn:hover {
    background: #c73131;
}

body[data-theme="dark"] .clear-btn {
    /* darker border for dark theme */
    border-color: rgba(0,0,0,0.25);
}

/* -------------------------------
   SOCIAL BUTTONS
--------------------------------*/
.social-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    color: var(--text);
    background: transparent;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.08s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.social-btn img {
    width: 18px;
    height: 18px;
    display: block;
}

/* Discord style */
.social-btn#discordBtn {
    background: #5865F2; /* Discord blurple */
    color: white;
    border-color: rgba(88,101,242,0.18);
}
.social-btn#discordBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(88,101,242,0.14);
}

/* GitHub style */
.social-btn#githubBtn {
    background: #24292f; /* GitHub dark */
    color: white;
    border-color: rgba(0,0,0,0.25);
}
.social-btn#githubBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}

/* Make social buttons full width on small screens */
@media (max-width: 480px) {
    .social-buttons { gap: 8px; }
    .social-btn { flex: 1 1 100%; justify-content: center; }
}

/* -------------------------------
   ADVANCED PAGE ADDITIONS
--------------------------------*/

.counter {
    float: right;
    font-size: 12px;
    color: var(--subtle);
    margin-left: 8px;
}

.counter.over-limit {
    color: #ff6b6b; /* red */
    font-weight: 700;
}

.tag-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: #2f9d6e; /* match .green-btn */
    color: #ffffff;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid rgba(47,157,110,0.12);
    box-shadow: 0 6px 18px rgba(47,157,110,0.08);
    transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.tag-chip:hover {
    transform: translateY(-2px);
    background: #27885c; /* slightly darker on hover */
}

/* Dark theme variant: keep green but slightly brighter/sharper contrast */
body[data-theme="dark"] .tag-chip{
    background: #2f9d6e;
    color: #ffffff;
    border: 1px solid rgba(47,157,110,0.18);
    box-shadow: 0 6px 18px rgba(47,157,110,0.12);
}

.tag-input-row input[type="text"]{
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/* Square preview container (1:1) - image inside keeps aspect ratio using object-fit */
.image-preview-box{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 100%;
    max-width: 480px; /* same cap as earlier */
    aspect-ratio: 1 / 1; /* force a square box */
    border: 1px dashed var(--border);
    border-radius:8px;
    padding:8px;
    background: transparent;
    margin: 0 auto; /* center */
    overflow: hidden; /* ensure image doesn't overflow */
}

.image-preview-box img{
    width: 100%;
    height: 100%;
    object-fit: contain; /* preserve aspect ratio; will fully fill for 1:1 images */
    display: block;
}

.no-image{
    color: var(--subtle);
    font-size: 14px;
}

.error-banner{
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff1f0;
    color: #a61b1b;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
}

button.danger{
    background: #e53a3a;
    color: white;
    border: none;
}

button.danger:hover{ background: #c73131; }

/* Ensure image preview matches input width (approx) */
@media (min-width: 640px){
    .card .image-preview-box img{ max-width: 480px; }
}
@media (max-width: 639px){
    .card .image-preview-box img{ max-width: 100%; }
}

/* Toggle row layout for the (single) Advanced Editor button */
.toggle-row{
    margin-bottom: 12px;
    text-align: center;
}

/* Green button used for the Advanced Editor link on the main page */
.green-btn{
    display: inline-block;
    padding: 10px 16px;
    background: #2f9d6e; /* green */
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 700;
    border: none;
    box-shadow: 0 6px 18px rgba(47,157,110,0.12);
}

.green-btn:hover{
    background: #27885c;
    transform: translateY(-1px);
}

/* Keep the existing .mode-toggle styles if present consistent */
.mode-toggle-adv{
    display: inline-block;
}

/* Description textarea should match other inputs */
textarea#descInput {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    background: var(--bg);
    color: var(--text);
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}

/* Container for fields that need an inset counter */
.field-with-counter{
    position: relative;
}

.counter-inset{
    position: absolute;
    right: 10px;
    top: 46%; /* slightly above exact center to visually center in many fonts */
    transform: translateY(-50%);
    background: rgba(0,0,0,0.04);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--subtle);
}

.counter-inset.over-limit{
    color: #ff6b6b;
    background: rgba(255,107,107,0.06);
    font-weight: 700;
}

/* Counter inset for regular inputs (slightly shifted if needed) */
.counter-inset-input{
    right: 8px;
    top: 44%; /* nudge a bit higher for smaller fields */
}

/* Ensure the description counter doesn't sit below the field */
.counter-inset#descCounter{
    right: 10px;
}

/* Select (thumbnail size) styling: make the dropdown match other inputs and the theme */
select#advResize,
select[name="resize"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* simple custom arrow using layered gradients so the icon adapts to theme color */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px; /* space for the arrow */
}

select#advResize:focus,
select[name="resize"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(106,141,255,0.12);
}

/* Ensure options inherit readable colors in some browsers */
select#advResize option,
select[name="resize"] option {
    background: var(--card-bg);
    color: var(--text);
}

/* Style the native "Choose file" button so it matches the site's inputs/buttons */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
    padding: 8px 12px;
    margin-right: 8px; /* space between button and filename */
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
    line-height: 1;
}

input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
    background: rgba(106,141,255,0.06); /* subtle accent on hover */
    border-color: var(--accent);
}

input[type="file"]::-webkit-file-upload-button:focus,
input[type="file"]::file-selector-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(106,141,255,0.12);
}