@font-face {
  font-family: 'Gen Sen Rounded';
  src: url('../fonts/GenSenRounded2TW-R.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gen Sen Rounded';
  src: url('../fonts/GenSenRounded2TW-M.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gen Sen Rounded';
  src: url('../fonts/GenSenRounded2TW-B.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  padding: 0;
  background-color: #eee;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
}

/* 添加特定類名控制body的overflow */
body.modal-open {
  overflow: hidden;
}

/* 固定頁腳時添加底部padding */
body.has-fixed-footer {
  padding-bottom: var(--footer-height, 0);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 18px;
  
}

html {
  font-family: 'Gen Sen Rounded', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
  font-size: 18px;
}


header {
  background-color: #ffcb24;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  width: 100%;
  grid-template-columns: 0.3fr auto min-content;   
  grid-template-rows: 1fr 1fr;   
  justify-content: space-between;
  margin:0;
  text-align: left;
  align-items: center;
}

header h1 {
  color: #fff;
  font-weight: 200;
}

footer {
  text-align: center;
  bottom: 0;
  width: 100%;
}

footer p {
  color: #ccc;
}


li{
  font-weight: bold;
  color: white;
  font-size: 1rem;
}

a{
  color: #333;
  text-decoration: none;
}


h2{
  margin-top: 20px;
}

.dark-red{
  background-color: #17bebb;
}
/*from login*/

button {
  cursor: pointer;
}

.mt-20 {
  margin-top: 20px;
}

.relative {
  position: relative;
}

.flexCe,
.mx-auto {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flexPreference{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.mx-auto {
  position: relative;
  width: 100%;
}

.search-form{
  justify-content: center;
  display: flex;
}

.login-form {
  max-width: 500px;
  margin: 3rem auto;
  background: #fff;
  padding: 38px;
  box-shadow: 0 4px 8px #dedede;
  border-radius: 3px;
}

.ta-center img {
  width: 300px;
  height: 300px;
}

.ex-login {
  padding: 0.8em;
  margin: 0.4em 0;
  width: 100%;
  background: #fff;
  color: #222222;
  border: solid 0.5px #d4cdcd;
  border-radius: 5px;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.facebook {
  background: #385499;
  color: #fff;
}

.facebook svg {
  fill: #fff;
}

.svg-icon {
  vertical-align: bottom;
}

.login-forms {
  margin: 1.6em 1.6em 0 1.6em;
  width: 100%;
}

.x-auto {
  padding: 4px 2px;
}

.inp-box {
  display: block;
  margin: 10px 0;
}

.s-label {
  display: block;
  margin: 8px 0 6px;
  font-weight: 500;
}

.s-label-password {
  display: block;
  margin: 8px 0 0px;
  font-weight: 500;
}

.warning-message{
  margin: 0;
  font-weight: 500;
}

.s-input {
  display: block;
  padding: 0.8em;
  width: -webkit-fill-available;
  border: solid 0.5px #b6b6b6;
  border-radius: 4px;
}

.s-input-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  fill: #16aca9;
  display: none;
}

.mx-center {
  font-size: 14px;
  margin-top: 20px;
}

.submit-button {
  width: 100%;
  color: #fff;
  padding: 0.8em;
  border: none;
  border-radius: 4px;
  margin-top: 20px;
}

.submit-button:hover {
  background: #1e9997;
}

.dashline{
  background-color: #888888;
  width: 100%;
  height: 1px;
}

.dashline-text{
  color: #ccc;
  font-size: 0.75rem;
  padding: 0 1.3rem;
}

.alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  width: 100%;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  display: flex;
}

.form-container {
  max-width: 600px;
  margin: 0 auto;
}

.steps-btn {
  margin-top: 10px;
}

.location-section, .url-section, .national-section {
  background: #f8f9fc;
  border-radius: 8px;
  margin: 0;
}

.discount-type-section{
  background: #f8f9fc;
  padding: 0;
  border-radius: 8px;
  margin: 0;
}

fieldset > h4{
  cursor: pointer;
}

div > h3{
  margin: 10px 0 5px 0;
}

.button-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.no-more-posts, .no-posts{
  display: flex;
  justify-content: center;
}

.loading{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.discount-btn {
  padding: 8px 1.3rem;
  border: 1px solid #222222;
  border-radius: 4px;
  background: white;
}

.discount-btn.active {
  background: #e6e9f0;
}

div > input[type="text"]:not([name="subject"]), div > input[type="number"], div > input[list="browsers"], div > textarea, div > input[type="date"], #deal-url-input  {
  width: 100%;
  padding: 8px 1px 8px 1px;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  background-color: white;
  min-height: 20px;
}

#deal-url-input {
  margin-bottom: 10px;
}

.hidden {
  display: none;
}

.location-section select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
}

.location-section select option {
  padding: 8px;
}

.location-section select option:checked {
  background-color: #16aca9;
  color: white;
}

/*main*/

.main-structure{
  display: grid;
  grid-template-rows: auto auto auto;   
  width: auto;
  margin:0;
}

.title-bar{
  display: flex;
  width: auto;
  grid-template-columns: 0.3fr auto min-content;   
  grid-template-rows: 1fr;   
  padding-left: 5px;
  padding-right: 50px;
  justify-content: space-between;
  margin:0;
  text-align: left;
  align-items: center;
}

.logo_and_text{
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 5px;
}

.logo-text{
  color: white;
  font-size: 1.2rem;
  margin-left: 10px; 
  white-space: nowrap;
  /*position: absolute;
  left: 60px;*/
}

.searching_box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.search-input-wrapper {
  position: relative;
  width: 75%;
}

.form-control {
  width: 100%;
  height: 36px;
  padding: 8px 12px 8px 2.5rem;
  font-size: 0.95rem;
  color: #333;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.form-control:focus {
  outline: none;
  border-color: rgba(129, 42, 42, 0.3);
  background-color: white;
  box-shadow: 0 3px 8px rgba(129, 42, 42, 0.1);
}

.form-control::placeholder {
  color: #888;
  opacity: 0.8;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.3rem;
  height: 1.3rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.search-input-wrapper:hover .search-icon {
  opacity: 0.8;
}

.account-logo-area{
  display: flex;
  justify-content: center;
  align-items: center;
  }



/*NAVIGATOR BAR*/

.navigator-list{
  background-color: #ffe678;
  margin:0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  height: 100%;
}

.navigator-list li{
  flex-wrap: nowrap;
  width: 100%;
  white-space: nowrap;
}

.navigator-dropdown{
  color: white;
}

.navigator-box{
  background-color: #ffe678;
  padding: 0 10px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(16px, 1vw, 1.5rem);
}

.navigator-box:hover{
  background-color: #16aca9;
  color: #ffffff;
}

.navigator-box.active {
  background-color: #17bebb;
  color: #ffffff;
  font-weight: bold;
}

/*CONTENT AREA (POST + RECOMMENDATION)*/
.content-area{
  display: flex;
  gap:10px;
  flex-direction: column;
  margin: 50px;
}

.account-content-area {
  margin: 50px;
}

.navigator-dropdown-list{
  position: absolute;
  left: 0px;
  z-index: 2;
  width: auto;
  height: auto;
  margin:0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}

.navigator-dropdown-box{
  background-color: #ffe678;
  width: 10rem;
  height: 3rem;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigator-dropdown-box.active {
  background-color: #17bebb;
  color: #ffffff;
  font-weight: bold;
}

.navigator-dropdown-box:hover{
  background-color: #16aca9;
  color: #ffffff;
}


.main-post-area{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 5px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  align-items: center;
}

.filter-bar-area {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  width: 100%;
}

.posts-wrapper {
  display: inline-grid;
  gap: 1rem;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  align-items: center;
}

.deal-area{
  display: flex;
  gap: 10px;
  flex-direction:column;
  padding-left: 5px;
  width: auto;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  align-items: center;
}

.right-post-area{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  height: 700px;
  padding-left: 30px;
  padding-right: 50px;
  width: 300px;
}

/*POST*/

.filter-box{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  background: white;
  border-radius: 8px;
  height: 2rem;
}

.filter-select {
  border: none;
  outline: none;
  font-size: 1.3rem;
  color: #333;
}



.discussion-filter-box{
  display: flex;
  align-items: center;
  margin:0;
  padding:0px 10px;
}

select{
  max-width: 100%; text-overflow: ellipsis;
}

input[type="radio"]:checked+label { 
  font-weight: bold; 
}

.post-box{
  display: grid;
  background-color: white;
  height: 13rem;
  width: auto;
  max-width: 800px;
  grid-template-columns: 160px minmax(14rem, auto) auto auto;   
  grid-template-rows: repeat(5,1fr);   
  border-radius: 10px;
  padding-left: 24px;
  padding-right: 20px;
  align-items: center;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  padding-bottom: 15px;
  padding-top: 15px;
}

.post-link{
  text-decoration: none;
  color: inherit; 
}

.deleted-post-box{
  background-color: white;
  width:  100%;
  height: 100px;
  display: flex;
  border-radius: 10px;
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
  text-align: left;
  box-shadow: 0 2px 2px #0002;
  margin-bottom: 100px;
}

.deal-box{
  display: grid;
  background-color: white;
  height: 17rem;
  width:  100%;
  grid-template-columns: 13rem minmax(0, 1fr) auto minmax(120px, auto);   
  grid-template-rows: repeat(5,1fr);   
  border-radius: 10px;
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
  text-align: left;
  box-shadow: 0 2px 2px #0002;
}

.deal-content-box {
  display: grid;
  background-color: white;
  height: auto;
  width: 100%;
  max-width: 900px;
  grid-template-columns: 160px minmax(0, 1fr) auto minmax(120px, auto);   
  grid-template-rows: repeat(3,auto);   
  border-radius: 10px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  box-shadow: 0 2px 2px #0002;
  position: relative;
  gap: 15px;
  padding-bottom: 20px;
}

.deal-content-box > .post-title {
  grid-area: 2/2/3/5;
}

.deal-content-pic-area {
  grid-area: 1/1/6/2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.deal-content-pic-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  object-position: center;
}

.deal-content-info-area {
  grid-area: 3/2/4/4;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: flex-start;
  padding-top: 20px;
}

.deal-content-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deal-content-type {
  background-color: rgb(255, 255, 255);
  color: rgb(77, 77, 77);
  border-radius: 5px;
  border: rgb(77, 77, 77) solid 1.5px;
  padding: 0 5px;
  display: inline-flex;
  width: fit-content;
}

.deal-content-city {
  color: rgb(77, 77, 77);
  font-size: 0.9rem;
}

.deal-content-city p {
  margin: 0;
}

.post-price {
  grid-area: 2/4/3/5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.post-price > strong, .post-price > p > strong {
  color: #17bebb;
}

.post-price > p > strong {
  font-size: 1.7rem;
}

.post-link > del, .post-price > del {
  color: #888888;
}

.post-price > del,
#post-discount-price,
.post-info.post-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


.price-container {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}

.discussion-box {
  grid-area: 2/1/3/5;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  box-shadow: 0 2px 2px #0002;
}

.deal-info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.deal-info-title h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.filter-bar-area {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.filter-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.filter-select {
  border: none;
  outline: none;
  font-size: 1rem;
  color: #333;
  background: transparent;
}

.deal-info-box{
  display: grid;
  background-color: white;
  height: auto;
  width:  100%;
  grid-template-rows: 1fr auto;   
  border-radius: 10px;
  padding: 20px 20px 40px 20px;
  align-items: start;
  text-align: left;
  box-shadow: 0 2px 2px #0002;
  position: relative;
}

.deal-info-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-pic-area{
  grid-area: 1/1/5/2;
  flex: 0 0 180px;
  display: block;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  border-radius: 8px;
  object-position: center;
}

.post-pic-area img, .scroll-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  object-position: center;
  flex: 0 0 var(--carousel-width);
  max-height: 160px;
  max-width: 160px;
  cursor: zoom-in;
}


.post-title-box{
  margin-left: 2rem;
  grid-area: 1/2/2/4;
  margin-bottom: 0;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.post-title h2{
  margin: 0 0.5rem 0 1rem;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  text-overflow: ellipsis;
  width: auto;
  word-break: break-all;
}

.deal-content-box > .post-title > h2{
  overflow: visible;
  margin: 0;
  -webkit-box-orient: horizontal;
  font-size: 1.5rem;
  padding: 0;
}

.deal-content-box > .thumbs-area {
  align-content: start;
  align-items: center;
}

.like-count{
  font-size: 1rem;
}

.like-count-active{
  color: #d82828;
}

.like-count-dislike{
  color: #d82828;
}

#deal-content-title{
  -webkit-line-clamp: 4;
  line-clamp: 4;
  font-size: 1.55rem;
}

.deal-title{
  margin-left: 2rem;
  grid-area: 1/2/2/4;
  margin-bottom: 0;
  height: auto;
  align-items: center;
  width: auto;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  text-overflow: ellipsis;
}

.thumbs-area{
  grid-area: 1/4/2/5;
  display: flex;
  width: auto;
  color: rgb(255, 255, 255);
  margin: 0;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 auto;
  padding-top: 14px;
  gap: 5px;
}

.post-info{
  font-size:0.9rem;
  white-space: nowrap;
}

.deal-content-info{
  font-size:1rem;
}

.post-info-icon{
  width: 0.9rem;
}

.deal-content-info-icon{
  width: 1.1rem;
}

.thumbs-count{
  width: 1.2rem;
}

.thumbs-count-num{
  font-size: 1rem;
}

.poster-logo{
  width: 30px; 
  height: 30px;
  border-radius: 90px;
}

.like-area{
  align-items: center;
  margin:0;
  cursor: pointer;
  padding-right: 0.5rem;
}

.like-area:hover{
  color: #888888;
}

.dislike-area{
  align-items: center;
  margin:0;
  cursor: pointer;
  padding-left: 0.5rem;
}

.dislike-area:hover{
  color: #888888;
}

.post-brand{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.deal-content-brand{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 5px;
}

.post-type{
  background-color: rgb(255, 255, 255);
  color: rgb(77, 77, 77);
  border-radius: 5px;
  border: rgb(77, 77, 77) solid 1.5px;
  font-size: 1rem;
  margin:0;
  padding: 0 5px;
  display: inline-flex;
  width: fit-content;
}

.post-type p, .deal-content-type p {
  white-space: nowrap;
  font-size: 0.9rem;
}

#home-region-label{
  font-size: 0.9rem;
}

.deal-content-type{
  background-color: rgb(255, 255, 255);
  color: rgb(77, 77, 77);
  border-radius: 5px;
  border: rgb(77, 77, 77) solid 1.5px;
  height: 1.5rem;
  margin:0;
  padding: 0 5px;
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
}

.deal-content-city {
  margin-top: 5px;
  color: rgb(77, 77, 77);
  font-size: 0.9rem;
}

.deal-content-city p {
  margin: 0;
}

.no-comments {
  text-align: center;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin: 1rem 0;
}

.no-comments p {
  color: #6c757d;
  font-size: 1.1rem;
  margin: 0;
}

.post-info-area {
  grid-area: 2/2/3/3;
  margin-left: 1rem;
  margin-top: 0;
  align-items: center;
  justify-content: flex-start;
  display: flex;
  gap: 20px;
}


.post-time{
  display: flex;
  align-items: center;
  gap: 10px;
}

.deal-content-box > .post-price{
  display: flex;
  margin: 0;
  grid-area: 3/4/4/5;
  align-items: center;
  justify-content: flex-end;
  min-width: 0; /* 防止內容溢出 */
  flex-shrink: 0; /* 防止價格區域被擠壓 */
  white-space: nowrap; /* 強制單行顯示 */
}

.post-discount-price{
  font-size: 1.7rem;
}

.price-container {
  display: flex;
  align-items: baseline; /* 對齊底線 */
  gap: 4px;
  flex-shrink: 0;
}

.post-content{
  margin-left: 1rem;
  margin-top: 0;
  grid-area: 3/2/5/5;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  text-overflow: ellipsis;
}

.deal-content{
  margin: 0;
  grid-area: 2/1/2/2;
  position: relative;
  word-wrap: break-word;
  overflow: hidden;
}

.deal-content.collapsed .content-wrapper {
  max-height: 200px;
  overflow: hidden;
}

.deal-content.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(transparent, rgb(170, 170, 170));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.deal-content.collapsed.show-shadow::after {
  opacity: 1;
}

.show-more-btn {
  display: none;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background: none;
  border: none;
  border-top: 1px solid #eee;
  background-color: #f8f9fa;
  color: #16aca9;
  cursor: pointer;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.show-more-btn.visible {
  display: block;
}

.show-more-btn:hover {
  background-color: #e1e2e2;
}

.post-poster{
  display: flex;
  margin-left: 1rem;
  grid-area: 5/2/6/3;
  margin-top: 0;
  align-items: center;
  width: auto;
}

.post-poster > a {
  gap: 15px;
}

.poster-name {
  font-size: 0.85rem;
}

.deal-content-poster{
  display: flex;
  grid-area: 5/2/6/3;
  margin-top: 0;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  gap: 15px;
}

.deal-poster-join-date {
  font-size: 0.75rem;
  color: #888888;
}

.post-call-button-area{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin:0;
  grid-area: 5/1/6/2;
  width: auto;
}

.deal-content-call-button-area{
  color: white;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin:0;
  grid-area: 3/2/4/5;
  width: auto;
}

.post-call-button{
  color: rgb(0, 0, 0);
  display: flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  width: auto;
  margin:0;
  background-color: rgb(255, 255, 255);
  border: rgb(69, 69, 69) solid 1.5px;
  border-radius: 10px;
}

.post-call-button:hover{
  background-color: rgb(241, 148, 49);
  color:white;
  border: white solid 1.5px;
}

.post-call-button:hover svg{
  fill: white;
}

.post-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgb(153, 27, 27);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 2rem;
  font-size: 1rem;
  cursor: pointer;
  z-index: 999;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.post-btn.hide {
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
}

.post-btn:hover {
  transform: translateY(-3px);
  background: #0f918e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.post-btn:active {
  transform: translateY(1px);
  background: #17bebb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.post-btn svg {
  transition: transform 0.3s ease;
}

.post-btn:hover svg {
  transform: rotate(90deg);
}

.horizontal-center{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.preference-btn{
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: #ffcb24; 
  color: white; 
  border-radius: 5px; 
  border-color: #ffcb24; 
  font-size: 1rem; 
  height: 1.5rem; 
  width: auto; 
  margin-bottom: 20px;
}

/*ADDING POST*/
#stepsContainer {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: 0 auto;
  background-color: white;
  height: auto;
}

.step {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 0px;
  text-align: center;
}

#add-deal-detail{
  margin:0;
}

.inactive {
  display: none;
}

/*DEAL*/
:root {
  --carousel-width: 13rem;
}

.carousel {
  width: var(--carousel-width);
  padding-bottom: 10px;
}

.scroll {
  display: flex;
  align-items: center;
  overflow-y: hidden;
  overflow-x: auto;

  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.scroll-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-item-outer {
  flex: 0 0 var(--carousel-width);
  width: var(--carousel-width);
  margin-bottom: 15px;
  scroll-snap-align: start;
}

.scroll-item-outer:first-of-type {
  margin: 0;
}

.navigator-box, .footer-box{
  color: black;
}

.navigator-box:hover, .footer-box:hover{
  color: #ffffff;
}

#navigate {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin:0;
  padding-bottom: 5px;
}

#navigate a {
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  background: rgba(221, 221, 221, 0.6);
  z-index: 1;
  border-radius: 50%;
  padding: 5px;
  width: 5px;
  height: 5px;
  transition: all 0.3s ease;
}

#navigate a:hover {
  background: #16aca9;
  color: #ffffff;
}

#navigate a.active {
  background: #17bebb;
  color: #ffffff;
  transform: scale(1.2);
}


/*RECOMMENDATION AREA*/

.recommend-box{
  display: inline-flex;
  background-color: white;
  height: 30rem;
  width:  auto;
  align-items: center;
  border-radius: 10px;
  padding-left: 10px;
}

/*ABOUT US & OTHER*/

.bottom-area{
  background-color: white;
  height: 50px;
  padding: 0;
  display:flex;
}

/*FOOTER*/


.footer-area{
  background-color: #222222;
  height: auto;
  width: 100%;
  padding: 0;
  padding-bottom: 10px;
  transition: position 0.3s ease;
  z-index: 10;
}

.footer-content {
  width: 100%;
  margin: 0 auto;
}



footer{
  color: white;
}

#footer-list {
  padding: 0 ;
  margin:0;
  background-color: #ffe678;
}

.footer-item-container {
  flex: 1;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer-box{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(18px, 1vw, 1.2rem);
  font-weight: 700;
}

.footer-item-container:hover{
  background-color: #16aca9;
}


.invisible{
  visibility: hidden;
}

/*Styles for Account Management*/
#tab {
  width: 100%;
  background: rgb(190, 190, 190);
  border: solid 1px rgb(190, 190, 190);
  display: grid;
  grid-template-columns: auto 1fr;   
}

/* 頁籤ul */
#tab > ul {
  /* overflow: hidden; */
  margin: 0;
  padding: 20px 0 0 10px;
}

