/* Meme Maker CSS - v1.3.8 */

/* Load bundled Anton font to match Pillow rendering */
@font-face {
    font-family: 'MemeFont';
    src: url('../fonts/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables (defaults - can be overridden via inline style on :root) */
:root {
    --meme-primary: #667eea;
    --meme-secondary: #764ba2;
    --meme-gradient: linear-gradient(135deg, var(--meme-primary), var(--meme-secondary));
    --meme-text-dark: #1a1a2e;
    --meme-text-light: #6b7280;
    --meme-bg-light: #f8fafc;
    --meme-bg-white: #fff;
    --meme-shadow: 0 10px 40px rgba(0,0,0,.12);
    --meme-shadow-sm: 0 4px 12px rgba(0,0,0,.08);
    --meme-radius: 16px;
    --meme-radius-sm: 10px;
}

/* Page wrapper (not used in embed mode) */
.meme-maker-page {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--meme-gradient);
    min-height: 100vh;
    padding: 2rem 1rem;
    margin: 0;
    box-sizing: border-box;
}
.meme-maker-page *, .meme-maker-container * { box-sizing: border-box; }

/* Container */
.meme-maker-container {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--meme-bg-white);
    border-radius: var(--meme-radius);
    padding: 2.5rem;
    box-shadow: var(--meme-shadow);
}

/* Header */
.meme-maker-header { text-align: center; margin-bottom: 2rem; }
.meme-maker-title { color: var(--meme-text-dark); font-size: 2.25rem; font-weight: 700; margin: 0 0 .5rem; }
.meme-maker-subtitle { color: var(--meme-text-light); font-size: 1rem; margin: 0; }

/* Navigation */
.meme-maker-nav {
    display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e5e7eb;
}
.meme-maker-nav a {
    color: var(--meme-text-light); text-decoration: none; font-weight: 500;
    font-size: .9rem; padding: .5rem 1rem; border-radius: var(--meme-radius-sm);
    transition: all .2s;
}
.meme-maker-nav a:hover, .meme-maker-nav a.active {
    color: var(--meme-primary); background: rgba(102,126,234,.1);
}

/* Forms */
.meme-form-group { margin-bottom: 1.5rem; }
.meme-form-label { display: block; margin-bottom: .5rem; color: var(--meme-text-dark); font-weight: 600; font-size: .9rem; }
.meme-form-control {
    width: 100%; padding: .875rem 1rem; border: 2px solid #e5e7eb;
    border-radius: var(--meme-radius-sm); font-size: 1rem; font-family: inherit;
    background: var(--meme-bg-white); transition: border-color .2s, box-shadow .2s;
}
.meme-form-control:focus { outline: none; border-color: var(--meme-primary); box-shadow: 0 0 0 3px rgba(102,126,234,.15); }
.meme-form-control::placeholder { color: #9ca3af; }
.meme-form-help { font-size: .85rem; color: var(--meme-text-light); margin-top: .375rem; }
.meme-form-error { color: #dc2626; font-size: .85rem; margin-top: .375rem; }
.meme-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .meme-form-row { grid-template-columns: 1fr; } }

/* Checkbox */
.meme-checkbox-group { display: flex; align-items: center; gap: .5rem; }
.meme-checkbox { width: 1.25rem; height: 1.25rem; accent-color: var(--meme-primary); }

/* Buttons */
.meme-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--meme-gradient); color: #fff; padding: .875rem 2rem; border: none;
    border-radius: var(--meme-radius-sm); font-size: 1rem; font-weight: 600;
    font-family: inherit; cursor: pointer; text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.meme-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102,126,234,.35); color: #fff; }
