/**
 * Skin: Retro Light
 * Location: /assets/css/skin-retro.css
 * Version: 1.0.1
 */

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

:root {
    --card-padding: 20px;

    /* Palette retro sáng: giấy cũ, cam, xanh dương */
    --retro-body-bg: #fdf7ec;
    --retro-body-grid-line: rgba(240, 190, 120, 0.35);

    --retro-card-bg: #ffffff;
    --retro-card-soft-bg: #fffaf0;
    --retro-strong-bg: #fff3d6;

    --retro-radius: 14px;
    --retro-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);

    --retro-border: rgba(225, 160, 90, 0.9);
    --retro-border-soft: rgba(225, 160, 90, 0.55);

    --retro-text: #2b1d12;
    --retro-text-soft: #5a4330;
    --retro-accent: #ff8c42;   /* cam retro */
    --retro-accent-2: #4062ff; /* xanh dương cũ */
    --retro-accent-3: #d7263d; /* đỏ gạch */

    --retro-transition: background 0.2s ease,
                        border-color 0.2s ease,
                        color 0.2s ease,
                        box-shadow 0.2s ease,
                        transform 0.12s ease;
}

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

body {
    background-color: var(--retro-body-bg);
    background-image:
        /* pattern chấm ô vuông nhẹ */
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.03) 1px, transparent 0),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent 260px);
    background-size: 12px 12px, auto;
    color: var(--retro-text);
}

/* Các block/card chính */
#im-header nav,
#im-footer,
.manga-block,
.blog-block,
.comment-block,
.sticker-block,
.author-block,
.publisher-block,
.team-block,
.uk-card-default.uk-card-hover,
.init-chatbox-wrapper,
#im-slider .uk-alert,
#signup-notice-bar .uk-card-default,
#iue-modal .iue-inbox-item,
.story-cover-wrap,
.sidebar-widget {
    padding: var(--card-padding);
    background: linear-gradient(135deg, var(--retro-card-bg), var(--retro-card-soft-bg));
    border-radius: var(--retro-radius);
    border: 1px solid var(--retro-border-soft);
    box-shadow: var(--retro-shadow);
    position: relative;
    overflow: hidden;
}

#iue-modal .iue-inbox-item {
    overflow: visible;
}

.sticker-card,
.loot-box-card,
.frame-card,
.effect-card {
    background: linear-gradient(135deg, var(--retro-card-bg), var(--retro-card-soft-bg));
    border-radius: var(--retro-radius);
    border: 1px solid var(--retro-border-soft);
    box-shadow: var(--retro-shadow);
    position: relative;
    overflow: hidden;
}

.init-chatbox-pinned-banner {
    background: linear-gradient(135deg, var(--retro-card-bg), var(--retro-card-soft-bg));
    border-radius: 7px;
    box-shadow: var(--retro-shadow);
    top: 3px;
}

#im-header nav {
    overflow: visible;
}

/* Viền màu nhẹ ở cạnh trên (retro card border) */
#im-header nav::before,
#im-footer::before,
.manga-block::before,
.blog-block::before,
.comment-block::before,
.sticker-block::before,
.author-block::before,
.publisher-block::before,
.team-block::before,
.sticker-card::before,
.loot-box-card::before,
.frame-card::before,
.effect-card::before,
.init-chatbox-wrapper::before,
.sidebar-widget::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    border-radius: var(--retro-radius) var(--retro-radius) 0 0;
    background: linear-gradient(
        90deg,
        var(--retro-accent),
        var(--retro-accent-2),
        var(--retro-accent-3)
    );
}

/* Các container mặc định của UIKit (giữ cho tương thích, nhưng giao diện sáng) */
.uk-alert,
.uk-section-default,
.uk-section-muted,
.uk-comment-primary,
.uk-card-default,
.uk-navbar-container:not(.uk-navbar-transparent),
.uk-background-muted,
.uk-card-secondary,
.uk-card-secondary.uk-card-hover:hover,
.uk-modal-header,
.uk-modal-footer {
    background: linear-gradient(135deg, var(--retro-card-bg), var(--retro-card-soft-bg));
    border-radius: var(--retro-radius);
    border: 1px solid var(--retro-border-soft);
    box-shadow: var(--retro-shadow);
}

