/* mycampaigns.css - the campaigns page, plus card styles that other pages still use.
 *
 * Part 1  SHARED CARD BASE   the original .campaign_card / .image-container / buttons rules, kept because the shared "campaign finished" pop-up
 *                            (js/common_functions.js) and the editor's content picker build on them. The campaigns page itself no longer
 *                            uses them (the old page layout rules, #campaign_items / #content_filters / .list-view, are gone).
 * Part 2  CAMPAIGNS PAGE     everything scoped to body.mc-body / .mc-* (design: css/adspot-ui.css).
 * Part 3  EDITOR + UPLOADER  the few rules the editor and the uploader panel need from this page.
 */

/* ==========================================================================================================
   PART 1 - SHARED CARD BASE
   ========================================================================================================== */
.campaign_card {
    width: 290px;
    background: #fff;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
    border: 1px solid #f0f0f0;
    color: #333;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.campaign_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.image-container {
    width: 100%;
    height: 180px;
    flex-shrink: 0;
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 16px 16px 0 0;
    transition: opacity 0.3s ease;
}
.campaign_card:hover .image-container img {
    opacity: 0.95;
}
.campaign_card_content {
    padding: 16px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.campaign_card_status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--ui-radius);
    display: inline-block;
    /* align-self: center; */
    max-width: 100%;
    text-align: center;
    position: absolute;
    margin-top: -191px;
    margin-left: -12px;
    opacity: 1;
}
.campaign_card_status_draft {
    background: #8d6e63;
}
.campaign_card_status_active {
    background: #4caf50;
}
.campaign_card_status_complete {
    background: #9a9a9a;
}
.campaign_card_status_denied {
    background: #ff5151;
}
.campaign_card_title {
    font-size: 16px;
    color: #1a1a1a;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 2px;
}
.campaign_card_duration,
.campaign_card_aspect,
.campaign_card_plays,
.campaign_card_owner {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}
.campaign_card_duration span,
.campaign_card_aspect span,
.campaign_card_plays span,
.campaign_card_owner span {
    font-weight: 700;
    color: #333;
    margin-right: 5px;
}
.campaign_card_category_all {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 4px;
}
.campaign_card_category {
    font-size: 14px;
    color: #fff;
    padding: 5px 9px;
    border-radius: var(--ui-radius-lg);
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
}
.campaign_card_category[data-category="casinos"] {
    background: #f9a825;
}
.campaign_card_category[data-category="beauty"] {
    background: #e48e9d;
}
.campaign_card_category[data-category="shopping"] {
    background: #619edc;
}
.campaign_card_category[data-category="restaurant"] {
    background: #ca6a6a;
}
.campaign_card_category[data-category="sport"] {
    background: #4a90e2;
}
.campaign_card_category[data-category="outdoors"] {
    background: #daac04;
}
.campaign_card_category[data-category="all categories"] {
    background: #a2bb9f;
}
.card_buttons {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}
.green_buttons {
    background: #a2bb9f;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    flex: 1;
    text-align: center;
    min-width: 80px;
}
.green_buttons:hover {
    background: #8aa587;
    transform: translateY(-1px);
}
.green_buttons:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #ccc;
}
.green_buttons:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(162, 187, 159, 0.3);
}
.lightblue_buttons {
    background: #e6e6e6;
    color: #333;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    flex: 1;
    text-align: center;
    min-width: 80px;
}
.lightblue_buttons:hover {
    background: #d6d6d6;
    transform: translateY(-1px);
}
.lightblue_buttons:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(230, 230, 230, 0.5);
}
.campaign_fav_img {
    position: absolute;
    top: 4px;
    right: 2px;
    width: 24px !important;
    height: 24px !important;
    background: white !important;
    border-radius: 100% !important;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s ease;
}
.campaign_fav_img:hover {
    background: #f0f0f0;
}
.campaign_fav_img img {
    width: 16px;
    height: 16px;
}
.campaign_item_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    z-index: 1;
}
.campaign_item_arrow:hover {
    opacity: 1;
}
.campaign_item_arrow_left {
    top: 100px;
    left: 12px;
    transform: translateY(-50%) rotate(90deg);
}
.campaign_item_arrow_right {
    right: 12px;
    top: 100px;
    transform: translateY(-50%) rotate(-90deg);
}
.campaign_card_item_counter {
    position: absolute;
    top: 164px;
    left: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--ui-radius-xs);
    z-index: 2;
    /* display: none; */
}
#remove_campaign_button,
#stop_campaign_button {
    display: none;
}
.remove_campaign_modal {
    display: none;
    background: rgba(0, 0, 0, 0.82);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
}
.remove_campaign_box {
    background: #fff;
    width: fit-content;
    padding: 35px;
    margin: auto;
    border-radius: 20px;
    font-size: 16px;
}
.remove_campaign_box img {
    width: 100px;
    margin: auto;
    display: block;
    padding-bottom: 19px;
    animation: pulse-black 1s infinite;
}
@keyframes pulse-black {
    0% { transform: scale(0.95); opacity: 0.7; }
    70% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}
