/* =========================================================
   COINSKID ADVANCED CHART - MOBILE SAFE MODE
   Minimal mobile changes so the TradingView widget cannot
   disappear/collapse. Desktop is untouched.
   ========================================================= */
@media (max-width: 768px), (max-height: 600px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .ck-advanced-section,
    .ck-advanced-section .container-fluid,
    .ck-advanced-section .card,
    .ck-advanced-section .card-body,
    .ck-advanced-page,
    .lb-page,
    #lbWrap,
    #lbChartPane {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /*
    Remove the desktop market rail from mobile for now.
    This guarantees it cannot steal chart width or interfere
    with TradingView's own toolbar.
    */
    #lbLeftMenu {
        display: none !important;
    }

    #lbWrap,
    #lbChartPane {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #tv_chart_container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 586px !important;
        min-height: 500px !important;
    }
}

.ck-mobile-markets-trigger,
.ck-mobile-markets-panel,
.ck-mobile-markets-backdrop {
    display: none;
}

@media (max-width: 768px), (max-height: 600px) {

    .ck-mobile-vip-trigger {
        display: inline-flex !important;
        position: fixed !important;
        z-index: 11020 !important;
        top: calc(var(--ck-header-bottom, 72px) + 8px) !important;
        right: 8px !important;
        height: 32px;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 6px;
        background: rgba(20,20,23,.96);
        color: #f4f4f6;
        font: 700 11px Arial,Helvetica,sans-serif;
        box-shadow: 0 3px 14px rgba(0,0,0,.38);
        cursor: pointer;
    }

    .ck-mobile-vip-panel {
        display: none;
        position: fixed !important;
        z-index: 11030 !important;
        top: calc(var(--ck-header-bottom, 72px) + 48px) !important;
        right: 8px !important;
        left: 8px !important;
        max-height: calc(100dvh - var(--ck-header-bottom, 72px) - 64px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 6px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 8px;
        background: rgba(17,17,20,.985);
        box-shadow: 0 14px 40px rgba(0,0,0,.60);
        touch-action: pan-y;
    }

    .ck-mobile-vip-panel.is-open {
        display: block !important;
    }

    .ck-mobile-vip-panel button {
        display: block;
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #f1f1f3;
        text-align: left;
        font: 600 13px/1.25 Arial,Helvetica,sans-serif;
        cursor: pointer;
        touch-action: manipulation;
    }

    .ck-mobile-vip-panel button + button {
        margin-top: 2px;
    }

    .ck-mobile-vip-panel button:active {
        background: rgba(255,255,255,.09);
    }

    .ck-mobile-vip-backdrop {
        display: none;
        position: fixed !important;
        z-index: 11010 !important;
        inset: var(--ck-header-bottom, 72px) 0 0 0 !important;
        background: rgba(0,0,0,.30);
    }

    .ck-mobile-vip-backdrop.is-open {
        display: block !important;
    }

    /* =========================================================
       MOBILE MARKETS MENU
       ========================================================= */
    .ck-mobile-markets-trigger {
        display: inline-flex !important;
        position: fixed !important;
        z-index: 11020 !important;
        top: calc(var(--ck-header-bottom, 72px) + 48px) !important;
        right: 8px !important;
        left: auto !important;
        height: 32px;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 6px;
        background: rgba(20,20,23,.96);
        color: #f4f4f6;
        font: 700 11px Arial,Helvetica,sans-serif;
        box-shadow: 0 3px 14px rgba(0,0,0,.38);
        cursor: pointer;
    }

    .ck-mobile-markets-panel {
        display: none;
        position: fixed !important;
        z-index: 11030 !important;
        top: calc(var(--ck-header-bottom, 72px) + 88px) !important;
        right: 8px !important;
        left: auto !important;
        width: min(360px, calc(100vw - 16px)) !important;
        max-height: calc(100dvh - var(--ck-header-bottom, 72px) - 64px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 7px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 8px;
        background: rgba(17,17,20,.985);
        box-shadow: 0 14px 40px rgba(0,0,0,.60);
        touch-action: pan-y;
    }

    .ck-mobile-markets-panel.is-open {
        display: block !important;
    }

    .ck-mobile-markets-search {
        display: block;
        width: 100%;
        height: 38px;
        margin: 0 0 7px;
        padding: 0 11px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 6px;
        outline: 0;
        background: rgba(255,255,255,.06);
        color: #f4f4f6;
        font: 600 12px Arial,Helvetica,sans-serif;
        box-sizing: border-box;
    }

    .ck-mobile-markets-list .ck-market-row {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
        cursor: pointer;
    }

    .ck-mobile-markets-list .ck-market-row + .ck-market-row {
        margin-top: 2px !important;
    }

    .ck-mobile-markets-list .ck-market-row.is-mobile-hidden {
        display: none !important;
    }

    .ck-mobile-markets-backdrop {
        display: none;
        position: fixed !important;
        z-index: 11010 !important;
        inset: var(--ck-header-bottom, 72px) 0 0 0 !important;
        background: rgba(0,0,0,.30);
    }

    .ck-mobile-markets-backdrop.is-open {
        display: block !important;
    }
}

@media (max-width: 768px), (max-height: 600px) {

    /*
    AUTO LANDSCAPE IMMERSIVE MODE
    -----------------------------
    When the phone rotates to landscape, the chart pane becomes a fixed
    viewport layer above the entire CoinsKid website. No fullscreen
    permission/tap is required because this is CSS app-fullscreen rather
    than the browser Fullscreen API.
    */
    body.ck-chart-fullscreen-mode {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    /*
    Some site headers use their own very high z-index (or sit in a
    different stacking context), so stacking the chart pane on top is not
    always enough to guarantee it's visible/untappable underneath. Hide
    the header outright in landscape immersive mode instead. Same selector
    list ckSizeMobileChart() already uses to measure the header.
    */
    body.ck-chart-fullscreen-mode header,
    body.ck-chart-fullscreen-mode .header,
    body.ck-chart-fullscreen-mode #header,
    body.ck-chart-fullscreen-mode .navbar,
    body.ck-chart-fullscreen-mode .fixed-top,
    body.ck-chart-fullscreen-mode .navbar-fixed-top {
        display: none !important;
        visibility: hidden !important;
    }

    body.ck-chart-fullscreen-mode #lbChartPane {
        display: block !important;
        position: fixed !important;
        z-index: 2147483647 !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #0f0f10 !important;
        overflow: hidden !important;
    }

    body.ck-chart-fullscreen-mode #tv_chart_container {
        display: block !important;
        position: absolute !important;
        z-index: 1 !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    @supports (height: 100dvh) {
        body.ck-chart-fullscreen-mode #lbChartPane,
        body.ck-chart-fullscreen-mode #tv_chart_container {
            height: 100dvh !important;
            min-height: 0 !important;
        }
    }

    /*
    VIP controls are INSIDE the chart layer in landscape.
    Keep them at the top-right of the visible chart, respecting the
    device's notch / rounded-corner / status-bar safe area so they can't
    be clipped or sit under the OS UI.
    */
    /*
    MOBILE VIP BUTTON POSITION
    - Increase 24px to move DOWN
    - Decrease 24px to move UP
    - Increase 8px to move LEFT from the right edge
    */
    body.ck-chart-fullscreen-mode .ck-mobile-vip-trigger {
        position: absolute !important;
        z-index: 2147483000 !important;
        top: calc(34px + env(safe-area-inset-top, 0px)) !important;
        right: calc(8px + env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
    }

    /*
    MOBILE VIP MENU PANEL POSITION
    Keep this roughly 40px below the button's top value.
    */
    body.ck-chart-fullscreen-mode .ck-mobile-vip-panel {
        position: absolute !important;
        z-index: 2147483100 !important;
        top: calc(74px + env(safe-area-inset-top, 0px)) !important;
        right: calc(8px + env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        width: min(340px, 46vw) !important;
        max-height: calc(100vh - 58px - env(safe-area-inset-top, 0px)) !important;
        max-height: calc(100dvh - 58px - env(safe-area-inset-top, 0px)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    body.ck-chart-fullscreen-mode .ck-mobile-vip-backdrop {
        position: absolute !important;
        z-index: 2147482900 !important;
        inset: 0 !important;
    }

    /*
    MOBILE MARKETS BUTTON POSITION
    Mirrors VIP on the left side.
    */
    body.ck-chart-fullscreen-mode .ck-mobile-markets-trigger {
        position: absolute !important;
        z-index: 2147483000 !important;
        top: calc(72px + env(safe-area-inset-top, 0px)) !important;
        right: calc(8px + env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
    }

    body.ck-chart-fullscreen-mode .ck-mobile-markets-panel {
        position: absolute !important;
        z-index: 2147483100 !important;
        top: calc(110px + env(safe-area-inset-top, 0px)) !important;
        right: calc(8px + env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        width: min(360px, 54vw) !important;
        max-height: calc(100vh - 72px - env(safe-area-inset-top, 0px)) !important;
        max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    body.ck-chart-fullscreen-mode .ck-mobile-markets-backdrop {
        position: absolute !important;
        z-index: 2147482900 !important;
        inset: 0 !important;
    }

    /*
    Placeholder shown instead of the chart until the user taps the
    fullscreen button. The TradingView widget is not created until then.
    */
    #ckMobileChartPlaceholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 420px;
        padding: 40px 22px;
        text-align: center;
    }

    body.ck-chart-loaded #ckMobileChartPlaceholder {
        display: none !important;
    }

    .ck-mobile-chart-placeholder-icon {
        font-size: 34px;
        line-height: 1;
    }

    .ck-mobile-chart-placeholder-title {
        color: #f4f4f6;
        font: 700 15px/1.35 Arial,Helvetica,sans-serif;
    }

    .ck-mobile-chart-placeholder-sub {
        max-width: 260px;
        color: #a9a9b2;
        font: 500 12.5px/1.4 Arial,Helvetica,sans-serif;
    }

    .ck-mobile-fullscreen-btn {
        margin-top: 6px;
        padding: 11px 20px;
        border: 0;
        border-radius: 8px;
        background: #d7ff4d;
        color: #101012;
        font: 800 13px Arial,Helvetica,sans-serif;
        cursor: pointer;
    }

    /*
    #tv_chart_container stays hidden on mobile until the chart is
    actually mounted, so nothing is loading/rendering behind the
    placeholder.
    */
    #tv_chart_container {
        display: none !important;
    }

    body.ck-chart-loaded #tv_chart_container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .ck-chart-fullscreen-exit {
        display: none !important;
        position: absolute !important;
        z-index: 2147483200 !important;
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        left: calc(8px + env(safe-area-inset-left, 0px)) !important;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 6px;
        background: rgba(20,20,23,.96);
        color: #f4f4f6;
        font: 700 15px Arial,Helvetica,sans-serif;
        box-shadow: 0 3px 14px rgba(0,0,0,.38);
        cursor: pointer;
    }

    body.ck-chart-fullscreen-mode .ck-chart-fullscreen-exit {
        display: inline-flex !important;
    }
}


/* =========================================================
   COINSKID CHART WATERMARK
   Pure page overlay: does not alter TradingView/datafeed/VIP logic.
   ========================================================= */
#lbChartPane {
    position: relative;
}

/* Heatmap availability marker beside supported tickers. */
.ck-market-heatmap-fire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
    cursor: default;
}


/* =========================================================
   MARKET / WATCHLIST TABS
   ========================================================= */
.ck-market-tabs {
    display: flex;
    gap: 4px;
    width: 100%;
    margin-bottom: 8px;
}

.ck-market-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    padding: 0 7px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 6px;
    background: rgba(255,255,255,.035);
    color: #9d9da7;
    font: 700 11px/1 Arial,Helvetica,sans-serif;
    cursor: pointer;
}

.ck-market-tab:hover {
    background: rgba(255,255,255,.065);
    color: #f3f3f6;
}

.ck-market-tab.is-active {
    border-color: rgba(215,255,77,.32);
    background: rgba(215,255,77,.10);
    color: #d7ff4d;
}


/* =========================================================
   MARKET SORT
   Small Rank / Gainers / Losers controls beneath the tabs.
   ========================================================= */
.ck-market-sortbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
    margin: -2px 0 7px;
}

