@import url('/css/icheck-material.css');

/* member_center */
.member_center {border: 1px rgba(216, 179, 111, .28) solid;}

/* copy */
[data-action="copy"] { margin-left: 1em; padding: .3em 1em; background: var(--blue); color: white; }
[data-action="copy"]:active { -webkit-animation: bounce .2s 1 linear; animation: bounce .2s 1 linear; }

/* card_title */
.card_title {padding: 1em;display: flex;flex-wrap: wrap;align-items: center;}
.card_title .focus { margin: 0 1em; line-height: 1; font-size: 1.3em; color: var(--primary); }

/* table_box */
.table_box { margin: 1em; }
.table_box table { position: relative; width: 100%; table-layout: fixed; }
.table_box table tr >* {padding: 1.3em .3em;border-bottom: 1px var(--g_900) solid;text-align: center;}
.table_box table tr th {padding: .5em .3em;border-bottom: 1px var(--g_800) solid;font-weight: 500;font-size: 1.1em;}
.table_box table tr:nth-child(2n) td , .table_box table tr.even td {}
.table_box table tr:last-child td { border-color: transparent; }
.table_box table tr .operate button { padding: .3em 1em; background: var(--primary); display: inline-block; text-align: center; color: white; cursor: pointer; }
.table_box table tr .show_time { display: flex; align-items: center; }
.table_box table tr .show_time font { line-height: 1.2; }
.table_box table tr.order_detail td {padding: 0 .3em;border-bottom: 0;background: transparent;}
.table_box table tr.order_detail[data-type="1"] td {padding: .3em;border-top: 2px solid var(--secondary);}

/* delall */
#delall { padding: .2em 1em; background: var(--red); color: white; }

/* track_list */
#track_list {margin: 1em;display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 1.3em;}
#track_list .item_row {}
#track_list .category_btn { position: absolute; padding: .4em 1em; background: var(--primary); border-radius: 2em; display: inline-block; line-height: 1; font-weight: 300; font-size: .9em; color: white; top: 1em; left: 1em; z-index: 2; }
#track_list .img_box img { width: 100%; aspect-ratio: 1/1; }
#track_list .info_box {position: relative;padding: 1.6em .5em 1em;}
#track_list .info_box * {margin-bottom: .3em;}
#track_list .info_box .h3{font-size: 15px;font-family: 'Noto Serif TC';font-weight: 400;-webkit-line-clamp: 2;height: 51px;}
#track_list li:hover .info_box .h3{text-decoration-line: underline;}
#track_list .info_box [class*="icheck-material"] {position: absolute;margin: 0;top: 0.5em;right: .2em;z-index: 5;}
#track_list .info_box button { padding: .1em .8em; position: relative; background: var(--red); font-size: .9em; color: white; z-index: 11; }
#track_list .price_box {margin-bottom: 0;display: flex;align-items: baseline;justify-content: flex-start;}
#track_list .price_box * { margin: 0 .2em; font-weight: 500; font-size: .9em; color: var(--g_300); }
#track_list .price_box ins {text-decoration: none;font-size: 14px;color: var(--primary);}

/* order_detail */
.order_detail .row { position: absolute; margin: 0; display: block; right: 0; left: 0; opacity: 0; z-index: -1; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top center; transform-origin: top center; }
.order_detail .row * {font-size: 15px;}
.order_detail .order_list .row_item { grid-template-columns: 60px repeat(6, 1fr); }
.order_detail .order_list .row_item.list .img a { width: 55px; }
.order_detail .amt_box { margin-top: 1em; }
.order_detail .amt_box p { display: flex; justify-content: flex-end; align-items: center; }
.order_detail .amt_box p font { width: 10em; text-align: right; }
.order_detail .amt_box p font .muted {font-size: .9em;color: var(--pink);}
.order_detail .order_box {margin-top: 0;padding: .8em 0 1em;background: transparent;border: 0;}
.order_detail .order_box h5 { margin: 0 0 .2em; }
.order_detail .order_box >div { padding: 0; grid-gap: 0; }
.order_detail .form_box .flex_style {border-bottom: 1px var(--g_900) solid;}
.order_detail .form_box .flex_style:last-child { border-bottom: 0; }
.order_detail[data-type="1"] .row { position: static; opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); }

