/**
 * 海外社媒水印背景（FB / INS / TikTok / X）
 * 父元素需 position: relative; overflow: hidden;（及可选 min-height）
 * 见 resources/views/hyper/partials/overseas_social_watermark.blade.php
 */

/* 商品分类 / 搜索 / 工具页等 hero 容器：内容叠在水印之上（Laravel 6 无 @once，样式统一放此文件） */
.page-hero-social-bg {
    position: relative;
    overflow: hidden;
}
.page-hero-social-bg > *:not(.os-social-watermark) {
    position: relative;
    z-index: 1;
}

.os-social-watermark {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    color: #2f6fae;
}

.os-social-watermark__icon {
    position: absolute;
    display: block;
    opacity: 0.12;
}

.os-social-watermark__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* —— 定价横幅内（窄条，图标集中在中间留白区） —— */
.os-social-watermark--price-banner .os-social-watermark__icon--fb {
    width: 58px;
    height: 58px;
    left: 37%;
    top: 42%;
    transform: translate(-50%, -50%) rotate(-14deg);
}

.os-social-watermark--price-banner .os-social-watermark__icon--ins {
    width: 50px;
    height: 50px;
    left: 53%;
    top: 30%;
    transform: translate(-50%, -50%) rotate(9deg);
    opacity: 0.1;
}

.os-social-watermark--price-banner .os-social-watermark__icon--tk {
    width: 46px;
    height: 46px;
    left: 62%;
    top: 56%;
    transform: translate(-50%, -50%) rotate(-7deg);
    opacity: 0.11;
}

.os-social-watermark--price-banner .os-social-watermark__icon--x {
    width: 44px;
    height: 44px;
    left: 48%;
    top: 68%;
    transform: translate(-50%, -50%) rotate(16deg);
    opacity: 0.09;
}

/* 与自选定价横幅主题色联动（父级带 modifier 即可） */
.self-select-type-price-banner--contact .os-social-watermark {
    color: #5a6f82;
}

.self-select-type-price-banner--pending .os-social-watermark {
    color: #b45309;
}

/* —— 独立页面 / 大区块：四角锚点（整齐且避免重叠） —— */
.os-social-watermark--section .os-social-watermark__icon--fb {
    width: 72px;
    height: 72px;
    left: 24px;
    top: 16px;
    transform: rotate(-11deg);
    opacity: 0.09;
}

.os-social-watermark--section .os-social-watermark__icon--ins {
    width: 64px;
    height: 64px;
    right: 76px;
    top: 22px;
    left: auto;
    transform: rotate(8deg);
    opacity: 0.085;
}

.os-social-watermark--section .os-social-watermark__icon--tk {
    width: 56px;
    height: 56px;
    left: 26px;
    bottom: 14px;
    top: auto;
    transform: rotate(-6deg);
    opacity: 0.085;
}

.os-social-watermark--section .os-social-watermark__icon--x {
    width: 52px;
    height: 52px;
    right: 26px;
    bottom: 14px;
    left: auto;
    top: auto;
    transform: rotate(14deg);
    opacity: 0.075;
}
/* 独立页极简版：仅保留 FB + INS */
.os-social-watermark--section .os-social-watermark__icon--tk,
.os-social-watermark--section .os-social-watermark__icon--x {
    display: none;
}

/* 头部较矮时，底部两枚图标容易和右上图标挤在一起：缩小并下移，保证整齐 */
@media (max-height: 260px) {
    .os-social-watermark--section .os-social-watermark__icon--tk {
        width: 48px;
        height: 48px;
        left: 18px;
        bottom: 8px;
    }
    .os-social-watermark--section .os-social-watermark__icon--x {
        width: 44px;
        height: 44px;
        right: 18px;
        bottom: 8px;
    }
}

.os-social-watermark--tone-neutral {
    color: #5a6f82;
}

.os-social-watermark--tone-amber {
    color: #b45309;
}

@media (max-width: 575.98px) {
    .os-social-watermark--price-banner .os-social-watermark__icon--fb {
        width: 46px;
        height: 46px;
        left: 78%;
        top: 18%;
        transform: translate(-50%, -50%) rotate(-14deg);
        opacity: 0.07;
    }

    .os-social-watermark--price-banner .os-social-watermark__icon--ins {
        width: 40px;
        height: 40px;
        left: 88%;
        top: 42%;
        opacity: 0.06;
    }

    .os-social-watermark--price-banner .os-social-watermark__icon--tk {
        width: 38px;
        height: 38px;
        left: 72%;
        top: 58%;
        opacity: 0.07;
    }

    .os-social-watermark--price-banner .os-social-watermark__icon--x {
        width: 36px;
        height: 36px;
        left: 50%;
        top: 78%;
        opacity: 0.06;
    }

    .os-social-watermark--section .os-social-watermark__icon--fb {
        width: 56px;
        height: 56px;
        left: 12px;
        top: 10px;
    }

    .os-social-watermark--section .os-social-watermark__icon--ins {
        width: 48px;
        height: 48px;
        right: 56px;
        top: 12px;
    }

    .os-social-watermark--section .os-social-watermark__icon--tk {
        width: 44px;
        height: 44px;
        left: 12px;
        bottom: 8px;
    }

    .os-social-watermark--section .os-social-watermark__icon--x {
        width: 40px;
        height: 40px;
        right: 12px;
        bottom: 8px;
    }
}