/* --- RESET & VARIABLES --- */
:root {
    /* Color Palette */
    --bg-page: #F9FAFB;
    --bg-card: #FFFFFF;
    
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-light: #9CA3AF;
    
    /* Brand Colors */
    --primary: #3B82F6;
    --primary-hover: #2563EB;
    --primary-light: #EFF6FF;
    --secondary: #275bad;

    /* Secondary Button Colors (Neutral) */
    --secondary-btn-bg: #e5e6e79f;
    --secondary-btn-text: #374151;
    --secondary-btn-hover: #E5E7EB;

    /* Borders & Shadows */
    --border-subtle: #dbdee2; 
    /* Uniform floating shadow */
    --shadow-card: 0 0 20px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Force inheritance for form elements */
button, input, textarea, select {
    font-family: inherit;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- LAYOUT --- */
.app-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 96px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-header, 
.info-section, 
.feedback-section {
    max-width: 672px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* --- TYPOGRAPHY --- */
.app-header {
    text-align: center;
    margin-bottom: 48px;
}

h1 {
    font-size: 1.875rem;
    font-weight: 800;    
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 12px;
    
    /* Flexbox alignment for icon + text */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.header-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

.sub-headline {
    font-size: 1.125rem;
    font-weight: 400;    
    color: var(--text-secondary);
}

/* --- CARD COMPONENT --- */
.card {
    background-color: var(--bg-card);
    width: 100%;
    padding: 32px;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0,0,0,0.02);
    margin-bottom: 32px;
}

/* --- UPLOAD ZONE --- */
.upload-zone {
    border: 2px dashed var(--border-subtle);
    border-radius: 12px;
    background-color: var(--bg-page);
    height: 256px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.upload-zone:hover, .upload-zone.drag-active {
    border-color: var(--primary);
    background-color: var(--primary-light);
}

.upload-content {
    text-align: center;
    pointer-events: auto;
}

.upload-icon {
    width: 48px;
    height: 48px;
    color: var(--text-light);
    margin-bottom: 16px;
    transition: color 0.2s;
}

.upload-zone:hover .upload-icon {
    color: var(--primary);
}

.upload-text {
    font-size: 1.125rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.upload-text strong {
    color: var(--primary);
    font-weight: 600;
}

/* --- TRUST INDICATORS (Updated) --- */
.trust-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
    margin-bottom: 32px;
}

.indicator-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--secondary-btn-bg);
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 600;
    transition: all 0.2s ease;
}

.indicator-item:hover {
    background-color: var(--bg-page);
    border-color: var(--border-subtle);
}

.indicator-icon {
    width: 16px;
    height: 16px;
    color: #10B981;
    flex-shrink: 0;
}

/* --- HELPER & POPOVER --- */
.helper-section {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.6;
}

.attention-icon {
    width: 16px;
    height: 16px;
    filter: invert(66%) sepia(11%) saturate(222%) hue-rotate(178deg) brightness(93%) contrast(88%); 
    vertical-align: text-bottom;
    margin-right: 4px;
    transition: all 0.2s;
    opacity: 0.8;
}

.helper-section:hover .attention-icon { opacity: 1; }

.popover-wrapper {
    display: inline-block;
    position: relative;
}

.popover-trigger {
    color: var(--text-light);
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color 0.2s;
}

.popover-trigger:hover { color: var(--text-secondary); }

.popover-content {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    max-width: 90vw;
    padding: 8px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-subtle);
    z-index: 50;
    margin-bottom: 12px;
    text-align: center;
}

.popover-wrapper:hover .popover-content {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

.popover-content img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    display: block;
}

/* --- LOADING STATE --- */
.loading-container {
    height: 256px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 500;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--primary-light);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- RESULTS AREA --- */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
    align-items: start;
}

.result-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: #000; 
}

.result-item img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 600px;
    object-fit: contain;
}

/* --- PROTECTION: PREVENT RIGHT CLICK/SAVE (MISSING PART ADDED) --- */
#processedImg {
    /* Prevents the user from dragging the image to their desktop */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none; /* Disables long-press menu on iOS */
}

.image-label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    font-weight: 600;
}

.label-success { background: rgba(16, 185, 129, 0.9); }

/* --- ACTIONS & BUTTONS --- */
.action-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 32px;
}

.button-group {
    display: flex;
    gap: 16px;
    width: 80%;
}
.button-group > * { flex: 1; }