#tab > ul > li {
  list-style-type: none;
  height: 4rem;
}

/* 頁籤上的文字 */
#tab > ul > li > a { 
  text-decoration: none;
  font-size: 15px;
  color: #222222;
  float: none;
  padding: 15px;
  margin-left: 5px;
  height: 30px;
}

/*頁籤div內容*/
#tab > div > div {
  clear: both;
  padding: 0 15px;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/*第一筆的底色*/
span:target ~ #tab > ul li:first-child a {
  background: rgb(190, 190, 190);
}

span:target ~ #tab > div > div:first-of-type {
  visibility: hidden;
  height: 0;
  padding: 0 15px;
}

/*頁籤變換&第一筆*/
span ~ #tab > ul li:first-child a,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
  background: #fff;
  border-radius: 5px 0px 0px 5px;
}

span ~ #tab > ul li:first-child a::before,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"]::before,
#tab-2:target ~ #tab > ul li a[href$="#tab-2"]::before,
#tab-3:target ~ #tab > ul li a[href$="#tab-3"]::before,
#tab-4:target ~ #tab > ul li a[href$="#tab-4"]::before {
  background-color: white;
  height: 100%;
}

/*頁籤內容顯示&第一筆*/
span ~ #tab > div > div:first-of-type,
#tab-1:target ~ #tab > div > div.tab-content-1,
#tab-2:target ~ #tab > div > div.tab-content-2,
#tab-3:target ~ #tab > div > div.tab-content-3,
#tab-4:target ~ #tab > div > div.tab-content-4 {
  visibility: visible;
  height: auto;
  background: #fff;
}

