.unagui-am-space {
    position: relative;
    max-width: 100%;
    /* Responsive Dimensions via CSS Vars */
    width: var(--uam-w-d, max-content);
    height: var(--uam-h-d, auto);
    /* Placeholder style - Default for Rotation (Persistent) */
    background-color: var(--uam-bg, transparent);
    overflow: hidden;
}

/* Ensure space wrapper is transparent in list mode, as bg belongs on items */
.unagui-am-space.unagui-am-display-list {
    background-color: transparent !important;
}

@media (max-width: 1024px) {
    .unagui-am-space {
        width: var(--uam-w-t, max-content);
        height: var(--uam-h-t, auto);
    }
}

@media (max-width: 768px) {
    .unagui-am-space {
        width: var(--uam-w-m, max-content);
        height: var(--uam-h-m, auto);
    }
}

/* =====================================================
   DIMENSIONS: List mode — height goes on each ITEM
   (banners stack, each one is N px tall)
   ===================================================== */

/* For list mode + dims: space grows with content, not fixed */
.unagui-am-space.unagui-am-has-dims.unagui-am-display-list {
    height: auto !important;
    overflow: visible;
}

/* Width still applies to space even in list mode */
.unagui-am-space.unagui-am-has-dims.unagui-am-display-list {
    width: var(--uam-w-d, max-content);
}

@media (max-width: 1024px) {
    .unagui-am-space.unagui-am-has-dims.unagui-am-display-list {
        width: var(--uam-w-t, max-content);
    }
}

@media (max-width: 768px) {
    .unagui-am-space.unagui-am-has-dims.unagui-am-display-list {
        width: var(--uam-w-m, max-content);
    }
}

/* Each item in list+dims mode gets the configured height */
.unagui-am-space.unagui-am-has-dims.unagui-am-display-list .unagui-am-item {
    height: var(--uam-h-d, auto);
    width: 100%;
    background-color: var(--uam-bg, transparent);
    margin-bottom: 10px;
    overflow: hidden;
}

/* If no explicit width is set in list mode, items shouldn't stretch to fill the widest banner */
.unagui-am-space.unagui-am-has-dims.unagui-am-display-list.unagui-am-no-explicit-w .unagui-am-item {
    width: max-content;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .unagui-am-space.unagui-am-has-dims.unagui-am-display-list .unagui-am-item {
        height: var(--uam-h-t, var(--uam-h-d, auto));
    }
}

@media (max-width: 768px) {
    .unagui-am-space.unagui-am-has-dims.unagui-am-display-list .unagui-am-item {
        height: var(--uam-h-m, var(--uam-h-t, var(--uam-h-d, auto)));
    }
}

/* Last item: no bottom margin */
.unagui-am-space.unagui-am-has-dims.unagui-am-display-list .unagui-am-item:last-child {
    margin-bottom: 0;
}

/* =====================================================
   DIMENSIONS: Rotation modes — height goes on SPACE
   (only one banner shows, space is fixed size)
   ===================================================== */
.unagui-am-space.unagui-am-has-dims:not(.unagui-am-display-list) .unagui-am-items {
    align-items: stretch;
    height: 100%;
}

.unagui-am-space.unagui-am-has-dims:not(.unagui-am-display-list) .unagui-am-item {
    height: 100%;
    width: 100%;
}

/* Image alignment within item (rotation modes with dims) */
.unagui-am-space.unagui-am-has-dims:not(.unagui-am-display-list) .unagui-am-link {
    display: flex;
    justify-content: var(--uam-justify-h, center);
    align-items: center;
    height: 100%;
    width: 100%;
}

/* Image alignment within item (list mode with dims) */
.unagui-am-space.unagui-am-has-dims.unagui-am-display-list .unagui-am-link {
    display: flex;
    justify-content: var(--uam-justify-h, center);
    align-items: center;
    height: 100%;
    width: 100%;
}