.campaign_buttons {
    font-size: 14px;
    padding: 8px;
    width: 50%;
    min-width: max-content;
    box-sizing: border-box;
    border-radius: 4px;
    background: #f0f0f0;
    color: #a7a7a7;
}
#editCampaignhtml {
    z-index: 4;
    position: fixed;
    top: 50px;
    padding-top: 100px;
    background: #fdfdfd;
    width: 100%;
    height: calc(100vh - 150px);
    overflow: auto;
    overflow-x: hidden;
}
ul {
    list-style: none;
    padding-left: 0;
}

/* ==========================================================================================================
   CAMPAIGNS PAGE (mycampaigns/index.html). Built on css/adspot-ui.css; every rule is scoped to body.mc-body or an .mc- class,
   so the editor and the shared pop-ups, which use the block above, are not touched.
   ========================================================================================================== */

body.mc-body { background: var(--ui-bg); }

/* ---- page header */
.mc-head { align-items: flex-end; }
.mc-head .ui-back { margin-bottom: 10px; }
.mc-head .ui-back[hidden] { display: none; }
.mc-head__actions .ui-select { width: auto; min-width: 190px; }
.mc-head__actions .ui-select[hidden], .mc-head__actions .ui-btn[hidden] { display: none; }
.mc-head__actions .ui-btn svg { width: 17px; height: 17px; flex: none; }
.mc-head .ui-pagehead__sub { min-height: 21px; }

/* ---- tabs (jQuery UI's css, loaded with the editor, also styles a .ui-tabs: the double class keeps ours) */
.mc-tabs.ui-tabs { padding: 0; margin: 0 0 var(--ui-s3); }
.mc-tabs { position: relative; }
.mc-tabs[hidden], .mc-tab[hidden] { display: none; }
.mc-tabs.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.mc-tab .ui-tab__count:empty { display: none; }

/* ---- notices above the list */
#mc_notice { display: grid; gap: 8px; margin: 0 0 var(--ui-s3); }
#mc_notice[hidden] { display: none; }
.mc-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }

