/* css/style.css - Version 2.0 (Premium Redesign) */

/* 
 * 1. Anspruchsvolle, neue Farbpalette
*/
:root {
    --lrs-text-primary: #2d3748;      /* Dunkles Grau statt Schwarz */
    --lrs-text-secondary: #718096;   /* Weiches Grau für Untertitel */
    --lrs-accent-primary: #5A67D8;   /* Sattes Indigo */
    --lrs-accent-secondary: #4C51BF; /* Etwas dunkler für den Verlauf */
    --lrs-bg-main: #f7fafc;           /* Sehr heller, fast weißer Hintergrund */
    --lrs-bg-container: #ffffff;
    --lrs-border-color: #e2e8f0;     /* Heller, neutraler Rand */
    --lrs-success-color: #48BB78;    /* Sanfteres Grün */
    --lrs-error-color: #F56565;      /* Sanfteres Rot */
}

/* 
 * 2. Hauptcontainer mit weichem, mehrstufigem Schatten
*/
.logo-resizer-sozpaed {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--lrs-bg-container);
    padding: 40px !important;
    border-radius: 16px; /* Etwas rundere Ecken */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Moderner, weicher Schatten */
    max-width: 500px;
    width: 100%;
    text-align: center;
    margin: 40px auto;
    border: 1px solid var(--lrs-border-color); /* Feiner Rand für mehr Definition */
}

/* Scoped Reset bleibt wichtig */
.logo-resizer-sozpaed *, .logo-resizer-sozpaed *::before, .logo-resizer-sozpaed *::after {
    box-sizing: border-box; margin: 0; padding: 0; background: none; border: none; text-shadow: none; box-shadow: none;
}

/* Typografie mit neuen Farben */
.logo-resizer-sozpaed h1 {
    font-size: 2.2rem !important; font-weight: 700 !important; color: var(--lrs-text-primary) !important;
    margin-bottom: 10px !important; line-height: 1.2 !important;
}

.logo-resizer-sozpaed p {
    color: #555960 !important; line-height: 1.6 !important;
    margin-bottom: 30px !important; font-size: 1.3rem !important;
}

.logo-resizer-sozpaed form { display: flex !important; flex-direction: column !important; gap: 20px !important; }

/* Wichtig: Das Input-Feld unsichtbar machen */
.logo-resizer-sozpaed input[type="file"] { display: none !important; }

/* 
 * 3. Professioneller Upload-Bereich (solider Hintergrund statt gestrichelt)
*/
.logo-resizer-sozpaed .input-file-label {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    padding: 40px 20px !important;
    background-color: var(--lrs-bg-main) !important; /* Heller Hintergrund */
    border: 1px solid var(--lrs-border-color) !important; /* Solider, feiner Rand */
    border-radius: 12px !important; cursor: pointer !important;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.logo-resizer-sozpaed .input-file-label:hover {
    background-color: #ffffff !important;
    border-color: var(--lrs-accent-primary) !important;
}

.logo-resizer-sozpaed .input-file-label svg {
    width: 50px !important; height: 50px !important; margin-bottom: 15px !important;
    color: var(--lrs-accent-primary) !important;
    transition: transform 0.2s ease-in-out;
}
.logo-resizer-sozpaed .input-file-label:hover svg { transform: translateY(-4px); }

.logo-resizer-sozpaed .input-file-label span {
    font-weight: 600 !important; font-size: 1.2rem !important; color: var(--lrs-text-primary) !important;
}

/* Feedback-Nachrichten */
.logo-resizer-sozpaed #logo-resizer-feedback { font-size: 1rem; font-weight: 600; }
.logo-resizer-sozpaed #logo-resizer-feedback.success { color: var(--lrs-success-color); }
.logo-resizer-sozpaed #logo-resizer-feedback.error { color: var(--lrs-error-color); }
.logo-resizer-sozpaed #logo-resizer-feedback.processing { color: var(--lrs-accent-primary); }


/* 
 * 4. Moderne Buttons mit klarer Hierarchie
*/
.logo-resizer-sozpaed .button-group { display: flex !important; justify-content: center !important; gap: 15px !important; align-items: center !important; }
.logo-resizer-sozpaed button { font-family: inherit !important; text-transform: none !important; -webkit-appearance: none; }

.logo-resizer-sozpaed .submit-button {
    padding: 15px 30px !important;
    background-image: linear-gradient(45deg, var(--lrs-accent-secondary), var(--lrs-accent-primary)) !important;
    color: white !important; border-radius: 8px !important; cursor: pointer !important;
    font-size: 1.2rem !important; font-weight: 600 !important;
    border: none !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.logo-resizer-sozpaed .submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Minimalistischer "Ghost-Button" für Reset */
.logo-resizer-sozpaed .reset-button {
    padding: 13px 25px !important; background-color: transparent !important;
    color: var(--lrs-text-secondary) !important; border: 2px solid transparent !important; /* Unsichtbarer Rand für korrektes Sizing */
    border-radius: 8px !important; cursor: pointer !important; font-size: 1.1rem !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.logo-resizer-sozpaed .reset-button:hover {
    background-color: var(--lrs-bg-main) !important;
    color: var(--lrs-text-primary) !important;
}

@media (max-width: 600px) {
    .logo-resizer-sozpaed .button-group { flex-direction: column-reverse !important; }
}