/* Wrapper for items - Handles Alignment */
.unagui-am-items {
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    width: 100%;
    height: 100%;
    justify-content: center;
    /* Vertical Center */
    align-items: var(--uam-justify-h, center);
    /* Horizontal Alignment (Cross Axis) */
}

/* Add default spacing between banners in List mode */
.unagui-am-display-list .unagui-am-items {
    gap: 15px;
}

/* When no explicit dimensions: shrink-wrap to content */
.unagui-am-space:not(.unagui-am-has-dims) .unagui-am-items {
    width: auto;
    height: auto;
}

/* Item styling */
.unagui-am-item {
    overflow: hidden;
    border-radius: inherit;
    /* Default: Fill container */
    width: 100%;
    height: 100%;
    position: relative;
}

/* When no explicit dims: item also shrinks */
.unagui-am-space:not(.unagui-am-has-dims) .unagui-am-item {
    width: auto;
    height: auto;
}

/* =====================================================
   ITEM VISIBILITY
   ===================================================== */

/* Hidden by default (rotation JS controls visibility) */
.unagui-am-item {
    display: none;
}

/* List mode: all items always visible */
.unagui-am-display-list .unagui-am-item {
    display: block;
}

/* Active item visible (rotation mode) */
.unagui-am-space .unagui-am-item.active {
    display: block;
}

/* SPECIAL: Original Fit (None) - Shrink to content, image displays at natural size
   (ONLY applies if explicit dimensions are NOT set. If set, they act as a fixed window) */
.unagui-am-space:not(.unagui-am-has-dims).unagui-am-fit-none,
.unagui-am-space:not(.unagui-am-has-dims).unagui-am-fit-none .unagui-am-items,
.unagui-am-space:not(.unagui-am-has-dims).unagui-am-fit-none .unagui-am-item,
.unagui-am-space:not(.unagui-am-has-dims).unagui-am-fit-none .unagui-am-link,
.unagui-am-space:not(.unagui-am-has-dims).unagui-am-fit-none .unagui-am-link picture {
    width: auto !important;
    height: auto !important;
    overflow: visible;
}

.unagui-am-space:not(.unagui-am-has-dims).unagui-am-fit-none .unagui-am-link img,
.unagui-am-space:not(.unagui-am-has-dims).unagui-am-fit-none .unagui-am-link video,
.unagui-am-space:not(.unagui-am-has-dims).unagui-am-fit-none .unagui-am-item img,
.unagui-am-space:not(.unagui-am-has-dims).unagui-am-fit-none .unagui-am-item video {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    object-fit: none !important;
    display: block;
}

/* STANDARD: Fill/Cover/Contain */
.unagui-am-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border: none;
}

/* Images — sizing controlled by CSS, not inline styles */
.unagui-am-item img,
.unagui-am-item video,
.unagui-am-item picture,
.unagui-am-link picture,
.unagui-am-link img,
.unagui-am-link video,
.unagui-am-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: var(--uam-fit, fill);
    object-position: var(--uam-obj-pos, center center);
}

/* When no explicit dims set: images should only take their natural size */
.unagui-am-space:not(.unagui-am-has-dims) .unagui-am-img,
.unagui-am-space:not(.unagui-am-has-dims) .unagui-am-link img,
.unagui-am-space:not(.unagui-am-has-dims) .unagui-am-item img {
    width: auto;
    height: auto;
    max-width: 100%;
}

/* Popup/Floating Styles */
/* ROOT is the Overlay */
.unagui-am-type-popup,
.unagui-am-type-floating {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    /* Overlay Color set inline */
    display: none;
    /* Flex when open */
    align-items: center;
    justify-content: center;
    /* Reset transforms/positioning */
    transform: none;
    box-shadow: none;
    padding: 20px;
    /* Safe area */
    box-sizing: border-box;
}

.unagui-am-type-popup.open,
.unagui-am-type-floating.open {
    display: flex;
}

/* Inner Popup Content Box */
.unagui-popup-content {
    position: relative;
    background: transparent;
    /* Assuming content handles BG or transparent */
    max-width: 100%;
    max-height: 90vh;
    /* width set inline via PHP */
}

