/* 全局页尾组件 */

.vape-global-footer {
    --footer-padding-x: 6.9444vw;          /* 100 / 1440 */
    --footer-padding-top: 6.9444vw;        /* 100 / 1440 */
    --footer-padding-bottom: 2.0833vw;     /* 40 / 1440 */

    --footer-top-gap: 13.4028vw;           /* 193 / 1440 */
    --footer-column-gap: 6.9444vw;         /* 100 / 1440 */

    --footer-heading-margin-bottom: 1.5278vw; /* 22 / 1440 */
    --footer-heading-font: 1.25vw;            /* 18 / 1440 */
    --footer-heading-line: 2.6389vw;          /* 38 / 1440 */

    --footer-link-font: 0.9722vw;          /* 14 / 1440 */
    --footer-link-line: 2.6389vw;          /* 38 / 1440 */

    --footer-sub-heading-gap: 0.6944vw;    /* 10 / 1440 */
    --footer-sub-text-gap: 2.0833vw;       /* 30 / 1440 */
    --footer-sub-text-font: 0.9722vw;      /* 14 / 1440 */
    --footer-sub-text-line: 1.5278vw;      /* 22 / 1440 */

    --footer-form-gap: 0.6944vw;           /* 10 / 1440 */
    --footer-field-height: 2.7778vw;       /* 40 / 1440 */
    --footer-field-radius: 0.6944vw;       /* 10 / 1440 */
    --footer-field-padding-x: 0.6944vw;    /* 10 / 1440 */
    --footer-field-font: 0.8333vw;         /* 12 / 1440 */
    --footer-field-line: 1.3889vw;         /* 20 / 1440 */

    --footer-select-arrow-x-1: 1.1111vw;   /* 16 / 1440 */
    --footer-select-arrow-x-2: 0.7639vw;   /* 11 / 1440 */
    --footer-select-arrow-y: 1.1806vw;     /* 17 / 1440 */
    --footer-select-arrow-size: 0.3472vw;  /* 5 / 1440 */

    --footer-email-button-right: 0.5556vw; /* 8 / 1440 */
    --footer-email-padding-right: 6.6667vw;/* 96 / 1440 */
    --footer-button-height: 1.3889vw;      /* 20 / 1440 */
    --footer-button-padding-x: 0.6944vw;   /* 10 / 1440 */
    --footer-button-font: 0.7639vw;        /* 11 / 1440 */
    --footer-button-line: 1.25vw;          /* 18 / 1440 */

    --footer-message-min-height: 1.3889vw; /* 20 / 1440 */
    --footer-message-margin-top: 0.5556vw; /* 8 / 1440 */
    --footer-message-font: 0.8333vw;       /* 12 / 1440 */
    --footer-message-line: 2.0833vw;       /* 30 / 1440 */

    --footer-social-gap: 1.5278vw;         /* 22 / 1440 */
    --footer-social-margin-top: 1.3889vw;  /* 20 / 1440 */
    --footer-social-size: 1.5278vw;        /* 22 / 1440 */

    --footer-middle-margin-top: 4.1667vw;  /* 60 / 1440 */
    --footer-middle-gap: 16.5278vw;        /* 238 / 1440 */

    --footer-contact-font: 0.9722vw;       /* 14 / 1440 */
    --footer-contact-line: 2.6389vw;       /* 38 / 1440 */

    --footer-warning-gap: 0.6944vw;        /* 10 / 1440 */
    --footer-warning-title-gap: 0.6944vw;  /* 10 / 1440 */
    --footer-warning-icon-width: 1.6667vw; /* 24 / 1440 */
    --footer-warning-icon-height: 2.6389vw;/* 38 / 1440 */
    --footer-warning-title-font: 0.8333vw; /* 12 / 1440 */
    --footer-warning-title-line: 1.3889vw; /* 20 / 1440 */
    --footer-warning-text-font: 0.8333vw;  /* 12 / 1440 */
    --footer-warning-text-line: 1.3889vw;  /* 20 / 1440 */

    --footer-bottom-margin-top: 1.8056vw;  /* 26 / 1440 */
    --footer-bottom-height: 2.6389vw;      /* 38 / 1440 */
    --footer-bottom-padding-top: 1.3889vw; /* 20 / 1440 */
    --footer-bottom-font: 0.9722vw;        /* 14 / 1440 */
    --footer-bottom-line: 2.6389vw;        /* 38 / 1440 */

    --footer-payment-gap: 1.1111vw;        /* 16 / 1440 */
    --footer-payment-height: 1.25vw;       /* 18 / 1440 */
    --footer-payment-width: 2.7083vw;        /* 39 / 1440 */

    width: 100%;
    background: #0d0d0d;
    color: #ffffff;
    font-family: var(--vape-font-brand);
    padding: var(--footer-padding-top) var(--footer-padding-x) var(--footer-padding-bottom);
    overflow-x: hidden;
}

