/**
 * Common CSS v1
 * 包含 CSS Variables, 工具類
 * 所有樣式限制在 .sciket-header-v1 和 .sciket-footer-v1 容器內
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');

/* ========== CSS Variables (顏色系統) ========== */
:root {
    /* Primary 主色 */
    --sciket-v1-color-primary-10: #E5EBFF;
    --sciket-v1-color-primary-20: #CCDAFF;
    --sciket-v1-color-primary-base: #022EB3;
    --sciket-v1-color-primary-120: #01217E;

    /* Secondary 次要色 */
    --sciket-v1-color-secondary-10: #FFF4E5;
    --sciket-v1-color-secondary-base: #FF9500;
    --sciket-v1-color-secondary-120: #CC7700;

    /* Accent 強調色 */
    --sciket-v1-color-accent-10: #FFF3E0;
    --sciket-v1-color-accent-base: #FF6B00;
    --sciket-v1-color-accent-120: #E55C00;

    /* Success 成功色 */
    --sciket-v1-color-success-10: #E8F5E9;
    --sciket-v1-color-success-base: #4CAF50;
    --sciket-v1-color-success-100: #388E3C;

    /* Danger 危險/警告色 */
    --sciket-v1-color-danger-10: #FFEBEE;
    --sciket-v1-color-danger-base: #EE4055;
    --sciket-v1-color-danger-120: #C62828;

    /* Warning 警告色 */
    --sciket-v1-color-warning-10: #FFF8E1;
    --sciket-v1-color-warning-base: #FFC107;

    /* Neutral 中性色 */
    --sciket-v1-color-neutral-10: #F9F9F9;
    --sciket-v1-color-neutral-20: #F5F5F5;
    --sciket-v1-color-neutral-30: #F0F0F0;
    --sciket-v1-color-neutral-40: #EBEBEB;
    --sciket-v1-color-neutral-50: #E0E0E0;
    --sciket-v1-color-neutral-60: #909090;
    --sciket-v1-color-neutral-80: #4B4B4B;
    --sciket-v1-color-neutral-100: #231815;
    --sciket-v1-color-neutral-black: #000000;

    /* Background 背景色 */
    --sciket-v1-color-background: #F5F5F5;

    /* White */
    --sciket-v1-color-white: #FFFFFF;

    /* 陰影 */
    --sciket-v1-shadow-1: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
    --sciket-v1-shadow-2: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
    --sciket-v1-shadow-3: 0px 4px 80px 0px rgba(0, 0, 0, 0.10);

    /* 圓角 */
    --sciket-v1-radius-sm: 4px;
    --sciket-v1-radius-md: 8px;
    --sciket-v1-radius-lg: 12px;
    --sciket-v1-radius-xl: 16px;
    --sciket-v1-radius-2xl: 20px;
    --sciket-v1-radius-full: 9999px;

    /* 字體 */
    --sciket-v1-font-family: "PingFang TC", "Poppins", "Noto Sans TC", "Microsoft JhengHei", sans-serif;

    /* Z-index */
    --sciket-v1-z-dropdown: 50;
    --sciket-v1-z-modal: 100;
    --sciket-v1-z-header: 300;
}

/* ========== 容器基礎樣式 ========== */
.sciket-header-v1,
.sciket-footer-v1 {
    box-sizing: border-box;
    font-family: var(--sciket-v1-font-family);
    line-height: 150%;
}

.sciket-header-v1 *,
.sciket-header-v1 *::before,
.sciket-header-v1 *::after,
.sciket-footer-v1 *,
.sciket-footer-v1 *::before,
.sciket-footer-v1 *::after {
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
}

.sciket-header-v1 h1,
.sciket-header-v1 h2,
.sciket-header-v1 h3,
.sciket-header-v1 h4,
.sciket-header-v1 h5,
.sciket-header-v1 h6,
.sciket-footer-v1 h1,
.sciket-footer-v1 h2,
.sciket-footer-v1 h3,
.sciket-footer-v1 h4,
.sciket-footer-v1 h5,
.sciket-footer-v1 h6 {
    font-weight: 600;
    line-height: 120%;
}

.sciket-header-v1 a,
.sciket-footer-v1 a {
    text-decoration: none;
    transition: color 0.3s ease;
}


.sciket-header-v1 img,
.sciket-footer-v1 img {
    max-width: 100%;
    height: auto;
    display: block;
}

.sciket-header-v1 button,
.sciket-footer-v1 button {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    border: none;
    cursor: pointer;
}

.sciket-header-v1 input,
.sciket-header-v1 textarea,
.sciket-header-v1 select,
.sciket-footer-v1 input,
.sciket-footer-v1 textarea,
.sciket-footer-v1 select {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

.sciket-header-v1 input[type="search"]::-webkit-search-decoration,
.sciket-header-v1 input[type="search"]::-webkit-search-cancel-button,
.sciket-header-v1 input[type="search"]::-webkit-search-results-button,
.sciket-header-v1 input[type="search"]::-webkit-search-results-decoration,
.sciket-footer-v1 input[type="search"]::-webkit-search-decoration,
.sciket-footer-v1 input[type="search"]::-webkit-search-cancel-button,
.sciket-footer-v1 input[type="search"]::-webkit-search-results-button,
.sciket-footer-v1 input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.sciket-header-v1 input[type="search"],
.sciket-footer-v1 input[type="search"] {
    -webkit-appearance: none;
}

/* Checkbox 樣式 */
.sciket-header-v1 input[type="checkbox"],
.sciket-footer-v1 input[type="checkbox"] {
    position: relative;
    appearance: none;
    outline: none;
    width: 24px;
    height: 24px;
    background-color: var(--sciket-v1-color-white);
    border: 1px solid var(--sciket-v1-color-neutral-60);
    border-radius: var(--sciket-v1-radius-sm);
    cursor: pointer;
}

.sciket-header-v1 input[type="checkbox"]:focus,
.sciket-footer-v1 input[type="checkbox"]:focus {
    border: 1px solid var(--sciket-v1-color-primary-base);
    box-shadow: 0 0 0 4px rgba(2, 46, 179, 0.1);
}

.sciket-header-v1 input[type="checkbox"]:checked,
.sciket-footer-v1 input[type="checkbox"]:checked {
    border: none;
    box-shadow: none;
    background-color: var(--sciket-v1-color-primary-base);
}

.sciket-header-v1 input[type="checkbox"]:checked::before,
.sciket-footer-v1 input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url("../images/icons/check_success_100.svg");
    background-size: cover;
    border-radius: var(--sciket-v1-radius-sm);
}

.sciket-header-v1 input[type="checkbox"]:disabled,
.sciket-footer-v1 input[type="checkbox"]:disabled {
    border: 1px solid var(--sciket-v1-color-neutral-40);
    background-color: var(--sciket-v1-color-neutral-40);
    cursor: not-allowed;
}