/* Các khối nội dung phụ / score / modal content */
.init-chatbox-message-body,
#init-manga-assistant-messages .uk-background-muted,
.init-2048__score,
.init-2048__best,
#iue-modal .iue-referral-benefits,
#iue-modal .iue-vip-current,
#iue-modal .iue-vip-card,
#iue-modal #iue-referral-link {
    background: #fffaf0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--retro-radius);
}

#init-manga-assistant-messages .uk-background-muted {
    box-shadow: none !important;
}

/* Badge & label: neon retro nhưng trên nền sáng */
.uk-label-contest,
.badge-age.badge-novel,
.badge-age.badge-completed {
    background-image: linear-gradient(135deg, var(--retro-accent), var(--retro-accent-2));
    color: #fffdf8;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* Progress & input search */
.uk-progress,
.init-2048__score,
.init-2048__best,
#chapter-search-input,
#chapter-dropdown-search {
    background: #fff5df !important;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

#chapter-search-input:focus,
#chapter-dropdown-search:focus {
    border-color: rgba(0, 0, 0, 0.2);
}

/* Các panel nền "cao" (offcanvas, dropdown, modal…) */
.uk-offcanvas-bar,
#ils-modal .ils-content,
.uk-navbar-dropdown,
.uk-dropdown,
.uk-drop.uk-card-default,
.uk-modal-dialog,
.continue-reading.uk-alert,
#iue-modal .iue-modal-content,
#iep-modal .iep-modal-content,
#init-review-modal .init-review-modal-content,
.imc-sticky.uk-background-muted,
#init-user-engine-login-modal .iue-content,
.iue-dashboard {
    background: var(--retro-card-soft-bg);
    border-radius: var(--retro-radius);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

/* Dropdown/backdrop: blur nhẹ để vẫn sáng */
.uk-navbar-dropdown,
.uk-dropdown,
.uk-drop.uk-card-default,
.continue-reading.uk-alert,
.imc-sticky.uk-background-muted,
.iue-dashboard {
    backdrop-filter: blur(4px);
}

.continue-reading {
    max-width: calc(100% - 45px);
}

.iue-inbox-tabs,
.iue-inbox-controls {
    padding-top: 3px;
    padding-bottom: 5px;
}

/* Buttons, pills, actions (retro UI vibe) */
.iue-form-group .iue-btn,
.iue-form-actions .iue-btn,
.inline-comment-block,
#ils-modal .ils-suggestions .ils-suggest-pill,
#init-review-modal button[type="submit"],
#iep-modal button[type="button"]:not(.iep-modal-close),
#iue-modal .iue-inbox-controls button,
.iue-inbox-tabs button,
.uk-button-primary,
.uk-button-secondary,
.uk-button-danger,
.uk-button-default,
#init-user-engine-login-modal .iue-login-form input[type="submit"],
#init-user-engine-login-modal .iue-register-form button.iue-submit {
    background-image: linear-gradient(
        135deg,
        #ffe2ba,
        #ffd4c2
    );
    color: var(--retro-text);
    border-radius: 999px;
    border: 1px solid var(--retro-border-soft);
    box-shadow: 0 3px 0 rgba(215, 143, 78, 0.6);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: var(--retro-transition);
}

.inline-comment-block .uk-button-link {
    color: var(--retro-text) !important;
}