.download-link { text-decoration: none; display: block; }

.large-btn {
    padding: 16px 24px;
    font-size: 1rem;
    width: 100%;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.large-btn:active { transform: scale(0.98); }

.btn-icon { width: 20px; height: 20px; stroke: currentColor; }

.btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4);
}
.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-1px); }

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

.troubleshoot-wrapper-small {
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 8px;
}
.troubleshoot-link {
    color: var(--text-secondary);
    font-weight: 500;
    cursor: help;
    border-bottom: 1px dashed var(--border-subtle);
}

/* --- MODAL STYLES (VERIFIED) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

.modal-card {
    background: white;
    padding: 32px;
    width: 100%;
    max-width: 400px;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    position: relative;
    text-align: center;
    margin: 20px;
}

.close-modal {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-light);
    cursor: pointer;
}

.icon-bg {
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

.modal-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.modal-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.modal-form input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 16px;
    font-family: inherit;
}

.modal-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.privacy-note {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 12px;
}


/* --- INFO & FEEDBACK --- */
.info-section { padding: 0 16px; }
.info-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.checklist { list-style: none; }
.checklist li { display: flex; margin-bottom: 12px; color: var(--text-secondary); }
.check-icon { width: 20px; height: 20px; color: var(--primary); margin-right: 12px; flex-shrink: 0; }

.feedback-section { margin-top: 48px; text-align: center; border-top: 1px solid var(--border-subtle); padding-top: 24px; }
.small-btn { padding: 8px 16px; font-size: 0.875rem; border-radius: 6px; background-color: var(--primary); color: white; border: none; cursor: pointer; }
textarea { width: 100%; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 8px; margin-bottom: 8px; resize: vertical; }

@keyframes smoothReveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
#feedbackForm { animation: smoothReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- FEEDBACK STEP STYLES --- */

/* Small 'Download Started' text */
.download-started-text {
    font-size: 0.85rem;
    color: #10B981; /* Success Green */
    font-weight: 600;
    margin-bottom: 4px;
    margin-top: -10px;
}

/* Star Container */
.star-rating-container {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.stars {
    display: flex;
    gap: 8px;
    cursor: pointer;
}

/* Individual Star */
.star-icon {
    width: 36px;
    height: 36px;
    color: var(--border-subtle); /* Default Empty Color */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover State: Highlights stars up to the hovered one */
.stars:hover .star-icon {
    color: var(--border-subtle); /* Reset */
}
.stars .star-icon:hover,
.stars .star-icon:hover ~ .star-icon {
    /* CSS trick: This selects everything AFTER hover, we want BEFORE.
       So we actually fill ALL on hover, then unfill the ones after.
       Actually, JS is better for 'locking' the fill, 
       but for simple hover we can use fill: #FBBF24 */
}

/* The Filled Class (Applied by JS) */
.star-icon.filled {
    color: #FBBF24; /* Amber 400 */
    fill: #FBBF24;
    transform: scale(1.1);
}

/* Smooth Reveal Animation */
.feedback-details-hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease-out;
}

.feedback-details-visible {
    max-height: 200px; /* Arbitrary large height */
    opacity: 1;
    margin-top: 16px;
}

/* Textarea Styling override for modal */
#feedbackDetails textarea {
    font-size: 0.9rem;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    width: 100%;
    margin-bottom: 12px;
}

/* --- HEARTBEAT ANIMATION --- */
.beating-heart-icon {
    width: 40px;
    height: 40px;
    color: #EF4444; /* Red color */
    animation: heartbeat 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    display: block;
    margin: 0 auto;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.25); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* Secondary Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--text-light);
    font-size: 0.85rem;
    margin-top: 12px;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}
.btn-ghost:hover {
    color: var(--text-secondary);
}

/* Smooth Fade In Animation for Steps */
.fade-in-step {
    animation: fadeInStep 0.4s ease-out forwards;
}

@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 640px) {
    .app-container { padding-top: 48px; padding-left: 16px; padding-right: 16px; }
    .card { padding: 24px; }
    .results-grid { grid-template-columns: 1fr; }
    .button-group { flex-direction: column; }
    h1 { font-size: 1.5rem; }
    .trust-indicators { gap: 8px; }
    .indicator-item { font-size: 0.75rem; padding: 6px 12px; }
}