.sciket-header-v1 mark,
.sciket-footer-v1 mark {
    color: var(--sciket-v1-color-danger-base);
    background: transparent;
}

.sciket-header-v1 hr,
.sciket-footer-v1 hr {
    border: 0;
    height: 1px;
    background: var(--sciket-v1-color-neutral-40);
}

/* ========== 工具類 ========== */

/* Flex 佈局 */
.sciket-header-v1 .flex,
.sciket-footer-v1 .flex {
    display: flex;
}

.sciket-header-v1 .flex-center,
.sciket-footer-v1 .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sciket-header-v1 .flex-between,
.sciket-footer-v1 .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sciket-header-v1 .flex-col,
.sciket-footer-v1 .flex-col {
    display: flex;
    flex-direction: column;
}

.sciket-header-v1 .items-center,
.sciket-footer-v1 .items-center {
    align-items: center;
}

.sciket-header-v1 .items-start,
.sciket-footer-v1 .items-start {
    align-items: flex-start;
}

.sciket-header-v1 .items-end,
.sciket-footer-v1 .items-end {
    align-items: flex-end;
}

.sciket-header-v1 .justify-center,
.sciket-footer-v1 .justify-center {
    justify-content: center;
}

.sciket-header-v1 .justify-between,
.sciket-footer-v1 .justify-between {
    justify-content: space-between;
}

.sciket-header-v1 .justify-start,
.sciket-footer-v1 .justify-start {
    justify-content: flex-start;
}

.sciket-header-v1 .justify-end,
.sciket-footer-v1 .justify-end {
    justify-content: flex-end;
}

.sciket-header-v1 .flex-wrap,
.sciket-footer-v1 .flex-wrap {
    flex-wrap: wrap;
}

.sciket-header-v1 .flex-1,
.sciket-footer-v1 .flex-1 {
    flex: 1;
}

.sciket-header-v1 .gap-1,
.sciket-footer-v1 .gap-1 {
    gap: 4px;
}

.sciket-header-v1 .gap-2,
.sciket-footer-v1 .gap-2 {
    gap: 8px;
}

.sciket-header-v1 .gap-3,
.sciket-footer-v1 .gap-3 {
    gap: 12px;
}

.sciket-header-v1 .gap-4,
.sciket-footer-v1 .gap-4 {
    gap: 16px;
}

.sciket-header-v1 .gap-6,
.sciket-footer-v1 .gap-6 {
    gap: 24px;
}

/* 顯示/隱藏 */
.sciket-header-v1 .hidden,
.sciket-footer-v1 .hidden {
    display: none !important;
}

.sciket-header-v1 .block,
.sciket-footer-v1 .block {
    display: block;
}

.sciket-header-v1 .inline-block,
.sciket-footer-v1 .inline-block {
    display: inline-block;
}

.sciket-header-v1 .invisible,
.sciket-footer-v1 .invisible {
    visibility: hidden;
}

/* 位置 */
.sciket-header-v1 .relative,
.sciket-footer-v1 .relative {
    position: relative;
}

.sciket-header-v1 .absolute,
.sciket-footer-v1 .absolute {
    position: absolute;
}

.sciket-header-v1 .fixed,
.sciket-footer-v1 .fixed {
    position: fixed;
}

/* 文字對齊 */
.sciket-header-v1 .text-left,
.sciket-footer-v1 .text-left {
    text-align: left;
}

.sciket-header-v1 .text-center,
.sciket-footer-v1 .text-center {
    text-align: center;
}

.sciket-header-v1 .text-right,
.sciket-footer-v1 .text-right {
    text-align: right;
}

/* 文字大小 */
.sciket-header-v1 .text-xs,
.sciket-footer-v1 .text-xs {
    font-size: 12px;
}

.sciket-header-v1 .text-sm,
.sciket-footer-v1 .text-sm {
    font-size: 14px;
}

.sciket-header-v1 .text-base,
.sciket-footer-v1 .text-base {
    font-size: 16px;
}

.sciket-header-v1 .text-lg,
.sciket-footer-v1 .text-lg {
    font-size: 18px;
}

.sciket-header-v1 .text-xl,
.sciket-footer-v1 .text-xl {
    font-size: 20px;
}

/* 字重 */
.sciket-header-v1 .font-normal,
.sciket-footer-v1 .font-normal {
    font-weight: 400;
}

.sciket-header-v1 .font-semibold,
.sciket-footer-v1 .font-semibold {
    font-weight: 600;
}

.sciket-header-v1 .font-bold,
.sciket-footer-v1 .font-bold {
    font-weight: 700;
}

/* 文字顏色 */
.sciket-header-v1 .text-primary,
.sciket-footer-v1 .text-primary {
    color: var(--sciket-v1-color-primary-base);
}

.sciket-header-v1 .text-neutral-60,
.sciket-footer-v1 .text-neutral-60 {
    color: var(--sciket-v1-color-neutral-60);
}

.sciket-header-v1 .text-neutral-80,
.sciket-footer-v1 .text-neutral-80 {
    color: var(--sciket-v1-color-neutral-80);
}

.sciket-header-v1 .text-neutral-100,
.sciket-footer-v1 .text-neutral-100 {
    color: var(--sciket-v1-color-neutral-100);
}

.sciket-header-v1 .text-white,
.sciket-footer-v1 .text-white {
    color: var(--sciket-v1-color-white);
}

.sciket-header-v1 .text-danger,
.sciket-footer-v1 .text-danger {
    color: var(--sciket-v1-color-danger-base);
}

/* 背景顏色 */
.sciket-header-v1 .bg-primary,
.sciket-footer-v1 .bg-primary {
    background-color: var(--sciket-v1-color-primary-base);
}

.sciket-header-v1 .bg-primary-10,
.sciket-footer-v1 .bg-primary-10 {
    background-color: var(--sciket-v1-color-primary-10);
}

.sciket-header-v1 .bg-white,
.sciket-footer-v1 .bg-white {
    background-color: var(--sciket-v1-color-white);
}

.sciket-header-v1 .bg-neutral-10,
.sciket-footer-v1 .bg-neutral-10 {
    background-color: var(--sciket-v1-color-neutral-10);
}

.sciket-header-v1 .bg-neutral-40,
.sciket-footer-v1 .bg-neutral-40 {
    background-color: var(--sciket-v1-color-neutral-40);
}

.sciket-header-v1 .bg-background,
.sciket-footer-v1 .bg-background {
    background-color: var(--sciket-v1-color-background);
}

/* 圓角 */
.sciket-header-v1 .rounded,
.sciket-footer-v1 .rounded {
    border-radius: var(--sciket-v1-radius-sm);
}