/* Retro disabled state */
.uk-button-primary.uk-disabled,
.uk-button-secondary.uk-disabled,
.uk-button-danger.uk-disabled,
.uk-button-default.uk-disabled:not(#genre-tags .uk-button-default.uk-disabled),
.uk-button-primary:disabled,
.uk-button-secondary:disabled,
.uk-button-danger:disabled,
.uk-button-default:disabled,
.uk-button-primary.uk-disabled:hover,
.uk-button-secondary.uk-disabled:hover,
.uk-button-danger.uk-disabled:hover,
.uk-button-default.uk-disabled:hover {
    background-image: linear-gradient(
        135deg,
        #f4e8d9,
        #f1ddd5
    );
    color: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.55;
    transform: none !important;
}

/* Card hover transition base */
.uk-card-default.uk-card-hover {
    transition: var(--retro-transition);
}

/* Hover effects */
.iue-form-group .iue-btn:hover,
.iue-form-actions .iue-btn:hover,
.uk-card-default.uk-card-hover:hover,
#ils-modal .ils-suggestions .ils-suggest-pill:hover,
#init-review-modal button[type="submit"]:hover,
#iep-modal button[type="button"]:not(.iep-modal-close):hover,
#iue-modal .iue-inbox-controls button:hover,
.iue-inbox-tabs button:hover,
.iue-inbox-tabs button.active,
.uk-button-primary:hover,
.uk-button-secondary:hover,
.uk-button-danger:hover,
.uk-button-default:hover,
#init-user-engine-login-modal .iue-login-form input[type="submit"]:hover,
#init-user-engine-login-modal .iue-register-form button.iue-submit:hover {
    color: var(--retro-text);
    background-image: linear-gradient(
        135deg,
        #ffd7a0,
        #ffc1a8
    );
    border-color: var(--retro-border);
    box-shadow: 0 4px 0 rgba(188, 116, 55, 0.8),
                0 8px 18px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

.inline-comment-block:hover {
    color: var(--retro-text);
    background-image: linear-gradient(
        135deg,
        #ffd7a0,
        #ffc1a8
    );
    border-color: var(--retro-border);
    box-shadow: 0 4px 0 rgba(188, 116, 55, 0.8),
                0 8px 18px rgba(0, 0, 0, 0.16);
}

/* Cover gradient bottom (cho text đọc dễ, nhưng vẫn sáng) */
.cover-bottom {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(253, 247, 236, 0.8) 55%,
        rgba(253, 247, 236, 1) 100%
    );
}

/* Blur background helper */
.uk-blur-background {
    opacity: 1;
}

#imc-filter-by-type .uk-button-primary {
    background-image: linear-gradient(135deg, #ffb347, #ff7c5c);
    color: #fff;
    border-color: rgba(180, 80, 30, 0.5);
    box-shadow: 0 3px 0 rgba(180, 80, 30, 0.6);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

#imc-filter-by-type .uk-button-primary:hover {
    background-image: linear-gradient(135deg, #ffa030, #ff6a45);
    border-color: rgba(160, 60, 20, 0.7);
    box-shadow: 0 4px 0 rgba(160, 60, 20, 0.7),
                0 8px 18px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

/*==============================
=          Reset Styles        =
==============================*/

#im-header nav,
.uk-card-default.uk-card-hover,
.story-cover-wrap {
    padding: 0;
}

.uk-card-default .uk-card-title {
    color: var(--retro-text);
}

/* Thanh sticky / header / footer: vuông cho cảm giác thanh menu retro */
.imc-sticky.uk-background-muted,
#im-header nav,
#im-footer {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* Modal header border clean */
#iue-modal .iue-modal-header {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
}

/* Cover wrap không cần thêm shadow */
.story-cover-wrap {
    box-shadow: none;
}

/* Alert spacing */
.uk-alert {
    padding: 15px 29px 15px 15px !important;
}

/* Announcement bar transparent để ăn background body */
#announcement-bar .uk-alert {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Các khối này giữ nguyên background từ cha */
#init-user-engine-login-modal .iue-header,
#iue-modal .iue-referral-container,
#iue-modal .iue-modal-header,
#ils-modal .ils-results {
    background: none;
}

/* Latest updated bottom spacing */
#im-main .latest-updated .uk-text-center.uk-margin-medium-top {
    margin-top: 20px !important;
}

#chapter-list .reading-buttons {
    overflow: visible !important;
}