/* coupons_section */
.coupons_section { margin-bottom: 3em; }
.coupons_section:first-child { margin-top: 0; }
.coupons_section .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.coupons_section .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.coupons_section .card h3 { margin: 0 0 8px; font-size: 16px; }
.coupons_section .row { display: flex; justify-content: space-between; align-items: center; margin: .2em 0; }
.coupons_section .k { color: var(--sub); }
.coupons_section .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.coupons_section .badge { background: var(--chip); color: var(--chip-ink); padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid #e0e7ff; }
.coupons_section .hr { height: 1px; background: var(--line); margin: 10px 0; }
.coupons_section .meta { color: var(--sub); font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.coupons_section .meta span { display: flex; }
.coupons_section .meta b { color: var(--ink); }
.coupons_section .toolbar { display: flex; gap: 8px; align-items: center; margin: 6px 0 2px; }
.coupons_section .toolbar h2 { font-size: 18px; }
.coupons_section .btn { appearance: none; border: 1px solid var(--line); margin-left: 0; padding: 6px 10px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.coupons_section .btn:hover { border-color: #ddd; }
.coupons_section .empty { padding: 24px; border: 1px dashed var(--line); border-radius: 12px; background: #fff; color: var(--sub); }

.coupons_section .badge-red { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.coupons_section .badge-green { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.coupons_section .badge-gray { background: #eef0f3; color: #374151; border: 1px solid #e5e7eb; }
.coupons_section .notice { color: var(--gray); }
.coupons_section .green { font-weight: 600; color: var(--ok); }
.coupons_section .muted { color: var(--muted); }

@keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(.85); } to { transform: scale(1); } }
@-webkit-keyframes bounce { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(.85); } to { -webkit-transform: scale(1); } }

@media screen and (max-width: 980px) {
	.order_detail .order_list .row_item { grid-template-columns: 80px 1fr 150px; }
	.order_detail .order_list .row_item.list .img a { width: 70px; }
}
@media screen and (min-width: 769px) {
	.table_box table tr .operate { padding: 1em .3em; }
	.table_box table tr .show_time { padding: 1em .3em; flex-direction: column; }
}
@media screen and (max-width: 768px) {
	.table_box table tr th { display: none; }
	.table_box table tr td { padding: .3em 1em; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 0; }
	.table_box table tr td:before {margin-right: 2em;width: 6em;font-weight: 500;text-align: left;color: white;content: attr(data-th);}
	.table_box table tr td:nth-child(1) { padding-top: 1em; }
	.table_box table tr td.icheck { padding-top: 0; }
	.table_box table tr td.icheck .icheck-material-custom { position: absolute; top: 1.5em; right: 1em; }
	.table_box table tr td:last-child { padding-bottom: 1rem; border-bottom: 1px var(--g_100) solid; }
	.table_box table tr .time { margin-right: .2em; }
	.table_box table tr .show_time font { margin-right: .2em; color: currentColor; }
	.table_box table tr.order_detail td { padding: 0 .3em; display: block; }
	.table_box table tr.order_detail td:before { display: none; }
	#track_list { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 551px) {
	.order_detail .form_box .flex_style label {margin-right: 1em;padding: .5em;width: 8.5em;background: transparent;text-align: inherit;text-justify: inherit;text-align-last: inherit;}
}
@media screen and (max-width: 550px) {
    .order_detail .row *{font-size:14px;}
	.order_detail .order_list .row_item {grid-template-columns: 80px 1fr 30px;}
	.table_box table tr td { align-items: flex-start; text-align: left; }
	.table_box table tr td:before { width: 100%; }
	.order_detail .form_box .form_item label {padding: .5em;width: 100%;background: var(--primary);display: block;}
	.order_detail .form_box .flex_style >font { padding: .5em; min-height: 2.5em; }
}