/*
 * iOS 详情页专用样式
 * 仅使用 ios-detail / ios-store 前缀，不覆盖 Android 详情页和全站公共组件。
 */

.ios-detail-hero {
    box-sizing: border-box;
    margin: 0 auto 20px;
    padding: 14px 6px 24px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eeeeee;
    border-radius: 0;
    box-shadow: none;
}

.ios-detail-hero-main {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.ios-detail-icon {
    width: 220px;
    flex: 0 0 220px;
    box-sizing: border-box;
    padding: 2px 18px 0 0;
}

.ios-detail-icon > img {
    display: block;
    width: 112px;
    height: 112px;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(39, 86, 140, 0.12);
}

.ios-detail-summary {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 24px;
}

.ios-detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
}

.ios-detail-title-row h1 {
    margin: 0;
    padding: 0;
    color: #222;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 700;
    word-break: break-word;
}

.ios-detail-developer {
    margin: 8px 0 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

.ios-detail-comment-link {
    flex: 0 0 auto;
    margin-left: 18px;
    padding-left: 20px;
    color: #666;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    background: url("/tpl/images/i-downico.png") no-repeat;
    background-position: 0 -358px;
}

.ios-detail-comment-link:hover {
    color: #1677ff;
}

.ios-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ios-detail-badges span {
    display: inline-block;
    box-sizing: border-box;
    min-width: 48px;
    padding: 4px 12px;
    color: #607080;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    background: #f5f7fa;
    border: 1px solid #e7eaee;
    border-radius: 15px;
}

.ios-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.ios-detail-metric {
    box-sizing: border-box;
    min-width: 0;
    padding: 11px 13px;
    background: #f8f9fb;
    border: 1px solid #eceff3;
    border-radius: 7px;
}

.ios-detail-metric span,
.ios-detail-metric strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ios-detail-metric span {
    color: #8a96a3;
    font-size: 12px;
    line-height: 18px;
}

.ios-detail-metric strong {
    margin-top: 3px;
    color: #344054;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}


.ios-detail-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: #7b8794;
    font-size: 13px;
}

.ios-detail-tags span {
    margin-right: 2px;
}

.ios-detail-tags a {
    display: inline-block;
    padding: 3px 10px;
    color: #3f6f96;
    line-height: 20px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #dce9f6;
    border-radius: 12px;
}

.ios-detail-tags a:hover {
    color: #1677ff;
    border-color: #9dc6f3;
}

.ios-detail-side {
    width: 188px;
    flex: 0 0 188px;
    box-sizing: border-box;
    padding-left: 18px;
    border-left: 0;
}

.ios-detail-score {
    box-sizing: border-box;
    padding: 18px 12px;
    text-align: center;
    background: #fff;
    border: 1px solid #e4e8ed;
    border-radius: 9px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

.ios-detail-score span,
.ios-detail-score small {
    display: block;
}

.ios-detail-score span {
    color: #7b8794;
    font-size: 13px;
    line-height: 22px;
}

.ios-detail-score strong {
    display: inline-block;
    margin-top: 7px;
    color: #1677ff;
    font-size: 38px;
    line-height: 46px;
    font-weight: 700;
}

.ios-detail-score em {
    margin-left: 3px;
    color: #1677ff;
    font-size: 14px;
    font-style: normal;
}

.ios-detail-score small {
    margin-top: 4px;
    color: #98a2b3;
    font-size: 12px;
    line-height: 20px;
}

.ios-detail-side .f-fxcont {
    float: none;
    margin-top: 18px;
    text-align: center;
}

.ios-update-card {
    box-sizing: border-box;
    margin-top: 18px;
    padding: 18px 20px 8px;
    background: #fbfcfe;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
}

.ios-update-card .u-listtit {
    margin-top: 0;
}

.ios-update-card p {
    margin: 0 0 10px;
    color: #596579;
    line-height: 1.9;
}

.ios-store-info-card {
    box-sizing: border-box;
    margin: 18px 0 24px;
    padding: 20px 22px;
    background: #f8fbff;
    border: 1px solid #dfeaf5;
    border-left: 4px solid #4b94f2;
    border-radius: 7px;
}

.ios-store-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #dce9f6;
}

.ios-store-info-head h4 {
    margin: 0;
    color: #26384a;
    font-size: 20px;
    line-height: 28px;
}

.ios-store-info-head p {
    margin: 4px 0 0;
    color: #8a96a3;
    font-size: 13px;
    line-height: 20px;
}

.ios-store-info-head > a {
    display: inline-block;
    padding: 7px 14px;
    color: #1677ff;
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #a9cef7;
    border-radius: 16px;
}

.ios-store-info-head > a:hover {
    color: #fff;
    background: #1677ff;
    border-color: #1677ff;
}

.ios-store-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 10px 0 0;
}

