/* 雙十一活動：活動頁、活動購物車與結帳摘要 */

[x-cloak] {
    display: none !important;
}

/* 變數只掛在活動區塊上，避免影響其他頁面 */
.d11-cover,
.d11-countdown,
.d11-page,
.d11-notice,
.d11-amounts {
    --d11-main: #e32652;
    --d11-main-soft: rgba(227, 38, 82, 0.14);
    --d11-gold: #f4c76b;
    --d11-card: #16181a;
    --d11-inner: #222326;
    --d11-line: #303136;
    --d11-text: #f7f7f7;
    --d11-muted: #c0c0c0;
}

/* ---------- 活動頁（樣式皆限定在 .d11-page 內） ---------- */
/* 頁首固定定位的預留高度，數值同首頁 */
body:has(.d11-page) #layout-wrapper > .pt-5 {
    padding-top: 62px !important;
}

/* 封面：高度較首頁 Banner 矮，文字置中疊在圖上 */
.d11-cover {
    position: relative;
}

.d11-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 520;
    min-height: 300px;
    object-fit: cover;
    object-position: center;
}

.d11-cover__text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 10%;
    text-align: center;
}

.d11-cover__text > * {
    margin: 0;
}

.d11-cover__eyebrow {
    color: var(--d11-main);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.d11-cover .d11-cover__title {
    margin-top: 0.75rem;
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}

.d11-cover__desc {
    margin-top: 0.875rem;
    color: var(--d11-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* 封面下方的活動倒數：單行置中，不佔太多高度 */
.d11-countdown {
    background-color: #0a0a0b;
}

.d11-countdown .d11-countdown__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem 0.5rem;
    margin: 0;
    padding: 0.875rem 1rem;
}

.d11-countdown__label,
.d11-countdown__unit-label {
    color: var(--d11-text);
    font-weight: 300;
}

.d11-countdown__label {
    margin-right: 0.25rem;
    font-size: 16px;
    letter-spacing: 0.04em;
}

.d11-countdown__unit {
    display: inline-flex;
    align-items: center;
}

/* 數字放在主色淡底小框裡，等寬字讓秒數跳動時寬度不變 */
.d11-countdown__value {
    min-width: 2.5em;
    padding: 0.1875rem 0.375rem;
    border-radius: 6px;
    background-color: var(--d11-main-soft);
    color: var(--d11-main);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.d11-countdown__unit-label {
    margin-left: 0.3125rem;
    font-size: 14px;
}

/* ---------- 活動頁（樣式皆限定在 .d11-page 內） ---------- */
.d11-page {
    --d11-surface: #141516;
    --d11-hairline: #2a2b2f;
    --d11-hairline-strong: #4a4b50;
    --d11-subtle: #9fa0a8;
    --d11-btn-height: 48px;
    --d11-radius: 6px;

    color: var(--d11-text);
}

.d11-content {
    width: 80%;
    margin: 0 auto;
    padding: 3rem 0 4rem;
}

.d11-page h2,
.d11-page p,
.d11-page dl,
.d11-page dd {
    margin: 0;
}

/* 統一按鈕：高度、圓角、字重與 hover／按下狀態一致；login.min.css 的按鈕高度帶 !important，這裡要蓋過 */
.d11-page .btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--d11-btn-height) !important;
    padding: 0 1.75rem;
    border: 0;
    border-radius: var(--d11-radius);
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.d11-page .btn-main:hover {
    background-color: #fa3462 !important;
    transform: none;
}

.d11-page .btn-main:active {
    background-color: #c21f46 !important;
}

.d11-page .btn-main:focus-visible {
    outline: 2px solid var(--d11-text);
    outline-offset: 2px;
}

.d11-page .btn-main:disabled {
    background-color: #2a2b2f !important;
    color: #8a8b90 !important;
    opacity: 1;
    cursor: not-allowed;
}

/* 底部摘要：捲動時釘在畫面底部，到 .d11-page 結尾時停在 Footer 上方 */
body:has(.d11-summary) #back-to-top {
    bottom: 100px;
}

.d11-summary {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    min-height: 88px;
    padding: 0.75rem 10%;
    border-top: 1px solid var(--d11-hairline);
    background-color: #000;
}

.d11-summary__status {
    flex: 1;
    min-width: 0;
}

.d11-summary__headline {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    color: var(--d11-text);
    font-size: 20px;
    font-weight: 700;
}

.d11-summary__off {
    color: var(--d11-main);
}

.d11-summary__hint {
    margin-top: 0.125rem;
    color: var(--d11-subtle);
    font-size: 14px;
}

.d11-summary__amounts {
    display: flex;
    flex-shrink: 0;
    gap: 2rem;
}

.d11-summary__amounts dt {
    color: var(--d11-subtle);
    font-size: 13px;
    font-weight: 400;
}

.d11-summary__amounts dd {
    color: var(--d11-text);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.d11-page .d11-summary__total {
    font-weight: 700;
}

/* 課程區 */
.d11-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin-bottom: 1.25rem;
}

.d11-page .d11-section-head__title {
    color: var(--d11-text);
    font-size: 22px;
    font-weight: 600;
}

.d11-clear {
    padding: 0.25rem 0;
    border: 0;
    background: none;
    color: var(--d11-subtle);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.d11-clear:hover {
    color: var(--d11-text);
}

.d11-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
}

/* 課程卡片：上半部連到課程詳情，下半部選方案與加入購物車 */
.d11-course {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--d11-hairline);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--d11-surface);
    transition: border-color 0.15s ease;
}