.vape-footer-section {
    width: 100%;
}

.vape-footer-inner {
    width: 100%;
    margin: 0 auto;
}

/* =========================================================
   第一层：顶部导航 + 订阅区域
   ========================================================= */

.vape-footer-top {
    width: 100%;
}

.vape-footer-top-inner {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--footer-top-gap);
    align-items: flex-start;
}

.vape-footer-top-left {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    column-gap: var(--footer-column-gap);
    align-items: flex-start;
    justify-content: start;
    min-width: 0;
}

.vape-footer-top-right {
    min-width: 0;
}

.vape-footer-column {
    min-width: 0;
}

.vape-footer-column h3 {
    margin: 0 0 var(--footer-heading-margin-bottom);

    font-family: var(--vape-font-brand);
    font-weight: 700;
    font-size: var(--footer-heading-font);
    line-height: var(--footer-heading-line);
    letter-spacing: 0;
    color: #2ef0d6;

    white-space: nowrap;
}

.vape-footer-column a {
    display: block;
    width: fit-content;
    max-width: none;

    font-family: var(--vape-font-brand);
    font-weight: 500;
    font-size: var(--footer-link-font);
    line-height: var(--footer-link-line);
    letter-spacing: 0;
    color: #ffffff;
    text-decoration: none;

    white-space: nowrap;
}

.vape-footer-column a:hover {
    color: #2ef0d6;
}

.vape-footer-subscribe {
    width: 100%;
    min-width: 0;
}

.vape-footer-subscribe h3 {
    margin: 0 0 var(--footer-sub-heading-gap);

    font-family: var(--vape-font-brand);
    font-weight: 700;
    font-size: var(--footer-heading-font);
    line-height: var(--footer-heading-line);
    letter-spacing: 0;
    color: #2ef0d6;
}

.vape-footer-subscribe p {
    margin: 0 0 var(--footer-sub-text-gap);

    font-family: var(--vape-font-body);
    font-weight: 500;
    font-size: var(--footer-sub-text-font);
    line-height: var(--footer-sub-text-line);
    letter-spacing: 0;
    color: #ffffff;
}

.vape-footer-subscribe-form {
    width: 100%;
}

.vape-footer-form-row {
    display: grid;
    grid-template-columns: 1fr 1.33fr;
    gap: var(--footer-form-gap);
    margin-bottom: var(--footer-form-gap);
}

.vape-footer-form-row select,
.vape-footer-email-row input {
    width: 100%;
    height: var(--footer-field-height);
    border: 0;
    border-radius: var(--footer-field-radius);
    background-color: #f2f2f2;
    padding: 0 var(--footer-field-padding-x);

    font-family: var(--vape-font-body);
    font-weight: 500;
    font-size: var(--footer-field-font);
    line-height: var(--footer-field-line);
    color: #b2b2b2;
    outline: none;
}

.vape-footer-form-row select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #2ef0d6 50%),
        linear-gradient(135deg, #2ef0d6 50%, transparent 50%);
    background-position:
        calc(100% - var(--footer-select-arrow-x-1)) var(--footer-select-arrow-y),
        calc(100% - var(--footer-select-arrow-x-2)) var(--footer-select-arrow-y);
    background-size: var(--footer-select-arrow-size) var(--footer-select-arrow-size),
        var(--footer-select-arrow-size) var(--footer-select-arrow-size);
    background-repeat: no-repeat;
}

.vape-footer-email-row {
    position: relative;
    display: flex;
    align-items: center;
}