.sciket-header-v1 .rounded-md,
.sciket-footer-v1 .rounded-md {
    border-radius: var(--sciket-v1-radius-md);
}

.sciket-header-v1 .rounded-lg,
.sciket-footer-v1 .rounded-lg {
    border-radius: var(--sciket-v1-radius-lg);
}

.sciket-header-v1 .rounded-xl,
.sciket-footer-v1 .rounded-xl {
    border-radius: var(--sciket-v1-radius-xl);
}

.sciket-header-v1 .rounded-2xl,
.sciket-footer-v1 .rounded-2xl {
    border-radius: var(--sciket-v1-radius-2xl);
}

.sciket-header-v1 .rounded-full,
.sciket-footer-v1 .rounded-full {
    border-radius: var(--sciket-v1-radius-full);
}

/* 陰影 */
.sciket-header-v1 .shadow-1,
.sciket-footer-v1 .shadow-1 {
    box-shadow: var(--sciket-v1-shadow-1);
}

.sciket-header-v1 .shadow-2,
.sciket-footer-v1 .shadow-2 {
    box-shadow: var(--sciket-v1-shadow-2);
}

.sciket-header-v1 .shadow-3,
.sciket-footer-v1 .shadow-3 {
    box-shadow: var(--sciket-v1-shadow-3);
}

/* 邊框 */
.sciket-header-v1 .border,
.sciket-footer-v1 .border {
    border: 1px solid var(--sciket-v1-color-neutral-40);
}

.sciket-header-v1 .border-primary,
.sciket-footer-v1 .border-primary {
    border-color: var(--sciket-v1-color-primary-base);
}

.sciket-header-v1 .border-neutral-40,
.sciket-footer-v1 .border-neutral-40 {
    border-color: var(--sciket-v1-color-neutral-40);
}

/* Padding */
.sciket-header-v1 .p-1,
.sciket-footer-v1 .p-1 {
    padding: 4px;
}

.sciket-header-v1 .p-2,
.sciket-footer-v1 .p-2 {
    padding: 8px;
}

.sciket-header-v1 .p-3,
.sciket-footer-v1 .p-3 {
    padding: 12px;
}

.sciket-header-v1 .p-4,
.sciket-footer-v1 .p-4 {
    padding: 16px;
}

.sciket-header-v1 .p-6,
.sciket-footer-v1 .p-6 {
    padding: 24px;
}

.sciket-header-v1 .p-8,
.sciket-footer-v1 .p-8 {
    padding: 32px;
}

.sciket-header-v1 .px-2,
.sciket-footer-v1 .px-2 {
    padding-left: 8px;
    padding-right: 8px;
}

.sciket-header-v1 .px-4,
.sciket-footer-v1 .px-4 {
    padding-left: 16px;
    padding-right: 16px;
}

.sciket-header-v1 .px-6,
.sciket-footer-v1 .px-6 {
    padding-left: 24px;
    padding-right: 24px;
}

.sciket-header-v1 .px-8,
.sciket-footer-v1 .px-8 {
    padding-left: 32px;
    padding-right: 32px;
}

.sciket-header-v1 .py-2,
.sciket-footer-v1 .py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.sciket-header-v1 .py-3,
.sciket-footer-v1 .py-3 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.sciket-header-v1 .py-4,
.sciket-footer-v1 .py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.sciket-header-v1 .py-6,
.sciket-footer-v1 .py-6 {
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Margin */
.sciket-header-v1 .m-auto,
.sciket-footer-v1 .m-auto {
    margin: auto;
}

.sciket-header-v1 .mx-auto,
.sciket-footer-v1 .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.sciket-header-v1 .ml-auto,
.sciket-footer-v1 .ml-auto {
    margin-left: auto;
}

.sciket-header-v1 .mr-auto,
.sciket-footer-v1 .mr-auto {
    margin-right: auto;
}

.sciket-header-v1 .m-1,
.sciket-footer-v1 .m-1 {
    margin: 4px;
}

.sciket-header-v1 .m-2,
.sciket-footer-v1 .m-2 {
    margin: 8px;
}

.sciket-header-v1 .m-4,
.sciket-footer-v1 .m-4 {
    margin: 16px;
}

.sciket-header-v1 .mt-2,
.sciket-footer-v1 .mt-2 {
    margin-top: 8px;
}

.sciket-header-v1 .mt-4,
.sciket-footer-v1 .mt-4 {
    margin-top: 16px;
}

.sciket-header-v1 .mt-6,
.sciket-footer-v1 .mt-6 {
    margin-top: 24px;
}

.sciket-header-v1 .mb-2,
.sciket-footer-v1 .mb-2 {
    margin-bottom: 8px;
}

.sciket-header-v1 .mb-4,
.sciket-footer-v1 .mb-4 {
    margin-bottom: 16px;
}

.sciket-header-v1 .ml-2,
.sciket-footer-v1 .ml-2 {
    margin-left: 8px;
}

.sciket-header-v1 .ml-4,
.sciket-footer-v1 .ml-4 {
    margin-left: 16px;
}

.sciket-header-v1 .mr-2,
.sciket-footer-v1 .mr-2 {
    margin-right: 8px;
}

.sciket-header-v1 .mr-4,
.sciket-footer-v1 .mr-4 {
    margin-right: 16px;
}

/* 寬度 */
.sciket-header-v1 .w-full,
.sciket-footer-v1 .w-full {
    width: 100%;
}

.sciket-header-v1 .w-screen,
.sciket-footer-v1 .w-screen {
    width: 100vw;
}

.sciket-header-v1 .max-w-1200,
.sciket-footer-v1 .max-w-1200 {
    max-width: 1200px;
}

/* 高度 */
.sciket-header-v1 .h-full,
.sciket-footer-v1 .h-full {
    height: 100%;
}

.sciket-header-v1 .h-screen,
.sciket-footer-v1 .h-screen {
    height: 100vh;
}

/* Overflow */
.sciket-header-v1 .overflow-hidden,
.sciket-footer-v1 .overflow-hidden {
    overflow: hidden;
}

.sciket-header-v1 .overflow-auto,
.sciket-footer-v1 .overflow-auto {
    overflow: auto;
}

.sciket-header-v1 .overflow-y-auto,
.sciket-footer-v1 .overflow-y-auto {
    overflow-y: auto;
}

.sciket-header-v1 .overflow-y-scroll,
.sciket-footer-v1 .overflow-y-scroll {
    overflow-y: scroll;
}

/* 滾動條隱藏 */
.sciket-header-v1 .no-scrollbar::-webkit-scrollbar,
.sciket-footer-v1 .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.sciket-header-v1 .no-scrollbar,
.sciket-footer-v1 .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 省略號 */
.sciket-header-v1 .ellipsis,
.sciket-footer-v1 .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sciket-header-v1 .ellipsis-2,
.sciket-footer-v1 .ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 游標 */
.sciket-header-v1 .cursor-pointer,
.sciket-footer-v1 .cursor-pointer {
    cursor: pointer;
}

.sciket-header-v1 .cursor-not-allowed,
.sciket-footer-v1 .cursor-not-allowed {
    cursor: not-allowed;
}

/* 透明度 */
.sciket-header-v1 .opacity-0,
.sciket-footer-v1 .opacity-0 {
    opacity: 0;
}

.sciket-header-v1 .opacity-50,
.sciket-footer-v1 .opacity-50 {
    opacity: 0.5;
}

.sciket-header-v1 .opacity-100,
.sciket-footer-v1 .opacity-100 {
    opacity: 1;
}

/* 過渡效果 */
.sciket-header-v1 .transition,
.sciket-footer-v1 .transition {
    transition: all 0.3s ease;
}

/* 旋轉 */
.sciket-header-v1 .rotate-180,
.sciket-footer-v1 .rotate-180 {
    transform: rotate(180deg);
}

/* Z-index */
.sciket-header-v1 .z-50,
.sciket-footer-v1 .z-50 {
    z-index: var(--sciket-v1-z-dropdown);
}

.sciket-header-v1 .z-100,
.sciket-footer-v1 .z-100 {
    z-index: var(--sciket-v1-z-modal);
}

.sciket-header-v1 .z-300,
.sciket-footer-v1 .z-300 {
    z-index: var(--sciket-v1-z-header);
}

/* Container */
.sciket-header-v1 .container,
.sciket-footer-v1 .container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* 響應式斷點 */
@media (max-width: 1023px) {

    .sciket-header-v1 .desktop-only,
    .sciket-footer-v1 .desktop-only {
        display: none !important;
    }
}

@media (min-width: 1024px) {

    .sciket-header-v1 .mobile-only,
    .sciket-footer-v1 .mobile-only {
        display: none !important;
    }
}

/**
 * Desktop Header CSS
 * 桌機版Header樣式
 */

/* ========== Header Container ========== */
.sciket-header-v1 .desktop-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: var(--sciket-v1-z-header);
    background-color: var(--sciket-v1-color-white);
    border-bottom: 1px solid var(--sciket-v1-color-neutral-40);
    transition: opacity 0.2s ease, top 0.2s ease;
}

