/* ================================================================================
   main.css — 全站主樣式（一個檔搞掂：reset/tokens → components → layout → index steps）
   Page 額外樣式另拆：css/terms.css、css/redeem.css
   ★ campaign 圖片/色票/位置 token 一律喺 css/campaign.css（每期唯一要改嘅檔）★
   Breakpoints（max-width）：1559 / 1279 / 1023 / 767 / 479
   ================================================================================ */

/* ============================== BASE ============================== */

:root {
    /* layout */
    --wrapper-max-width: 1600px;
    --wrapper-padding-x: 60px;
    --radius-card: 30px;
    --radius-pill: 30px;

    /* palette（campaign 無關） */
    --color-text: #000;
    --color-error: #dc0018;
    --color-footer-bg: #000;

    /* z-index scale */
    --z-warning: 9999;
    --z-loading: 199;
    --z-popup: 101;
    --z-header: 99;
    --z-form: 3;
    --z-kv: 2;

    /* campaign token fallbacks（實值喺 campaign.css，最後載入覆蓋） */
    --campaign-bg-image: none;
    --campaign-bg-color: #fff;
    --campaign-accent: #057b61;
    --campaign-accent-hover: #00846d;
    --campaign-on-accent: #fff;
    --campaign-draw-text: #000;
    --campaign-desc-bar-bg: #00846d;
}
@media screen and (max-width: 1279px) {
    :root {
        --wrapper-padding-x: 20px;
    }
}

/* --------------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}
body,
html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    color: var(--color-text);
}
body[language="zh"] {
    font-family: Arial, "STHeitiTC", "Microsoft JhengHei", helvetica, sans-serif;
}
img {
    max-width: 100%;
}
table {
    color: inherit;
}
:where(button) {
    display: inline-block;
    padding: 0;
    border: 0;
    margin: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
:where(button:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------------
   i18n：body[language] 切換 .lang_zh / .lang_en（markup 同 JS 渲染共用）
   -------------------------------------------------------------------------------- */
[language="en"] .lang_zh {
    display: none !important;
}
[language="zh"] .lang_en {
    display: none !important;
}

/* --------------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------------- */
.wrapper {
    max-width: var(--wrapper-max-width);
    padding: 0 var(--wrapper-padding-x);
    margin: 0 auto;
}
.nowrap {
    white-space: nowrap;
}
.singular .plural {
    display: none !important;
}
.img-holder {
    position: relative;
}
.img-holder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
@media screen and (min-width: 1024px) {
    ._mobile-only {
        display: none !important;
    }
}
@media screen and (max-width: 1023px) {
    ._desktop-only {
        display: none !important;
    }
}

/* ============================== COMPONENTS ============================== */

/* --------------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background: var(--campaign-accent);
    color: var(--campaign-on-accent);
    padding: 10px 40px;
    margin: 0 0 20px 0;
    border: 2px solid var(--campaign-accent);
    border-radius: var(--radius-pill);
    transition: 0.5s background ease, 0.5s color ease;
}
.btn:hover {
    background: var(--campaign-accent-hover);
    border-color: var(--campaign-accent-hover);
    color: var(--campaign-on-accent);
}
.btn + .btn {
    margin-left: 20px;
}
.btn--secondary {
    background: #eee;
    border-color: #eee;
    color: #000;
}
.btn--secondary:hover {
    background: #ddd;
    border-color: #ddd;
    color: #000;
}
.btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}
@media screen and (max-width: 1023px) {
    .btn {
        font-size: 18px;
        padding: 15px 30px;
    }
    .btn + .btn {
        margin-left: 10px;
    }
}
@media screen and (max-width: 767px) {
    .btn {
        font-size: 16px;
        padding: 10px 40px;
    }
}

/* --------------------------------------------------------------------------------
   Form（白色圓角卡＋label/area/err_msg 結構）
   .form-field.is-invalid 顯示錯誤
   -------------------------------------------------------------------------------- */