/* ---- toolbar: search, sort, favourites, grid | timeline */
.mc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 6px; }
.mc-search { flex: 1 1 260px; max-width: 420px; min-width: 0; }
.mc-contentbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.mc-contentbar[hidden] { display: none; }
.mc-contentbar .ui-select { width: auto; min-width: 150px; }
.mc-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.mc-sort[hidden], .mc-seg[hidden], .mc-favbtn[hidden] { display: none; }
.mc-sort__label { font-size: 14px; font-weight: 600; color: var(--ui-muted); }
.mc-sort .ui-select { width: auto; min-width: 170px; }
.mc-favbtn svg { width: 16px; height: 16px; flex: none; }
.mc-favbtn[aria-pressed="true"] { background: #fdf4dc; border-color: #ecc66b; color: #7a4f0a; }
.mc-favbtn[aria-pressed="true"] svg { fill: #f2b53b; stroke: #c98a0b; }
.mc-seg { display: inline-flex; box-sizing: border-box; height: var(--ui-control-h); padding: 3px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: #fff; box-shadow: var(--ui-shadow-sm); }
.mc-seg__btn {
    appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
    color: var(--ui-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color var(--ui-ease), color var(--ui-ease);
}
.mc-seg__btn:hover { color: var(--ui-ink); }
.mc-seg__btn.is-on, .mc-seg__btn[aria-pressed="true"] { background: var(--ui-sage-soft); color: var(--ui-sage-dark); }
.mc-seg__btn:focus-visible { outline: 3px solid var(--ui-sage-ring); outline-offset: 1px; }
.mc-seg__btn svg { width: 16px; height: 16px; flex: none; }
.mc-count { min-height: 20px; margin: 6px 0 14px; font-size: 14px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }

/* ---- the list area */
.mc-items { min-height: 240px; }
.mc-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.mc-skel .ui-skel-body { padding: 14px 16px 18px; }
.mc-state { margin: 8px 0; }
.mc-state .ui-empty__title { margin: 0; color: var(--ui-ink); font-size: 18px; font-weight: 700; }
.ui-more { display: grid; justify-items: center; gap: 8px; margin: 24px 0 0; }
.ui-more__count { font-size: 14px; color: var(--ui-muted); }

/* ---- grid: the cards of one row are the same height (a row is as tall as its tallest card, so one short note never leaves a gap in every other row) */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: auto; align-items: stretch; gap: 20px; }

/* ---- one card */
.mc-card, .mc-card.ui-card--item { padding: 0; }   /* the shared mobile rule .ui-card { padding: 16px } must not inset the cover */
.mc-card { position: relative; height: 100%; transition: transform var(--ui-ease), box-shadow var(--ui-ease), border-color var(--ui-ease), opacity .18s ease; }
.mc-card:hover { transform: translateY(-2px); border-color: var(--ui-sage-line); box-shadow: var(--ui-shadow-lg); }
.mc-card.is-opening { opacity: .6; pointer-events: none; }
.mc-card.is-leaving { opacity: 0; transform: scale(.97); pointer-events: none; }
.mc-content:hover { transform: none; }

.mc-cover { position: relative; flex: none; overflow: hidden; }
.mc-mosaic { position: absolute; inset: 0; display: grid; gap: 2px; background: #fff; }
.mc-mosaic--2 { grid-template-columns: 1fr 1fr; }
.mc-mosaic--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.mc-mosaic--3 .mc-tile:first-child { grid-row: 1 / span 2; }
.mc-tile { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; background: #e3e7e0; }
.mc-tile.is-broken img { display: none; }
.mc-tile.is-broken::after { content: ''; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; opacity: .45;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596357' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat; }
.mc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-more-items { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 2px 9px; border-radius: 999px; background: rgba(28, 34, 28, .72); color: #fff; font-size: 13px; font-weight: 700; }
.mc-cover__empty { position: absolute; inset: 0; display: grid; place-items: center; color: #aab4a6; background: #eceee9; }
.mc-chipline { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px; }
.mc-chipline .ui-badge { box-shadow: 0 1px 3px rgba(24, 34, 24, .22); }
.mc-chipline .ui-badge--draft { background: #fff; }
/* favourite star: a 40px touch target with a 32px white disc; outline -> filled gold with a small pop */
.mc-fav {
    appearance: none; position: absolute; top: 4px; right: 4px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: none; color: #6c746b; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mc-fav__disc {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 4px rgba(24, 34, 24, .28);
    transition: transform var(--ui-ease), background-color var(--ui-ease), color var(--ui-ease), box-shadow var(--ui-ease);
}
.mc-fav svg { width: 18px; height: 18px; fill: transparent; stroke: currentColor; transition: fill .18s ease, stroke .18s ease; }
.mc-fav:hover .mc-fav__disc { background: #fff; color: #b07a0a; transform: scale(1.08); }
.mc-fav:active .mc-fav__disc { transform: scale(.94); }
.mc-fav:focus-visible { outline: 3px solid var(--ui-sage-ring); outline-offset: -2px; }
.mc-fav.is-on { color: #c98a0b; }
.mc-fav.is-on .mc-fav__disc { background: #fff8e4; box-shadow: 0 1px 4px rgba(24, 34, 24, .28), inset 0 0 0 1.5px #f0cd7a; }
.mc-fav.is-on svg { fill: #f2b53b; stroke: #c98a0b; }
.mc-fav.is-pop svg { animation: mc-fav-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
.mc-fav.is-static { cursor: default; pointer-events: none; }
@keyframes mc-fav-pop { 0% { transform: scale(.6) rotate(-18deg); } 55% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .mc-fav.is-pop svg { animation: none; } .mc-fav__disc, .mc-fav svg { transition: none; } }

.mc-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px; min-width: 0; padding: 14px 16px 12px; }
.mc-name { margin: 0; min-height: 2.6em; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ui-ink); }
.mc-open {
    appearance: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; overflow: hidden; padding: 0; border: 0; background: none;
    font: inherit; color: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.mc-open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mc-card:hover .mc-open { color: var(--ui-sage-dark); }
.mc-card .mc-open:focus-visible { outline: none !important; }
.mc-card .mc-open:focus-visible::after { outline: 3px solid var(--ui-sage-ring); outline-offset: -3px; border-radius: var(--ui-radius); }
.mc-facts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.35; color: var(--ui-muted); }
.mc-facts li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mc-facts svg { flex: none; width: 15px; height: 15px; color: #8b928a; }
.mc-facts strong { color: var(--ui-ink); font-weight: 600; }
.mc-facts a { position: relative; z-index: 2; }
.mc-facts .ui-truncate { display: block; }
.mc-dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: #b6c0b2; }
.mc-plays { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--ui-line); min-height: 64px; font-size: 14px; color: var(--ui-text); }
.mc-plays__row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.mc-plays__row strong { color: var(--ui-ink); }
.mc-plays__pct { font-weight: 700; color: var(--ui-sage-dark); }
.mc-plays__note { margin: 0; line-height: 1.4; color: var(--ui-muted); }
.mc-plays__note--ask { padding: 7px 10px; border-radius: 8px; background: var(--ui-warn-soft); color: #7a4f0a; }
.mc-alert { display: block; margin-top: -1px; padding: 8px 10px; border-radius: 8px; background: var(--ui-warn-soft); color: #7a4f0a; font-size: 14px; line-height: 1.35; }
.mc-alert svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.mc-alert .ui-btn { position: relative; z-index: 2; margin-top: 6px; }

.mc-foot { display: flex; align-items: center; gap: 8px; flex: none; padding: 12px 16px; border-top: 1px solid var(--ui-line); background: #fafbf9; }
.mc-foot > * { position: relative; z-index: 2; }
.mc-foot .ui-btn { white-space: nowrap; }
.mc-foot .ui-btn svg { width: 16px; height: 16px; flex: none; }
.mc-more { margin-left: auto; flex: none; width: 34px; height: 34px; color: #6c746b; }
.mc-more:hover { color: var(--ui-ink); }
.mc-more[data-act="cremove"]:hover { color: #a53b38; background: #fbefee; border-color: #e5c2c0; }
.mc-enc { position: absolute; right: 8px; top: 8px; z-index: 3; padding: 3px 10px; border-radius: 999px; background: rgba(28, 34, 28, .78); color: #fff; font-size: 13px; font-weight: 700; }
.mc-enc[hidden] { display: none; }
.mc-enc.is-bad { background: var(--ui-bad); }
.mc-content .mc-body { min-height: 0; }
.mc-content .mc-name { min-height: 1.3em; }

/* ---- the pop-up menu (card menus, Manage) */
.mc-menu { position: fixed; z-index: 3500; min-width: 210px; max-width: calc(100vw - 16px); }
.mc-menu[hidden] { display: none; }
.mc-menu .ui-menu__item svg { flex: none; width: 18px; height: 18px; color: var(--ui-muted); }
.mc-menu .ui-menu__item--danger svg { color: inherit; }
.mc-menu .ui-menu__item:focus-visible { outline: 3px solid var(--ui-sage-ring); outline-offset: -2px; background: var(--ui-sage-soft); }

/* ---- timeline: months down the page, one wide card per campaign on a line */
.mc-timeline { display: grid; gap: 30px; }
.mc-tl-group { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 24px; }
.mc-tl-month { position: sticky; top: calc(var(--ui-toolbar-h, 56px) + 12px); align-self: start; display: grid; gap: 2px; margin: 4px 0 0; font-family: var(--ui-font-head); font-size: 18px; font-weight: var(--ui-head-weight); color: var(--ui-ink); }
.mc-tl-month em { font-style: normal; font-family: var(--ui-font); font-size: 14px; font-weight: 400; color: var(--ui-muted); }
.mc-tl-items { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 30px; border-left: 2px solid var(--ui-sage-line); }
.mc-tl-item { position: relative; min-width: 0; }
.mc-tl-dot { position: absolute; left: -38px; top: 22px; width: 12px; height: 12px; border: 3px solid var(--ui-sage); border-radius: 50%; background: #fff; box-sizing: content-box; }
.is-timeline .mc-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 1fr auto; height: auto; }
.is-timeline .mc-cover { grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; min-height: 150px; }
.is-timeline .mc-body { padding: 14px 18px 8px; gap: 8px; }
.is-timeline .mc-name { min-height: 0; }
.is-timeline .mc-facts { grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px 18px; flex-wrap: wrap; display: flex; flex-wrap: wrap; }
.is-timeline .mc-plays { margin-top: 2px; min-height: 0; max-width: 420px; }
.is-timeline .mc-foot { border-top: 0; background: none; padding: 4px 18px 14px; }
.is-timeline .mc-more { margin-left: 0; }

/* ---- opening the editor */
.mc-opening {
    position: fixed; top: 76px; left: 50%; z-index: 3000; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
    transform: translateX(-50%); border: 1px solid var(--ui-line); border-radius: 999px; background: #fff; color: var(--ui-ink);
    font-size: 14px; font-weight: 600; box-shadow: var(--ui-shadow-lg);
}
body.mc-loading-editor, body.mc-loading-editor * { cursor: progress; }
body.mc-editing #mc_page, body.mc-editing #back_to_top { display: none; }

/* ---- confirm dialog */
.mc-dialog { width: min(460px, 100%); }
.mc-dlg-text { margin: 0 0 4px; color: var(--ui-text); overflow-wrap: anywhere; }
.mc-dlg-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0 0 0 20px; list-style: disc; font-size: 14px; line-height: 1.45; color: var(--ui-text); }
.mc-dlg-list[hidden] { display: none; }
.mc-dlg-text + .ui-error, .mc-dlg-list + .ui-error { margin-top: 12px; }
.ui-error[hidden] { display: none; }

/* ---- back to top */
body.mc-body #back_to_top {
    position: fixed; right: 24px; bottom: 24px; left: auto; z-index: 100; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%;
    background: #fff; color: var(--ui-ink); box-shadow: var(--ui-shadow-lg);
}
body.mc-body #back_to_top[hidden] { display: none; }

/* ---- narrow screens */
@media (max-width: 900px) {
    .mc-tl-group { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .mc-tl-month { position: static; display: flex; align-items: baseline; gap: 10px; margin: 0; }
    .mc-tl-items { padding-left: 22px; }
    .mc-tl-dot { left: -30px; }
    .is-timeline .mc-card { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .mc-head__actions { width: 100%; }
    .mc-head__actions .ui-btn, .mc-head__actions .ui-select { flex: 1 1 auto; justify-content: center; }
    .mc-head__actions #create_campaign_btn { flex: 1 1 100%; order: -1; }
    .mc-toolbar { gap: 10px; }
    .mc-search { flex: 1 1 100%; max-width: none; }
    .mc-sort { flex: 1 1 auto; margin-left: 0; }
    .mc-sort__label { display: none; }
    .mc-sort { flex: 1 1 140px; min-width: 0; }
    .mc-sort .ui-select { flex: 1 1 auto; width: 100%; min-width: 0; }
    .mc-favbtn { flex: none; }
    .mc-seg { flex: 1 1 100%; }
    .mc-seg__btn { flex: 1 1 0; justify-content: center; padding: 0 10px; }
    .mc-contentbar { margin-left: 0; width: 100%; }
    .mc-contentbar .ui-select { flex: 1 1 auto; }
    .mc-grid, .mc-skeleton { grid-template-columns: minmax(0, 1fr); }
    .is-timeline .mc-card { display: flex; flex-direction: column; }
    .is-timeline .mc-cover { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
    .is-timeline .mc-foot { border-top: 1px solid var(--ui-line); background: #fafbf9; padding: 12px 16px; }
    .is-timeline .mc-more { margin-left: auto; }
    body.mc-body #back_to_top { right: 16px; bottom: 16px; }
}

/* ==========================================================================================================
   USED BY THE CAMPAIGN EDITOR (mycampaigns/edit_campaign): these class names are written by its script, keep them
   ========================================================================================================== */
/* time inputs in the playlist (the browser's clock icon is hidden, the box is plain) */
input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
.clip_duration { padding: 4px 6px; border-radius: var(--ui-radius-xs); border: 1px solid #d1d1d1; font-family: sans-serif; width: 98px; min-width: 98px; box-sizing: border-box; }
/* location targeting box in the editor: collapsed until the map is wanted */
/* delete / stop confirmation of the editor (also used by analytics) */
.remove_campaign_box { margin: 14vh auto 0; max-width: min(460px, calc(100vw - 32px)); box-sizing: border-box; }
.remove_campaign_box h2 { margin-top: 0; font-size: 20px; }

/* ==========================================================================================================
   UPLOAD QUEUE (filled by mycampaigns/uploader/upload.js): bottom-right panel
   ========================================================================================================== */
#logging-home {
    display: none; position: fixed; right: 16px; bottom: 16px; z-index: 30;
    width: min(380px, calc(100vw - 32px)); max-height: 50vh; overflow: auto; box-sizing: border-box;
    padding: 10px; background: #fff; border: 1px solid var(--ui-line, #ececec); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg);
}
#toupload ul { display: grid; gap: 8px; margin: 0; padding: 0; }
#toupload li.mc-up { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 30px 8px 10px; background: #f7f8f6; border-radius: var(--ui-radius-sm); }
.mc-up-name { font-size: 14px; color: var(--ui-ink, #2b2f2a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-up-state { font-size: 14px; font-weight: 600; color: var(--ui-muted, #7a817a); }
#toupload .progress { grid-column: 1 / -1; display: block; height: 6px; background: #e4e8e2; border-radius: 3px; overflow: hidden; margin: 0; box-shadow: none; }
#toupload .progress .progress-bar { height: 100%; width: 0; border-radius: 3px; background: var(--ui-sage, #6a8a66); transition: width .3s ease; }
#toupload .progress .progress-finished { background: var(--ui-ok, #2e7d32); }
#toupload .progress .progress-validating { background: #ef9a24; }
#toupload .progress .progress-broken { background: var(--ui-bad, #c0504d); }
.mc-up-msg { grid-column: 1 / -1; font-size: 14px; color: var(--ui-bad, #c0504d); }
.mc-up-retry { grid-column: 1 / -1; justify-self: start; padding: 4px 12px; border: 1px solid var(--ui-line, #ececec); border-radius: 8px; background: #fff; font-size: 14px; cursor: pointer; }
.mc-up-x { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border: 0; background: none; color: #999; font-size: 14px; cursor: pointer; border-radius: var(--ui-radius-xs); }
.mc-up-x:hover { background: #eee; color: #333; }
.upload_form { display: none !important; }

/* Declined by owner: a filter chip, shown only when a booking was declined */
.mc-chip-declined { min-height: var(--ui-control-h-sm, 34px); }
.mc-chip-declined[hidden] { display: none; }
.mc-chip-declined .ui-tab__count:empty { display: none; }
/* seller note: booking requests on my adspots are answered in the Adspot Manager */
#mc_seller_note > span:first-child { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 320px; }
#mc_seller_note > span:first-child svg { flex: none; margin-top: 1px; }
@media (max-width: 560px) { .mc-ask .ui-btn { width: 100%; justify-content: center; } }