.ck-market-sort-label {
    margin-right: 2px;
    color: #696974;
    font: 700 9px/1 Arial,Helvetica,sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ck-market-sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 0;
    padding: 0 7px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 5px;
    background: rgba(255,255,255,.025);
    color: #8d8d98;
    font: 700 9px/1 Arial,Helvetica,sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.ck-market-sort-btn:hover {
    background: rgba(255,255,255,.06);
    color: #f1f1f3;
}

.ck-market-sort-btn.is-active {
    border-color: rgba(215,255,77,.28);
    background: rgba(215,255,77,.08);
    color: #d7ff4d;
}

.ck-market-sort-btn .ck-sort-icon {
    margin-right: 3px;
    font-size: 10px;
    line-height: 1;
}

.ck-mobile-markets-panel .ck-market-sortbar {
    margin-top: 0;
}

/* Star shown beside each ticker. */
.ck-market-watch-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: 0;
    margin-right: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #777783;
    font: 700 17px/1 Arial,Helvetica,sans-serif;
    cursor: pointer;
    vertical-align: middle;
    transition: color .12s ease, transform .12s ease;
}

.ck-market-watch-star:hover {
    color: #ffd84d;
    transform: scale(1.08);
}

.ck-market-watch-star.is-watchlisted {
    color: #ffd84d;
}