.form-card {
    z-index: var(--z-form);
    position: relative;
    width: 100%;
    max-width: 800px;
    padding: 40px 60px;
    background: #fff;
    color: #000;
    border-radius: var(--radius-card);
}
@media screen and (max-width: 1559px) {
    .form-card {
        padding: 40px;
    }
}
@media screen and (max-width: 1279px) {
    .form-card {
        max-width: 100%;
        width: auto;
    }
}
@media screen and (max-width: 1023px) {
    .form-card {
        padding: 30px 20px;
    }
}
.form-card__msg {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form-card__msg span:last-child {
    display: none;
    align-items: center;
    font-size: 12px;
    padding: 5px 10px;
    background: var(--color-error);
    color: #fff;
    border-radius: 20px;
}
.form-card.is-invalid .form-card__msg span:last-child {
    display: flex;
}
.form-card__msg span:last-child:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "!";
    font-size: 12px;
    font-family: "Courier New", Courier, monospace;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-right: 5px;
}
/* ---- field row ---- */
.form-field {
    display: flex;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 10px 0;
}
.form-field__label {
    width: 180px;
    font-weight: bold;
}
.form-field__area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.form-field__area input,
.form-field__area select {
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 30px;
    padding: 0 10px;
    flex: 1;
    min-width: 0;
}
.form-field__area input:read-only,
.form-field__area input:disabled,
.form-field__area select:disabled {
    background-color: #ddd;
    border-color: #d2d2d2;
    opacity: 1;
}
.form-field__area :nth-child(2),
.form-field__area :nth-child(3) {
    margin-left: 20px;
}
.form-field__area a {
    background-color: #eee;
    color: #000;
    text-decoration: none;
    background-image: url(../img/arrow.png);
    background-position: center right 15px;
    background-repeat: no-repeat;
    padding: 8px 30px 8px 20px;
    font-size: 14px;
    border-radius: 20px;
}
.form-field__area a:hover {
    background-color: var(--campaign-accent-hover);
    color: #fff;
    background-image: url(../img/arrow2.png);
}
.form-field .err_msg {
    margin-top: 5px;
    width: 100%;
    display: none;
    text-align: right;
    color: var(--color-error);
}
.form-field.is-invalid .err_msg {
    display: block;
}
.form-field.is-invalid .form-field__area input,
.form-field.is-invalid .form-field__area select {
    border: 1px solid var(--color-error);
}
/* ---- radio 列 ---- */
.form-field__radio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 16px;
    gap: 20px;
}
.form-field__radio label {
    display: flex;
    align-items: center;
}
.form-field__radio input {
    margin-right: 10px;
}
/* ---- info「i」浮標 ---- */
.form-field__info {
    position: absolute;
    bottom: 5px;
    right: -30px;
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    width: 20px;
    height: 20px;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
    background: #be2d49;
    color: #fff;
    border-radius: 50%;
    z-index: 10;
}
.form-field__info--baseline {
    bottom: 0;
}
.form-field__info:hover {
    background: #89191c;
}
/* ---- remark / checkbox 條款 ---- */
.form-remark {
    font-size: 12px;
    margin: 0 0 20px 0;
}
.form-remark p {
    margin: 0 0 10px 0;
}
.form-remark a {
    color: inherit;
}
.form-terms {
    display: flex;
    font-size: 14px;
    align-items: flex-start;
    margin: 10px 0;
}
.form-terms.is-invalid {
    color: var(--color-error);
}
.form-terms__text {
    flex: 1;
    padding-left: 10px;
}
.form-terms__text strong,
.form-terms__text span {
    display: block;
    margin-bottom: 5px;
}
.form-terms__text span {
    font-size: 12px;
}
.form-terms__text a {
    color: #000;
    text-decoration: underline;
}
.form-terms.is-invalid .form-terms__text a {
    color: var(--color-error);
}
/* ---- action 按鈕列 ---- */
.form-actions {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 10px;
}
.form-actions a {
    background: var(--campaign-accent);
    color: var(--campaign-on-accent);
    transition: 0.5s background ease, 0.5s color ease;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    padding: 12px 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    min-width: 150px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--campaign-accent);
}
.form-actions a:hover {
    background: var(--campaign-accent-hover);
    border-color: var(--campaign-accent-hover);
    color: var(--campaign-on-accent);
}
.form-actions a:nth-child(2) {
    background: #eee;
    color: #000;
    border-color: #eee;
}
.form-actions a:nth-child(2):hover {
    background: #ddd;
    border-color: #ddd;
}
.draw_error {
    color: var(--color-error);
    margin-bottom: 20px;
    font-weight: bold;
}
@media screen and (max-width: 1023px) {
    .form-field {
        display: block;
    }
    .form-field__label {
        display: block;
        margin-bottom: 5px;
        width: 100%;
    }
    .form-field__info {
        right: 10px;
    }
    .form-field__radio {
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------------
   OCR 上載（cust-file）
   -------------------------------------------------------------------------------- */
.cust-file {
    position: relative;
    display: block;
    width: 100%;
}
.cust-file__input {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
}
.cust-file__mask {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.5em;
    border-radius: 5px;
    border: 1px dashed #be2d49;
}
.cust-file__mask:before {
    content: "";
    display: block;
    width: 1em;
    aspect-ratio: 1/1;
    background: url(../img/icon-upload.svg) center / contain no-repeat;
}

/* --------------------------------------------------------------------------------
   Prize card（draw 結果 / claim / my-prizes 共用，components.js renderPrizeCard）
   -------------------------------------------------------------------------------- */
.prize-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    color: #000;
    padding: 20px;
    margin: 0 0 20px 0;
    border-radius: 20px;
}
.prize-card__img {
    width: 160px;
}
.prize-card__img .img {
    display: block;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.prize-card__img .img:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.prize-card__bar {
    width: 300px;
}
.prize-card__bar .barcode {
    margin: 0 40px;
    display: block;
}
.prize-card__bar .barcode img {
    display: block;
    width: 100%;
    height: auto;
}
.prize-card__text {
    flex: 1;
}
.prize-card__text:nth-last-child(2) {
    padding-right: 40px;
}
.prize-card__name {
    margin: 0 20px 0 0;
    font-size: 20px;
    font-weight: bold;
}
.prize-card__desc {
    font-size: 13px;
    margin-top: 10px;
}
.prize-card__link {
    display: inline-block;
    text-decoration: none;
    padding: 8px 20px;
    margin: 20px 0 0 0;
    border-radius: 20px;
    background: var(--campaign-accent);
    color: var(--campaign-on-accent);
    transition: 0.5s opacity ease;
}
.prize-card__link:hover {
    opacity: 0.8;
}
.prize-card__status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-left: 14px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #707070;
}
.prize-card__grp {
    position: absolute;
    left: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background-color: #91681a;
}
.prize-card__grp-count {
    margin-left: 4px;
    font-size: 1.5em;
}
@media screen and (max-width: 1679px) {
    .prize-card {
        flex-wrap: wrap;
    }
    .prize-card__text {
        flex: auto;
        width: 100%;
        margin-top: 20px;
    }
    .prize-card__status,
    .prize-card__grp {
        margin-left: 0;
        position: absolute;
        top: 12px;
        left: auto;
        right: 12px;
    }
}
@media screen and (max-width: 767px) {
    .prize-card__img {
        width: 100%;
    }
    .prize-card__img .img {
        max-width: 240px;
        margin: 0 auto;
    }
    .prize-card__bar {
        width: 100%;
    }
    .prize-card__bar .barcode {
        max-width: 240px;
        margin: 0 auto;
    }
    .prize-card__text {
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
    }
}

/* --------------------------------------------------------------------------------
   Receipt filter（查獎「我的獎品」收據清單；≤1023 變 dropdown）
   -------------------------------------------------------------------------------- */
.receipt-filter,
.receipt-filter__single-count {
    display: none;
}
.receipt-filter__single-count {
    margin: 0;
}
.ld.is-check-prize .receipt-filter,
.ld.is-check-prize .receipt-filter__single-count {
    display: block;
}
.ld.is-check-prize .receipt-filter__single-count {
    margin: 0;
}
.receipt-filter {
    position: sticky;
    top: 48px;
    padding-bottom: 48px;
}
.receipt-filter__list {
    display: flex;
    flex-direction: column;
    max-width: 360px;
}
.receipt-filter__dropdown-toggle {
    display: none;
}
.receipt-filter__dropdown-menu {
    display: flex;
    flex-direction: column;
}
.receipt-filter__item {
    position: relative;
    padding: 0.5em 2em 0.5em 0;
    border-bottom: 1px solid currentColor;
}
.receipt-filter__item:after {
    content: "";
    position: absolute;
    top: calc(50% - 0.5em);
    right: 6px;
    display: block;
    width: 1em;
    height: 1em;
    background: url(../img/right-arrow.svg) center / contain no-repeat;
    opacity: 0;
    transition: 0.3s right ease, 0.3s opacity ease;
}
.receipt-filter__item--current:after,
.receipt-filter__item:hover:after {
    opacity: 1;
    right: 0;
}
@media screen and (max-width: 1023px) {
    .receipt-filter__list {
        position: relative;
        margin: 0 auto;
        width: 400px;
        max-width: 100%;
    }
    .receipt-filter__item {
        padding-left: 0.5em;
    }
    .receipt-filter__item:after {
        right: 0.5em;
    }
    .receipt-filter__item:last-child {
        border-bottom: none;
    }
    .receipt-filter__dropdown-toggle {
        display: block;
        position: relative;
        width: 100%;
        padding: 0.5em 2em 0.5em 0;
        border-bottom: 1px solid currentColor;
    }
    .receipt-filter__dropdown-toggle:after {
        content: "";
        position: absolute;
        top: calc(50% - 0.35em);
        right: 6px;
        display: block;
        width: 0.75em;
        height: 0.75em;
        background: url(../img/arrow.svg) center / contain no-repeat;
        transform: rotate(90deg);
        transition: transform 0.3s ease;
    }
    .receipt-filter__list--open .receipt-filter__dropdown-toggle:after {
        transform: rotate(-90deg);
    }
    .receipt-filter__dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    .receipt-filter__list--open .receipt-filter__dropdown-menu {
        display: flex;
    }
}

/* --------------------------------------------------------------------------------
   Loading overlay（body.is-loading 顯示；body.is-ocr 顯示 OCR 文案）
   -------------------------------------------------------------------------------- */
.loading-overlay {
    display: none;
}
.loading-overlay__body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    min-width: 200px;
    min-height: 100px;
    padding: 24px;
    border-radius: 20px;
    text-align: center;
    color: #000;
    background-color: #fff;
}
.loading-overlay__body:before {
    content: "";
    display: block;
    width: 40px;
    height: 10px;
    background: url(../img/loading.svg) center no-repeat;
}
body.is-loading * {
    pointer-events: none;
}
body.is-loading .loading-overlay {
    z-index: var(--z-loading);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}