span {
  display: none;
}

/*折扣內容留言區*/
/*折扣內容留言區*/
.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.user-image{
  width: 100%;
  height: 100%;
}

.user-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.comment-box, .comment-list{
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 2px #0002;
  margin-bottom: 12px;
}

.comment-session{
  width: auto;
  height: auto;
  margin: 0 auto;
}

.comment-list{
  width: 100%;
  margin-bottom: 12px;
}

.comment-list .user{
  display: flex;
  padding: 8px;
  overflow: hidden;
  color: rgb(77, 77, 77);
}


.comment-list .user img{
  height: 38px;
  width: 38px;
  border-radius: 50%;
  margin-right: 0;
}

.copyright-text {
  padding-top: 10px;
}

.name{
  font-weight: 600;
  display: flex;
  white-space: nowrap;
  padding-left: 15px;
  color: #333;
}

.filter-box > p{
  margin:0;
}

.comment-text {
  padding: 15px;
}



.comment-list .day{
  font-size: 0.75rem;
  color: #888888;
  white-space: nowrap;
  padding-left: 15px;
}

.reply{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px;
  gap: 7px;
}

.icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  fill: #777;
  gap: 5px;
}

.icon:hover{
  fill: #000;
  cursor: pointer;
}


.post-comment .comment{
  padding: 0 0 15px 10px;
  word-wrap: break-word;
  position: relative;
}

