/* XSignsCartArtworkFiles */

/* ------------------------------------------------------------------
   清单本体（两条渲染链路共用）

   一行一份稿：缩略图 / 面 + 文件名 / 两个按钮。
   上下各一条细线把它和参数、来源标签隔开 —— 这块是「文件」，不是参数。

   line-height 显式写死：抽屉那边模板对 value 做了 wpautop，外面套着一个 <p>，
   而 xsigns_cart_source_tag 的 CSS 把 dd.variation- 里的 p 压到了 line-height:1
   （它那条标签是单行胶囊，压扁没问题）。这里是多行清单，压扁会糊成一团，
   所以在自己这一层重新给出行高，让子元素继承。
   ------------------------------------------------------------------ */

.xsigns-af-list {
    display: block;
    margin: 6px 0 0;
    padding: 2px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    font-style: normal;
    line-height: 1.4;
}

.xsigns-af-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 6px 0;
}

/* 行之间再补一条更淡的线。第一行不要，否则和外框贴成双线。 */
.xsigns-af-row + .xsigns-af-row {
    border-top: 1px solid #f1f3f5;
}

/* ------------------------------------------------------------------
   缩略图位

   两种形态叠在同一个 32x32 的格子里：
     角标      服务端总是输出，默认可见
     <img>     JS 把 a.xsigns-af-thumb 换成的真图，成功后给外层加
               .xsigns-af-has-thumb，角标退场

   为什么默认是角标而不是图：图这一路要 JS，角标不要。降级路径不能反过来
   依赖 JS（见 includes/render.php 顶部）。
   ------------------------------------------------------------------ */

.xsigns-af-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    background: #f8f9fa;
}

/* 那个只用来传 URL 的空链接，任何时候都不该被看见 */
.xsigns-af-thumb {
    display: none !important;
}

.xsigns-af-badge {
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.02em;
    color: #6b7280;
    /* 长扩展名（PPTX）在 32px 里也要放得下 */
    transform: scale(0.92);
}

.xsigns-af-mark.xsigns-af-has-thumb {
    background: #fff;
}

.xsigns-af-mark.xsigns-af-has-thumb .xsigns-af-badge {
    display: none;
}

.xsigns-af-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    /* 稿件比例五花八门，contain 保证不裁掉内容 */
    object-fit: contain;
}

/* ------------------------------------------------------------------
   面 + 文件名

   min-width:0 是必须的：flex 子项的默认 min-width 是 auto，不改的话
   .xsigns-af-name 的 ellipsis 永远不生效，长文件名会把整行撑出去。
   ------------------------------------------------------------------ */

/* flex-basis 必须是 0，不能给一个像 110px 这样的「理想宽度」：那是从剩余空间里
   【额外】要的，容器一窄（/cart 的参数列实测只有 260~290px）就把按钮挤到下一行，
   行高从 44px 涨到 66px。basis:0 表示这一段只吃别人挑剩下的，文件名宁可截成
   省略号（完整名字在 title 里），也要让 Preview / Download 待在同一行 —— 那两个
   才是这一块存在的理由。 */
.xsigns-af-info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-style: normal;
}

.xsigns-af-side {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
}

.xsigns-af-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.4;
    color: #4b5563;
}

/* ------------------------------------------------------------------
   两个按钮

   做成文字链接而不是实心按钮：同一行里已经有 Edit item / Remove item 那组
   文字链接，风格跟着它们走，也不喧宾夺主。
   ------------------------------------------------------------------ */

.xsigns-af-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.xsigns-af-btn {
    font-size: 12px;
    line-height: 1.4;
    font-style: normal;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: underline;
    color: inherit;
}

.xsigns-af-btn:hover,
.xsigns-af-btn:focus {
    text-decoration: underline;
    opacity: 0.75;
}

/* ------------------------------------------------------------------
   /cart（Blocks）

   外层元素是 li 还是 div 取决于这一行有几条 item_data：只有一条时前端用
   div/div，多于一条才用 ul/li。所以只认 className，不写死标签名。
   ------------------------------------------------------------------ */