.meme-btn:active { transform: translateY(0); }
.meme-btn-full { width: 100%; }
.meme-btn-secondary { background: var(--meme-bg-light); color: var(--meme-text-dark); }
.meme-btn-secondary:hover { box-shadow: var(--meme-shadow-sm); color: var(--meme-text-dark); }
.meme-btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.meme-btn-group { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Alerts */
.meme-alerts { margin-bottom: 1.5rem; }
.meme-alert { padding: 1rem 1.25rem; border-radius: var(--meme-radius-sm); margin-bottom: .75rem; font-size: .95rem; }
.meme-alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.meme-alert-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.meme-alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* Tags */
.meme-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.meme-tag {
    display: inline-block; padding: .25rem .75rem; background: var(--meme-bg-light);
    color: var(--meme-text-light); border-radius: 9999px; font-size: .8rem; text-decoration: none;
}
.meme-tag:hover { background: var(--meme-primary); color: #fff; }

/* Search Bar */
.meme-search-bar { display: flex; gap: 1rem; margin-bottom: 2rem; }
.meme-search-bar input[type="text"] { flex: 1; }
.meme-search-bar button { flex-shrink: 0; }

/* Grid & Cards */
.meme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.meme-card-wrapper { display: flex; flex-direction: column; gap: .25rem; }
.meme-card {
    background: var(--meme-bg-light); border-radius: var(--meme-radius-sm); overflow: hidden;
    box-shadow: var(--meme-shadow-sm); text-decoration: none; color: inherit; display: block;
    padding-top: 0.5rem;
    transition: transform .2s, box-shadow .2s;
}
.meme-card:hover { transform: translateY(-4px); box-shadow: var(--meme-shadow); }
.meme-card-image { width: 100%; height: 200px; object-fit: contain; background: var(--meme-bg-light); }
.meme-card-body { padding: 1rem 1.25rem; }
.meme-card-title { color: var(--meme-text-dark); font-weight: 600; margin: 0 0 .5rem; font-size: 1rem; }
.meme-card-text { color: var(--meme-text-light); font-size: .875rem; margin: .25rem 0; }
.meme-card-meta { font-size: .75rem; color: #9ca3af; margin-top: .75rem; }

/* Meme Display */
.meme-display { position: relative; display: inline-block; margin: 0 auto; text-align: center; width: 100%; }
.meme-display-wrapper { position: relative; display: inline-block; max-width: 100%; }
.meme-image { max-width: 100%; height: auto; border-radius: var(--meme-radius-sm); box-shadow: var(--meme-shadow-sm); }
.meme-text-overlay {
    position: absolute; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 900;
    font-family: 'MemeFont', Impact, 'Arial Black', sans-serif;
    font-size: clamp(1.25rem, 4vw, 2.5rem); text-transform: uppercase; letter-spacing: .05em;
    max-width: 90%; word-wrap: break-word; text-align: center; line-height: 1.2; pointer-events: none;
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 3px 6px rgba(0,0,0,.5);
}
.meme-text-top { top: 1rem; }
.meme-text-bottom { bottom: 1rem; }
.meme-info { margin-top: 2rem; padding: 1.5rem; background: var(--meme-bg-light); border-radius: var(--meme-radius-sm); text-align: center; }
.meme-info-text { color: var(--meme-text-light); margin: .25rem 0; font-size: .9rem; }
.meme-disclaimer { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .75rem; color: var(--meme-text-light); margin-top: .5rem; }
.meme-disclaimer.align-image { width: fit-content; margin: .35rem auto 0; }
.meme-info-icon { font-size: .85rem; line-height: 1; }
.meme-flag-form { display: inline; }
.meme-flag-button { background: none; border: none; padding: 0; color: var(--meme-primary); font-size: .85rem; cursor: pointer; line-height: 1; }
.meme-flag-button:hover { color: var(--meme-secondary); }
.meme-flag-icon { font-size: .85rem; line-height: 1; color: var(--meme-text-light); }
.meme-tooltip { position: relative; cursor: default; }
.meme-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: 1.4rem;
    transform: translateX(-50%) translateY(-4px);
    background: #111827;
    color: #f9fafb;
    font-size: .7rem;
    padding: .35rem .5rem;
    border-radius: .35rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 10;
}
.meme-tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Empty State */
.meme-empty { text-align: center; padding: 4rem 2rem; color: var(--meme-text-light); }
.meme-empty-icon { font-size: 4rem; margin-bottom: 1rem; }
.meme-empty-title { color: var(--meme-text-dark); font-size: 1.5rem; font-weight: 600; margin: 0 0 .5rem; }
.meme-empty-text { margin: 0 0 1.5rem; }

/* Template Detail */
.template-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 768px) { .template-hero { grid-template-columns: 1fr; } }
.template-preview { text-align: center; }
.template-preview img { max-width: 100%; border-radius: var(--meme-radius-sm); box-shadow: var(--meme-shadow); }
.template-info { padding: 1rem 0; }
.template-info h2 { margin: 0 0 1rem; color: var(--meme-text-dark); }

/* Editor */
.meme-editor-container { display: grid; grid-template-columns: 1fr 350px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .meme-editor-container { grid-template-columns: 1fr; } }
.meme-editor-preview { position: sticky; top: 2rem; }
.meme-editor-preview-wrapper { position: relative; display: inline-block; width: 100%; }
.meme-editor-preview img { width: 100%; border-radius: var(--meme-radius-sm); box-shadow: var(--meme-shadow); }
.meme-editor-controls { background: var(--meme-bg-light); padding: 1.5rem; border-radius: var(--meme-radius-sm); }
.meme-editor-controls h3 { margin: 0 0 1.5rem; color: var(--meme-text-dark); font-size: 1.1rem; }
.meme-color-picker { width: 100%; height: 45px; cursor: pointer; border: 2px solid #e5e7eb; border-radius: var(--meme-radius-sm); padding: .25rem; }

/* Pagination */
.meme-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.meme-pagination a, .meme-pagination span { padding: .5rem 1rem; border-radius: var(--meme-radius-sm); text-decoration: none; font-size: .9rem; }
.meme-pagination a { color: var(--meme-text-dark); background: var(--meme-bg-light); }
.meme-pagination a:hover, .meme-pagination .current { background: var(--meme-primary); color: #fff; }

/* Rating */
.meme-rating { display: inline-flex; align-items: center; gap: .5rem; }
.meme-rating-stars { display: inline-flex; flex-direction: row-reverse; gap: .125rem; }
.meme-rating-stars input { display: none; }
.meme-rating-stars label { cursor: pointer; font-size: 1.5rem; color: #d1d5db; transition: color .15s; }
.meme-rating-stars label:hover, .meme-rating-stars label:hover ~ label, .meme-rating-stars input:checked ~ label { color: #fbbf24; }
.meme-rating-stars.readonly label { cursor: default; }
.meme-rating-display { display: inline-flex; align-items: center; gap: .25rem; }
.meme-rating-display .star { color: #fbbf24; }
.meme-rating-display .star.empty { color: #d1d5db; }
.meme-rating-text { color: var(--meme-text-light); font-size: .85rem; margin-left: .5rem; }
.meme-rating-compact { font-size: .8rem; color: var(--meme-text-light); }
.meme-rating-compact .star { color: #fbbf24; font-size: .9rem; }

/* Sort Bar */
.meme-sort-bar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    margin-bottom: 1.5rem; padding: 1rem; background: var(--meme-bg-light); border-radius: var(--meme-radius-sm);
}
.meme-sort-bar label { color: var(--meme-text-light); font-size: .9rem; font-weight: 500; }
.meme-sort-bar select {
    padding: .5rem 1rem; border: 2px solid #e5e7eb; border-radius: var(--meme-radius-sm);
    font-size: .9rem; font-family: inherit; background: #fff; cursor: pointer;
}
.meme-sort-bar select:focus { outline: none; border-color: var(--meme-primary); }
.meme-filter-buttons { display: inline-flex; gap: .5rem; flex-wrap: wrap; margin-left: .5rem; }
.meme-filter-btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: var(--meme-text-dark);
    border-radius: 999px;
    padding: .3rem .75rem;
    font-size: .8rem;
    cursor: pointer;
    transition: var(--meme-transition);
}
.meme-filter-btn:hover { background: var(--meme-bg-light); }
.meme-filter-btn.active { background: var(--meme-primary); color: #fff; border-color: var(--meme-primary); }