/**
 * Frontend Styles for Codicts Voxel Ads
 */

/* Ad Container */
.codicts-ad-container {
    position: relative;
    display: block;
    margin: 20px auto;
    max-width: 100%;
    overflow: hidden;
}

.codicts-ad-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ad Label */
.codicts-ad-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Label positions */
.codicts-ad-label--top {
    text-align: center;
}

.codicts-ad-label--bottom {
    text-align: center;
}

.codicts-ad-label--top-left {
    text-align: left;
}

.codicts-ad-label--top-right {
    text-align: right;
} 
 
.codicts-ad-label--top,
.codicts-ad-label--top-left,
.codicts-ad-label--top-right {
    margin-bottom: 5px;
}

.codicts-ad-label--bottom {
    margin-top: 5px;
}

/* Ad Content */
.codicts-ad-content {
    position: relative;
}

/* Ad Title */
.codicts-ad-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.4;
}

/* Ad Description */
.codicts-ad-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.5;
}

.codicts-ad-link {
    display: inline-block;
    text-decoration: none;
}

/* User can add custom hover effects via their own CSS */

/* Inline Ad in Post Feed */
.codicts-inline-ad,
.codicts-inline-ad-feed-item,
.codicts-inline-ad-injected {
    /* User can add custom CSS for styling */
}

.codicts-inline-ad:hover,
.codicts-inline-ad-feed-item:hover,
.codicts-inline-ad-injected:hover {
    /* transform: translateY(-2px); */
}

.codicts-ad-wrapper {
    position: relative;
    animation: codicts-fade-in 0.5s ease;
}

@keyframes codicts-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Voxel-specific post feed integration */
.ts-term-posts .codicts-inline-ad-injected,
.ts-user-posts .codicts-inline-ad-injected {
    width: 100%;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .codicts-ad-container {
        margin: 15px auto;
    }

    .codicts-inline-ad,
    .codicts-inline-ad-feed-item {
        margin: 15px 0;
        padding: 12px;
    }
}

/* Loading State */
.codicts-ad-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    background: #f5f5f5;
    border-radius: 4px;
}

.codicts-ad-loading::after {
    content: '';
    width: 30px;
    height: 30px;
    border: 3px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: codicts-spin 0.8s linear infinite;
}

@keyframes codicts-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Ad Error State */
.codicts-ad-error {
    padding: 20px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    text-align: center;
    font-size: 14px;
}

/* Google AdSense Container */
.codicts-ad-content ins.adsbygoogle {
    display: block;
    text-align: center;
}

/* Print Styles - Hide ads when printing */
@media print {
    .codicts-ad-container,
    .codicts-inline-ad,
    .codicts-inline-ad-feed-item {
        display: none !important;
    }
}

/* ============================================================
   Ad Author Performance widget (codicts-ad-author-stats)
   ============================================================ */
.cvx-stats { width: 100%; }
.cvx-stats--notice,
.cvx-stats-empty {
    padding: 24px;
    text-align: center;
    color: #6b7280;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}
.cvx-stats-heading { margin: 0 0 16px; font-size: 1.25em; font-weight: 700; }
.cvx-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.cvx-stats-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}
.cvx-stats-card-num { font-size: 1.6em; font-weight: 800; line-height: 1.1; }
.cvx-stats-card-label { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

/* Filter bar (zone + ad dropdowns) */
.cvx-stats-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.cvx-stats-select {
    padding: 7px 12px;
    font-size: 0.9em;
    line-height: 1.3;
    color: inherit;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    cursor: pointer;
    max-width: 100%;
}

/* Activity Trend chart */
.cvx-stats-chart-wrap {
    position: relative;
    height: 300px;
    margin-bottom: 20px;
}
.cvx-stats-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    /* border-box, or the inherited 24px padding is ADDED to height:100% and the
       message stands 348px tall inside a 300px box. */
    box-sizing: border-box;
    height: 100%;
    margin: 0;
}

/* Both children of the chart wrapper stay in the DOM and are toggled with the
   `hidden` attribute, so the chart can be repointed at new data without
   re-rendering markup. `hidden` alone does NOT hold here:

     - the UA rule is `[hidden] { display: none }`, specificity (0,1,0)
     - `.cvx-stats-chart-empty { display: flex }` is ALSO (0,1,0), and this
       stylesheet loads later, so it wins on source order and the "no data"
       message renders on top of a perfectly good chart
     - a theme rule as ordinary as `canvas { display: block }` beats the UA
       rule too, leaving a phantom 150px canvas

   One rule at (0,2,0) covers the canvas and the message together, and keeps
   winning if either of those declarations is ever edited. */
.cvx-stats-chart-wrap [hidden] {
    display: none;
}

