/**
 * assets/css/tutorial.css — টিউটোরিয়াল ভিডিও-হাব, PART 12/14।
 *
 * template-tutorial.php (PART 10)-এর ইনলাইন <style> ব্লক ইতিমধ্যেই স্ট্যাটিক
 * অংশগুলো (সার্চ-বার, চিপ, পিন-ব্যাজ, red-banner) কভার করে — এই ফাইলে শুধু
 * tutorial.js (PART 12) ডাইনামিকালি তৈরি করা এলিমেন্টের CSS, যেগুলোর ক্লাস
 * আগে থেকে মার্কআপে ছিল না (সার্চ-রেজাল্ট রো, লোডিং/এরর মেসেজ, লোড-মোর
 * স্পিনার-স্টেট)। সবকিছু video-section.css-এর :root ভেরিয়েবল পুনঃব্যবহার
 * করে ভিজ্যুয়াল সামঞ্জস্য বজায় রাখা হয়েছে।
 *
 * এনকিউ: template-tutorial.php-এর $extra_css অ্যারেতে এই ফাইলের পাথ যোগ
 * করা হয়েছে (video-section.css এর ঠিক পরে, তাই এখানকার :root-নির্ভর
 * ভেরিয়েবল ব্যবহার নিরাপদ)।
 */

/* ---- সার্চ ড্রপডাউন রো ---- */
.wb-tut-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: 0.15s;
}

.wb-tut-search-result-item:last-child { border-bottom: none; }

.wb-tut-search-result-item:hover,
.wb-tut-search-result-item:focus-visible {
    background-color: var(--bg-body);
    outline: none;
}

.wb-tut-search-result-thumb {
    width: 64px;
    height: 42px;
    min-width: 64px;
    border-radius: 8px;
    object-fit: cover;
    background-color: var(--bg-body);
}

.wb-tut-search-result-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray);
    font-size: 16px;
}

.wb-tut-search-result-info {
    min-width: 0;
    flex: 1;
}

.wb-tut-search-result-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wb-tut-search-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-gray);
}

.wb-tut-search-result-meta i { color: var(--primary-green); font-size: 11px; }

/* ---- লোডিং / এরর / খালি-ফলাফল মেসেজ রো (সার্চ ড্রপডাউন + প্লেলিস্ট দুটোতেই) ---- */
.wb-tut-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 16px;
    color: var(--text-gray);
    font-size: 14px;
    text-align: center;
}

.wb-tut-message.wb-tut-error { color: #C0392B; }

.wb-tut-spin {
    animation: wbTutSpin 0.8s linear infinite;
}

@keyframes wbTutSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- লোড-মোর বাটন: লোডিং-স্টেট ---- */
.btn-load-more.is-loading {
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
}

/* ---- অ্যাক্সেসিবিলিটি: কীবোর্ড-ফোকাস আউটলাইন (playlist-item/chip-এ আগে ছিল না) ---- */
.playlist-item.wb-tutorial-playlist-item:focus-visible,
.tutorial-chip:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* ---- মোবাইল: টাচ-ফ্রেন্ডলি বড় ট্যাপ-এরিয়া ---- */
@media (max-width: 768px) {
    .wb-tut-search-result-item { padding: 12px 16px; min-height: 44px; }
    .tutorial-chip { padding: 10px 20px; min-height: 40px; }
    .btn-load-more { min-height: 46px; }
    .playlist-item.wb-tutorial-playlist-item { min-height: 44px; }
}