.uk-overflow-auto.disable-scrollbar:has(.uk-button) {
    padding-block: 3px;
}

.uk-overflow-hidden:has(#follow-author) {
    padding-bottom: 3px;
}

@media (min-width: 390px) and (max-width: 767px) {
    .uk-navbar-left.has-bell .uk-navbar-nav > li.uk-navbar-item-first > a {
        max-width: clamp(100px, 28vw, 180px);
    }
}

/*==============================
=        Card Primary (Lock)   =
==============================*/

.uk-card-primary {
    background: linear-gradient(135deg, #fff3d6, #ffe8c2);
    border-radius: var(--retro-radius);
    border: 1px solid var(--retro-border);
    box-shadow: var(--retro-shadow);
    position: relative;
    overflow: hidden;
}

.uk-card-primary.uk-card-body .uk-text-muted,
.uk-card-primary>:not([class*=uk-card-media]) .uk-text-muted,
.uk-card-secondary.uk-card-body .uk-text-muted,
.uk-card-secondary>:not([class*=uk-card-media]) .uk-text-muted,
.uk-light .uk-text-muted,
.uk-offcanvas-bar .uk-text-muted,
.uk-overlay-primary .uk-text-muted,
.uk-section-primary:not(.uk-preserve-color) .uk-text-muted,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-muted,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-muted,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-muted,
.uk-card-primary p {
    color: #666 !important;
}

/* Top border accent — đồng bộ với card khác nhưng chỉ dùng cam + đỏ để nổi hơn */
.uk-card-primary::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    border-radius: var(--retro-radius) var(--retro-radius) 0 0;
    background: linear-gradient(
        90deg,
        var(--retro-accent),
        var(--retro-accent-3)
    );
}

.uk-card-primary .uk-card-title,
.uk-card-primary .uk-button {
    color: var(--retro-text) !important;
}

/* Hover nếu có uk-card-hover */
.uk-card-primary.uk-card-hover {
    transition: var(--retro-transition);
}

.uk-card-primary.uk-card-hover:hover {
    background: linear-gradient(135deg, #ffe8c2, #ffd4a8);
    border-color: var(--retro-accent);
    box-shadow: 0 4px 0 rgba(188, 116, 55, 0.8),
                0 8px 18px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
}

/* ========================================
   Fix uk-card-primary không ép dark input
======================================== */

.uk-card-primary .uk-input,
.uk-card-primary .uk-textarea,
.uk-card-primary .uk-select {
    background: #fffaf0 !important;
    color: var(--retro-text) !important;
    border: 1px solid var(--retro-border-soft) !important;
}

/* Focus state cho đồng bộ retro */
.uk-card-primary .uk-input:focus,
.uk-card-primary .uk-textarea:focus,
.uk-card-primary .uk-select:focus {
    background: #ffffff !important;
    border-color: var(--retro-border) !important;
}

/* Placeholder cho sáng đúng vibe */
.uk-card-primary .uk-input::placeholder,
.uk-card-primary .uk-textarea::placeholder {
    color: var(--retro-text-soft) !important;
    opacity: 0.7;
}

/* =============================================
   Sticker Picker — Skin: Retro Light
   ============================================= */

.sticker-more-menu {
    background: var(--retro-card-soft-bg);
    border: 1px solid var(--retro-border-soft);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    border-radius: var(--retro-radius);
}

.sticker-more-menu .sticker-category-btn:hover {
    background: var(--retro-strong-bg);
}

.sticker-more-menu .sticker-category-btn.is-active {
    background: linear-gradient(135deg, #fff3d6, #ffe8c2);
}

.sticker-more-menu .sticker-category-btn.is-active .sticker-pack-name {
    color: var(--retro-accent);
}

.sticker-category-btn:hover,
.sticker-category-btn.is-active {
    background: var(--retro-strong-bg);
}

.sticker-more-btn:hover {
    background: var(--retro-strong-bg);
}

.sticker-more-icon.theme-color {
    color: var(--retro-accent);
}