.cvx-stats-table-wrap { overflow-x: auto; }
.cvx-stats-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.cvx-stats-table th,
.cvx-stats-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.cvx-stats-table th { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.cvx-stats-table .cvx-num { text-align: right; font-variant-numeric: tabular-nums; }
.cvx-stats-name { font-weight: 600; }
.cvx-stats-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cvx-stats-pill.is-active { background: rgba(16, 185, 129, 0.15); color: #059669; }
.cvx-stats-pill.is-pending { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.cvx-stats-pill.is-inactive { background: rgba(107, 114, 128, 0.15); color: #6b7280; }
.cvx-stats-pill.is-paused { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.cvx-stats-pill.is-expired { background: rgba(100, 116, 139, 0.18); color: #64748b; }
.cvx-stats-pill.is-declined { background: rgba(239, 68, 68, 0.15); color: #dc2626; }

/* Preview thumbnail */
.cvx-col-preview { width: 52px; }
.cvx-stats-thumb {
    width: 40px; height: 40px; padding: 0; border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px; overflow: hidden; cursor: pointer; background: rgba(0,0,0,0.03);
    display: inline-flex; align-items: center; justify-content: center;
}
.cvx-stats-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvx-thumb-ph { font-weight: 800; color: #9aa4af; font-size: 15px; }

/* Row actions */
.cvx-col-actions { white-space: nowrap; text-align: center; }
.cvx-stats-actions { display: inline-flex; gap: 6px; justify-content: center; }
.cvx-stats-btn {
    padding: 5px 10px; font-size: 0.82em; font-weight: 600; line-height: 1.2;
    border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; background: transparent;
    color: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.cvx-stats-btn:hover { background: rgba(0,0,0,0.05); }
.cvx-stats-btn.is-loading { opacity: 0.55; pointer-events: none; }
.cvx-stats-btn.is-disabled { opacity: 0.5; cursor: default; }
.cvx-stats-btn.cvx-stats-danger { color: #dc2626; border-color: rgba(220,38,38,0.3); }
.cvx-stats-btn.cvx-stats-danger:hover { background: rgba(220,38,38,0.08); }

/* Preview modal */
.cvx-ad-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.cvx-ad-modal.is-open { display: block; }
.cvx-ad-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.cvx-ad-modal-box {
    position: relative; z-index: 1; max-width: 640px; width: calc(100% - 40px);
    margin: 6vh auto 0; background: #fff; color: #1f2937; border-radius: 14px;
    padding: 24px; max-height: 84vh; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.cvx-ad-modal-close {
    position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border: none;
    background: rgba(0,0,0,0.06); border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: #374151;
}
.cvx-ad-modal-close:hover { background: rgba(0,0,0,0.12); }
.cvx-ad-modal-title { margin: 0 40px 16px 0; font-size: 1.15em; font-weight: 700; }
.cvx-ad-modal-body { text-align: center; }
.cvx-ad-modal-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
.cvx-ad-modal-body .cvx-preview-note { color: #6b7280; font-size: 0.95em; }

/* Filtering happens in place now, so the panel needs to say it is working.
   Pointer events stay off during the request: a second change mid-flight would
   race the first response and could paint older data over newer. */
.cvx-stats.is-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* ── Video ads ──
   The player takes the CREATIVE's shape, not a fixed 16:9 box. An advertiser
   uploading a 270x500 portrait or a 1440x230 banner was getting it pillar or
   letterboxed inside a widescreen frame, which wastes most of the slot and
   looks like a fault.

   --cvx-ratio is written onto the wrapper by PHP from the attachment's
   recorded dimensions, so the box is the right shape on first paint and the
   feed does not jump. 16 / 9 stays the default for embeds, whose dimensions
   live on the provider and cannot be known here, and for a video we could not
   measure, which the front end then fixes from its metadata.

   The padding-top fallback covers browsers predating aspect-ratio, which is
   why the iframe is absolutely positioned rather than simply 100% tall. */
.codicts-ad-video {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cvx-ratio, 16 / 9);
    border-radius: 4px;
    overflow: hidden;
}

/* Only the frame that can still show bars paints them. A self-hosted video
   sized from its own dimensions has nothing to letterbox, so a black plate
   behind it would just be a black edge against a light page. */
.codicts-ad-video--embed {
    background: #000;
}

/* No custom property in the ratio here on purpose: padding-top needs a
   percentage, which is a different unit from the ratio, and this path only
   exists for browsers that have neither. They get a 16:9 box and contain. */
@supports not (aspect-ratio: 16 / 9) {
    .codicts-ad-video { height: 0; padding-top: 56.25%; }
}

.codicts-ad-video video,
.codicts-ad-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* contain, not cover: an advertiser's creative must not be cropped to fit
       a box whose shape they did not choose. */
    object-fit: contain;
}

/* The whole player is the click-through, when the setting asks for it. The
   renderer suppresses the native controls in that mode, so there is nothing
   underneath for this to swallow.

   The label inside is for assistive tech only. A link with no text is read
   out as its URL, which is not what an advertiser wrote. clip-path over
   display:none because hidden text is not announced at all. */
.codicts-ad-video-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    cursor: pointer;
}

.codicts-ad-video-link > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* A visible focus ring, because the link has no visible text of its own and
   a keyboard user would otherwise have no idea where they are. */
.codicts-ad-video-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* The separate button sits UNDER the player, never over it: in button mode
   the controls are live, and a link across them swallows every click. */
.codicts-ad-video-cta {
    margin-top: 8px;
    text-align: center;
}

/* Outlined rather than filled, so it inherits the theme's link colour and
   cannot end up invisible against a background we do not control. */
.codicts-ad-video-cta a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid currentColor;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    line-height: 1.4;
}

/* The watch-through row reads as a continuation of the headline cards, so it
   sits tighter to them and its percentage is subordinate to the count. */
.cvx-stats-cards--video { margin-top: 8px; }
.cvx-stats-cards--video .cvx-stats-card-sub {
    display: block;
    font-size: 0.85em;
    opacity: 0.7;
}

/* The provider builds its own iframe inside this mount, so the mount has to
   fill the aspect box the same way a plain iframe would. */
.codicts-ad-video-mount,
.codicts-ad-video-mount iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}