.desktop-header.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ========== Main Header Bar ========== */
.desktop-header__main {
    display: flex;
    align-items: center;
    height: 72px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Logo */
.desktop-header__logo {
    display: block;
    flex-shrink: 0;
}

.desktop-header__logo img {
    height: 32px;
    width: 126px;
}

/* Search */
.desktop-header__search {
    position: relative;
    margin-left: 24px;
    margin-right: auto;
    width: 348px;
}

.desktop-header__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.desktop-header__search-input {
    width: 100%;
    height: 48px;
    padding-left: 40px;
    padding-right: 48px;
    border: 1px solid var(--sciket-v1-color-neutral-10);
    border-radius: var(--sciket-v1-radius-md);
    font-size: 16px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    color: var(--sciket-v1-color-neutral-100);
}

.desktop-header__search-input::placeholder {
    color: #9CA3AF;
}


.desktop-header__search-input:hover {
    border-color: var(--sciket-v1-color-neutral-100);
    background-color: var(--sciket-v1-color-white);
}

.desktop-header__search-input:focus {
    outline: none;
    border-color: var(--sciket-v1-color-primary-base);
    background-color: var(--sciket-v1-color-white);
}

.desktop-header__search-button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sciket-v1-color-primary-base);
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.desktop-header__search-button:hover {
    background-color: var(--sciket-v1-color-primary-120);
}

/* Navigation Items */
.desktop-header__nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.desktop-header__nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    height: 56px;
    color: var(--sciket-v1-color-neutral-80);
    font-size: 14px;
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.desktop-header__nav-item:hover {
    color: var(--sciket-v1-color-primary-base);
}

.desktop-header__nav-item img {
    width: 24px;
    height: 24px;
}

/* 導航項目下拉選單 */
.desktop-header__nav-item--dropdown {
    position: relative;
}

.desktop-header__nav-item--dropdown:hover .desktop-dropdown--nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* User Menu */
.desktop-header__user {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.desktop-header__user:hover {
    /* 移除背景色，保持其他 hover 效果 */
}

.desktop-header__user:hover .desktop-dropdown--user {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.desktop-header__user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.desktop-header__user-dropdown-icon {
    width: 24px;
    height: 24px;
}

/* 使用者下拉選單 */
.desktop-dropdown--user {
    right: 0px;
    left: auto !important;
    min-width: 260px;
}

.desktop-dropdown__user-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background-color: var(--sciket-v1-color-neutral-10);
    font-size: 18px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-100);
}

.desktop-dropdown__user-info {
    padding: 16px 24px;
    background-color: var(--sciket-v1-color-neutral-10);
}

.desktop-dropdown__user-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-100);
    width: 100%;
}

.desktop-dropdown__user-unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--sciket-v1-color-neutral-80);
    margin-top: 4px;
}

.desktop-dropdown__item--wallet {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.desktop-dropdown__item-value {
    color: var(--sciket-v1-color-primary-base);
    font-weight: 600;
}

/* Auth Buttons (未登入) */
.desktop-header__auth {
    display: flex;
    align-items: center;
    gap: 16px;
}

.desktop-header__register {
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-80);
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.desktop-header__register:hover {
    background-color: var(--sciket-v1-color-neutral-10);
}

.sciket-header-v1 .desktop-header__login {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-white) !important;
    background-color: var(--sciket-v1-color-primary-base);
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.sciket-header-v1 .desktop-header__login:hover {
    background-color: var(--sciket-v1-color-primary-120);
}

/* ========== Sub Navigation Bar ========== */
.desktop-header__subnav {
    display: flex;
    align-items: center;
    height: 50px;
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid var(--sciket-v1-color-neutral-40);
    background-color: var(--sciket-v1-color-white);
    gap: 8px;
}

.desktop-header__subnav-item {
    display: flex;
    align-items: center;
    padding: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-80);
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
}

.desktop-header__subnav-item:hover {
    color: var(--sciket-v1-color-primary-base);
}

.desktop-header__subnav-item.active {
    color: var(--sciket-v1-color-primary-base);
}

/* 箭頭圖示 */
.desktop-header__subnav-item img {
    transition: transform 0.3s ease;
}

.desktop-header__subnav-item:hover img,
.desktop-header__subnav-item.active img {
    transform: rotate(180deg);
}