/* If banners have transparency, maybe we need a bg? */
/* .unagui-popup-content { background: #fff; } */
/* But usually ads are images. If HTML text ad, user must style it. */

/* Fix for Popup/Floating Images: Must fit container */
.unagui-am-type-popup .unagui-am-item img,
.unagui-am-type-popup .unagui-am-item picture,
.unagui-am-type-popup .unagui-am-link img,
.unagui-am-type-floating .unagui-am-item img,
.unagui-am-type-floating .unagui-am-item picture,
.unagui-am-type-floating .unagui-am-link img,
.unagui-am-type-floating .unagui-am-link video {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}

.unagui-am-close {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #333;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    z-index: 100000;
}

/* Position Variants */
/* Center (default) - handled by base flexbox align/justify */

/* Top Bar */
.unagui-am-type-floating.unagui-position-top_bar,
.unagui-am-type-popup.unagui-position-top_bar {
    align-items: flex-start;
    padding: 0;
}

.unagui-position-top_bar .unagui-popup-content {
    width: 100% !important;
    max-width: 100%;
    border-radius: 0;
}

.unagui-position-top_bar .unagui-am-close {
    top: 5px;
    right: 10px;
}

/* Bottom Bar */
.unagui-am-type-floating.unagui-position-bottom_bar,
.unagui-am-type-popup.unagui-position-bottom_bar {
    align-items: flex-end;
    padding: 0;
}

.unagui-position-bottom_bar .unagui-popup-content {
    width: 100% !important;
    max-width: 100%;
    border-radius: 0;
}

.unagui-position-bottom_bar .unagui-am-close {
    top: 5px;
    right: 10px;
}

/* Bottom Right */
.unagui-am-type-floating.unagui-position-bottom_right,
.unagui-am-type-popup.unagui-position-bottom_right {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 20px;
}

.unagui-position-bottom_right .unagui-am-close {
    top: -10px;
    right: -10px;
}

/* Bottom Left */
.unagui-am-type-floating.unagui-position-bottom_left,
.unagui-am-type-popup.unagui-position-bottom_left {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 20px;
}

.unagui-position-bottom_left .unagui-am-close {
    top: -10px;
    right: -10px;
}

/* Close Button Positioning */
.unagui-am-close.unagui-close-inside_top_right {
    top: 5px !important;
    right: 5px !important;
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
}

.unagui-am-close.unagui-close-outside_top_right {
    top: -15px;
    right: -15px;
}

/* Override for full width bars where outside is ambiguous */
.unagui-position-top_bar .unagui-am-close.unagui-close-outside_top_right,
.unagui-position-bottom_bar .unagui-am-close.unagui-close-outside_top_right {
    top: 5px;
    right: 10px;
}

/* ============================================
   Ad Space Wrapper
   ============================================ */
.unagui-am-wrapper {
    margin: 0;
    padding: 0;
    max-width: 100%;
    /* width/max-width dynamically set by inline styles */
}

/* ============================================
   Auto-injected ads spacing (inside post content)
   ============================================ */
.unagui-am-auto-injected {
    margin: 15px 0;
}

/* ============================================
   Ad Label (Advertisement notice)
   ============================================ */
.unagui-am-label {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 2px 0;
}

/* ============================================
   Link Display Below Banner
   ============================================ */
.unagui-am-link-display {
    font-size: 11px;
    color: #888;
    text-align: center;
    padding: 3px 0;
    word-break: break-all;
    line-height: 1.3;
}

/* ============================================
   Auto Injection Grid Breaking
   ============================================ */
.unagui-archive-injection.unagui-inject-full-width {
    grid-column: 1 / -1;
    width: 100%;
    clear: both;
    flex-basis: 100%;
    box-sizing: border-box;
}

/* Ensure the ad space inside takes full width too if needed */
.unagui-archive-injection.unagui-inject-full-width .unagui-am-space {
    width: 100%;
    max-width: 100%;
}