.wc-block-components-product-details .xsigns-af-item {
    margin-top: 4px;
}

/* Blocks/主题把参数值排成斜体，清单不跟这个走（子元素各自也写了
   font-style:normal，这条管的是它们之间的空白和继承） */
.wc-block-components-product-details .xsigns-af-item,
.wc-block-components-product-details .xsigns-af-item .wc-block-components-product-details__value {
    font-style: normal;
}

/* ------------------------------------------------------------------
   结算页的订单摘要里不要这块

   服务端已经在 is_checkout() 时不输出了（见 xsigns_af_add_item_data），这一条
   是兜底：结算页上任何一次 Store API 往返（用优惠券、改地址、换配送方式）都会
   用返回的数据重渲染摘要，而那些请求直接打到 /wp-json，没有页面上下文，
   is_checkout() 在那里恒为 false，清单会被重新塞回来。

   两个选择器：.xsigns-af-item 连整条一起收掉（不留空 bullet），
   .xsigns-af-list 是保险 —— 万一 className 哪天不被前端认了，至少内容不露。

   只圈定结算区块：抽屉在结算页上照样能打开，那里的清单应当保留。
   ------------------------------------------------------------------ */

.wp-block-woocommerce-checkout .xsigns-af-item,
.wp-block-woocommerce-checkout .xsigns-af-list {
    display: none !important;
}

/* ------------------------------------------------------------------
   betheme 侧边抽屉

   抽屉的参数由 wc_get_formatted_cart_item_data() 走
   templates/cart/cart-item-data.php 输出成 <dl class="variation">，每条是一对
   dt/dd，dt 后面【硬编码】了一个冒号。我们这条的 key 是空串，于是会多出一个
   孤零零的 ":"，藏掉它。

   空 key 的 dt/dd 拿到的 class 正好是 variation-
   （模板里 sanitize_html_class('variation-' . $data['key'])）。
   xsigns_cart_source_tag 为它自己那条标签写过一模一样的两条规则 —— 这里再写
   一遍不是冗余：那个插件可能被单独停用，各挂各的，互不依赖。

   选择器前缀照抄主题的 css/woocommerce.css:771-773，那几条把 dt/dd 设成了
   行内流（dd 是 display:inline），不把权重压过去，清单就会跟在最后一个参数值
   后面挤在同一行。多带一个 .variation- 即可（6 个 class vs 主题的 5 个）。
   ------------------------------------------------------------------ */

.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-info dl.variation dt.variation- {
    display: none;
}

.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-info dl.variation dd.variation- {
    display: block;
    margin: 4px 0 0;
}

/* JS 把清单搬到了 .mfn-ch-product 底下（理由见 xsigns-cart-artwork-files.js 的
   relocateInDrawer）。那是个 flex-wrap:wrap 的容器，给足 100% 才能像 footer
   一样独占一行，而不是挤进 图片/参数/小计 那三列里。 */
.mfn-cart-holder .mfn-ch-product > .xsigns-af-list {
    flex: 0 0 100%;
    width: 100%;
    margin: 8px 0 0;
}

/* 搬空的那对 dt/dd（dt 是模板硬写的冒号，dd 是空壳） */
.mfn-cart-holder .xsigns-af-moved {
    display: none !important;
}

/* 抽屉整体比 /cart 紧凑一号 */
.mfn-cart-holder .xsigns-af-name,
.mfn-cart-holder .xsigns-af-btn {
    font-size: 11px;
}

/* ------------------------------------------------------------------
   窄屏

   /cart 在移动端会切成上下堆叠的卡片布局，参数区跟着变窄。按钮组换行到
   第二行，缩略图和文件名留在第一行。
   ------------------------------------------------------------------ */

@media (max-width: 480px) {

    .xsigns-af-actions {
        margin-left: 40px;      /* 与缩略图右缘对齐，视觉上归属上一行 */
    }

    .xsigns-af-info {
        flex: 1 1 100%;
    }
}