.ios-store-info-grid > div {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    align-items: start;
    box-sizing: border-box;
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px dashed #dce7f2;
}

.ios-store-info-grid .ios-store-info-wide {
    grid-column: 1 / -1;
}

.ios-store-info-grid dt,
.ios-store-info-grid dd {
    min-width: 0;
    margin: 0;
    line-height: 24px;
}

.ios-store-info-grid dt {
    color: #7b8794;
}

.ios-store-info-grid dd {
    color: #344054;
    word-break: break-all;
}

.ios-store-info-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 18px;
}

.ios-store-info-links a {
    display: inline-block;
    padding: 8px 16px;
    color: #1677ff;
    line-height: 20px;
    text-decoration: none;
    background: #fff;
    border: 1px solid #a9cef7;
    border-radius: 18px;
}

.ios-store-info-links a:hover {
    color: #fff;
    background: #1677ff;
    border-color: #1677ff;
}

@media screen and (max-width: 1024px) {
    .ios-detail-metrics {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .ios-detail-side {
        width: 160px;
        flex-basis: 160px;
    }
}

/* 顶部下载区只负责布局；按钮外观继续由 public2019.css 的 iosbtn 控制。 */
.ios-detail-download.g-dbtn {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
}

.ios-detail-download .g-dbtn-list {
    float: none;
    margin: 0;
}

.ios-detail-download .g-dbtn-list li {
    margin-top: 0;
    margin-bottom: 0;
}

/* 信息卡移动到截图集下方后，与横向滚动条保持适当距离。 */
.showcase + .ios-store-info-card {
    margin-top: 18px;
}

/* 下载入口移动到图标下方，填补左侧留白。 */
.ios-detail-icon-actions {
    width: 198px;
    margin: 14px auto 0;
}

.ios-detail-icon-actions .ios-detail-download.g-dbtn {
    width: auto;
    margin: 0;
    padding: 0;
}

.ios-detail-icon-actions .g-dbtn-list {
    float: none;
    margin: 0;
}

.ios-detail-icon-actions .g-dbtn-list li {
    margin: 0;
}

.ios-detail-icon-note {
    width: 198px;
    margin: 7px 0 0;
    color: #9aa3ad;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

/*
 * 现有精灵图按钮原本按较短中文文字设计。
 * 使用“苹果版下载”并限制文字区域，避免进入右侧二维码图标区域。
 */
.ios-detail-icon-actions .g-dbtn-list li > a b {
    display: block;
    max-width: 92px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

/* 去除评分栏左侧贯穿整块区域的竖向分隔感。 */
.ios-detail-side {
    border-left: none !important;
}

/* 发表评论只保留轻量文字入口，不再使用容易形成竖线错觉的背景图。 */
.ios-detail-comment-link {
    padding-left: 0;
    background: none;
}

/* 更新说明紧跟 App Store 信息卡，形成连续的信息区。 */
.ios-store-info-card + .ios-update-card {
    margin-top: -6px;
    margin-bottom: 24px;
}

/* 左栏下载按钮保持在独立列内，不再挤压软件大小等数据块。 */
.ios-detail-icon-actions .ios-detail-download,
.ios-detail-icon-actions .g-dbtn-list,
.ios-detail-icon-actions .g-dbtn-list > li {
    width: 198px;
    max-width: 198px;
}

.ios-detail-icon-actions .g-dbtn-list > li > a {
    box-sizing: border-box;
}

/* 前端生成二维码，替代已经失效的 /qr/api.php 图片接口。 */
.ios-qrcode-box {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 8px;
    background: #fff;
}

.ios-qrcode-box canvas,
.ios-qrcode-box table {
    display: block;
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto !important;
}

.ios-qrcode-label {
    display: block;
    text-align: center;
}

/* 中间内容从左栏之后开始，避免下载按钮和首个数据块发生视觉粘连。 */
.ios-detail-summary {
    padding-left: 6px;
}

/* 顶部徽章只承担摘要作用，禁止超长语言列表撑大整个区域。 */
.ios-detail-badges span {
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
}

.ios-detail-badges .ios-language-badge {
    max-width: 92px;
    cursor: help;
}

/*
 * public2019.css 会把 iosbtn 内的空 i 当作另一段精灵图渲染。
 * 这会产生按钮右侧的第二个 Apple 图标，并在 hover 时闪出其他图标。
 */
.ios-detail-icon-actions .g-dbtn-list > li > i {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/*
 * 下载按钮隔离修复：
 * public2019.css 对 .iosbtn / li / i / hover 有一整套旧精灵图规则。
 * 在新布局中这些规则会额外显示一个 Apple/点赞图标，并且原二维码弹层依赖旧 i 标签。
 * 这里保留 a 标签本身的蓝色 Apple 按钮外观，但清除 li 的附加精灵层，
 * 再由本页样式直接控制二维码弹层显示。
 */
.ios-detail-icon-actions .ios-download-item {
    position: relative !important;
    display: block !important;
    float: none !important;
    width: 198px !important;
    height: 40px !important;
    max-width: 198px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
}

.ios-detail-icon-actions .ios-download-item::before,
.ios-detail-icon-actions .ios-download-item::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

.ios-detail-icon-actions .ios-download-item > i {
    display: none !important;
}

.ios-detail-icon-actions .ios-download-item > a {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
}

/* 不再依赖旧 i:hover + p 规则，鼠标进入整个按钮即显示二维码。 */
.ios-detail-icon-actions .ios-download-item > p {
    position: absolute !important;
    z-index: 9999 !important;
    top: 46px !important;
    left: 0 !important;
    display: none !important;
    box-sizing: border-box !important;
    width: 168px !important;
    min-height: 166px !important;
    margin: 0 !important;
    padding: 12px 12px 10px !important;
    color: #333 !important;
    line-height: 22px !important;
    text-align: center !important;
    background: #fff !important;
    border: 1px solid #e1e4e8 !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18) !important;
}

.ios-detail-icon-actions .ios-download-item:hover > p,
.ios-detail-icon-actions .ios-download-item:focus-within > p {
    display: block !important;
}

/* 小三角完全由当前弹层控制，避免旧 sprite 图标闪现。 */
.ios-detail-icon-actions .ios-download-item > p::before {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 76px !important;
    width: 12px !important;
    height: 12px !important;
    background: #fff !important;
    border-top: 1px solid #e1e4e8 !important;
    border-left: 1px solid #e1e4e8 !important;
    transform: rotate(45deg) !important;
}

.ios-detail-icon-actions .ios-download-item > p::after {
    content: none !important;
    display: none !important;
}

/* 二维码 Canvas 始终位于弹层内，不受公共 p/img 规则影响。 */
.ios-detail-icon-actions .ios-download-item .ios-qrcode-box {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 6px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.ios-detail-icon-actions .ios-download-item .ios-qrcode-box canvas,
.ios-detail-icon-actions .ios-download-item .ios-qrcode-box table {
    display: block !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto !important;
}

.ios-detail-icon-actions .ios-download-item .ios-qrcode-label {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    color: #333 !important;
    font-size: 14px !important;
    line-height: 22px !important;
}

/*
 * V12：直接复用网站原版下载按钮精灵图。
 *
 * public2019.css 原版规则：
 * - azspr.png 的 iOS 普通状态：0 -53px
 * - azspr.png 的 iOS hover 状态：-187px -53px
 * - azspr1.png 的二维码弹层：0 -231px
 *
 * 此处只复用原版图片坐标，不恢复 iosbtn/g-dbtn 旧类，
 * 因而不会再受到 pcinfo.js 隐藏或旧 <i> 精灵层干扰。
 */
.ios-detail-icon-actions {
    width: 175px;
    margin: 14px auto 0;
}

.ios-store-download-wrap {
    position: relative;
    width: 175px;
    height: 40px;
    overflow: visible;
}

.ios-store-download-btn {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: 175px;
    height: 40px;
    overflow: hidden;
    color: #fff !important;
    text-decoration: none !important;
    background: url("../images/azspr.png") no-repeat 0 -53px;
    border: 0;
    border-radius: 4px;
}

.ios-store-download-btn:hover,
.ios-store-download-wrap:focus-within .ios-store-download-btn {
    color: #fff !important;
    background-position: -187px -53px;
}

.ios-store-download-text {
    position: absolute;
    top: 0;
    left: 42px;
    display: block;
    width: 88px;
    height: 40px;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
}

/*
 * 二维码弹层同样沿用网站原版 azspr1.png 外框，
 * 内部二维码仍由本地 qrcode.min.js 前端生成。
 */
.ios-store-qr-pop {
    position: absolute;
    z-index: 9999;
    top: 48px;
    left: 10px;
    display: none;
    box-sizing: content-box;
    width: 154px;
    height: 177px;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 24px;
    text-align: center;
    background: url("../images/azspr1.png") no-repeat 0 -231px;
    border: 0;
    box-shadow: 0 9px 6px 0 rgba(0, 0, 0, 0.3);
}

.ios-store-download-wrap:hover .ios-store-qr-pop,
.ios-store-download-wrap:focus-within .ios-store-qr-pop {
    display: block;
}

.ios-store-qr-pop::before,
.ios-store-qr-pop::after {
    content: none;
    display: none;
}

.ios-store-qr-pop .ios-qrcode-box {
    display: block !important;
    width: 122px !important;
    height: 122px !important;
    margin: 17px auto 0 !important;
    overflow: hidden;
    background: #fff;
}

.ios-store-qr-pop .ios-qrcode-box canvas,
.ios-store-qr-pop .ios-qrcode-box table {
    display: block !important;
    width: 122px !important;
    height: 122px !important;
    margin: 0 auto !important;
}

.ios-store-qr-pop .ios-qrcode-label {
    display: block;
    height: 24px;
    overflow: hidden;
    color: #333;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}

/*
 * App Store 没有评分数据时仍保留评分卡片，
 * 避免右侧形成大片空白，并采用类似 App Store 的“暂无评分”说明。
 */
.ios-detail-score {
    min-height: 138px;
}

.ios-detail-score.is-empty {
    display: block;
    padding: 18px 10px;
}

.ios-detail-score.is-empty .ios-detail-score-empty {
    display: block;
    margin-top: 12px;
    color: #344054;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
}

.ios-detail-score.is-empty small {
    max-width: 148px;
    margin: 8px auto 0;
    color: #98a2b3;
    font-size: 12px;
    line-height: 19px;
}

/*
 * V10：相关标签与分享按钮同一行。
 * 分享不再位于评分栏下方，避免在系统要求较长时侵入信息卡区域。
 */
.ios-detail-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    margin-top: 15px;
}

.ios-detail-tags-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.ios-detail-bottom-row .ios-detail-tags {
    margin-top: 0;
}

.ios-detail-share.f-fxcont {
    float: none !important;
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    text-align: right;
}

/* 评分栏只保留评分卡，不再承载分享按钮。 */
.ios-detail-side {
    align-self: flex-start;
}

.ios-detail-side .f-fxcont {
    display: none !important;
}

/*
 * V11：标签与分享行横跨整个顶部区域。
 * 左侧从标题/信息区起始位置对齐；
 * 右侧与 App Store 评分卡最右边严格对齐。
 */
.ios-detail-hero > .ios-detail-bottom-row {
    box-sizing: border-box;
    width: 100%;
    margin-top: 15px;
    padding-left: 226px;
    padding-right: 0;
}

.ios-detail-hero > .ios-detail-bottom-row .ios-detail-share {
    margin-left: auto !important;
}

/* V12 最终锁定：确保后续历史规则不能把原版精灵图覆盖回自制按钮。 */
.ios-detail-icon-actions {
    width: 175px !important;
}

.ios-detail-icon-actions .ios-store-download-wrap,
.ios-detail-icon-actions .ios-store-download-btn {
    width: 175px !important;
    height: 40px !important;
}

.ios-detail-icon-actions .ios-store-download-btn {
    background-image: url("../images/azspr.png") !important;
    background-repeat: no-repeat !important;
    background-position: 0 -53px !important;
}

.ios-detail-icon-actions .ios-store-download-btn:hover,
.ios-detail-icon-actions .ios-store-download-wrap:focus-within .ios-store-download-btn {
    background-position: -187px -53px !important;
}

.ios-detail-icon-actions .ios-store-qr-pop {
    width: 154px !important;
    height: 177px !important;
    background: url("../images/azspr1.png") no-repeat 0 -231px !important;
}

/* 标题区域：左侧标题占剩余宽度，右侧评论保持固定宽度 */
.ios-detail-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 20px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

/* 标题和开发者所在的左侧区域 */
.ios-detail-title-row > div:first-child {
    min-width: 0;
    overflow: hidden;
}

/* 标题只显示一行，超出显示省略号 */
.ios-detail-title-row h1 {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 右侧发表评论不允许换行 */
.ios-detail-title-row .ios-detail-comment-link {
    white-space: nowrap;
}