/* Ad feed skeleton — mirrors live one_add_wrapper card layout */
.skeleton.threedot-more-info {
    border-radius: 50%;
}

.skeleton.info_button {
    border-radius: 6px;
}

.ad-feed-skel-wrapper.skeletonadd,
.ad-feed-skel-card.skeletonadd {
    pointer-events: none;
    box-shadow: 3px 1px 16px 0 rgba(0, 0, 0, 0.1);
    height: auto !important;
    align-self: start;
}

.ad-feed-skel-wrapper > .add_item {
    padding-top: 0 !important;
    box-shadow: none !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

.ad-feed-skel-line,
.ad-feed-skel-chip,
.ad-feed-skel-metrics-seg,
.ad-feed-skel-country-dots,
.ad-feed-skel-menu-dot,
.ad-feed-skel-avatar,
.ad-feed-skel-media,
.ad-feed-skel-footer-btn,
.ad-feed-skel-timeline {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e8edf3 45%, #f8fafc 55%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: ad-skel-shimmer 1.35s ease-in-out infinite;
}

.ad-feed-skel-line {
    height: 10px;
    width: 100%;
    max-width: 100%;
}

.ad-feed-skel-line--sm { height: 8px; }
.ad-feed-skel-line--xs { height: 7px; }

/* Metrics bar (blue card top cap) */
.ad-feed-skel-wrapper .fw-ad-card-top .ad-feed-skel-metrics-seg,
.ad-feed-skel-wrapper .fw-ad-card-top .ad-feed-skel-country-dots,
.ad-feed-skel-wrapper .fw-ad-card-top .ad-feed-skel-menu-dot {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.34) 55%, rgba(255, 255, 255, 0.28) 100%);
    background-size: 200% 100%;
}

.ad-feed-skel-metrics-seg {
    width: 52px;
    height: 12px;
    border-radius: 4px;
}

.ad-feed-skel-metrics-seg--wide {
    width: 72px;
}

.ad-feed-skel-country-dots {
    width: 44px;
    height: 14px;
    border-radius: 999px;
}

.ad-feed-skel-menu-dot {
    width: 20px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Header chips (publisher + score/days) */
.ad-feed-skel-chip {
    width: 52px;
    height: 20px;
    border-radius: 999px;
}

.ad-feed-skel-chip--publisher {
    width: 44px;
}

.ad-feed-skel-chip--score {
    width: 72px;
    height: 20px;
}

.ad-feed-skel-page-row {
    min-height: 46px;
}

.ad-feed-skel-page-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.ad-feed-skel-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ad-feed-skel-page-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ad-feed-skel-timeline {
    height: 28px;
    margin: 0 12px;
    border-radius: 4px;
}

.ad-feed-skel-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 10px !important;
    min-height: 52px;
}

.ad-feed-skel-media-wrap {
    padding: 7px;
}

.ad-feed-skel-media {
    width: 100%;
    height: 325px;
    border-radius: 8px;
    background-color: #f8fafc;
}

.ad-feed-skel-footer {
    padding: 12px 16px 16px !important;
    border-top: 1px solid #f2f2f2 !important;
    background: #fff !important;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.ad-feed-skel-cta-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100%;
}

.ad-feed-skel-cta-text {
    flex: 1;
    min-width: 0;
    max-width: 167px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ad-feed-skel-footer-btn {
    flex-shrink: 0;
    height: 38px;
    border-radius: 8px;
}

.ad-feed-skel-footer-btn--cta {
    width: 88px;
}

/* Modal / page sub-feeds use the same card shell */
.addmodal .add_list .ad-feed-skel-wrapper,
.pageadslist .ad-feed-skel-wrapper,
.productadslist .ad-feed-skel-wrapper {
    width: 100%;
}

html[data-theme="dark"] .ad-feed-skel-wrapper .fw-ad-card-top .ad-feed-skel-metrics-seg,
html[data-theme="dark"] .ad-feed-skel-wrapper .fw-ad-card-top .ad-feed-skel-country-dots,
html[data-theme="dark"] .ad-feed-skel-wrapper .fw-ad-card-top .ad-feed-skel-menu-dot {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.08) 100%);
    background-size: 200% 100%;
}

html[data-theme="dark"] .ad-feed-skel-line,
html[data-theme="dark"] .ad-feed-skel-chip,
html[data-theme="dark"] .ad-feed-skel-avatar,
html[data-theme="dark"] .ad-feed-skel-media,
html[data-theme="dark"] .ad-feed-skel-footer-btn,
html[data-theme="dark"] .ad-feed-skel-timeline {
    background: linear-gradient(90deg, var(--dk-surface-3) 0%, var(--dk-surface-2) 45%, var(--dk-surface-3) 55%, var(--dk-surface-3) 100%);
    background-size: 200% 100%;
}

html[data-theme="dark"] .ad-feed-skel-media {
    background-color: var(--dk-surface-2);
}

@keyframes ad-skel-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
