/*
 * mobile-fix.css — CRITICAL mobile responsive fixes
 * Loaded LAST after all other CSS to guarantee override.
 * Not subject to PHP opcache (served as static file).
 */

/* ===== PC NAV: Grid centering (Logo left / Nav center / Toggle right) ===== */
.head {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center;
    height: 70px;
    position: relative;
    width: 100%;
}
.logo { grid-column: 1; justify-self: start; }
.logo img { height: 40px; width: auto; }
.nav { grid-column: 2; justify-self: center; }
.nav-toggle { grid-column: 3; justify-self: end; }

/* Desktop: KILL all mobile panel pseudo-elements & close btn */
.nav::before { content: none !important; }
.nav::after { content: none !important; }
.m-nav-close { display: none !important; }
.m-nav-body { display: contents !important; }

/* Kill style.css white background on nav links (ID selector match) */
#header .head ul li a {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
    height: auto !important;
    line-height: normal !important;
}
#header .head ul li { float: none !important; padding: 0 !important; }

/* ===== MOBILE (<=768px) ===== */
@media (max-width: 768px) {
    .head { height: 60px; width: 100%; min-width: 0; }
    .logo img { height: 34px; }

    /* Nav dropdown — premium side panel (slide from right) */
    .nav {
        display: none;
        position: fixed; top: 0; right: -320px;
        width: 300px; height: 100vh; z-index: 999;
        flex-direction: column;
        background: #f8fdfb;
        box-shadow: -10px 0 50px rgba(13,148,120,0.12), 0 0 1px rgba(0,0,0,0.05);
        border-radius: 24px 0 0 24px;
        transition: right 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav.open { display: flex; right: 0; }

    /* Panel header gradient area (pseudo-element) */
    .nav::before {
        content: '' !important;
        display: block;
        background: linear-gradient(135deg, #10b981 0%, #0d9488 40%, #14b8a6 70%, #2dd4bf 100%);
        padding-top: 65%;
        border-radius: 24px 0 0 0;
        position: relative;
        overflow: hidden;
    }
    .nav::after {
        content: '' !important;
        position: absolute; top: -20px; right: -20px;
        width: 120px; height: 120px;
        background: rgba(255,255,255,0.12);
        border-radius: 50%;
        z-index: 1;
    }

    /* Close button over header */
    .m-nav-close {
        display: flex !important;
        position: absolute; top: 16px; right: 16px; z-index: 5;
        width: 36px; height: 36px;
        align-items: center; justify-content: center;
        background: rgba(255,255,255,0.2);
        border: 1.5px solid rgba(255,255,255,0.35);
        border-radius: 50%; cursor: pointer;
        color: #fff; font-size: 15px;
        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        transition: all 0.3s ease;
    }
    .m-nav-close:hover {
        background: rgba(255,255,255,0.35);
        transform: rotate(90deg) scale(1.08);
    }

    /* Overlay */
    .m-nav-overlay {
        display: none; position: fixed; inset: 0; z-index: 998;
        background: rgba(0,0,0,0.3);
        opacity: 0; transition: opacity 0.3s ease;
    }
    .m-nav-overlay.active { display: block; opacity: 1; }

    /* Menu items body container */
    .nav .m-nav-body {
        padding: 1.25rem 1rem 2rem !important;
        margin-top: -30px !important;
        position: relative; z-index: 2;
        display: flex !important;
        flex-direction: column;
        gap: 4px;
    }

    /* Each menu item = card */
    .nav li { width: 100%; list-style: none; margin: 0; padding: 0; }
    .nav li + li { margin-top: 3px; }
    .nav li a {
        display: flex !important; align-items: center; gap: 14px;
        padding: 1rem 1rem !important;
        font-size: 15px !important; font-weight: 600;
        color: #1a2e28 !important;
        background: #ffffff !important;
        border: 1px solid rgba(16,185,129,0.1) !important;
        border-bottom: none !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(13,148,120,0.04), 0 2px 8px rgba(13,148,120,0.03) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative; overflow: hidden;
    }
    /* Icon per item via ::before */
    .nav li a::before {
        content: '→';
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; min-width: 34px;
        background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(45,212,191,0.1));
        border-radius: 10px;
        font-size: 14px; color: #10b981; font-weight: 700;
        transition: all 0.3s ease;
    }
    .nav li:nth-child(1) a::before { content: '⌂'; }
    .nav li:nth-child(2) a::before { content: '💱'; }
    .nav li:nth-child(3) a::before { content: '💰'; }
    .nav li:nth-child(4) a::before { content: '⇄'; }
    .nav li:nth-child(5) a::before { content: '◉'; }
    .nav li:nth-child(n+6) a::before { content: '▸'; }

    /* Hover state */
    .nav li a:hover {
        transform: translateX(-4px);
        border-color: rgba(16,185,129,0.25) !important;
        box-shadow: 0 6px 20px rgba(16,185,129,0.12), 0 2px 6px rgba(16,185,129,0.06) !important;
    }
    .nav li a:hover::before {
        background: linear-gradient(135deg, #10b981, #2dd4bf);
        color: #fff; transform: scale(1.08);
    }
    /* Active state — emerald gradient fill */
    .nav li.act a,
    .nav li.act a:hover {
        color: #fff !important;
        background: linear-gradient(135deg, #10b981, #0d9488, #14b8a6) !important;
        border-color: transparent !important;
        box-shadow: 0 6px 22px rgba(16,185,129,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
        transform: translateX(-4px);
    }
    .nav li.act a::before,
    .nav li.act a:hover::before {
        background: rgba(255,255,255,0.22); color: #fff;
    }

    /* Hamburger visible */
    .nav-toggle { display: inline-flex !important; }

    /* Conversion list: 2-column + NO text truncation */
    .conversion-list { display: flex !important; flex-wrap: wrap !important; overflow: visible !important; padding: 10px 5px !important; margin: 0 !important; }
    .conversion-list .layui-row { display: flex !important; flex-wrap: wrap !important; margin: 0 !important; }
    .conversion-list .layui-col-md3,
    .conversion-list .layui-col-md6,
    .conversion-list .layui-col-xs4,
    .conversion-list .layui-col-xs6 {
        float: none !important; padding: 0.25rem !important;
        width: 50% !important;
        flex: 0 0 50% !important; max-width: 50% !important;
        box-sizing: border-box !important;
    }
    .conversion-list-item { width: auto !important; }
    .conversion-list-item a {
        display: block !important; padding: 0.65rem 0.4rem !important; margin-bottom: 0.4rem !important;
        background: rgba(255,255,255,0.75) !important;
        border: 1px solid rgba(16,185,129,0.15) !important;
        border-radius: 10px !important;
        font-size: 0.8rem !important; text-align: center !important;
        color: #0f1419 !important;
        white-space: normal !important; word-break: break-word !important; line-height: 1.35 !important;
        overflow: visible !important; text-overflow: clip !important;
        min-height: 2.4rem;
    }

    /* Article list: single column full text */
    .article_list.conversion-list { padding: 10px 5px !important; }
    .article_list .layui-col-xs6,
    .article_list .layui-col-md6 {
        width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
    }
    .article_list .conversion-list-item { text-align: left !important; }
    .article_list .conversion-list-item a {
        text-align: left !important; font-size: 0.88rem !important;
        padding: 0.75rem 0.75rem !important; line-height: 1.45 !important;
        background: rgba(255,255,255,0.85) !important;
        border-left: 3px solid #10b981 !important; border-radius: 8px !important;
    }

    /* KILL layui-elip truncation globally */
    .layui-elip { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

    /* Table scroll wrapper */
    .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.layui-table { width: 100% !important; min-width: 560px !important; border-collapse: collapse; }
    table.layui-table th, table.layui-table td { min-width: 90px !important; padding: 0.55rem 0.6rem !important; font-size: 0.82rem !important; white-space: nowrap; }

    /* Cards & containers */
    .custom-card { padding: 1.25rem !important; border-radius: 14px; }
    .layui-card { border-radius: 14px; margin-bottom: 1rem; overflow: hidden; }
    .main-wrapper { padding: 1.25rem 0; }

    /* Converter vertical stack on small screens */
    .converter-section { padding: 1.4rem; }
    .converter-grid { gap: 1rem; }
    .result-display { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .convert-btn { width: 100%; padding: 0.85rem; }

    /* Section title fix */
    .title.with-icon { padding-left: 36px !important; font-size: 0.92rem !important; }
    .title.with-icon .header-icon:not(.right-action) { width: 22px !important; height: 22px !important; left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; }
    .title .text { white-space: normal !important; word-break: break-word !important; }

    /* Ads within viewport */
    ins.adsbygoogle { max-width: 100%; overflow: hidden; }

    /* Footer compact */
    #footer { padding: 2.25rem 0 1.5rem !important; }
}

/* ===== SMALL SCREEN (<=480px) ===== */
@media (max-width: 480px) {
    .converter-grid { grid-template-columns: 1fr !important; gap: 0.75rem; align-items: stretch; }
    .swap-btn { margin: 0 auto; transform: rotate(90deg); }
    .result-amount { font-size: 1.55rem; }
    .converter-section { padding: 1.1rem; }
    .custom-card { padding: 1rem; }
}