.loading-overlay__desc {
    display: none;
    margin: 0;
}
body.is-loading.is-ocr .loading-overlay__desc {
    display: block;
}

/* --------------------------------------------------------------------------------
   Popup（圖片/資訊）
   -------------------------------------------------------------------------------- */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-popup);
    overflow: auto;
    display: none;
    background: rgba(0, 0, 0, 0.9);
}
.popup--show {
    display: block;
}
.popup__body {
    text-align: center;
    padding: 60px 40px;
}
.popup__body img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
}
.popup__close {
    display: block;
    position: fixed;
    right: 20px;
    top: 10px;
    background: #fff;
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    font-size: 30px;
    font-family: "Courier New", Courier, monospace;
}
.popup__close:hover {
    background: var(--campaign-accent-hover);
    color: #fff;
}

/* --------------------------------------------------------------------------------
   Warning dialog（離開警告 body.is-unload／重複領獎 body.is-repeat-prize）
   -------------------------------------------------------------------------------- */
.warning-dialog {
    position: fixed;
    z-index: var(--z-warning);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}
body.is-unload .warning-dialog,
body.is-repeat-prize .warning-dialog {
    display: flex;
}
.warning-dialog__body {
    width: calc(100% - 80px);
    max-width: 600px;
    padding: 40px;
    text-align: center;
    background: #fff;
    color: #000;
}
.warning-dialog__body--repeat {
    display: none;
}
body.is-repeat-prize .warning-dialog__body--unload {
    display: none;
}
body.is-repeat-prize .warning-dialog__body--repeat {
    display: block;
}
.warning-dialog__btns {
    margin: 20px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.warning-dialog__btns a {
    width: 100%;
    padding: 10px 20px;
    background-color: var(--campaign-accent);
    color: var(--campaign-on-accent);
    text-decoration: none;
    margin: 0 0 10px 0;
}
.warning-dialog.is-confirmed .warning-dialog__step1 {
    display: none;
}
.warning-dialog:not(.is-confirmed) .warning-dialog__step2 {
    display: none;
}

/* ============================== LAYOUT（header/footer/step 顯示規則） ============================== */

/* --------------------------------------------------------------------------------
   Site header（campaign 不變）：左上 logo 膠囊＋右上 pill 列
   -------------------------------------------------------------------------------- */
.site-header__logo {
    display: block;
    position: absolute;
    z-index: var(--z-header);
    top: 0;
    left: 0;
    max-width: calc(100% - 150px);
}
.site-header__logo img {
    width: 100%;
    max-width: 600px;
    min-width: 455px;
    height: auto;
}
.site-header__nav {
    position: absolute;
    z-index: var(--z-header);
    top: 40px;
    right: var(--wrapper-padding-x);
    display: flex;
    gap: 12px;
}
.site-header__pill {
    display: block;
    background: #fff;
    color: #000;
    text-decoration: none;
    padding: 8px 30px;
    border-radius: 20px;
    white-space: nowrap;
}
.site-header__pill:hover {
    background: var(--campaign-accent-hover);
    color: #fff;
}
/* 首頁 / 得獎頁 / 查獎輸入頁唔重複顯示 header「查看我的獎品」pill */
/* 查獎輸入頁（step 7）顯示「返回」pill，返回進入查獎前嘅 step */
.site-header__pill.js-check-prize,
.site-header__pill.js-check-prize-back {
    display: none;
}
body[data-step="2"] .site-header__pill.js-check-prize,
body[data-step="3"] .site-header__pill.js-check-prize,
body[data-step="6"] .ld:not(.is-check-prize) .site-header__pill.js-check-prize {
    display: block;
}

body[data-step="7"] .site-header__pill.js-check-prize-back {
    display: block;
}
@media screen and (max-width: 1279px) {
    .site-header__logo img {
        max-width: 480px;
    }
}
@media screen and (max-width: 1023px) {
    .site-header__logo img {
        max-width: 400px;
        min-width: 400px;
    }
    /* pill 直排靠右，避免遮住 logo */
    .site-header__nav {
        top: 20px;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    .site-header__pill {
        padding: 6px 16px;
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    .site-header__logo img {
        width: min(56vw, 300px);
        max-width: 100%;
        min-width: auto;
    }
    .site-header__pill {
        padding: 5px 12px;
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------------
   Site footer（campaign 不變）：黑色法律 bar
   -------------------------------------------------------------------------------- */
.site-footer {
    background: var(--color-footer-bg);
    color: #fff;
    padding: 30px 0;
}
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: none;
}
.site-footer__legal {
    flex: 1;
    font-size: 13px;
    line-height: 1.5em;
}
.site-footer__legal-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 5px 0;
}
.site-footer__legal-row span:not(:last-of-type) {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #ccc;
}
.site-footer__links {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.site-footer__nav {
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.site-footer__nav a {
    color: #fff;
    text-decoration: none;
}
.site-footer__nav a:hover {
    text-decoration: underline;
}
.site-footer__nav a:not(:last-of-type) {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #ccc;
}
.site-footer__share {
    display: flex;
    align-items: center;
}
.site-footer__share span {
    font-size: 20px;
    font-weight: bold;
    margin-left: 40px;
}
.site-footer__share a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 20px;
}
.site-footer__share a img {
    max-height: 100%;
    width: auto;
    height: auto;
    filter: brightness(0) invert(1);
}
@media screen and (max-width: 1023px) {
    .site-footer {
        padding: 20px 0;
    }
    .site-footer__inner {
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }
    .site-footer__legal,
    .site-footer__links {
        width: 100%;
        flex: auto;
    }
    .site-footer__legal-row {
        display: block;
    }
    .site-footer__legal-row span {
        display: block;
        margin-bottom: 5px;
        border: none;
    }
    .site-footer__links {
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }
    .site-footer__nav,
    .site-footer__share {
        width: 100%;
        flex: auto;
        margin-bottom: 20px;
    }
    .site-footer__share span {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------------
   Step 顯示規則
   body[data-step=N] 控制 step panel 顯示同全頁佈局。
   Panel 預設 display:none；要 flex/grid 嘅 panel 喺 pages.css 設 --panel-display。
   data-step: 1=home 2=form 3=preview 4=draw-anim 5=draw-result 6=claim 7=check-prize
   -------------------------------------------------------------------------------- */
.ld {
    background-color: var(--campaign-bg-color);
}
.ld__inner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 720px;
    background-image: var(--campaign-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
[data-step-panel] {
    display: none;
}
body[data-step="1"] [data-step-panel~="1"],
body[data-step="2"] [data-step-panel~="2"],
body[data-step="3"] [data-step-panel~="3"],
body[data-step="4"] [data-step-panel~="4"],
body[data-step="5"] [data-step-panel~="5"],
body[data-step="6"] [data-step-panel~="6"],
body[data-step="7"] [data-step-panel~="7"] {
    display: var(--panel-display, block);
}
/* panel 內部按 step 再細分顯示（如 draw 區 step 5/6 內容唔同） */
body:not([data-step="5"]) ._step-5,
body:not([data-step="6"]) ._step-6 {
    display: none !important;
}

/* ============================== INDEX PAGES（七步流程） ============================== */

/* --------------------------------------------------------------------------------
   Step inner 佈局（每 step 唔同 padding / 排列）
   -------------------------------------------------------------------------------- */
body[data-step="1"] .ld__inner {
    display: block;
    min-height: auto;
}
body[data-step="2"] .ld__inner,
body[data-step="7"] .ld__inner {
    padding: 150px 120px 40px 120px;
}
body[data-step="3"] .ld__inner {
    flex-direction: column;
    padding-top: 90px;
}
body[data-step="4"] .ld__inner {
    min-height: 0;
}
body[data-step="4"] .ld__inner:before {
    content: "";
    display: block;
    padding-bottom: 50%;
}
body[data-step="5"] .ld__inner {
    min-height: 0;
    justify-content: space-between;
    align-items: flex-start;
    padding: 150px 120px 60px 120px;
}
body[data-step="6"] .ld__inner {
    justify-content: space-between;
    align-items: flex-start;
    padding: 150px 120px 0 120px;
    overflow: unset;
}
@media screen and (min-width: 1280px) {
    body[data-step="7"] .ld__inner {
        min-height: 780px;
    }
}
@media screen and (max-width: 1559px) {
    body[data-step="2"] .ld__inner,
    body[data-step="7"] .ld__inner {
        padding: 150px 40px 60px 60px;
    }
    body[data-step="5"] .ld__inner {
        padding: 150px 60px 60px 60px;
    }
}
@media screen and (max-width: 1279px) {
    body[data-step="2"] .ld__inner,
    body[data-step="7"] .ld__inner {
        display: block;
        padding: 120px 40px 60px 40px;
    }
    body[data-step="3"] .ld__inner {
        padding-top: 120px;
    }
    body[data-step="5"] .ld__inner {
        padding: 120px 40px 60px 40px;
    }
    body[data-step="6"] .ld__inner {
        padding: 120px 60px 0 60px;
    }
}
@media screen and (max-width: 1023px) {
    body[data-step="2"] .ld__inner,
    body[data-step="7"] .ld__inner {
        padding: 100px 20px 60px 20px;
    }
    body[data-step="3"] .ld__inner {
        padding-top: 100px;
    }
    body[data-step="4"] .ld__inner:before {
        padding-bottom: 75%;
    }
    body[data-step="5"] .ld__inner {
        display: block;
        padding: 120px 40px 60px 40px;
    }
    body[data-step="6"] .ld__inner {
        display: block;
        padding: 120px 40px 60px 40px;
    }
}
@media screen and (max-width: 767px) {
    body[data-step="4"] .ld__inner:before {
        padding-bottom: 150%;
    }
    body[data-step="5"] .ld__inner {
        padding: 100px 20px 60px 20px;
    }
    body[data-step="6"] .ld__inner {
        padding: 100px 20px 60px 20px;
    }
}

/* --------------------------------------------------------------------------------
   STEP 1 HOME — KV（title 左、phone 圖右、按鈕）＋ 下方綠色資訊條
   位置 / 比例由 campaign token 控制（每期可微調）
   -------------------------------------------------------------------------------- */
.home {
    position: relative;
    padding: 120px 0 0;
}
.home__kv {
    display: flex;
    align-items: flex-start;
    max-width: var(--wrapper-max-width);
    padding: 80px 24px 0;
    margin: 0 auto var(--campaign-kv-overlap-y, -4%);
}
.home__kv-title {
    position: relative;
    width: var(--campaign-kv-title-width, 40%);
    z-index: var(--z-kv);
}
.home__kv-image {
    width: var(--campaign-kv-image-width, 60%);
    margin-left: var(--campaign-kv-image-overlap, -20%);
}
.home__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-bottom: 80px;
    padding: 0 0 30px;
}
.home__action .btn {
    width: 210px;
    font-size: 20px;
    padding: 14px 16px;
    border-radius: 50px;
    transform: translateY(-50%);
}
.home__action .btn + .btn {
    margin-left: 0;
}
.home__fin {
    background: rgba(255, 255, 255, 0.7);
}
.home__fin-text {
    padding: 20px 40px 0 40px;
    margin: 0;
    width: 100%;
}
.home__fin-text:last-child {
    padding-bottom: 20px;
}
.home__desc {
    position: relative;
    padding: 24px 0;
    background-color: var(--campaign-desc-bar-bg);
    z-index: var(--z-kv);
}
.home__desc-inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 14px 24px;
    width: 100%;
    /* max-width: var(--wrapper-max-width); */
    max-width: 1300px;
    padding: 0 24px;
    margin: 0 auto;
}
.home__desc img {
    display: block;
    width: 100%;
}
@media screen and (max-width: 1440px) {
    .home__action {
        margin-left: -10%;
    }
}
@media screen and (max-width: 1023px) {
    .home__desc-inner {
        grid-template-columns: 1fr;
    }
    .home__desc-item:nth-child(1) img {
        max-width: 46%;
        margin-left: -0.9%;
    }
    .home__action .btn {
        width: 200px;
        font-size: 18px;
    }
}
@media screen and (max-width: 767px) {
    .home__kv {
        flex-direction: column;
        align-items: center;
        padding-top: 0;
    }
    .home__kv-title {
        position: unset;
        width: 90%;
        max-width: 400px;
        margin-bottom: 0;
        z-index: auto;
    }
    .home__kv-image {
        width: 80%;
        margin-left: -24px;
        margin-right: auto;
        order: 3;
    }
    .home__action {
        position: relative;
        width: 100%;
        margin: 24px auto 0;
        padding-bottom: 0;
        z-index: 2;
    }
    .home__action .btn {
        transform: none;
        width: 180px;
        padding: 10px 20px;
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------------
   Campaign KV 側欄（step 2/3/7：title art＋phone 圖）
   -------------------------------------------------------------------------------- */
.ld__kv {
    --panel-display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 40px 0 0;
}
.ld__kv img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    position: relative;
    z-index: 4; /* title art 喺卡片之上（step 3 重疊位） */
}
/* step 2/7：title art 靠上，同 phone 圖只輕微重疊（跟 design 02/02-1） */
body[data-step="2"] .ld__kv,
body[data-step="7"] .ld__kv {
    align-self: stretch;
    justify-content: flex-start;
}
/* phone 圖：貼住 section（.ld__inner）左下角；≤1279 隱藏 */
.ld__kv .ld__kv-image {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1; /* 喺白卡（z-index 3）之下 */
    margin: 0;
    max-width: 46%;
    max-height: 58%;
}
@media screen and (min-width: 1280px) {
    body[data-step="2"] .ld__kv-image,
    body[data-step="7"] .ld__kv-image {
        display: block;
    }
}
body[data-step="3"] .ld__kv {
    width: 439px;
    max-width: 100%;
    padding: 0;
    margin-bottom: -70px;
}
@media screen and (max-width: 1279px) {
    .ld__kv {
        padding: 0;
    }
    .ld__kv img {
        max-width: 480px;
        margin: 0 auto;
    }
    body[data-step="2"] .ld__kv,
    body[data-step="3"] .ld__kv {
        width: auto;
        margin-bottom: -12px;
    }
}
@media screen and (max-width: 1023px) {
    .ld__kv img {
        max-width: 360px;
    }
}
@media screen and (max-width: 767px) {
    .ld__kv img {
        width: 60vw;
    }
}

/* --------------------------------------------------------------------------------
   STEP 2 FORM / STEP 7 CHECK PRIZE
   -------------------------------------------------------------------------------- */
.reg-form,
.check-prize {
    --panel-display: block;
}
body[data-step="7"] .check-prize {
    flex: 1;
}
.reg-form .shop_location .form-field__area {
    max-width: calc(100% - 180px);
}
.reg-form .shop_location .form-field__area select {
    max-width: calc(33% - 20px);
}
.online-show {
    display: none;
}
@media screen and (max-width: 1023px) {
    .reg-form .shop_location .form-field__area {
        max-width: 100%;
    }
}
@media screen and (max-width: 767px) {
    .reg-form .shop_location .form-field__area {
        flex-wrap: wrap;
    }
    .reg-form .shop_location .form-field__area select {
        flex: auto;
        width: 100%;
        max-width: 100%;
    }
    .reg-form .shop_location .form-field__area select:not(:first-child) {
        margin-top: 10px;
        margin-left: 0;
    }
}
/* check prize 專用 */
.check-prize .form-card__msg {
    margin-bottom: 16px;
}
.check-prize .form-card__msg > span:first-child {
    display: block;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
    flex: 1;
}
/* 收取驗證碼：跟 design（02-1）做 input-group — 灰色方角掣直接黐住 email input 右邊 */
.check-prize__email-area {
    flex-wrap: nowrap;
    gap: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.check-prize__email-area input {
    flex: 1;
    min-width: 0;
    margin-left: 0;
    border: 0;
}
.check-prize__email-area .check-prize__send-otp {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 30px; /* 同 input 同高 */
    margin: 0;
    min-width: auto;
    padding: 0 14px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    background-color: #efefef;
    color: #000;
    background-image: none;
    transition: all 0.3s ease;
}
.check-prize__send-otp:hover {
    background-color: var(--campaign-accent-hover);
    color: #fff;
}
.check-prize__send-otp.is-cooldown {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}
.check-prize__email-row.has-status .check-prize__email-err,
.check-prize__email-row.is-invalid .check-prize__email-err {
    display: block;
}
.check-prize .form-actions {
    justify-content: flex-start;
}
.check-prize__status {
    margin-top: 8px;
    color: var(--color-error);
    text-align: center;
}
.check-prize__error {
    display: none;
    margin-top: 8px;
    color: var(--color-error);
    text-align: center;
}

/* --------------------------------------------------------------------------------
   STEP 3 PREVIEW
   -------------------------------------------------------------------------------- */
.preview {
    --panel-display: flex;
    z-index: var(--z-form);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap-reverse;
    position: relative;
    width: calc(100% - 80px);
    max-width: 1440px;
    margin: 0 auto 60px auto;
    padding: 40px 60px;
    background: #fff;
    color: #000;
    border-radius: var(--radius-card);
}
.preview .form-actions {
    justify-content: flex-start;
}
.preview__info {
    width: 45%;
}
.preview__info p {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
}
.preview__info table {
    margin: 0 0 20px 0;
    border-spacing: 0;
    width: 100%;
}
.preview__info table td {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    font-size: 18px;
}
.preview__info table td:first-of-type {
    font-weight: bold;
}
.preview__info table td:first-child {
    padding-right: 40px;
}
.preview__info table td:last-child {
    width: 180px;
}
.preview__chance {
    width: calc(55% - 100px);
    margin-left: auto;
}
.preview__chance-head {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
.preview__chance-qty {
    font-size: 88px;
    line-height: 1em;
    font-weight: 600;
    margin-top: 18px;
    margin-bottom: 30px;
    color: #000;
}
@media screen and (max-width: 1399px) {
    .preview__chance {
        width: 100%;
        margin-bottom: 40px;
    }
    .preview__info {
        width: 100%;
    }
    .preview__info table td {
        font-size: 16px;
    }
}
@media screen and (max-width: 1279px) {
    .preview {
        padding: 30px;
    }
    .preview__info table td {
        font-size: 14px;
    }
    .preview__chance-qty {
        font-size: 60px;
    }
}
@media screen and (max-width: 1023px) {
    .preview {
        margin: 0 auto 60px auto;
        width: calc(100% - 40px);
        padding: 20px;
    }
    .preview__chance-qty {
        font-size: 40px;
    }
}

/* --------------------------------------------------------------------------------
   STEP 4 DRAW ANIMATION（全屏 KV）
   -------------------------------------------------------------------------------- */
.draw-stage {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}
.draw-stage__art {
    position: relative;
    width: 100%;
    height: 100%;
}
.draw-stage__art img {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    object-position: center bottom;
    translate: -50% 0;
    opacity: 0;
    transition: 1s all ease;
    scale: 0.5;
}
.draw-stage__art.show img {
    opacity: 1;
    scale: 1;
}
/* 抽中獎品圓形彈出（components.js drawAnimation 動態插入） */
.draw-stage__ball {
    display: block;
    position: absolute;
}
.draw-stage__ball:before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.draw-stage__ball span {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 20px;
    font-weight: bold;
    color: #e60022;
    border-radius: 50%;
    border: 30px solid #fff;
    transform: scale(0.1);
    transform-origin: 50% 50%;
    opacity: 0;
    transition: ease all 0.8s;
}
.draw-stage__ball.show span {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.8s;
}

/* --------------------------------------------------------------------------------
   STEP 5/6 DRAW SIDE（左欄）＋ STEP 5 RESULT list
   -------------------------------------------------------------------------------- */
.draw-side {
    --panel-display: flex;
    z-index: var(--z-form);
    align-self: stretch;
    align-items: center;
    justify-content: center;
    width: calc(50% - 80px);
    color: var(--campaign-draw-text);
}
body[data-step="6"] .draw-side {
    position: relative;
    width: calc(40% - 80px);
    z-index: 4;
}
@media screen and (min-width: 1024px) {
    body[data-step="6"] .draw-side {
        align-self: stretch;
    }
    body[data-step="6"] .draw-side__inner {
        height: 100%;
    }
}
.draw-side__inner img {
    width: 100%;
    max-width: 540px;
    height: auto;
    display: block;
    margin-bottom: 32px;
}
@media screen and (min-width: 1024px) {
    body[data-step="6"] .ld:not(.is-check-prize) .draw-side__inner img {
        position: sticky;
        top: 48px;
    }
}
.draw-side__title {
    font-size: 30px;
}
.draw-side__chance {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 50px;
    line-height: 1.5em;
    font-weight: bold;
}
.draw-side__auto {
    margin-bottom: 20px;
}
.draw-side__btns {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 200px;
}
.draw-side__btns .btn {
    margin: 0 5px 10px 5px;
    min-width: 240px;
    text-align: center;
}
body[data-step="6"] .draw-side__title,
body[data-step="6"] .draw-side__chance,
body[data-step="6"] .draw-side__auto,
body[data-step="6"] .draw-side__btns {
    display: none;
}
.draw-result {
    z-index: var(--z-form);
    position: relative;
    width: 50%;
    color: #10383e;
    font-weight: bold;
}
.draw-result__item {
    margin: 0 0 10px 0;
    padding: 15px 20px;
    background: #fff;
    color: #000;
    border-radius: 50px;
    font-weight: bold;
}
@media screen and (max-width: 1559px) {
    .draw-side__title {
        font-size: 20px;
    }
    .draw-side__chance {
        font-size: 36px;
    }
}
@media screen and (max-width: 1279px) {
    .draw-side__inner img {
        max-width: 480px;
        margin: 0 auto 24px;
    }
}
@media screen and (max-width: 1023px) {
    .draw-side {
        width: 100% !important;
    }
    .draw-side__inner {
        width: 100%;
        text-align: center;
    }
    .draw-side__title {
        font-size: 18px;
    }
    .draw-side__chance {
        font-size: 30px;
        justify-content: center;
    }
    .draw-side__inner img {
        max-width: 360px;
    }
    .draw-side__btns {
        padding-bottom: 10px;
        justify-content: center;
    }
    .draw-result {
        width: 100%;
    }
}
@media screen and (max-width: 767px) {
    .draw-side__inner img {
        width: 60vw;
        margin: 0 auto 24px;
    }
    .draw-side__title {
        font-size: 16px;
    }
    .draw-side__chance {
        font-size: 24px;
    }
    .draw-side__btns {
        padding-bottom: 10px;
    }
}

/* --------------------------------------------------------------------------------
   STEP 6 CLAIM
   -------------------------------------------------------------------------------- */
.claim {
    z-index: var(--z-form);
    position: relative;
    width: 60%;
    max-width: 1280px;
}
@media screen and (max-width: 1023px) {
    .claim {
        width: 100%;
    }
}
.claim__head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 20px 0;
}
.claim__msg {
    display: none;
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    font-size: 36px;
    font-weight: bold;
    opacity: 0;
}
.claim__restart {
    margin-left: auto;
    /* position: absolute; */
    /* bottom: 0; */
    /* right: 0; */
}
.claim__restart .btn {
    font-size: 14px;
    margin-bottom: 0;
}
.claim__restart .btn:not(:hover) {
    background-color: #fff;
    border-color: #fff;
    color: #000;
    background-image: url(../img/arrow_black2.svg);
    background-position: center right 20px;
    background-repeat: no-repeat;
}
.claim__restart .btn:hover {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: #fff;
    background-image: url(../img/arrow_white.svg);
    background-position: center right 20px;
    background-repeat: no-repeat;
}
.claim__list {
    display: block;
    position: relative;
    padding-bottom: 50px;
}
@media screen and (max-width: 1023px) {
    .claim__list {
        padding-bottom: 0;
    }
}
@media screen and (max-width: 767px) {
    .claim__head {
        flex-direction: column-reverse;
        gap: 14px;
        margin-bottom: 10px;
    }
}