.page-cover .profile-box {
	position: absolute;
	left: 50%;
	bottom: 70px;
	transform: translateX(-50%);
	padding: 20px 30px;
	text-align: center;
}

.place-images-slide {
	width: 100vw;
}

.place-images-slide .slick-track {
	min-width: 100%;
}

.place-images-slide .slick-active {
	width: 100vw !important;
}

#uploadPlacePhotoPreviewDIV .previewImageCol {
	aspect-ratio: 1 / 1; 
	border-radius: 5px; 
	padding: calc(var(--bs-gutter-x) / 2); 
	margin-bottom: 25px;
}

#uploadPreviewDIV .previewImageCol .previewImageDeleteIcon, #uploadPlacePhotoPreviewDIV .previewImageCol .previewImageDeleteIcon {
	/*display: none;*/
	position: absolute;
	bottom: -35%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

#uploadPreviewDIV .previewImageCol:hover .previewImageDeleteIcon, #uploadPlacePhotoPreviewDIV .previewImageCol:hover .previewImageDeleteIcon {
	/*display: block;*/
}

#uploadPreviewDIV .previewImageCol .previewImageDIV, #uploadPlacePhotoPreviewDIV .previewImageCol .previewImageDIV {
	height: 100%; 
	border-radius: 5px;
	transition: all 0.3s ease;
}

#uploadPreviewDIV .previewImageCol:hover .previewImageDIV, #uploadPlacePhotoPreviewDIV .previewImageCol:hover .previewImageDIV {
	/*filter: blur(5px);*/
}

#uploadPreviewDIV .previewImageCol .previewImageDIV:hover, #uploadPlacePhotoPreviewDIV .previewImageCol .previewImageDIV:hover {
	transform: scale(1.1);
}

.post-panel .post-wrapper .post-details .img-wrapper .post-image-box {
	max-height: 500px;
}

.page-content .content-center:not(.width-abjust) {
	width: 66.6666666667%;
}
.page-content .content-left {
	width: 33.3333333333%;
}

.time-period-group {
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	border: 1px solid transparent;
}

.time-period-group:not(.active):hover {
	border: 1px solid #658b17;
}

.time-period-group.active {
	background-color: #b7f240;
	border: 1px solid #b7f240;
	cursor: default;
}

.availability-time {
	font-weight: 500;
	font-size: 13px;
	width: 100%;
	margin: 1px;
	text-align: center;
}

.availability-time.unavailable {
	background-color: #eee;
}

.availability-time.available {
	background-color: #b7f240;
}

.profile-menu .user-img {
	border-radius: 10px;
	width: 44px;
	height: 44px;
	/*margin-right: 16px;*/
	margin: auto;
	position: relative;
	background-size: 80% !important;
}

/* 天氣圖示的 tooltip：沿用原本天氣區的深藍色（箭頭同樣用 --sb-tip-bg）
   原本寫法為 style.css 的 .weather-icon .tooltip-cls（白底）＋箭頭 #1b5397，
   現整組改為深藍底＋白字；若要改回白底，把 --sb-tip-bg 改為 #ffffff、
   --sb-tip-color 改為 #51595e 即可 */
.sb-tip[data-tip-theme="weather"] {
    --sb-tip-bg: #1b5397;
    --sb-tip-color: #ffffff;
}

/* 天氣 tooltip 內容：左邊天氣圖示、右邊日期 / 氣溫 / 天氣簡報
   浮層掛在 body 底下，套不到 .weather-icon 的規則，所以在這裡另外定義尺寸與底色 */
.weather-tip {
    display: flex;
    align-items: center;
    gap: 12px;
}
.weather-tip-icon {
    flex: 0 0 auto;
}
/* 底色用半透明白：浮層本身已是深藍（--sb-tip-bg），圖示再疊 #1b5397 會看不清楚 */
.weather-tip-icon img {
    display: block;
    height: 46px;
    width: auto;
    padding: 3px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.14);
}
.weather-tip-info {
    min-width: 0;
}
.weather-tip-date {
    font-weight: 600;
    white-space: nowrap;
}
.weather-tip-temp {
    white-space: nowrap;
}
.weather-tip-desc {
    opacity: 0.85;
	font-size: 12px;
}

.profile-menu .user-img.sport-icon-img:not(:hover, .active) {
	filter: grayscale(1);
	opacity: 0.2;
}

.conversation-panel .friend-section .friend-list .friend-box .user-img {
	border-radius: 10px;
}

.conversation-panel .friend-section .friend-list .friend-box .user-img.sport-icon-img {
	background-size: 80% !important;
}

.setting-dropdown ul li {
	padding: 0px;
	border-top: none !important;
	font-size: 20px;
}