.comment-box{
  padding: 10px;
  overflow: hidden;
  border-bottom: #0003 solid 0.5px;
}

.comment-box .user{
  display: flex;
  width: min-content;
  align-items: center;
  justify-content: center;
}

.comment-box .user-image img{
  width: 48px;
  height: 48px;
  margin-right: 10px;
  border-radius: 50%;
}


.comment-box .user .name{
  white-space: nowrap;
  padding-left: 5px;
}

textarea{
  background: #fff;
  width: -webkit-fill-available;
  height: 152px;
  margin: 10px 0;
  padding: 10px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 0 0.5px #0003;
}

textarea:focus{
  outline-color: #ffcb24;
}

.comment-box .comment-submit{
  float: right;
  padding: 6px 14px;
  border: none;
  background: #ffcb24;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  border-radius: 2px;
}

.comment-box .comment-submit:hover{
  background:#16aca9;
}

.applied-city-area {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/*<weight>: Use a value from 200 to 900*/
.noto-serif-tc {
font-family: 'Gen Sen Rounded', sans-serif;
font-weight: 500;
}

.lxgw-wenkai-mono-tc-regular {
  font-family: 'Gen Sen Rounded', sans-serif;
  font-weight: 400;
}

.deal-type-btn, .region-type-btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #222222;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid #222222;
  border-radius: 4px;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  margin: 0.5rem;
  transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out, box-shadow .1s ease-in-out;
}

