/**
 * Skin: Card
 * Location: /assets/css/skin-card.css
 * Version: 1.0.0
 */

/*==============================
=        Global Variables      =
==============================*/

:root {
    --card-bg: #fff;
    --card-text: #666;
    --card-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    --card-radius: 4px;
    --card-padding: 20px;

    --body-bg: #f2f2f2;
}

/* Dark Mode */
.uk-light {
    --card-bg: #272727;
    --card-text: #ddd;
    --body-bg: #222;
}

/*==============================
=          Base Styles         =
==============================*/

body {
    background: var(--body-bg);
}

.manga-block,
.blog-block,
.comment-block,
.sticker-block,
.author-block,
.publisher-block,
.team-block,
.sidebar-widget {
    background-color: var(--card-bg);
    color: var(--card-text);
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
}

/*==============================
=   Reduce Effects on Mobile   =
==============================*/

/*
 * Nhiều item .manga-block cùng render box-shadow blur trong 1 grid khiến
 * trình duyệt mobile phải composite lại nhiều layer khi cuộn → giật/lag.
 * Khi bật tuỳ chọn "Reduce Effects on Mobile", giảm blur/spread thay vì
 * bỏ hẳn shadow để vẫn còn chút chiều sâu cho khung card.
 */
@media (max-width: 767px) {
    body.im-reduce-mobile-fx {
        --card-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    }
}