.ck-watchlist-empty {
    display: none;
    padding: 22px 12px;
    color: #888892;
    font: 600 11px/1.45 Arial,Helvetica,sans-serif;
    text-align: center;
}

.ck-watchlist-empty.is-visible {
    display: block;
}

/* Mobile panel tabs. */
.ck-mobile-market-tabs {
    display: flex;
    gap: 5px;
    margin: 0 0 7px;
}

.ck-mobile-market-tabs .ck-market-tab {
    min-height: 34px;
}


/* =========================================================
   MARKET SEARCH CLEAR BUTTON
   ========================================================= */
.ck-market-search-wrap {
    position: relative;
    width: 100%;
}

.ck-market-search-wrap #lbSearch,
.ck-market-search-wrap .ck-mobile-markets-search {
    width: 100%;
    padding-right: 34px !important;
    box-sizing: border-box;
}

/* Hide browser-specific clear control so we only show one X. */
.ck-market-search-wrap input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.ck-market-search-clear {
    display: none;
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 8px;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #a8a8b1;
    font: 700 18px/20px Arial,Helvetica,sans-serif;
    cursor: pointer;
}

.ck-market-search-wrap input:not(:placeholder-shown) + .ck-market-search-clear {
    display: inline-flex;
}

.ck-market-search-clear:hover {
    background: rgba(255,255,255,.08);
    color: #ffffff;
}