.vape-footer-email-row input {
    padding-right: var(--footer-email-padding-right);
}

.vape-footer-email-row button {
    position: absolute;
    right: var(--footer-email-button-right);
    top: 50%;
    transform: translateY(-50%);

    height: var(--footer-button-height);
    padding: 0 var(--footer-button-padding-x);
    border: 0;
    border-radius: 0;
    background: #2ef0d6;
    color: #ffffff;

    font-family: var(--vape-font-brand);
    font-weight: 700;
    font-size: var(--footer-button-font);
    line-height: var(--footer-button-line);

    cursor: pointer;
}

.vape-footer-email-row button:hover {
    opacity: 0.86;
}

.vape-footer-subscribe-message {
    min-height: var(--footer-message-min-height);
    margin-top: var(--footer-message-margin-top);

    font-family: var(--vape-font-body);
    font-size: var(--footer-message-font);
    line-height: var(--footer-message-line);
    color: #2ef0d6;
}

.vape-footer-subscribe-message.is-error {
    color: #ff6b6b;
}

.vape-footer-socials {
    display: flex;
    align-items: center;
    gap: var(--footer-social-gap);
    margin-top: var(--footer-social-margin-top);
}

.vape-footer-socials a {
    width: var(--footer-social-size);
    height: var(--footer-social-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    text-decoration: none;
}

.vape-footer-socials img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.vape-footer-socials a:hover {
    opacity: 0.72;
}

/* =========================================================
   第二层：联系方式 + 成人警告说明
   ========================================================= */

.vape-footer-middle {
    margin-top: var(--footer-middle-margin-top);
}

.vape-footer-middle-inner {
    display: grid;
    grid-template-columns: minmax(0, 19.0972vw) minmax(0, 50.4861vw); /* 275 / 1440, 727 / 1440 */
    column-gap: var(--footer-middle-gap);
    align-items: flex-start;
}

.vape-footer-contact {
    min-width: 0;
}

.vape-footer-contact p {
    margin: 0;

    font-family: var(--vape-font-body);
    font-weight: 500;
    font-size: var(--footer-contact-font);
    line-height: var(--footer-contact-line);
    letter-spacing: 0;
    color: #ffffff;
}

.vape-footer-contact a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.vape-footer-contact a:hover {
    color: #2ef0d6;
}

.vape-footer-warning {
    width: 100%;
    min-width: 0;
}

.vape-footer-warning-title {
    display: flex;
    align-items: center;
    gap: var(--footer-warning-title-gap);
    margin-bottom: var(--footer-warning-gap);
}

.vape-footer-warning-title img {
    width: var(--footer-warning-icon-width);
    height: var(--footer-warning-icon-height);
    object-fit: contain;
    display: block;
}

.vape-footer-warning-title strong {
    font-family: var(--vape-font-brand);
    font-weight: 700;
    font-size: var(--footer-warning-title-font);
    line-height: var(--footer-warning-title-line);
    color: #ffffff;
}

.vape-footer-warning p {
    margin: 0;

    font-family: var(--vape-font-brand);
    font-weight: 500;
    font-size: var(--footer-warning-text-font);
    line-height: var(--footer-warning-text-line);
    letter-spacing: 0;
    color: #ffffff;
}

/* =========================================================
   第三层：版权 + 支付图标
   ========================================================= */

.vape-footer-bottom {
    position: relative;
    margin-top: var(--footer-bottom-margin-top);
    border-top: 0;
}

.vape-footer-bottom::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--footer-padding-x));
    right: calc(-1 * var(--footer-padding-x));
    top: 0;

    height: 1px;
    background: #ffffff;
    opacity: 0.5;
}

.vape-footer-bottom-inner {
    height: var(--footer-bottom-height);
    padding-top: var(--footer-bottom-padding-top);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
}

.vape-footer-bottom-inner p {
    margin: 0;

    font-family: var(--vape-font-brand);
    font-weight: 500;
    font-size: var(--footer-bottom-font);
    line-height: var(--footer-bottom-line);
    color: #ffffff;
}

.vape-footer-payment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--footer-payment-gap);
    flex: 0 0 auto;
}