.deal-type-btn:hover, .region-type-btn:hover {
  color: #fff;
  background-color: #16aca9;
  border-color: #16aca9;
}

.deal-type-btn.active, .region-type-btn.active {
  color: #fff;
  background-color: #16aca9;
  border-color: #16aca9;
}

#add-deal-title {
  font-weight:bold;
}

.region-tag {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: 0; 
  text-align: start;
  cursor: pointer;
}

input[name="city"], .location-section > fieldset > div > label {
  cursor: pointer;
  font-size: 1.2em;
}

.image-area {
  background: #f8f9fc;
  border-radius: 8px;
}

.image-preview-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
}

.image-preview {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  cursor: move;
  background: white;
  transition: transform 0.15s ease;
  width: 100%;
  height: 100%;
}

.image-preview.dragging {
  z-index: 999;
  border: 2px dashed #16aca9;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview.is-cover::before {
  content: '封面照';
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1;
}

.delete-image-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 2;
}

.delete-image-btn:hover {
  background: rgba(220, 53, 69, 0.9);
}

.upload-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 1.3rem;
  background-color: #16aca9;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.upload-btn:hover {
  background-color: #c82333;
}

.image-limit-hint {
  color: #6c757d;
  font-size: 0.875rem;
  margin-top: 5px;
}

.steps-btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.loading-overlay {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 334px;
  background: rgba(255, 255, 255, 0.95);
  z-index: 9999;
}

.posting-overlay {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  z-index: 9999;
}

.loading-content {
  margin-top: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #16aca9;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-overlay p, .posting-overlay p {
  color: #16aca9;
  font-weight: 500;
  margin: 0;
}

.loading-spinner-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.lazy.loaded {
  opacity: 1;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 模態框樣式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-content {
margin: auto;
display: block;
max-width: 120%;
max-height: 90vh;
object-fit: contain;
position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -15%);
  background: white;
  padding: 15px;
  border-radius: 8px;
  width: 600px;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 添加圖片導航按鈕樣式 */
.prev-btn,
.next-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(0, 0, 0, 0.4);
}

.next-btn {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev-btn {
  left: 0;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 圖片計數器樣式 */
.image-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
}

.terms-section {
  margin-bottom: 2rem;
}

.terms-section h1 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1.5rem;
  text-align: center;
}

.terms-section h2 {
  font-size: 1.5rem;
  color: #ffcb24;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #ffcb24;
}

.terms-section p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.terms-section ul {
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.terms-section li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #333;
}

.report-button-container, .comment-edit-button-container {
  position: relative;
  display: inline-block;
}

.report-button {
  color: rgb(87, 0, 0);
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s ease;
}

.report-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-menu {
  position: absolute;
  top: 30px;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 998;
  min-width: 100px;
  color: #222222;
  font-size: 0.9rem;
}

.report-menu-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.report-menu-item:hover {
  background-color: #f5f5f5;
  font-weight: bold;
}