/* ========== Dropdown Menus ========== */
.desktop-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    background-color: var(--sciket-v1-color-white);
    border-radius: var(--sciket-v1-radius-md);
    box-shadow: var(--sciket-v1-shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: var(--sciket-v1-z-dropdown);
}

.desktop-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 科研服務下拉選單 */
.desktop-dropdown--service {
    min-width: 200px;
    border: 1px solid var(--sciket-v1-color-neutral-40);
    padding: 8px 0;
    top: calc(100% - 1px);
}

.desktop-header__subnav-item--service {
    position: relative;
}

.desktop-header__subnav-item--service:hover .desktop-dropdown--service {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.desktop-dropdown__item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    color: var(--sciket-v1-color-neutral-100);
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--sciket-v1-radius-md);
    margin: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.desktop-dropdown__item:hover {
    color: var(--sciket-v1-color-primary-base);
}

/* 導航下拉選單樣式 */
.desktop-dropdown--nav {
    min-width: 280px;
}

.desktop-dropdown--nav .desktop-dropdown__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 科研服務下拉項目樣式 */
.desktop-dropdown--service .desktop-dropdown__item {
    padding: 12px 16px;
    margin: 0;
    color: var(--sciket-v1-color-neutral-100);
}

.desktop-dropdown--service .desktop-dropdown__item:hover {
    color: var(--sciket-v1-color-primary-base);
}

.desktop-dropdown__item-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--sciket-v1-color-neutral-80);
    margin-top: 4px;
}

.desktop-dropdown__divider {
    height: 1px;
    background-color: var(--sciket-v1-color-neutral-40);
    margin: 8px 16px;
}

/* ========== Category Mega Menu ========== */
.desktop-category-menu {
    position: absolute;
    left: 50%;
    top: 122px;
    transform: translateX(-50%);
    width: 1088px;
    height: 460px;
    background-color: var(--sciket-v1-color-white);
    border-radius: var(--sciket-v1-radius-lg);
    box-shadow: var(--sciket-v1-shadow-3);
    border: 1px solid var(--sciket-v1-color-neutral-40);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: var(--sciket-v1-z-dropdown);
}

.desktop-category-menu.active {
    opacity: 1;
    visibility: visible;
}

.desktop-category-menu__sidebar {
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    height: 100%;
    border-right: 1px solid var(--sciket-v1-color-neutral-40);
    overflow-y: auto;
}

.desktop-category-menu__sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-80);
    cursor: pointer;
    transition: all 0.3s ease;
}

.desktop-category-menu__sidebar-item:hover,
.desktop-category-menu__sidebar-item.active {
    background-color: #E5EBFF;
    color: var(--sciket-v1-color-primary-base);
}

.desktop-category-menu__content {
    position: absolute;
    left: 240px;
    top: 0;
    width: calc(100% - 240px);
    height: 100%;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.desktop-category-menu__header {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.desktop-category-menu__title-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.desktop-category-menu__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.desktop-category-menu__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.desktop-category-menu__view-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-primary-base);
    border-radius: var(--sciket-v1-radius-md);
    transition: background-color 0.3s ease;
}

.desktop-category-menu__view-all:hover {
    background-color: var(--sciket-v1-color-neutral-30);
    color: var(--sciket-v1-color-primary-base);
}

.desktop-category-menu__subtitle {
    font-size: 16px;
    font-weight: 400;
    color: var(--sciket-v1-color-neutral-80);
    line-height: 1.5;
}

.desktop-category-menu__tags-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.desktop-category-menu__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px;
}

.desktop-category-menu__tag {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--sciket-v1-color-neutral-40);
    color: var(--sciket-v1-color-neutral-100);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.desktop-category-menu__tag:hover {
    background-color: var(--sciket-v1-color-neutral-50);
}

/* Category Menu Backdrop */
.desktop-category-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: calc(var(--sciket-v1-z-dropdown) - 1);
}

.desktop-category-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ========== Search Autocomplete ========== */
.desktop-search-autocomplete {
    position: fixed;
    top: 72px;
    left: 48%;
    transform: translateX(-50%);
    width: 800px;
    max-height: 90vh;
    background-color: var(--sciket-v1-color-white);
    border-radius: var(--sciket-v1-radius-2xl);
    box-shadow: var(--sciket-v1-shadow-3);
    padding: 24px 32px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: calc(var(--sciket-v1-z-header) - 1);
    overflow-y: auto;
}

.desktop-search-autocomplete.active {
    opacity: 1;
    visibility: visible;
}

.desktop-search-autocomplete__section {
    margin-bottom: 24px;
}

.desktop-search-autocomplete__title {
    font-size: 12px;
    color: var(--sciket-v1-color-neutral-80);
    margin-bottom: 16px;
    font-weight: 400;
}

.desktop-search-autocomplete__keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.desktop-search-autocomplete__keywords .desktop-search-autocomplete__keyword {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--sciket-v1-color-neutral-40);
    color: var(--sciket-v1-color-neutral-100);
    font-size: 14px;
    font-weight: 400;
    border-radius: var(--sciket-v1-radius-full);
}

.desktop-search-autocomplete__keywords .desktop-search-autocomplete__keyword:hover {
    background-color: var(--sciket-v1-color-neutral-50);
    color: var(--sciket-v1-color-neutral-100);
}

.desktop-search-autocomplete__keyword {
    display: block;
    padding: 12px 16px;
    color: var(--sciket-v1-color-neutral-100);
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.desktop-search-autocomplete__keyword:hover {
    background-color: var(--sciket-v1-color-neutral-10);
    color: var(--sciket-v1-color-neutral-100);
}

.desktop-search-autocomplete__keyword mark {
    color: var(--sciket-v1-color-danger-base);
    background: transparent;
}

.desktop-search-autocomplete__current-keyword {
    display: block;
    padding: 12px 16px;
    color: var(--sciket-v1-color-neutral-100);
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.desktop-search-autocomplete__current-keyword:hover {
    background-color: var(--sciket-v1-color-neutral-10);
    color: var(--sciket-v1-color-neutral-100);
}

/* ========== Cart Drawer ========== */
.desktop-cart-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--sciket-v1-z-header) - 2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.desktop-cart-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.desktop-cart-drawer {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 500px;
    height: calc(100vh - 48px);
    background-color: var(--sciket-v1-color-white);
    border-radius: var(--sciket-v1-radius-2xl);
    box-shadow: var(--sciket-v1-shadow-3);
    transform: translateX(calc(100% + 48px));
    transition: transform 0.3s ease;
    z-index: calc(var(--sciket-v1-z-header) - 1);
    display: flex;
    flex-direction: column;
    visibility: hidden;
}

.desktop-cart-drawer.active {
    transform: translateX(0);
    visibility: visible;
}

.desktop-cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--sciket-v1-color-neutral-40);
}

