@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap');
@font-face {
    font-family: FakePearl-Regular;
    src: url(https://cdn.jsdelivr.net/gh/max32002/FakePearl@1.1/webfont/FakePearl-Regular.woff2) format("woff2")
    , url(https://cdn.jsdelivr.net/gh/max32002/FakePearl@1.1/webfont/FakePearl-Regular.woff) format("woff");
  }

body {
    font-family: 'FakePearl-Regular';
    background: #CBB3EF;
    background-image: url(../images/bg.jpg);
    background-size: contain;
    margin: 0;
    padding: 0;
    color: #232323;
}

/* KV*/

.kv {
    display: block;
}

.mkv {
    display: none;
}

.kv-wrap {
    position: relative;
}

.kv-title-wrap {
    width: 100%;
    position: absolute;
    bottom: -3%;
}
.kv-img-wrap img {
    width: 100%;
}


/* --- 簽到面板主要容器 --- */
.signin-panel {
    background-image: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);
    background-color: #7918F2;
    background-image: url(../images/signin-panel-bg.png);
    background-size: contain;
    border: #000 2px solid;
    padding: 50px;
    border-radius: 50px;
    box-shadow: 0 20px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 80%;
    margin: auto;
}

/* --- 頂部標題區域 --- */
.panel-header {
    text-align: center;
    margin-bottom: 25px;
    color: #003366;
}

.panel-header h1 {
    font-weight: bolder;
    color: #FFF047;
    letter-spacing: -0.3rem;
    margin: 0 0 30px 0;
    font-size: 5rem;
    text-shadow: -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
}

.panel-header h2 {
    font-weight: 500;
    margin: 0 auto;
    line-height: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 100px;
    font-size: 1.5rem;
    color: #fff;
    background: #000;
    width: fit-content;
}

.panel-header p {
    color: #fff;
    margin: 30px 0;
    font-size: 2.5rem;
    font-weight: 600;
    text-shadow: -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
}

.panel-header span {
    font-family: 'FakePearl-Regular';
    font-weight: bolder;
    font-size: 2.5rem;
    color: #FFF047; 
}

/* --- 日期網格 --- */
.signin-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;
    /*background-image: linear-gradient(to top, #cd86ff 0%, #deb0ff 100%);
    border: 1px solid #fff;*/
    padding: 2rem;
    
    border-radius: 20px;
}

/* --- [核心修改] 日期項目的基礎樣式 (簽到前/預設狀態) --- */
.day-item {
    /* 使用外部 SVG 檔案 - 更精準 */
    background-image: url("../images/day-item-default.svg");
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center 45%; /* SVG 置於中上方 */
    background-color: #ecd8ff;
    border-radius: 100px;
    color: #fff;
    border: 3px dotted #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-family: '微軟正黑體';
    font-weight: 100;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    aspect-ratio: 1 / 1; /* 保持方塊為正方形 */
    padding: 0.8vw;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 20px 0 rgba(0, 0, 0, 0.1);
}

.day-item:hover {
    transform: scale(1.1); /* 滑鼠懸停時放大 */
}

.day-item .date {
    font-size: 0.8vw;
    font-weight: 700;
    margin-top: 0; /* SVG 下方顯示 */
}

.day-item .reward {
    font-size: 0.8vw;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1; /* 確保不超出範圍 */
}

/* --- 狀態 1: 已簽到 (signed-in) --- */
.day-item.signed-in {
    background-image: url("../images/day-item-signed.svg");
    color: #9452ED;
    cursor: default;
}

.day-item.signed-in:hover {
    transform: none;
    background-image: url("../images/day-item-signed.svg");
}

/* --- 狀態 2: 今天已簽到 (today) --- */
.day-item.today:hover {
    transform: scale(1.1); /* 滑鼠懸停時放大 */
}

/* --- 狀態 3: 已過期 (expired) --- */
.day-item.expired {
    background-image: url("../images/day-item-expired.svg");
    background-color: #c8c8c8;
    color: #adadad;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- 底部按鈕區域 --- */
.panel-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.panel-footer button {
    outline: none;
    border: none;
    box-shadow: none;
    -webkit-appearance: none; /* 适用于 Chrome, Safari */
    -moz-appearance: none;    /* 适用于 Firefox */
    appearance: none;         /* 适用于其他浏览器 */
    background-color: transparent; /* 移除背景色 */
    background-color: #f6e447;
    border: 2px solid #000;
    color: #000;
    padding: 15px 25px;
    border-radius: 100px;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s 
    ease-in-out;
}

.panel-footer button::after{    
	margin-left: 0.75rem;
	display: inline-block;
    font: 15px FontAwesome;
	content: "\f0da";
}

.panel-footer button:hover {
    transform: scale(1.05);
}

#SigninEvent section{
    margin: 0 0 6%;
}

.eventContainer{
	margin: 0 12%;
	padding: 2rem 0;
	align-content: center;
}

.eventContainer .content{
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;	
	align-items: center;
}