.vape-footer-payment-item {
    width: var(--footer-payment-width);
    aspect-ratio: 39 / 18;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.vape-global-footer .vape-footer-payment-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .vape-global-footer {
        --footer-padding-x: 4.8vw;            /* 18 / 375 */
        --footer-padding-top: 14.9333vw;      /* 56 / 375 */
        --footer-padding-bottom: 6.4vw;       /* 24 / 375 */

        --footer-top-gap: 0vw;
        --footer-column-gap: 0vw;

        --footer-heading-margin-bottom: 5.3333vw; /* 20 / 375 */
        --footer-heading-font: 4vw;               /* 15 / 375 */
        --footer-heading-line: 5.8667vw;          /* 22 / 375 */

        --footer-link-font: 3.4667vw;        /* 13 / 375 */
        --footer-link-line: 8.5333vw;        /* 32 / 375 */

        --footer-sub-heading-gap: 5.3333vw;
        --footer-sub-text-gap: 5.8667vw;     /* 22 / 375 */
        --footer-sub-text-font: 3.2vw;       /* 12 / 375 */
        --footer-sub-text-line: 5.3333vw;    /* 20 / 375 */

        --footer-form-gap: 2.6667vw;
        --footer-field-height: 10.6667vw;
        --footer-field-radius: 2.6667vw;
        --footer-field-padding-x: 2.6667vw;
        --footer-field-font: 3.2vw;
        --footer-field-line: 5.3333vw;

        --footer-select-arrow-x-1: 4.2667vw;
        --footer-select-arrow-x-2: 2.9333vw;
        --footer-select-arrow-y: 4.5333vw;
        --footer-select-arrow-size: 1.3333vw;

        --footer-email-button-right: 2.1333vw;
        --footer-email-padding-right: 25.6vw;
        --footer-button-height: 5.3333vw;
        --footer-button-padding-x: 2.6667vw;
        --footer-button-font: 2.9333vw;
        --footer-button-line: 4.8vw;

        --footer-message-min-height: 5.3333vw;
        --footer-message-margin-top: 2.1333vw;
        --footer-message-font: 3.2vw;
        --footer-message-line: 5.3333vw;

        --footer-social-gap: 4.8vw;
        --footer-social-margin-top: 5.3333vw;
        --footer-social-size: 5.8667vw;

        --footer-middle-margin-top: 11.7333vw; /* 44 / 375 */
        --footer-middle-gap: 0vw;

        --footer-contact-font: 3.2vw;
        --footer-contact-line: 5.3333vw;

        --footer-warning-gap: 2.6667vw;
        --footer-warning-title-gap: 2.6667vw;
        --footer-warning-icon-width: 5.8667vw;
        --footer-warning-icon-height: 5.8667vw;
        --footer-warning-title-font: 3.2vw;
        --footer-warning-title-line: 5.3333vw;
        --footer-warning-text-font: 2.9333vw;
        --footer-warning-text-line: 5.3333vw;

        --footer-bottom-margin-top: 11.2vw;       /* 42 / 375 */
        --footer-bottom-height: auto;
        --footer-bottom-padding-top: 5.8667vw;    /* 22 / 375 */
        --footer-bottom-font: 2.9333vw;           /* 11 / 375 */
        --footer-bottom-line: 4.8vw;              /* 18 / 375 */

        --footer-payment-gap: 3.2vw;
        --footer-payment-height: 4.2667vw;        /* 16 / 375 */
    }

    .vape-footer-top-inner {
        grid-template-columns: 1fr;
        row-gap: 9.6vw; /* 36 / 375 */
    }

    .vape-footer-top-left {
        grid-template-columns: 1fr;
        row-gap: 9.6vw;
    }

    .vape-footer-form-row {
        grid-template-columns: 1fr;
    }

    .vape-footer-socials {
        flex-wrap: wrap;
    }

    .vape-footer-middle-inner {
        grid-template-columns: 1fr;
        row-gap: 10.6667vw; /* 40 / 375 */
    }

    .vape-footer-warning-title {
        align-items: flex-start;
    }

    .vape-footer-bottom-inner {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 4.2667vw; /* 16 / 375 */
    }

    .vape-footer-bottom-inner p {
        line-height: var(--footer-bottom-line);
    }
}