.desktop-cart-drawer__title {
    font-size: 20px;
    font-weight: 600;
}

.desktop-cart-drawer__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.desktop-cart-drawer__close:hover {
    background-color: var(--sciket-v1-color-neutral-10);
}

.desktop-cart-drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.desktop-cart-drawer__footer {
    padding: 24px;
    border-top: 1px solid var(--sciket-v1-color-neutral-40);
}

.desktop-cart-drawer__summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.desktop-cart-drawer__total {
    font-size: 20px;
    font-weight: 600;
}

.desktop-cart-drawer__note {
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-80);
    text-align: right;
}

.desktop-cart-drawer__button {
    display: block;
    width: 100%;
    padding: 16px;
    background-color: var(--sciket-v1-color-primary-base);
    color: var(--sciket-v1-color-white);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--sciket-v1-radius-md);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.desktop-cart-drawer__button:hover {
    background-color: var(--sciket-v1-color-primary-120);
    color: white;
}

/* ========== Cart Item ========== */
.desktop-cart-item {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--sciket-v1-color-neutral-40);
}

.desktop-cart-item:last-child {
    border-bottom: none;
}

.desktop-cart-item__image {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    border-radius: var(--sciket-v1-radius-md);
    object-fit: cover;
    flex-shrink: 0;
}

.desktop-cart-item__details {
    flex: 1;
}

.desktop-cart-item__name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.desktop-cart-item__spec {
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-80);
}

.desktop-cart-item__tag {
    display: inline-block;
    padding: 8px 16px;
    background-color: #E5ECFF;
    color: #022EB3;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    width: fit-content;
    transition: background-color 0.2s;
}

.desktop-cart-item__tag:hover {
    background-color: #CCDAFF;
}

.desktop-cart-item__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.desktop-cart-item__price {
    font-size: 16px;
    font-weight: 600;
    text-align: right;
}

.desktop-cart-item__package {
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-80);
    text-align: right;
}

/* Number Selector */
.number-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}

.number-selector__button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sciket-v1-color-neutral-50) !important;
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.number-selector__button.active {
    background-color: var(--sciket-v1-color-primary-base);
}

.number-selector__button.delete {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff !important;
    border-radius: var(--sciket-v1-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.number-selector__button.delete:hover {
    background-color: var(--sciket-v1-color-neutral-50) !important;
}

.number-selector__input {
    width: 48px;
    height: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border: none;
    background: transparent;
}

.number-selector__input:focus {
    outline: none;
    border: 1px solid var(--sciket-v1-color-primary-base);
    border-radius: var(--sciket-v1-radius-md);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 29px;
    background-color: var(--sciket-v1-color-danger-base);
    color: var(--sciket-v1-color-white);
    font-size: 14px;
    font-weight: 600;
    border-radius: 100px;
    line-height: 29px;
    text-align: center;
}

/**
 * Mobile Header CSS
 * 手機版Header樣式
 */

/* ========== Header Bar ========== */
.sciket-header-v1 .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 56px;
    z-index: var(--sciket-v1-z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: var(--sciket-v1-color-white);
    border-bottom: 1px solid var(--sciket-v1-color-neutral-40);
    transition: top 0.2s ease;
}

.mobile-header.hidden {
    top: -56px;
}

/* Logo */
.mobile-header__logo {
    display: block;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.mobile-header__logo.hidden {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

.mobile-header__logo img {
    height: 24px;
    width: 96px;
}

/* Icons */
.mobile-header__icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.mobile-header__icon.hidden {
    width: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
}

/* Search Form */
.mobile-header__search-form {
    flex: 1;
    margin: 0 8px;
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
}

.mobile-header__search-form.active {
    display: block;
    opacity: 1;
}

.mobile-header__search-wrapper {
    position: relative;
}

.mobile-header__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.mobile-header__search-input {
    width: 100%;
    height: 40px;
    padding-left: 36px;
    padding-right: 36px;
    background-color: var(--sciket-v1-color-neutral-10);
    border: 1px solid var(--sciket-v1-color-neutral-10);
    border-radius: var(--sciket-v1-radius-md);
    font-size: 14px;
    transition: all 0.3s ease;
}

.mobile-header__search-input:focus {
    outline: none;
    border-color: var(--sciket-v1-color-primary-base);
    background-color: var(--sciket-v1-color-white);
}

.mobile-header__search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.mobile-header__cancel {
    margin-left: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-80);
    white-space: nowrap;
    cursor: pointer;
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
}

.mobile-header__cancel.active {
    display: block;
    opacity: 1;
}

/* ========== Search Overlay ========== */
.mobile-search-overlay {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 56px);
    background-color: var(--sciket-v1-color-white);
    z-index: calc(var(--sciket-v1-z-header) - 1);
    overflow-y: auto;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.mobile-search-overlay.active {
    transform: translateY(0);
    opacity: 1;
}

.mobile-search-overlay__content {
    min-height: 100%;
    padding-bottom: 100px;
}

.mobile-search-overlay__inner {
    padding: 16px;
}

.mobile-search-overlay__category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin-top: 16px;
    background-color: var(--sciket-v1-color-neutral-10);
    font-size: 16px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-80);
}

.mobile-search-overlay__view-all {
    font-size: 14px;
    font-weight: 400;
    color: var(--sciket-v1-color-neutral-80);
}

.mobile-search-overlay__section {
    margin-bottom: 0;
}

.mobile-search-overlay__section .mobile-search-overlay__title {
    margin-top: 24px;
}

.mobile-search-overlay__section:first-child .mobile-search-overlay__title {
    margin-top: 0;
}

.mobile-search-overlay__title {
    font-size: 12px;
    color: var(--sciket-v1-color-neutral-60);
    font-weight: 600;
}

.mobile-search-overlay__title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.mobile-search-overlay__section:first-child .mobile-search-overlay__title-bar {
    margin-top: 0;
}

.mobile-search-overlay__clear {
    font-size: 12px;
    color: var(--sciket-v1-color-primary-base);
    cursor: pointer;
    font-weight: 600;
    margin-left: auto;
}

.mobile-search-overlay__keywords {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
}

.mobile-search-overlay__keyword {
    padding: 8px 16px;
    background-color: var(--sciket-v1-color-neutral-40);
    color: var(--sciket-v1-color-neutral-100);
    font-size: 14px;
    border-radius: var(--sciket-v1-radius-full);
    cursor: pointer;
    line-height: 150%;
    margin-right: 8px;
    margin-top: 8px;
}

.mobile-search-overlay__brands {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

.mobile-search-overlay__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 8px);
    flex-grow: 1;
    aspect-ratio: 163.5 / 80;
    padding: 8px;
    border: 1px solid var(--sciket-v1-color-neutral-40);
    border-radius: var(--sciket-v1-radius-xl);
    overflow: hidden;
}