.report-menu-item.delete:hover {
  background-color: #ffebee;
  color: #d32f2f;
}

.comment-report-menu {
  position: absolute;
  bottom: 15px;
  right: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 998;
  min-width: 100px;
  color: #222222;
  font-size: 0.9rem;
}

.comment-report-menu-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.comment-report-menu-item:hover {
  background-color: #f5f5f5;
  font-weight: bold;
}

.comment-report-menu-item.delete:hover {
  background-color: #ffebee;
  color: #d32f2f;
}

.invisible {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s linear;
}

.visible {
  visibility: visible;
  opacity: 1;
}

/* Account page styles */
.account-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 20px auto;
  max-width: 1200px;
  padding: 20px;
}

.account-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.account-avatar-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
}

.account-avatar {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-overlay:hover {
  background: rgba(0,0,0,0.7);
}

.avatar-upload-label {
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-name {
  font-size: 24px;
  margin: 0;
}

.account-date {
  font-size: 14px;
  color: #696969;
  margin: 0;
}

.account-tabs {
  margin-top: 20px;
}

.tab-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #eee;
}

.tab-list li a {
  padding: 12px 24px;
  color: #666;
  text-decoration: none;
  display: block;
  border-bottom: 2px solid transparent;
}

.tab-list li a.active {
  color: #17bebb;
  border-bottom-color: #17bebb;
}

.logout-tab {
  color: #d32f2f !important;
  margin-left: auto;
}

/* Account tabs styles */
.tab-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.tab-nav {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 0 20px;
}

.tab-btn {
  padding: 15px 25px;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  font-size: 1.3rem;
  position: relative;
  transition: all 0.3s ease;
}

.tab-btn.active {
  color: #17bebb;
  font-weight: bold;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #17bebb;
}

.logout-btn {
  margin-left: auto;
  text-decoration: none;
  padding: 15px 25px;
  transition: color 0.3s ease;
  font-size: 1.3rem;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
}

.logout-btn:hover {
  color: #c82333;
}

.tab-content {
  padding: 20px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.info-card {
  background: white;
  border-radius: 8px;
}

/* Statistics styles */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-number {
  display: block;
  font-size: 35px;
  font-weight: bold;
  color: #ffcb24;
  margin-top: 10px;
}

.stat-label {
  color: #666;
  margin-top: 8px;
  font-size: 20px;
}

.info-card > table > tbody > tr > td, .birthday-display > p {
  font-size: 1.1rem;
}

.account-info-label {
  font-weight: bold;
}

.info-card > h3 {
  font-size: 1.2rem;
  font-weight: bold;
}

.preference-item > label {
  font-size: 1.2rem;
}

/* Posts grid styles */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.post-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post-card h4 {
  margin: 0 0 10px 0;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.post-date {
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.post-stats {
  margin: 10px 0;
  display: flex;
  gap: 15px;
}

.view-post-btn {
  display: inline-block;
  padding: 8px 1.3rem;
  background: #ffcb24;
  color: #333333;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.view-post-btn:hover {
  background: #16aca9;
}

/* Preferences styles */
.preference-item {
  margin: 15px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.save-preferences-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background: #ffcb24;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.save-preferences-btn:hover {
  background: #16aca9;
}

/* Birthday button styles */
.add-birthday-btn, .edit-birthday-btn {
  background: none;
  border: none;
  color: #ffcb24;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.add-birthday-btn:hover, .edit-birthday-btn:hover {
  background: rgba(129, 42, 42, 0.1);
}

.birthday-display {
  display: flex;
  align-items: center;
  gap: 10px;
}


.birthday-input {
  width: 100%;
  padding: 8px;
  margin: 15px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.cancel-btn {
  padding: 8px 1.3rem;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.save-btn {
  padding: 8px 1.3rem;
  background: #ffcb24;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Password button styles */
.edit-password-btn {
  background: none;
  border: none;
  color: #ffcb24;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.edit-password-btn:hover {
  background: rgba(129, 42, 42, 0.1);
}

/* Password form styles */
.password-form {
  margin: 20px 0;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}



.like.icon.active svg {
  fill: #17bebb;
}

.dislike.icon.active svg {
  fill: rgb(40, 0, 151);
}

.like.icon, .dislike.icon {
  cursor: pointer;
}

.like.icon svg, .dislike.icon svg {
  transition: fill 0.3s ease;
}

.terms-container {
  max-width: 800px;
  color: #333;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 2rem max(2rem, calc((100% - 800px) / 2));
  padding: 1rem 2rem;
  box-sizing: border-box;
}

.password-input {
  width: 95%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.password-input:focus {
  outline: none;
  border-color: #17bebb;
  box-shadow: 0 0 0 2px rgba(129, 42, 42, 0.1);
}

.password-error {
  background-color: #ffebee;
  color: #d32f2f;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.password-hint {
  margin: 5px 0;
  color: #666;
  font-size: 0.75rem;
  font-weight: 300;
}

.error-message {
  margin: 0;
  font-size: 0.9rem;
}

/* 搜尋結果樣式 */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-height: 400px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}

.search-result-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-result-item:hover {
  background: #f5f5f5;
}

.search-result-title {
  font-weight: bold;
  margin: 0;
}

.search-result-source {
  color: #666;
  font-size: 0.9em;
  margin: 0;
}

/* 搜尋結果頁面樣式 */
.search-results-header {
  padding: 20px 0;
  background: white;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
}

.search-results-header h2 {
  margin-left: 20px;
  margin-bottom: 20px;
  margin-top: 0;
  color: #333;
}

.search-results-header p {
  margin: 10px 0 0 20px;
  color: #666;
}

.no-results {
  text-align: center;
  padding: 40px;
  background: white;
  border-radius: 8px;
}

.back-home {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background: #ffcb24;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.back-home:hover {
  background: #16aca9;
}

.expired-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 128, 128, 0.5);
  z-index: 1001;
  pointer-events: none;
  border-radius: 10px;
}

.comment-edit-button {
  cursor: pointer;
  padding: 5px;
  display: flex;
  transition: all 0.3s ease;
}

.comment-edit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
}

.comment-change-area {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.comment-report-button {
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  margin-bottom: 15px;
}

.comment-report-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
}

.comment-edit-menu {
  position: absolute;
  bottom: 30px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 998;
  min-width: 120px;
}

.post-edit-menu {
  position: absolute;
  top: 30px;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 998;
  min-width: 120px;
}


.comment-edit-item, .post-edit-item {
  padding: 8px 1.3rem;
  cursor: pointer;
  transition: background-color 0.2s;
  color: #222222;
  font-size: 0.9rem;
  z-index: 998;
  }

.comment-edit-item:hover, .post-edit-item:hover {
  background-color: rgba(0, 0,0, 0.05);
}

.comment-edit-item.delete:hover, .post-edit-item.delete:hover {
  color: #d32f2f;
}

.invisible {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.05s linear;
}

.report-reason-item {
  padding: 10px;
  margin: 5px 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.report-reason-item:hover {
  background-color: #f0f0f0;
}

.report-reason-item.selected {
  background-color: #1e9997;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.modal-buttons button {
  padding: 8px 1.3rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cancel-report {
  background-color: #f0f0f0;
}

.submit-report {
  background-color: #ffcb24;
  color: white;
}

.modal-textarea {
  min-height: 100px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  font-size: 14px;
}

.submit-edit {
  background-color: #ffcb24;
  color: white;
  padding: 8px 1.3rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-edit:hover {
  background-color: #16aca9;
}

.cancel-edit {
  background-color: #f0f0f0;
  padding: 8px 1.3rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-edit:hover {
  background-color: #e0e0e0;
}

.contact-form {
  width: 100%;
}

.contact-form .s-input:focus {
  outline: none;
  border-color: #ffcb24;
  box-shadow: 0 0 0 2px rgba(129, 42, 42, 0.1);
}

.contact-form .s-input::placeholder {
  color: #999;
  font-size: 0.9rem;
}

.contact-textarea {
  min-height: 150px;
  resize: vertical;
  font-family: inherit;
}

.contact-form-container {
  max-width: 800px;
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 2rem auto;
  padding: 2rem;
  box-sizing: border-box;
}

.contact-title {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.contact-form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.contact-form .s-input {
  display: block;
  padding: 1rem;
  width: 100%;
  border: 1px solid #b6b6b6;
  border-radius: 4px;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.contact-textarea {
  min-height: 150px;
  max-height: 300px;
  resize: vertical;
  font-family: inherit;
}


.notification-box {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.95);
  padding: 15px 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  text-align: center;
  color: #333;
  font-size: 1rem;
  min-width: 300px;
  max-width: 80%;
}

.notification-box.success {
  border-left: 4px solid #ffcb24;
}

.notification-box.error {
  border-left: 4px solid #ff4444;
  background-color: #fff1f1;
}

.notification-box.show {
  display: block;
  animation: fadeInOut 5s ease-in-out forwards;
}

.notification-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-close:hover {
  color: #333;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -20px); }
  10% { opacity: 1; transform: translate(-50%, 0); }
  90% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}

.notification-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.notification-icon img {
  width: 100%;
  height: 100%;
}

.notification-count {
  position: absolute;
  top: -9px;
  right: -8px;
  background-color: #ffcb24;
  color: white;
  border-radius: 50%;
  border: 1px solid white;
  padding: 2px 2px;
  font-size: 10px;
  min-width: 10px;
  text-align: center;
}

.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 300px;
  background-color: rgb(243, 243, 243);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}

.notification-header {
  padding: 12px 1.3rem;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-header h3 {
  margin: 0;
  font-size: 1.3rem;
}

.mark-all-read {
  background: none;
  border: none;
  color: #ffcb24;
  cursor: pointer;
  font-size: 14px;
}

.notification-list {
  padding: 8px 0;
}

.notification-time {
  font-size: 12px;
  color: #666;
  margin-left: 14px;
}

.no-notifications {
  padding: 1.3rem;
  text-align: center;
  color: #666;
}

.cookie-banner {
  width: 100%;
  background-color: #ffcb24;
  color: #222222;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.cookie-content {
  flex-grow: 1;
  text-align: center;
}

.cookie-close {
  background: none;
  border: none;
  color: #222222;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  margin-right: 10px;
}

.cookie-close:hover {
  opacity: 0.8;
}

.cookie-banner.hidden {
  display: none;
}

 
.scroll-sentinel {
  height: 1px;
  margin-bottom: 20px;
  visibility: hidden;
}

.deal-info-title > h2{
  white-space: nowrap;
  
}

.post-url-button {
  grid-area: 5/4/6/5;
  text-align: end;
  position: relative;
  overflow: hidden;
}

.post-url-link {
  display: inline-block;
  padding: 8px 16px;
  background-color: #ffcb24;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid #ffcb24;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.physical-location-link {
  display: inline-block;
  padding: 8px 16px;
  background-color: #ffffff;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid #333;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-url-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ffcb24, #ffd700);
  z-index: -1;
  transition: opacity 0.3s ease;
  opacity: 0;
  border-radius: 4px;
}

.post-url-link:hover {
  background-color: #f0ba07;
  color: #333;
  border-color: #ffcb24;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.post-url-link:hover::before {
  opacity: 1;
}

.post-url-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



.deal-content-box .post-url-link {
  padding: 10px 20px;
  font-size: 1.1em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.deal-content-box .post-url-link:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.share-button-container {
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.share-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.share-button svg {
  width: 16px;
  height: 16px;
}

.share-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  z-index: 100;
  display: none;
  min-width: 120px;
}

.share-menu.visible {
  display: block;
}

.share-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s ease;
  color: #333;
}

.share-menu-item:hover {
  background-color: #f8f9fa;
}

.share-menu-item svg {
  width: 16px;
  height: 16px;
}

.copy-toast {
  position: fixed;
  top: 30%;
  left: 50%;
  font-size: 1.4rem;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 998;
  animation: fadeInOut 3s ease-in-out;
  opacity: 0;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* Error Page Styles */
.error-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 20px;
  padding-top: 10vh; /* 將內容從頂部向下移動10%的視窗高度 */
}

.error-content {
  text-align: center;
  max-width: 600px;
  padding: 40px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.error-content h1 {
  font-size: 48px;
  color: #dc3545;
  margin-bottom: 20px;
}

.error-content p {
  font-size: 18px;
  color: #6c757d;
  margin-bottom: 30px;
}

.redirect-message {
  font-size: 16px;
  color: #6c757d;
  margin-bottom: 20px;
}

.redirect-button {
  padding: 10px 20px;
  background-color: #ffcb24;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.redirect-button:hover {
  background-color: #f0ba07;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.redirect-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* NotificationBell Styles */
.notification-area {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
  justify-content: center;
}

.notification-icon {
  cursor: pointer;
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #FF4136;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dropdown {
  position: absolute;
  top: 30px;
  right: 0;
  width: 300px;
  max-height: 400px;
  overflow-y: auto;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.notification-dropdown.invisible {
  display: none;
}

.notification-dropdown.visible {
  display: block;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.mark-all-read {
  border: none;
  background-color: transparent;
  color: #1877F2;
  cursor: pointer;
  font-size: 12px;
}

.notification-list {
  padding: 0;
}

.notification-item {
  position: relative;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.notification-item:hover {
  background-color: #f5f5f5;
}

.notification-item.unread {
  background-color: #E8F4FD;
}

.unread-dot {
  position: absolute;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1877F2;
}

.notification-content {
  margin-bottom: 5px;
  font-size: 14px;
  padding-left: 10px;
}

.notification-time {
  font-size: 12px;
  color: #777;
  text-align: right;
}

.no-notifications {
  padding: 20px;
  text-align: center;
  color: #777;
  font-size: 14px;
}

.edit-comment-container {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  position: relative;
}

.edit-comment-container h2 {
  margin-bottom: 15px;
  color: #333;
  font-size: 1.5rem;
}

.edit-comment-container textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  font-family: inherit;
  font-size: 16px;
  resize: vertical;
}

.edit-comment-container textarea:focus {
  outline: none;
  border-color: #ffcb24;
  box-shadow: 0 0 0 2px rgba(255, 203, 36, 0.1);
}

.edit-comment-container button {
  background-color: #ffcb24;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.edit-comment-container button:hover {
  background-color: #16aca9;
}

/* 添加貼文按鈕樣式 */
.add-post-btn {
  text-decoration: none;
}

.add-post-circle {
  display: flex;
  align-items: center;
  background-color: #17bebe;
  color: white;
  border-radius: 50px;
  width: 30px;
  height: 30px;
  justify-content: center;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.add-post-circle:hover {
  width: 120px;
  border-radius: 30px;
}

.add-post-text {
  position: absolute;
  white-space: nowrap;
  opacity: 0;
  right: 20px;
  font-weight: 500;
  font-size: 14px;
  transition: opacity 0.3s ease;
}

.add-post-circle:hover .add-post-text {
  opacity: 1;
}

.add-post-circle svg {
  position: absolute;
  transition: left 0.3s ease;
}

.add-post-circle:hover svg {
  left: 15px;
}

/* 頭像裁剪模態框樣式 */
.avatar-crop-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.avatar-crop-content {
  background-color: white;
  border-radius: 8px;
  padding: 25px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.avatar-crop-content h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
  font-size: 1.5rem;
}

.avatar-editor-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.avatar-editor-controls {
  margin-bottom: 20px;
}

.avatar-control-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.avatar-control-group label {
  width: 60px;
  text-align: left;
  margin-right: 10px;
  font-weight: 500;
}

.avatar-control-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 5px;
  border-radius: 5px;
  background: #ddd;
  outline: none;
}

.avatar-control-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffcb24;
  cursor: pointer;
}

.avatar-control-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffcb24;
  cursor: pointer;
  border: none;
}

.avatar-editor-buttons {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.avatar-cancel-btn,
.avatar-apply-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.avatar-cancel-btn {
  background-color: #f0f0f0;
  color: #333;
}

.avatar-cancel-btn:hover {
  background-color: #ddd;
}

.avatar-apply-btn {
  background-color: #ffcb24;
  color: white;
}

.avatar-apply-btn:hover {
  background-color: #17bebb;
}

.avatar-cancel-btn:disabled,
.avatar-apply-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.avatar-control-slider:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 編輯文章按鈕樣式 */
.edit-post-btn {
  color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-post-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 添加貼文編輯容器樣式 */
.post-edit-container {
  position: relative;
  display: inline-block;
  z-index: 999;
}

/* ModifyPost 載入容器樣式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 2rem;
}

.loading-container .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #17bebb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.loading-container p {
  color: #666;
  font-size: 1.1rem;
  margin: 0;
}

/* 通知樣式 */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  z-index: 9999;
  max-width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease-out;
}

.notification.success {
  background-color: #10b981;
}

.notification.error {
  background-color: #ef4444;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 添加點讚和倒讚圖示樣式 */
.like-svg-hover:hover {
  fill: #888888 !important;
  stroke: #000000 !important;
}


.dislike-svg-hover:hover {
  fill: #888888 !important;
  stroke: #000000 !important;
}