/* style.css */
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #0984e3, #00b894); min-height: 100vh; background-attachment: fixed; background-size: cover; }
.container { max-width: 1000px; margin: 20px auto 50px auto; background: white; padding: 10px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

.alert-container { position: fixed; bottom: 20px; left: 20px; z-index: 10000; display: flex; flex-direction: column-reverse; gap: 10px; }
.alert { padding: 15px 40px 15px 15px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); min-width: 280px; max-width: 450px; background: white; position: relative; border-left: 6px solid #007bff; animation: slideIn 0.4s ease-out; }
.alert.success { border-left-color: #28a745; background: #d4edda; color: #155724; }
.alert.warning { border-left-color: #ffc107; background: #fff3cd; color: #856404; }

@keyframes slideIn {
	from { transform: translateX(-110%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

.header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #007bff; padding-bottom: 10px; margin-bottom: 20px; }
.admin-box { background: #f8f9fa; border: 2px dashed #ccc; padding: 15px; border-radius: 8px; margin-bottom: 20px; transition: all 0.3s; }
.admin-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }

@media (max-width: 600px) {
	.admin-row { flex-direction: column; }
	.admin-row form { width: 100% !important; border-right: none !important; padding-right: 0 !important; padding-left: 0 !important; }
	.admin-row form:first-child { border-bottom: 1px solid #ddd; padding-bottom: 20px; }
}
.admin-box.dragover { background: #e1f0ff; border-color: #007bff; transform: scale(1.01); }

.search-box { width: 100%; padding: 15px; border: 2px solid #ddd; border-radius: 10px; margin-bottom: 15px; font-size: 1rem; }
.btn { padding: 10px 15px; border-radius: 6px; border: 1px solid #ddd; text-decoration: none; cursor: pointer; background: linear-gradient(135deg, #74b9ff, #55efc4); display: inline-flex; align-items: center; gap: 5px; }
.btn-p { background: linear-gradient(135deg, #74b9ff, #55efc4); color: white; border: none; }
.btn-sort.active { background: #007bff; color: white; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; background: #eee; }
.btn-del { background: none; border: none; cursor: pointer; font-size: 1.5rem; padding: 0 10px; color: #dc3545 !important; }
.btn-vissza { border: 1px solid black; border-radius: 6px; background: linear-gradient(135deg, #74b9ff, #55efc4); padding: 10px; width: 100%; text-align: center; text-decoration: none; }
.breadcrumb { background: #eee; padding: 10px; border-radius: 6px; margin-bottom: 15px; font-size: 0.8rem; }
.copy-link-btn { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 4px; cursor: pointer; transition: all 0.2s; font-size: 1rem; display: flex; align-items: center; justify-content: center; }

ul { list-style: none; padding: 0; margin: 0; }
li { border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; width: 100%; overflow: hidden; }
.item-link { display: flex; align-items: center; padding: 15px 5px; text-decoration: none; color: #333; flex: 1; min-width: 0; }
.item-link:hover { background: #f1f7ff; }
.item-details { flex: 1; min-width: 0; overflow: hidden; margin-right: 5px; }
.item-name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-buttons { display: flex; align-items: center; flex-shrink: 0; gap: 5px; padding-right: 5px; }
.icon { font-size: 1.5rem; margin-right: 5px; min-width: 25px; text-align: center; flex-shrink: 0; }
.item-meta { display: block; font-size: 0.7rem; color: #888; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.new-badge { background: #28a745; color: white; font-size: 0.65rem; padding: 2px 5px; border-radius: 4px; margin-left: 5px; vertical-align: middle; }

/* LIGHTBOX STÍLUSOK */
#lightbox { display: none; position: fixed; z-index: 10001; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); align-items: center; justify-content: center; user-select: none; }
#lightbox-img { max-width: 90%; max-height: 85%; object-fit: contain; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
.lb-btn { position: absolute; color: white; font-size: 40px; cursor: pointer; background: rgba(255,255,255,0.1); border: none; padding: 10px 20px; border-radius: 5px; }
.lb-btn:hover { background: rgba(255,255,255,0.2); }
#lb-close { top: 20px; right: 20px; }
#lb-prev { left: 20px; }
#lb-next { right: 20px; }
#lb-counter { position: absolute; bottom: 20px; color: white; font-size: 14px; }

/* MACSKA STÍLUSOK */
.cat { padding-bottom: 36px; }
.cat:hover #righteyelid { visibility: hidden; }
.cat [hidden] { display: none; }
.cat .sleep-symbol { margin-left: 10%; font-weight: 600; margin-bottom: -40px; }
.cat .sleep-symbol span { position: relative; display: inline-block; opacity: 1; transform: scale(1); animation: sleep 4s ease-in-out infinite; }
.cat .sleep-symbol span:nth-child(1) { animation-delay: 0s; }
.cat .sleep-symbol span:nth-child(2) { animation-delay: 1s; margin-left: -10px; }
.cat .sleep-symbol span:nth-child(3) { animation-delay: 2s; margin-left: -10px; }

.cat .thecat { z-index: 2; margin-left: 10%; margin-bottom: -62px; position: relative; pointer-events: none; }
#tail { visibility: visible; }
#longtail { visibility: hidden; }

.cat:has(.side-select:hover) #eyesdown { visibility: visible; }
.cat:has(option:hover) #righteyelid, 
.cat:has(option:hover) #lefteyelid, 
.cat:has(option:hover) .sleep-symbol { visibility: hidden; }
.cat:has(option:hover) #eyesdown { visibility: visible; }
.thecat #eyesdown { visibility: hidden; }

.mouse-detector { padding: 20px 30px 30px 30px; }
.mouse-detector:hover #lefteyelid { visibility: hidden; }
.mouse-detector:hover .sleep-symbol { visibility: hidden; }

@keyframes sleep { 
	0% { opacity: 1; transform: translateY(0) scale(1); } 
	50% { opacity: 0.5; transform: translate(-5px, -35px) scale(1.2); } 
	100% { opacity: 0; transform: translateY(-60px) scale(1.5); } 
}

.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: white; margin: 15% auto; padding: 25px; border-radius: 12px; width: 320px; text-align: center; }
.modal-content input { width: 100%; padding: 10px; margin: 15px 0; border: 1px solid #ddd; border-radius: 6px; }

footer { background: #2d3436; color: white; text-align: center; padding: 10px; font-size: 14px; position: fixed; bottom: 0; width: 100%; z-index: 50; opacity: 0.9; }