#eventRatingDiv {
	padding: 5px 0px;
}

#eventRatingDiv .ratings, .setting-btn .ratings {
	display: flex;
	align-items: center;
	font-size: 24px;
}

#eventRatingDiv .ratings li i {
	cursor: pointer;
}

#eventRatingDiv .ratings li i.far, .setting-btn .ratings li i.far {
	color: #647589;
	opacity: 0.7;
}

#eventRatingDiv .ratings li i.fas, .setting-btn .ratings li i.fas {
	color: #ffc107;
}

.place-images-slide .img-part .img-remark {
	background-color: #0002;
	padding: 10px;
	border-radius: 5px;
	margin-top: 10px;
	max-width: 84%;
	color: #ddd;
}

.place-images-slide .img-part .img-remark a {
	color: #ddd;
}

.review-statement .review-content .place-remark {
	font-family: "Roboto", sans-serif;
	font-size: calc(14px + 2 * (100vw - 320px) / 1600);
	color: #51595e;
	word-break: break-word;
}

.review-statement .review-content .place-remark h4 {
	text-transform: capitalize;
	color: rgba(100, 117, 137, 0.7);
	font-weight: 400;
}

.btn-submit {
	display: flex;
	align-items: center;
}

.loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.img-overlay {
	position: absolute;
	top: 0px;
	min-width: 200px;
	max-width: 50%;
	background-color: #FFF7;
	border-radius: 5px;
	padding: 10px;
}

.weather-icon {
	min-width: 21px;
}

.weather-icon img {
	background-color: #1b5397;
	border-radius: 5px;
	padding: 3px;
}

#postImageModel {
	padding: 0px !important;
}

#postImageModel .modal-dialog {
	max-width: 84vw !important;
	margin: auto;
}

#postImageModel .modal-dialog .modal-content {
	max-width: max-content;
	margin: auto;
}

#placeCommentAddModel .emojionearea .emojionearea-editor:empty::before {
	content: "【分享小貼士】\A唔知分享啲咩？試下從呢幾方面入手，幫其他夥伴做足準備：\A\A✅ 場地狀況： 地面平唔平？會唔會好滑？界線清唔清晰？\A\A🚽 設施配套： 有冇洗手間、更衣室、飲水機？乾唔乾淨？\A\A💡 環境光線： 日頭會唔會好曬？夜晚燈光夠唔夠光？\A\A🚗 交通泊車： 附近有冇巴士站/地鐵站？泊車方唔方便？\A\A🥤 周邊補給： 附近有冇便利店或者嘢飲賣？\A\A隨手影張相，分享更全面！";
	white-space: pre-wrap;  /* 關鍵：保留換行和空白 */
	color: #999;
	font-style: italic;
	display: block;
	padding: 8px;
}

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

@media (max-width: 767px) {
	.post-panel .post-wrapper .post-details .img-wrapper .post-image-box {
		max-height: 300px;
	}
	
	.profile-menu .user-img {
		width: 36px;
		height: 36px;
	}
}

@media (max-width: 576px) {
	#uploadPreviewDIV .previewImageCol .previewImageDeleteIcon, #uploadPlacePhotoPreviewDIV .previewImageCol .previewImageDeleteIcon {
		bottom: -50% !important;
	}
}

/* ===== 場地相片︰相片資訊預設隱藏，按下圖示才顯示 ===== */
#placeImageModel .place-images-slide .img-part td > .photo-info-btn,
#placeImageModel .place-images-slide .img-part .img-overlay > .photo-info-close-btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #0009;
	color: #fff;
	cursor: pointer;
}

#placeImageModel .place-images-slide .img-part td > .photo-info-btn {
	top: 8px;
	left: 8px;
}

#placeImageModel .place-images-slide .img-part td > .photo-info-btn:hover,
#placeImageModel .place-images-slide .img-part .img-overlay > .photo-info-close-btn:hover {
	background-color: #000c;
}

/* 左上角預留關閉鈕的位置 */
#placeImageModel .place-images-slide .img-part .img-overlay {
	min-width: 220px;
	max-width: 84%;
	padding: 40px 12px 10px;
}

#placeImageModel .place-images-slide .img-part .img-overlay > .photo-info-close-btn {
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	background-color: #0006;
}

/* ===== 場地相片︰相片尺寸（高度 80dvh；闊超出 80dvw 時由 JS 按比例縮小） ===== */
#placeImageModel .image-gallery .img-part img {
	width: auto;
	height: 80dvh;
	min-width: 300px;
	min-height: 100px;
	max-width: 80dvw;
	max-height: 80dvh;
	object-fit: fill; /* 准許圖片變形 */
}

#placeImageModel .place-images-slide .img-part .img-overlay .external-link {
	color: #212529;
}