/* =========================================================
   COMPACT MARKET ROW FIT
   Keep price + daily move inside the selected row border.
   ========================================================= */
#lbList .ck-market-row,
.ck-mobile-markets-list .ck-market-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#lbList .ck-market-row-inner,
.ck-mobile-markets-list .ck-market-row-inner {
    display: grid !important;
    grid-template-columns: 18px 28px minmax(0, 1fr) 68px !important;
    column-gap: 4px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#lbList .ck-market-watch-star,
.ck-mobile-markets-list .ck-market-watch-star {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    font-size: 15px !important;
}

#lbList .ck-market-row-icon,
.ck-mobile-markets-list .ck-market-row-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    margin: 0 !important;
}

#lbList .ck-market-row-main,
.ck-mobile-markets-list .ck-market-row-main {
    min-width: 0 !important;
    width: auto !important;
    overflow: hidden !important;
}

#lbList .ck-market-row-top,
.ck-mobile-markets-list .ck-market-row-top {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

#lbList .ck-market-symbol,
.ck-mobile-markets-list .ck-market-symbol {
    flex: 0 0 auto !important;
}

#lbList .ck-market-name,
.ck-mobile-markets-list .ck-market-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#lbList .ck-market-row-bottom,
.ck-mobile-markets-list .ck-market-row-bottom {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

#lbList .ck-market-row-right,
.ck-mobile-markets-list .ck-market-row-right {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    margin: 0 !important;
    text-align: right !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

#lbList .ck-market-price,
.ck-mobile-markets-list .ck-market-price {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
}

#lbList .ck-market-change,
.ck-mobile-markets-list .ck-market-change {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
}

.ck-coinskid-chart-watermark {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.055);
    font: 800 clamp(32px, 4.4vw, 72px)/1 Arial, Helvetica, sans-serif;
    letter-spacing: 0.02em;
}

body.ck-chart-loaded .ck-coinskid-chart-watermark {
    display: block;
}

/* Keep the watermark above the chart canvas but below your mobile controls. */
body.ck-chart-fullscreen-mode .ck-coinskid-chart-watermark {
    z-index: 2;
}


/* =========================================================
   SHARED CHART - STATIC SNAPSHOT FOR NON-VIP VIEWERS
   ========================================================= */
.ck-shared-static-view {
    overflow: hidden !important;
}

.ck-shared-static-view #tv_chart_container,
.ck-shared-static-view #ckMobileChartPlaceholder,
.ck-shared-static-view #ckMobileMarketsTrigger,
.ck-shared-static-view #ckMobileMarketsBackdrop,
.ck-shared-static-view #ckMobileMarketsPanel,
.ck-shared-static-view #ckMobileVipTrigger,
.ck-shared-static-view #ckMobileVipBackdrop,
.ck-shared-static-view #ckMobileVipPanel,
.ck-shared-static-view #ckChartFullscreenExit {
    display: none !important;
}

.ck-shared-static-shell {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #0f0f10;
}

.ck-shared-static-notice {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(20,20,23,.98);
    color: #f4f4f6;
    font-family: Arial, Helvetica, sans-serif;
}

.ck-shared-static-copy {
    min-width: 0;
}

.ck-shared-static-title {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.ck-shared-static-sub {
    margin: 0;
    color: #a9a9b2;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.ck-shared-static-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255, 215, 0, .28);
    border-radius: 7px;
    background: rgba(255, 215, 0, .08);
    color: #ffe36e;
    text-decoration: none !important;
    font: 800 11px/1 Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

.ck-shared-static-cta:hover,
.ck-shared-static-cta:focus {
    color: #fff2a8;
    background: rgba(255, 215, 0, .13);
}

.ck-shared-static-image-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 10px;
    background: #0f0f10;
}

.ck-shared-static-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 0;
    box-shadow: 0 8px 30px rgba(0,0,0,.28);
}

@media (max-width: 768px) {
    .ck-shared-static-notice {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        padding: 9px 10px;
    }

    .ck-shared-static-cta {
        width: 100%;
    }

    .ck-shared-static-image-wrap {
        padding: 6px;
    }
}