/* MyStudio Ads: one ad space. --ms-ad-w / --ms-ad-h come from the space's size. */
.ms-ads-space {
    width: 100%;
    max-width: var(--ms-ad-w, 728px);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
}
.ms-ads-item { display: none; }
.ms-ads-item.is-active { display: block; }
.ms-ads-space img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--ms-radius, 0.5rem);
}
.ms-ads-space a { display: block; }

/* Locations */
.ms-ads-at-below_header { margin-top: 1rem; margin-bottom: 1rem; }
.ms-ads-at-post { margin-bottom: 1rem; }
.ms-ads-at-footer { margin-top: 1rem; }
.ms-ads-at-sidebar { margin-top: 0.75rem; }
.ms-ads-at-header { margin: 0; }

/* Buying ad space (misc.php?action=ms_ads_buy), renewals and the User CP list */
.ms-ads-shop { max-width: 760px; margin: 1.5rem auto; padding: 0 16px; }
.ms-ads-body { padding: 1.25rem; }
.ms-ads-alert { margin: 0 0 1rem; }
.ms-ads-intro { margin: 0 0 .75rem; }
.ms-ads-muted { color: var(--ms-muted); }
.ms-ads-guidelines { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 8px; background: var(--ms-accent-subtle); color: var(--ms-text); }
.ms-ads-label { display: block; margin: 0 0 .4rem; color: var(--ms-muted); font-weight: 600; text-transform: none; }
.ms-ads-hint { display: block; margin-top: .25rem; color: var(--ms-muted); text-transform: none; }
.ms-ads-buyform { display: grid; gap: 1rem; }
.ms-ads-field { display: block; margin: 0; }
.ms-ads-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.ms-ads-spaces { display: grid; gap: .6rem; }
.ms-ads-space-card { padding: .85rem 1rem; border: 1px solid var(--ms-border); border-radius: 10px; background: var(--ms-surface); }
.ms-ads-space-full { opacity: .6; }
.ms-ads-space-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; color: var(--ms-text); }
.ms-ads-size { font-size: .85rem; color: var(--ms-muted); white-space: nowrap; }
.ms-ads-pkgs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.ms-ads-pkg-input { position: absolute; opacity: 0; pointer-events: none; }
.ms-ads-pkg { display: inline-flex; gap: .4rem; padding: .45rem .9rem; border: 1px solid var(--ms-accent); border-radius: 999px; cursor: pointer; background: var(--ms-accent-subtle); color: var(--ms-text); text-transform: none; }
.ms-ads-shop label, .ms-ads-field { text-transform: none; }
.ms-ads-pkg-input:checked + .ms-ads-pkg { background: var(--ms-accent); border-color: var(--ms-accent); color: var(--ms-text-inv); }
.ms-ads-pkg-input:focus-visible + .ms-ads-pkg { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.ms-ads-actions { display: flex; justify-content: flex-end; }
.ms-ads-btn { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
.ms-ads-empty { padding: 1rem; text-align: center; color: var(--ms-muted); }
.ms-ads-renew-ad { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ms-ads-thumb { display: block; max-width: 160px; max-height: 60px; width: auto; height: auto; border-radius: 4px; }
.ms-ads-thead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.ms-ads-scroll { overflow-x: auto; }
.ms-ads-table { width: 100%; border-collapse: collapse; }
.ms-ads-table th, .ms-ads-table td { padding: .55rem .75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ms-border); }
.ms-ads-table .ms-ads-num { text-align: right; white-space: nowrap; }
.ms-ads-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--ms-accent-subtle); color: var(--ms-text); }
.ms-ads-badge-active { background: rgba(25, 135, 84, .15); }
.ms-ads-badge-rejected, .ms-ads-badge-cancelled, .ms-ads-badge-expired { background: rgba(220, 53, 69, .14); }
.ms-ads-badge-unpaid, .ms-ads-badge-review { background: rgba(214, 158, 46, .18); }
@media (max-width: 576px) {
    .ms-ads-shop { margin: 1rem auto; padding: 0; }
    .ms-ads-body { padding: 1rem; }
    .ms-ads-actions .ms-ads-btn { flex: 1 1 auto; justify-content: center; }
    .ms-ads-table th, .ms-ads-table td { padding: .5rem .4rem; }
}