/* ===== AI JOKE GENERATOR CSS ===== */

.joke-wrapper { margin-bottom: 28px; }
.joke-grid    { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; }

/* Cards */
.joke-control-card,
.joke-output-card {
    background: #fff; border: 2px solid #e5e7eb;
    border-radius: 20px; padding: 24px;
}
.joke-output-card { border-color: #fde68a; }
.joke-card-title  { font-size: 16px; font-weight: 800; color: #1f2937; margin-bottom: 20px; }

/* Fields */
.joke-field { margin-bottom: 18px; }
.joke-label { display: block; font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 8px; }
.joke-opt   { color: #9ca3af; font-weight: 400; font-size: 11px; }
.joke-hint  { font-size: 11px; color: #9ca3af; margin-top: 4px; }

.joke-input {
    width: 100%; border: 2px solid #e5e7eb; border-radius: 10px;
    padding: 10px 14px; font-size: 14px; outline: none; font-family: inherit;
    transition: border-color 0.2s; box-sizing: border-box; color: #1f2937;
}
.joke-input:focus { border-color: #f59e0b; }

/* Category Grid */
.joke-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cat-btn {
    background: #f8fafc; border: 2px solid #e5e7eb; border-radius: 10px;
    padding: 10px 6px; cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 18px;
}
.cat-btn span { font-size: 10px; font-weight: 700; color: #374151; }
.cat-btn:hover { border-color: #f59e0b; transform: translateY(-2px); }
.cat-btn.active { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: #d97706; }
.cat-btn.active span { color: #fff; }

/* Count Group */
.joke-count-group { display: flex; gap: 8px; }
.count-btn {
    flex: 1; background: #f8fafc; border: 2px solid #e5e7eb; border-radius: 10px;
    padding: 10px; font-size: 15px; font-weight: 800; color: #374151;
    cursor: pointer; transition: all 0.2s;
}
.count-btn:hover { border-color: #f59e0b; }
.count-btn.active { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: #d97706; color: #fff; }

/* Level Group */
.joke-level-group { display: flex; gap: 8px; }
.level-btn {
    flex: 1; background: #f8fafc; border: 2px solid #e5e7eb; border-radius: 12px;
    padding: 12px 8px; cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 13px; font-weight: 700; color: #374151;
}
.level-btn small { font-size: 10px; color: #9ca3af; font-weight: 400; }
.level-btn:hover { border-color: #f59e0b; }
.level-btn.active { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: #d97706; color: #fff; }
.level-btn.active small { color: #fef3c7; }

/* Lang Grid — 4 columns for 8 languages */
.joke-lang-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.joke-lang-btn {
    background: #f8fafc; border: 2px solid #e5e7eb; border-radius: 8px;
    padding: 7px 6px; font-size: 11px; font-weight: 700; color: #374151;
    cursor: pointer; transition: all 0.2s; text-align: center;
}
.joke-lang-btn:hover { border-color: #f59e0b; }
.joke-lang-btn.active { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: #d97706; color: #fff; }

/* Generate Button */
.joke-generate-btn {
    width: 100%; background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; border: none; border-radius: 14px; padding: 16px;
    font-size: 17px; font-weight: 800; cursor: pointer; transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(245,158,11,0.35);
}
.joke-generate-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,158,11,0.45); }
.joke-generate-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* Placeholder */
.joke-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; gap: 10px; text-align: center; }
.jph-icon  { font-size: 56px; }
.jph-title { font-size: 17px; font-weight: 800; color: #374151; }
.jph-sub   { font-size: 13px; color: #9ca3af; margin-bottom: 10px; }
.jph-preview { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.jph-card { background: #fffbeb; border: 2px solid #fde68a; border-radius: 12px; padding: 14px; display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.jph-card > span { font-size: 24px; flex-shrink: 0; }
.jph-setup { font-size: 12px; color: #6b7280; margin-bottom: 6px; line-height: 1.6; }
.jph-punch { font-size: 13px; font-weight: 700; color: #92400e; }

/* Loading */
.joke-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; gap: 14px; }
.joke-loader-icons { display: flex; gap: 12px; }
.jl-icon { font-size: 36px; animation: jl-bounce 0.7s ease-in-out infinite alternate; display: inline-block; }
@keyframes jl-bounce { from { transform: translateY(0) scale(1); } to { transform: translateY(-12px) scale(1.15); } }
.joke-loading-text { font-size: 15px; color: #374151; font-weight: 700; }
.joke-loading-sub  { font-size: 12px; color: #9ca3af; }

/* Results Header */
.joke-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid #fef3c7; }
.joke-count-badge { font-size: 13px; font-weight: 800; color: #92400e; background: #fef3c7; padding: 4px 12px; border-radius: 20px; border: 1.5px solid #fde68a; }
.joke-header-btns { display: flex; gap: 8px; }
.joke-copy-all-btn { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.joke-copy-all-btn:hover { transform: translateY(-1px); }
.joke-regen-btn { background: #fff; color: #d97706; border: 2px solid #fde68a; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.joke-regen-btn:hover { background: #fffbeb; border-color: #f59e0b; }

/* Jokes List */
.jokes-list { display: flex; flex-direction: column; gap: 14px; }

/* Single Joke Card */
.joke-card {
    background: #fff; border: 2px solid #fde68a;
    border-radius: 14px; overflow: hidden; transition: all 0.2s;
}
.joke-card:hover { border-color: #f59e0b; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(245,158,11,0.15); }

.joke-card-header {
    background: #fffbeb; padding: 12px 14px;
    display: flex; align-items: flex-start; gap: 10px;
}
.joke-num {
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
    font-size: 11px; font-weight: 900; width: 24px; height: 24px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}
.joke-emoji     { font-size: 22px; flex-shrink: 0; }
.joke-setup-text { flex: 1; font-size: 14px; color: #374151; line-height: 1.75; }

.joke-punchline {
    padding: 10px 14px 12px 48px;
    font-size: 15px; font-weight: 800; color: #92400e;
    line-height: 1.6; border-top: 1px solid #fef3c7;
}

.joke-card-footer {
    padding: 8px 14px; display: flex; justify-content: flex-end; gap: 6px;
    border-top: 1px solid #fef3c7;
}
.joke-copy-single {
    background: #fff; border: 1.5px solid #fde68a; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; font-weight: 600; color: #d97706;
    cursor: pointer; transition: all 0.2s;
}
.joke-copy-single:hover { background: #fef3c7; border-color: #f59e0b; }
.joke-share-btn {
    background: #25d366; border: none; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; font-weight: 600; color: #fff;
    cursor: pointer; transition: all 0.2s;
}
.joke-share-btn:hover { background: #22c55e; }

/* Error */
.joke-error { display: flex; align-items: center; gap: 8px; padding: 20px; background: #fff5f5; border-radius: 12px; color: #dc2626; font-size: 14px; min-height: 70px; }

/* Info Box */
.info-box { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-radius: 16px; padding: 26px; margin-bottom: 24px; border: 2px solid rgba(245,158,11,0.15); }
.info-box h4 { color: #78350f; font-size: 20px; margin-bottom: 16px; }
.info-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; }
.info-item   { background: #fff; border-radius: 12px; padding: 14px; font-size: 13px; color: #374151; line-height: 1.6; border: 2px solid rgba(245,158,11,0.12); }
.info-item strong { display: block; color: #d97706; font-size: 13px; font-weight: 700; margin-bottom: 3px; }

/* SEO */
.seo-content { padding: 70px 20px; background: #fff; }
.content-article { max-width: 900px; margin: 0 auto; line-height: 1.8; }
.content-article h2 { font-size: 26px; font-weight: 800; margin-top: 32px; margin-bottom: 14px; color: #333; }
.content-article h2:first-child { margin-top: 0; }
.content-article h3 { font-size: 19px; font-weight: 700; margin-top: 22px; margin-bottom: 10px; color: #444; }
.content-article p  { margin-bottom: 14px; color: #666; font-size: 16px; }
.content-article strong { color: #333; font-weight: 700; }

/* Responsive */
@media (max-width: 900px) { .joke-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .joke-control-card, .joke-output-card { padding: 16px; }
    .joke-cat-grid   { grid-template-columns: repeat(4, 1fr); }
    .joke-lang-grid  { grid-template-columns: repeat(2, 1fr); }
    .joke-level-group { flex-direction: column; }
    .joke-punchline  { padding-left: 14px; }
    .joke-results-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 400px) { .joke-cat-grid { grid-template-columns: repeat(3, 1fr); } }