.section-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.section_title {
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.section_title h2 {
    font-weight: bolder;
    font-size: 5rem;
    letter-spacing: -0.1rem;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
}

.section_title h3 {
    letter-spacing: 0;
    border-radius: 5rem;
    font-size: 2.2rem;
    font-weight: 500;
    width: fit-content;
    padding: 1rem 2rem;
    margin: 0 auto 1.6rem;
    color: #fff;
    background: #000;
}

.product-tag {
	font-size: 1.5rem;
	width: 100%;
	letter-spacing: -0.05rem;
	font-weight: 600;
    display: inline-block; /* 使元素能夠旋轉 */
    color: #000; /* 文字顏色 */
    padding: 1.5rem 0 1.2rem; /* 內邊距 */
}

.actionBtn{
	text-decoration: none;
	filter: none;
	transform: scale(1);
	transition: all 0.3s;
}

.learnMore_b{
    text-align: center;
	width: 100%;
	font-size: large;
	padding: 1rem 0;
	margin: auto 0 0;
	color: #fff;
	background: #000;
}
.learnMore_b::after{    
	margin-left: 0.75rem;
	display: inline-block;
    font: 15px FontAwesome;
	content: "\f0da";
}

.flex-container{
	display: flex;
	flex-wrap: wrap; /* 允許換行 */
	justify-content: center; 
}
.flexBox{
	width: 23.5%; 
	padding-bottom: 0.5rem;
	margin: 0.5rem;
	box-sizing: border-box;
	border-radius: 4rem;
	overflow: hidden;
}

.grid-container{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1.5rem; /* 設定格子之間的間距 */
	align-items: stretch; /* 讓列高度相等，並以最高者為基準 */
}
.grid-container img{
	object-fit: cover;
}

.dutyfreeSaleBlock .productImg {
    object-fit: contain;
    margin: 0;
    box-sizing: border-box;
}

.dutyfreeSaleBlock .gridBox{
	overflow: hidden;
	background-color: #fff;
	position: relative;
	text-align: center;
}

.eventHighlight .grid-container{
	grid-template-columns: repeat(4, 1fr); /* 初始為四欄 */
}

.eventHighlight .grid-item{
	background-color: #f0f0f0;
}
.eventHighlight h3{
	padding: 1.5rem;
	font-size: 1.3rem;
	color: #d91355;
}
.eventHighlight p{
	margin-bottom: 1rem;
	line-height: 1.5rem;
	color: #666;
}




/***** popup's appearance *****/


/* Modal */

.text-center{
    text-align: center;
}

.pop-modal {
    background-color: rgba(0, 0, 0, .65);
    display: none;
    overflow: auto;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 8%;
}


/* Modal Content */

.modal-content {
    position: relative;
    top: 0px;
    width: 750px;
    margin: 0 auto;
    background-color: #434343;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.modal-animated-in {
    animation: totop-in .3s ease;
}

.modal-animated-out {
    animation: totop-out .3s ease forwards;
}

.modal-header {
    background-color: #9452ed;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
}

.modal-content .close {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #9452ed;
    width: 60px;
    height: 60px;
    color: #fff;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
}

.modal-content .close:hover {
    background-color: #9452ed;
    color: #fff;
}

.modal-header h3 {
    color: #fff;
    font-weight: bolder;
    font-size: 20px;
}


/* Modal Body */

.modal-body {
    padding: 20px 27px 20px 20px;
    line-height: 1.5;
    font-size: 15px;
    color: #000;
    background-color: #fff;
}

.modal-body h3 {
    color: #5d2a9c;
    font-size: 1.6rem;
    line-height: 1.2;
}

.modal-body-inner {
    overflow-y: auto;
    height: 350px;
}

.modal-body-inner hr {
    width: 97%;
}

.modal-body h3 {
    margin-bottom: 0.5rem;
}

.modal-body-inner::-webkit-scrollbar-track {
    background-color: #ccc;
}

.modal-body-inner::-webkit-scrollbar {
    width: 5px;
    background-color: #0033a9;
}

.modal-body-inner::-webkit-scrollbar-thumb {
    background-color: #9452ed;
}

.modal-body ul {
    margin: 1rem 0 2rem;
    padding: 0;
    list-style: none;
}

.modal-body ul li {
    font-size: 1.2rem;
    line-height: 1.5;
    position: relative;
    margin-left: 30px;
    margin-bottom: 1vw;
    list-style-type: disclosure-closed;
}

.modal-body ul li::before {
    position: absolute;
    color: #5cc560;
    left: -20px;
    top: 10px;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.modal-body a.modal-btn.link {
    color: #000;
    font-size: 1em;
    background-color: inherit;
    padding: 0;
    text-decoration: underline;
}

.modal-body a.modal-btn:hover.link {
    background-color: inherit;
}

.modal-body a.modal-btn {
    color: #fff;
    background-color: #000;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0.5vw 2vw;
    border-radius: 100px;
}

.modal-body a.modal-btn:hover {
    background-color:#df4f73;
    transition: all .2s linear;
}

.modal-body-text-wrap {
    margin: 2vw auto;
    margin-top: 5%;
}

.modal-body-text {
    font-size: 1.2rem;
}

.modal-body-text-wrap h5 {
    color: #5cddc3;
    font-size: 15px;
}
.modal-sec-text li {
    color: #5cddc3;
    margin-left: 8% !important;
    list-style-type: circle !important;
}

/* Modal Footer */

.modal-footer {
    background-color: #656464;
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
}



@media (max-width: 1440px) {
    .eventContainer{
        margin: 0 5%;
    }
    .grid-container{
		width: 90%;
		margin: auto;
        gap: 1vw;
	}
    .product-tag {
		font-size: 1.6vw;
	}
    .signin-grid {
        grid-template-columns: repeat(6, 1fr); 
        gap: 1vw;
    }
    .day-item{
        background-size: 70%;
        padding: 1vw;
    }
    .day-item .reward {
        font-size: 1vw;
    }
    .eventHighlight .grid-container{
		grid-template-columns: repeat(4, 1fr); /* 螢幕小於max-width時，變為兩欄 */
	}
}

@media (max-width: 1024px) {
    .eventContainer{
        margin: 0 2%;
    }
    .grid-container{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
    .product-tag {
		font-size: 3vw;
		padding: 2.5vw 0 0; /* 內邊距 */
	}
    .day-item {
        background-size: 65%;
        background-position: center 40%;
    }
    .signin-panel{
        border-radius: 10vw;
        padding: 5vw;
        max-width: 90%;
    }
    .signin-grid {
        grid-template-columns: repeat(5, 1fr); 
        gap: 1.2vw;
    }
    .day-item {
        padding: 1.6vw;
    }
    .day-item .date {
        font-size: 1.5vw;
    }
    .day-item .reward {
        font-size: 1.5vw;
    }
    .dutyfreeSaleBlock .grid-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .eventHighlight .grid-container{
		grid-template-columns: repeat(2, 1fr); /* 螢幕小於max-width時，變為兩欄 */
	}
}

@media (max-width: 768px) {
    body{
        background-image: none;
    }
    .kv {
        display: none;
    }
    .mkv {
        display: block;
    }
    .signin-grid {
        grid-template-columns: repeat(3, 1fr); 
        gap: 8px;
        padding: 3vw;
        border-radius: 3vw;
    }
    .panel-header {
        margin-bottom: 3vw;
    }
    .panel-header h1 {
        font-size: 10vw;
        letter-spacing: 0;
        margin: 3vw 0;
    }
    .panel-header p {
        margin: 5vw 0 0;
        font-size: 5vw;
        line-height: 1.2;
    }
    .day-item .reward {
        font-size: 2.6vw;
    }
    .day-item .date {
        font-size: 2.6vw;
    }
    .day-item {
        padding: 2.6vw;
    }
    .panel-footer {
        margin-top: 2vw;
        gap: 1vw;
    }
    .panel-footer button {
        font-size: 4vw;
        padding: 1.2vw 2.2vw;
    }
    .panel-footer button::after{
        margin-left: 1.5vw;
        font: 3vw FontAwesome;
    }
    .eventContainer{
        margin: 0 5%;
    }
    .section_title h2 {
        font-size: 8.5vw;
    }
    .section_title h3 {
        font-size: 6vw;
        padding: 2vw 6vw;
    }
    .product-tag {
		font-size: 4vw;
		padding: 2.8vw 0.5vw 0; /* 內邊距 */
	}
    .learnMore_b {
		font-size: 3vw;
		padding: 2.5vw 3vw;
	}
	.learnMore_b::after{
		margin-left: 2vw;
		font: 3vw FontAwesome;
	}
    /*popup*/
    .modal-body{
        line-height: 1.3;
    }
    .modal-content {
        width: 90%;
    }
    .popup__btn {
        margin: 7% 0 20px 30%;
    }
    .modal-body ul li {
        font-size: 2.5vw;
        margin-bottom: 1.5vw;
    }
    .modal-body h3 {
        font-size: 4.2vw;
        line-height: 1.2;
        margin-bottom: 2vw;
    }
    .modal-body-text{
        font-size: 2.2vw;
        line-height: 1.5;
    }
}

@media (max-width: 500px) {
    .modal-body ul {
        margin: 1vw 0 5vw;
    }
    .modal-body ul li {
        font-size: 3vw;
    }
    .signin-panel {
        padding: 4vw;
        max-width: 90%;
    }
    .panel-header h2 {
        padding: 0.5vw 5vw;
        font-size: 4.5vw;
    }
    .panel-header span {
        font-size: 6vw;
    }
    .day-item {
        background-position: center 40%;
    }
    .grid-container {
        gap: 3vw;
    }
    .eventHighlight .grid-container{
		gap: 3vw;
	}
	.eventHighlight h3 {
		line-height: 1.2;
		padding: 3vw;
		font-size: 5vw;
	}
    .eventHighlight p{
        font-size: 4vw;
        line-height: 1.2;
    }
    .eventHighlight .grid-container{
		grid-template-columns: 1fr; 
	}
}