.d11-course:hover {
    border-color: var(--d11-hairline-strong);
}

.d11-course__link {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.d11-course__link:hover {
    color: inherit;
}

.d11-course__link:focus-visible {
    outline: 2px solid var(--d11-text);
    outline-offset: -2px;
    border-radius: 10px;
}

.d11-course__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background-color: var(--d11-inner);
}

.d11-course__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.15s ease;
}

.d11-course:hover .d11-course__media img {
    filter: brightness(1.06);
}

.d11-course__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0.75rem 1rem;
}

.d11-page .d11-course__instructor {
    display: block;
    color: var(--d11-subtle);
    font-size: 13px;
    line-height: 1.4;
}

.d11-page .d11-course__name {
    display: block;
    margin: 0.125rem 0 0;
    color: var(--d11-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
}

/* 價格與已加入標示同一行：這行固定存在，加入後卡片高度不變 */
.d11-course__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 28px;
}

.d11-page .d11-course__added {
    flex-shrink: 0;
    color: var(--d11-text);
    font-size: 13px;
    white-space: nowrap;
}

.d11-page .d11-course__price {
    min-width: 0;
    color: var(--d11-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.d11-course__currency {
    margin-right: 0.125rem;
    color: var(--d11-muted);
    font-size: 13px;
    font-weight: 400;
}


.d11-course__original {
    margin-left: 0.375rem;
    color: var(--d11-subtle);
    font-size: 13px;
    font-weight: 400;
}

.d11-course__from {
    color: var(--d11-muted);
    font-size: 13px;
    font-weight: 400;
}

/* 方案與加入購物車：靠卡片底部，同一排對齊 */
.d11-course__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.d11-plan {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 0.625rem 0 0.75rem;
    border: 1px solid var(--d11-hairline-strong);
    border-radius: var(--d11-radius);
    background-color: #000;
    color: var(--d11-subtle);
    font-size: 14px;
    transition: border-color 0.15s ease;
}

.d11-plan:hover {
    border-color: #8a8b90;
}

/* 已加入或只有一個方案：不能更換；已加入的取消後才能更換 */
.d11-plan.is-locked,
.d11-plan.is-locked:hover {
    border-color: var(--d11-hairline);
    background-color: var(--d11-inner);
}

.d11-plan.is-locked .d11-plan__select {
    cursor: default;
}

.d11-plan.has-value {
    color: var(--d11-text);
}

.d11-plan:has(.d11-plan__select:focus-visible) {
    outline: 2px solid var(--d11-text);
    outline-offset: 2px;
}

.d11-plan__label {
    display: flex;
    flex: 1;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.d11-plan__name {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d11-plan__price {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.d11-plan__arrow {
    flex-shrink: 0;
    color: var(--d11-subtle);
    font-size: 18px;
    line-height: 1;
}

/* 透明疊在外框上，點擊時打開原生選單；16px 避免 iOS 聚焦時放大頁面 */
.d11-plan__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0 !important; /* 全站 select:disabled 樣式會讓鎖定時露出原生選單 */
    color-scheme: dark;
    font-size: 16px;
    cursor: pointer;
}

.d11-page .d11-course__add {
    --d11-btn-height: 44px;

    width: 100%;
    padding: 0 0.5rem;
    font-size: 14px;
}

/* 已加入：外框樣式，與主要的紅色加入按鈕區分 */
.d11-page .d11-course__add.is-added {
    border: 1px solid var(--d11-hairline-strong);
    background-color: transparent !important;
    color: var(--d11-text) !important;
}

.d11-page .d11-course__add.is-added:hover {
    border-color: var(--d11-text);
    background-color: transparent !important;
}

.d11-page .d11-course__add.is-added:active {
    background-color: var(--d11-inner) !important;
}

/* 手機底部摘要列 */
.d11-bottom-bar {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .d11-cover img {
        aspect-ratio: 820 / 300;
    }

    .d11-content {
        width: 85%;
    }

    .d11-summary {
        gap: 1.5rem;
        padding-right: 7.5%;
        padding-left: 7.5%;
    }

    .d11-summary__amounts {
        gap: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .d11-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    /* 寬度不足時保留折扣金額與折後總額 */
    .d11-summary__amounts > div:first-child {
        display: none;
    }
}

@media (max-width: 767.98px) {
    body:has(.d11-page) #layout-wrapper > .pt-5 {
        padding-top: 75px !important;
    }

    /* 手機封面 1:1，後台的手機版封面圖請用正方形 */
    .d11-cover img {
        aspect-ratio: 1 / 1;
        min-height: 0;
    }

    .d11-cover__text {
        padding: 1rem;
    }

    .d11-cover__eyebrow {
        font-size: 13px;
    }

    .d11-cover .d11-cover__title {
        margin-top: 0.5rem;
        font-size: 28px;
    }

    .d11-cover__desc {
        margin-top: 0.5rem;
        font-size: 14px;
    }

    .d11-countdown .d11-countdown__inner {
        gap: 0.375rem;
        padding: 0.625rem 1rem;
    }

    .d11-countdown__label {
        margin-right: 0.125rem;
        font-size: 13px;
    }

    .d11-countdown__value {
        padding: 0.125rem 0.25rem;
        font-size: 14px;
    }

    .d11-countdown__unit-label {
        margin-left: 0.25rem;
        font-size: 12px;
    }

    .d11-content {
        width: 100%;
        padding: 2rem 1rem 2.5rem;
    }

    .d11-summary {
        display: none;
    }

    /* 手機版會蓋住卡片的加入購物車按鈕 */
    body:has(.d11-summary) #back-to-top {
        display: none !important;
    }

    .d11-bottom-bar {
        position: sticky;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        height: calc(72px + env(safe-area-inset-bottom));
        padding: 0 1rem env(safe-area-inset-bottom);
        border-top: 1px solid var(--d11-hairline);
        background-color: #000;
    }

    .d11-bottom-bar__info {
        min-width: 0;
    }

    .d11-bottom-bar__status {
        display: block;
        color: var(--d11-muted);
        font-size: 12px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .d11-bottom-bar__amounts {
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
        line-height: 1.3;
        white-space: nowrap;
    }

    .d11-bottom-bar__total {
        color: var(--d11-text);
        font-size: 18px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .d11-bottom-bar__discount {
        color: var(--d11-main);
        font-size: 13px;
        font-variant-numeric: tabular-nums;
    }

    .d11-page .d11-bottom-bar .btn-main {
        flex-shrink: 0;
        padding: 0 0.75rem;
        font-size: 14px;
    }
}

/* 手機維持兩欄 */
@media (max-width: 575.98px) {
    .d11-grid {
        gap: 0.75rem;
    }

    .d11-course__body {
        padding: 0.625rem 0.75rem 0.625rem;
    }

    .d11-course__actions {
        padding: 0 0.625rem 0.625rem;
    }

    .d11-plan {
        padding: 0 0.375rem 0 0.625rem;
        font-size: 13px;
    }

    /* 卡片窄：方案名稱可換行，價格由卡片上方的金額顯示 */
    .d11-plan__name {
        display: -webkit-box;
        line-height: 1.25;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .d11-plan__price {
        display: none;
    }

    .d11-page .d11-course__add {
        font-size: 13px;
    }

    /* 卡片窄，「已加入」由外框的「取消加入購物車」按鈕表示，讓售價與原價維持一行 */
    .d11-page .d11-course__added {
        display: none !important;
    }

    .d11-page .d11-course__instructor {
        font-size: 12px;
    }

    .d11-page .d11-course__name {
        font-size: 15px;
    }

    .d11-page .d11-course__price {
        font-size: 15px;
    }

    .d11-course__currency {
        font-size: 12px;
    }

    .d11-course__original {
        margin-left: 0.25rem;
        font-size: 11px;
    }
}

/* 最窄的手機：優惠已顯示在上一行，省略折抵金額；倒數縮小字級 */
@media (max-width: 359.98px) {
    .d11-bottom-bar__discount {
        display: none;
    }

    /* 售價與原價維持一行 */
    .d11-page .d11-course__price {
        font-size: 14px;
    }

    .d11-course__currency,
    .d11-course__from {
        margin-right: 0;
        font-size: 11px;
    }

    .d11-course__original {
        margin-left: 0;
        font-size: 10px;
    }

    .d11-countdown__label {
        font-size: 12px;
    }

    .d11-countdown__value {
        min-width: 2.25em;
        font-size: 13px;
    }

    .d11-countdown__unit-label {
        margin-left: 0.1875rem;
        font-size: 11px;
    }
}

/* ---------- 活動購物車與結帳共用 ---------- */
.d11-notice {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 1px solid rgba(244, 199, 107, 0.5);
    border-radius: 6px;
    background-color: rgba(244, 199, 107, 0.08);
    color: var(--d11-gold);
    font-size: 13px;
    line-height: 1.6;
}

.d11-discount-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.d11-discount-row span:last-child {
    flex-shrink: 0;
    white-space: nowrap;
}

.d11-amounts {
    margin: 0;
    color: var(--d11-text);
    font-size: 14px;
}

.d11-amounts__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.625rem;
}

.d11-amounts__row dt {
    font-weight: 400;
}

.d11-amounts__row dd {
    margin: 0;
    flex-shrink: 0;
}

.d11-amounts__row--discount dd {
    color: #ff6b8b;
}

.d11-amounts__row--total {
    margin: 1rem 0 0;
    padding-top: 0.875rem;
    border-top: 1px solid #393939;
    font-size: 18px;
    font-weight: 700;
}

.d11-amounts__row--total dt {
    font-weight: 700;
}