.mobile-search-overlay__brand img {
    max-width: 100%;
    max-height: 100%;
}

.mobile-search-overlay__event {
    width: 100%;
    border-radius: var(--sciket-v1-radius-lg);
    overflow: hidden;
}

.mobile-search-overlay__event img {
    width: 100%;
    height: auto;
}

.mobile-search-overlay__main-event {
    display: block;
    height: 92px;
    margin-top: 16px;
    padding: 24px 32px;
    border-radius: var(--sciket-v1-radius-xl);
    background-size: cover;
    background-position: center;
    color: var(--sciket-v1-color-white);
}

.mobile-search-overlay__main-event-title {
    font-size: 16px;
    font-weight: 600;
}

.mobile-search-overlay__main-event-content {
    font-size: 14px;
    font-weight: 600;
}

.mobile-search-overlay__sub-event {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.mobile-search-overlay__sub-event-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.25;
    font-weight: normal;
    color: var(--sciket-v1-color-primary-base);
    background-color: var(--sciket-v1-color-primary-10);
    border-radius: var(--sciket-v1-radius-sm);
    white-space: nowrap;
}

.mobile-search-overlay__sub-event-title {
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-100);
    margin-left: 8px;
}

.mobile-search-overlay__sub-event-title:active {
    text-decoration: underline;
}

.mobile-search-overlay__links {
    display: flex;
    flex-direction: column;
}

.mobile-search-overlay__link {
    display: block;
    padding: 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-80);
}

.mobile-search-overlay__link:active {
    color: var(--sciket-v1-color-black);
}

/* ========== Category Overlay ========== */
.mobile-category-overlay {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 56px);
    background-color: var(--sciket-v1-color-background);
    z-index: calc(var(--sciket-v1-z-header) - 1);
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.mobile-category-overlay.active {
    transform: translateY(0);
    opacity: 1;
}

/* Level 1 Tabs */
.mobile-category-overlay__level1 {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    background-color: var(--sciket-v1-color-white);
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-category-overlay__level1::-webkit-scrollbar {
    display: none;
}

.mobile-category-overlay__level1-tab {
    position: relative;
    flex-shrink: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-80);
    cursor: pointer;
    white-space: nowrap;
}

.mobile-category-overlay__level1-tab.active {
    color: var(--sciket-v1-color-neutral-100);
}

.mobile-category-overlay__level1-tab.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 4px;
    background-color: var(--sciket-v1-color-primary-base);
    border-radius: var(--sciket-v1-radius-full);
}

/* Level 2 Tabs */
.mobile-category-overlay__level2 {
    position: sticky;
    top: 48px;
    z-index: 9;
    display: flex;
    gap: 8px;
    background-color: var(--sciket-v1-color-background);
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-category-overlay__level2::-webkit-scrollbar {
    display: none;
}

.mobile-category-overlay__level2-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 14px;
    background-color: var(--sciket-v1-color-white);
    color: var(--sciket-v1-color-neutral-80);
    border-radius: var(--sciket-v1-radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.mobile-category-overlay__level2-tab.active {
    background-color: var(--sciket-v1-color-primary-base);
    color: var(--sciket-v1-color-white);
    font-weight: 600;
}

/* Level 3 Content */
.mobile-category-overlay__content {
    height: calc(100vh - 56px - 48px - 72px);
    overflow-y: auto;
    padding: 0 16px 100px;
    -webkit-overflow-scrolling: touch;
}

.mobile-category-overlay__level3-group {
    padding: 16px;
    background-color: var(--sciket-v1-color-white);
    border-radius: var(--sciket-v1-radius-2xl);
}

.mobile-category-overlay__level3-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-80);
    cursor: pointer;
}

.mobile-category-overlay__level3-title:hover {
    color: var(--sciket-v1-color-neutral-100);
}

.mobile-category-overlay__level3-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.mobile-category-overlay__level3-item {
    width: calc(25% - 9px);
    text-align: center;
}

.mobile-category-overlay__level3-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--sciket-v1-radius-md);
    object-fit: cover;
    margin-bottom: 8px;
}

.mobile-category-overlay__level3-name {
    font-size: 12px;
    color: var(--sciket-v1-color-neutral-80);
}

/* ========== Autocomplete Suggestions ========== */
.mobile-autocomplete {
    padding: 16px;
}

.mobile-autocomplete__search-keyword {
    margin: 8px 0;
    margin-top: 16px;
    border-radius: var(--sciket-v1-radius-xl);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-100);
}

.mobile-autocomplete__search-keyword:hover {
    background-color: var(--sciket-v1-color-neutral-10);
}

.mobile-autocomplete__section-title {
    font-size: 12px;
    color: var(--sciket-v1-color-neutral-60);
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 8px;
}

.mobile-autocomplete__section-title:first-of-type {
    margin-top: 0;
}

.mobile-autocomplete__item {
    display: flex;
    align-items: center;
    margin: 8px 0;
    border-radius: var(--sciket-v1-radius-xl);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-100);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-autocomplete__item:hover {
    background-color: var(--sciket-v1-color-neutral-10);
}

.mobile-autocomplete__item mark {
    color: var(--sciket-v1-color-danger-base);
    background: transparent;
    font-weight: 600;
}

.mobile-autocomplete__activity {
    display: flex;
    align-items: center;
    margin-top: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-autocomplete__activity-link {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== Empty State ========== */
.mobile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
}

.mobile-empty__image {
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.mobile-empty__text {
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-60);
}

/**
 * Desktop Footer CSS
 * 桌機版Footer樣式
 */

.sciket-footer-v1 .desktop-footer {
    width: 100%;
    background-color: var(--sciket-v1-color-white);
}

.desktop-footer__divider {
    width: 100%;
    height: 1px;
    background-color: var(--sciket-v1-color-neutral-40);
    border: none;
    margin: 0;
}

.desktop-footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

@media (min-width: 1280px) {
    .desktop-footer__container {
        padding: 32px 0;
    }
}

.desktop-footer__content {
    display: flex;
    flex-wrap: wrap;
    line-height: 150%;
    gap: 16px;
}

@media (min-width: 1280px) {
    .desktop-footer__content {
        flex-wrap: nowrap;
        gap: 0;
    }
}

/* Logo and Introduction */
.desktop-footer__intro {
    width: 100%;
    margin-bottom: 24px;
}

@media (min-width: 1280px) {
    .desktop-footer__intro {
        width: 272px;
        margin-right: 60px;
        margin-bottom: 0;
    }
}

.desktop-footer__logo {
    width: 126px;
    height: 32px;
}

.desktop-footer__description {
    margin-top: 16px;
    color: var(--sciket-v1-color-neutral-80);
    font-size: 14px;
    line-height: 1.6;
}

/* Site Map Groups */
.desktop-footer__sitemap-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

@media (min-width: 640px) {
    .desktop-footer__sitemap-group {
        flex-wrap: nowrap;
    }
}

@media (min-width: 1280px) {
    .desktop-footer__sitemap-group {
        width: auto;
    }

    .desktop-footer__sitemap-group.margin-right {
        margin-right: 60px;
    }
}

.desktop-footer__sitemap {
    flex: 1;
    min-width: 120px;
    margin-bottom: 24px;
    margin-right: 0;
}

@media (min-width: 1280px) {
    .desktop-footer__sitemap {
        flex: none;
        width: 120px;
        margin-right: 40px;
    }

    .desktop-footer__sitemap.no-margin {
        margin-right: 0;
    }
}

.desktop-footer__sitemap-title {
    display: block;
    color: var(--sciket-v1-color-neutral-100);
    font-size: 16px;
    font-weight: 600;
}

.desktop-footer__sitemap-link {
    display: block;
    color: var(--sciket-v1-color-neutral-80);
    font-size: 14px;
    margin-top: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.desktop-footer__sitemap-link:hover {
    text-decoration: underline;
}

@media (min-width: 1280px) {
    .desktop-footer__sitemap-link {
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
    }
}

/* Contact Section */
.desktop-footer__contact {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
}

@media (min-width: 1280px) {
    .desktop-footer__contact {
        width: auto;
        max-width: 208px;
        margin-top: 0;
    }
}

.desktop-footer__contact-title {
    display: block;
    color: var(--sciket-v1-color-neutral-100);
    font-size: 16px;
    font-weight: 600;
}

.desktop-footer__contact-item {
    display: flex;
    align-items: center;
    color: var(--sciket-v1-color-neutral-80);
    font-size: 16px;
    margin-top: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

.desktop-footer__contact-item:hover {
    text-decoration: none;
}

.desktop-footer__contact-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.desktop-footer__service-time {
    margin-top: 24px;
}

.desktop-footer__service-time-title {
    display: block;
    color: var(--sciket-v1-color-neutral-100);
    font-size: 16px;
    font-weight: 600;
}

.desktop-footer__service-time-text {
    margin-top: 16px;
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-80);
}

.desktop-footer__social {
    margin-top: 24px;
}

.desktop-footer__social-title {
    display: block;
    color: var(--sciket-v1-color-neutral-100);
    font-size: 16px;
    font-weight: 600;
}

.desktop-footer__social-links {
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.desktop-footer__social-link {
    margin-right: 16px;
}

.desktop-footer__social-icon {
    width: 24px;
    height: 24px;
}

/* Bottom Section */
.desktop-footer__bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

@media (min-width: 768px) {
    .desktop-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }
}

@media (min-width: 1280px) {
    .desktop-footer__bottom {
        padding: 0 0 24px;
    }
}

.desktop-footer__bottom-divider {
    max-width: 1200px;
    margin: 0 auto 24px;
}

.desktop-footer__company-info p {
    color: var(--sciket-v1-color-neutral-80);
    font-size: 12px;
    margin: 0;
}

.desktop-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.desktop-footer__link {
    display: block;
    padding: 0 8px;
    border-right: 1px solid var(--sciket-v1-color-neutral-40);
    color: var(--sciket-v1-color-neutral-80);
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none;
}

.desktop-footer__link:first-child {
    padding-left: 0;
}

.desktop-footer__link:last-child {
    border-right: none;
}

.desktop-footer__link:hover {
    text-decoration: underline;
}

.desktop-footer__copyright p {
    color: var(--sciket-v1-color-neutral-80);
    font-size: 12px;
    margin: 0;
}

/**
 * Mobile Footer CSS
 * 手機版Footer樣式
 */

.sciket-footer-v1 .mobile-footer {
    margin-top: 8px;
    background-color: var(--sciket-v1-color-white);
    padding: 32px 16px;
}

.mobile-footer__logo {
    height: 32px;
    width: auto;
}

.mobile-footer__description {
    margin-top: 24px;
    text-align: justify;
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-80);
    line-height: 1.6;
}

/* Social */
.mobile-footer__social {
    margin-top: 24px;
}

.mobile-footer__social-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-100);
}

.mobile-footer__social-links {
    margin-top: 16px;
    display: flex;
}

.mobile-footer__social-link {
    margin-right: 8px;
}

.mobile-footer__social-icon {
    width: 24px;
    height: 24px;
}

/* Sections */
.mobile-footer__sections {
    margin-top: 32px;
    display: flex;
}

.mobile-footer__section {
    width: 50%;
}

.mobile-footer__section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-100);
}

.mobile-footer__section-links {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-footer__section-link {
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-80);
    text-decoration: none;
}

.mobile-footer__section-link:active {
    color: var(--sciket-v1-color-black);
    text-decoration: underline;
}

/* Contact */
.mobile-footer__contact {
    margin-top: 32px;
}

.mobile-footer__contact-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-100);
}

.mobile-footer__contact-links {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-footer__contact-link {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-80);
    text-decoration: none;
}

.mobile-footer__contact-link:active {
    color: var(--sciket-v1-color-black);
    text-decoration: underline;
}

.mobile-footer__contact-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.mobile-footer__service-time {
    margin-top: 24px;
}

.mobile-footer__service-time-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sciket-v1-color-neutral-100);
}

.mobile-footer__service-time-text {
    margin-top: 16px;
    font-size: 14px;
    color: var(--sciket-v1-color-neutral-80);
}

/* Bottom */
.mobile-footer__divider {
    margin-top: 32px;
    margin-bottom: 24px;
    border: none;
    height: 1px;
    background-color: var(--sciket-v1-color-neutral-40);
}

.mobile-footer__bottom-links {
    display: flex;
}

.mobile-footer__bottom-link {
    margin-right: 8px;
    padding-right: 8px;
    border-right: 1px solid var(--sciket-v1-color-neutral-40);
    font-size: 12px;
    color: var(--sciket-v1-color-neutral-80);
    text-decoration: none;
}

.mobile-footer__bottom-link:last-child {
    border-right: none;
}

.mobile-footer__bottom-link:active {
    color: var(--sciket-v1-color-black);
    text-decoration: underline;
}

.mobile-footer__company-info {
    margin-top: 12px;
    font-size: 12px;
    color: var(--sciket-v1-color-neutral-80);
}

.mobile-footer__copyright {
    margin-top: 12px;
    font-size: 12px;
    color: var(--sciket-v1-color-neutral-80);
}