.header-container {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #f4f4f4;
    z-index: 1000;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
	border-bottom: 1px solid #0A5F4B;
}

.header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center; 
    padding: 10px 50px; 
    /*gap: 600px;*/
}

.header-icon {
	/*
    width: 32px;
    height: 32px;
	*/
	width: 24px;
    height: 24px;
}

.header-logo {
    /*width: 100px;*/
    height: 32px;
}

.footer-container {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #f4f4f4;
    z-index: 1000;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
	border-top: 1px solid #0A5F4B;
}

.footer-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center; 
    padding-top: 2px; 
	padding-bottom: 2px; 
    /*gap: 200px;*/
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px 20px; 
	cursor:pointer;
}

.footer-text {
    margin-top: 2px;
    font-family: 'Noto Sans HK', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #757575;
}

.footer-text.active {
    color: #0d775e;
    font-weight: bold;
}

.footer-cart {
    background-color: white;
    padding-left: 5px; 
	padding-right: 5px; 
	padding-top: 5px; 
	padding-bottom: 5px; 
    border-radius: 20px; 
    border: 1px solid red;
    position: relative;
    display: inline-block; 
}

.footer-badge {
    background-color: red;
    position: absolute;
    top: 8px;
    right: -20px;
    transform: translate(-50%, -50%);
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center; 
    color: white; 
    font-size: 12px;
}

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

body {
	/*
    padding-top: 100px;
    padding-bottom: 120px;
	*/
	padding-top: 10px;
    padding-bottom: 10px;
}

.container {
    padding-left: 0;
    padding-right: 0;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
    /*margin-top: 80px;*/
}

/* Slider */
.carousel-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px; /* Fixed height */
    overflow: hidden; /* Prevent overflow of images */
    position: relative; /* Ensure positioning context */
}

.carousel-item {
    flex: 0 0 auto; /* Prevent item from stretching */
    width: 100%; /* Takes full container width */
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Center image horizontally */
    align-items: center; /* Center image vertically */
    opacity: 0.5; /* Non-active items are slightly transparent */
    transition: opacity 0.5s ease; /* Smooth transition effect */
}

.carousel-item.active {
    opacity: 1; /* Full visibility for active item */
}

.carousel-item img {
    display: block; /* Treat the image as a block element */
    max-width: 100%; /* Image will not exceed its container width */
    height: auto; /* Maintain the aspect ratio of the image */
    max-height: 400px; /* Limit the image height to prevent overflow */
    object-fit: contain; /* Ensures the image fits within the container without distortion */
    margin: 0 auto; /* Center the image horizontally */
    transition: max-width 0.3s ease; /* Smooth width transition when active */
    position: relative; /* Ensure it’s centered relative to its parent */
}

.carousel-item.active img {
    max-width: 80%; /* Adjust as needed to make the active image take up more space */
    margin: 0 auto; /* Ensure it stays centered */
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
}

.carousel-indicators {
    display: flex;
    justify-content: center; /* Centers indicators horizontally */
    margin-top: 10px; /* Space between carousel and indicators */
}

.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    background-color: white; /* Default color for inactive dots */
    border-radius: 50%; /* Round shape */
    margin: 0 5px; /* Space between dots */
}

.carousel-indicators .active {
    background-color: black; /* Black for the active dot */
}

/* Promotion Section */
.promo-section {
    /*background: linear-gradient(0deg, #F5F5F5 0%, #F5F5F5 100%);*/
	background: lightgray 50% cover no-repeat;
	background-color: var(--background-page-secondary-green, #CFE4DF);
	background-image: url("../img/background/shortlisted.png");
    width: 100%;
    height: 100%;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}


.promo-title {
    color: #031813;
    font-size: 44px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 52.80px;
    word-wrap: break-word;
}

.promo-gallery {
    /*height: 359px;*/
}

.promo-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 2px solid #CFE4DF;
}

.promo-button {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 40px;
    border: 2px #0D775E solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-button:hover {
    background-color: #9a1f4a;
	border: 2px #2c2c2c solid;
}

.featured-section {
    /*background: linear-gradient(0deg, #F5F5F5 0%, #F5F5F5 100%);*/
	background-color: rgba(245,245,245,0.2);
	/*background: cover no-repeat;*/
	background-image: url("../img/background/shortlisted_pink.png");
    width: 100%;
    height: 100%;
}

.popular-section {
    /*background: linear-gradient(0deg, #F5F5F5 0%, #F5F5F5 100%);*/
	background-color: rgba(245,245,245,0.2);
	/*background: cover no-repeat;*/
	background-image: url("../img/background/popular.png");
    width: 100%;
    height: 100%;
}

.category-section {
    /*background: linear-gradient(0deg, #F5F5F5 0%, #F5F5F5 100%);*/
	background: lightgray 50% cover no-repeat;
	background-color: var(--background-page-secondary-green, #CFE4DF);
	background-image: url("../img/background/baby.png");
    width: 100%;
    height: 100%;
}

.category-section-2 {
    /*background: linear-gradient(0deg, #F5F5F5 0%, #F5F5F5 100%);*/
	background: lightgray 50% cover no-repeat;
	/*background-color: var(--background-page-secondary-green, #CFE4DF);*/
	background-image: url("../img/background/foodndrink.png");
    width: 100%;
    height: 100%;
}

.featured-button {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 40px;
    border: 2px #9a1f4a solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured-button:hover {
    background-color: #0D775E;
	border: 2px #053026 solid;
}

.category-button {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 40px;
    border: 2px #0D775E solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-button:hover {
    background-color: #9a1f4a;
	border: 2px #2c2c2c solid;
}

.promo-button-inner {
    width: 32px;
    height: 32px;
    position: relative;
}

.promo-button-arrow {
    width: 10px;
    height: 20px;
    position: absolute;
    border-radius: 2px;
    border: 2.5px solid #031813;
}

.button-container {
    display: inline-flex;
    gap: 16px; /* Space between buttons */
}


.button-container-category {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
}

/*
.button-more-categories {
    width: 192px;
    padding: 0px; 
    height: 60px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans HK', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    word-wrap: break-word;
    cursor: pointer; 
	color: var(--text-green-primary, #031813);
	box-shadow: 0px 5px 0px #053026;
}
*/

.button-more-categories {
    width: 192px;
    padding: 0px; 
    height: 60px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans HK', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    word-wrap: break-word;
    cursor: pointer; 
	color: var(--text-green-primary, #031813);
	background-color: #CFE4DF;
    border: 2px solid #053026;
	box-shadow: 0px 5px 0px #053026;
	transition: background-color .5s ease-in;
}

.button-more-categories:hover {
	color: #4d1025;
	background: white;
    border: 2px solid #4d1025;
	box-shadow: 0px 10px 0px #4d1025;
	transform: translateY(-10px);
}

.button-more-promos {
    width: 192px;
    padding: 0px; 
    height: 60px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans HK', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    word-wrap: break-word;
    cursor: pointer; 
	color: var(--text-green-primary, #4D1025);
	background-color: #f2d4df;
    border: 2px solid #4D1025;
	box-shadow: 0px 5px 0px #4D1025;
	transition: background-color .5s ease-in;
}

.button-more-promos:hover {
	color: #053026;
	background: white;
    border: 2px solid #053026;
	box-shadow: 0px 10px 0px #053026;
}



.button-more-category-product {
    width: 192px;
    padding: 0px; 
    height: 60px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans HK', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 120%;
    word-wrap: break-word;
    cursor: pointer; 
	color: var(--text-green-primary, #053026);
	background-color: #CFE4DF;
    border: 2px solid #053026;
	box-shadow: 0px 5px 0px ;
	transition: background-color .5s ease-in;
}

.button-more-category-product:hover {
	color: #4D1025;
	background: white;
    border: 2px solid #4D1025;
	box-shadow: 0px 10px 0px #4D1025;
}




.btn-more-inner {
    display: flex;
    align-items: center;
    gap: 8px; 
    color: black;
    text-decoration: none;
    cursor: pointer; 
}

.btn-more-inner:hover {
    color: black; 
}

.product-container {
	/*
    padding-left: 50px; /* Adjust the padding values as needed 
    padding-right: 50px;
	*/
}

.product-container-grey {
    padding-left: 50px; /* Adjust the padding values as needed */
    padding-right: 50px;
    background: linear-gradient(0deg, #F5F5F5 0%, #F5F5F5 100%);
}

/* Title styling */
.product-title {
    color: var(--text-purple-primary, #260813);
	/* Noto Sans HK/Bold/Display */
	font-family: "Noto Sans HK";
	font-size: 44px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%; /* 52.8px */
}

/* Product card styling */
.product-card {
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #76B8A8;
    text-align: left;
    margin-bottom: 16px;
}

/* Product image styling */
.product-image {
    width: 100%;
    height: auto;
}

/* Product info styling */
.product-info {
    padding: 16px;
    gap: 12px;
}

/* Category badge styling */
.product-category {
    padding: 4px 16px;
    border-radius: 16px;
    border: 1px solid #0D775E;
	color: var(--text-green-secondary, #073D30);
	/* Noto Sans HK/Regular/H5 */
	font-family: "Noto Sans HK";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 14.4px */
}

/* Product name styling */
.product-name {
    color: var(--text-green-primary, #031813);
	/* Noto Sans HK/Bold/H3 */
	font-family: "Noto Sans HK";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%; /* 24px */
}

/* Price styling */
.price-symbol {
	color: var(--text-green-brand, #0D775E);
	font-size: 30px;
}

.price-value {
    color: var(--text-green-brand, #0D775E);
	font-size: 30px;
}

/* 404 Page */
.error-message {
    text-align: center;
    padding: 64px;
}

.error-text {
    color: #C0275D;
    font-family: 'Baloo', sans-serif;
    font-weight: 400;          
    line-height: 240px;     
    word-wrap: break-word;   
}

.main-error {
    font-size: 200px;         
    line-height: 240px;        
}

.letter-spacing {
    letter-spacing: 8px;       
}

.sub-error {
    font-size: 2rem;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    color: #031813;
    margin-top: 20px;  
    margin-bottom: 20px; 
}


.return-button {
    width: 100%;
    padding: 16px 196px;
    background: #0A5F4B;
    border-radius: 16px;
    border: 2px solid #053026; 
    display: flex;
    justify-content: center; 
    align-items: center;
}

.return-text {
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.2px; 
    word-wrap: break-word;
}


.container-error {
    display: flex;
    justify-content: center; 
    align-items: center;    
    height: 60vh;        
}

/* categories */
.categories-wrapper {
    padding-top: 50px;
    display: flex; 
    align-items: center;
}

.title {
    color: #073D30;
    font-size: 44px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 52.8px;
    word-wrap: break-word;
    margin-left: 20px;
}

.product-category-wrapper {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    width: 100%;
    height: 100%;
    padding-top: 20px;
}

.product-category-button-group {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 0;
    height: 44px;
}

.product-category-button {
    padding: 12px 20px 12px 24px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 1px solid;
    overflow: hidden;
}

.product-category-button-sort {
    background-color: #C0275D;
    border-color: #4D1025;
}

.product-category-button-brand {
    background-color: #ABE0D4;
    border-color: #053026;
}

.product-category-button-text {
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    color: #F5F5F5;
    line-height: 19.2px;
    word-wrap: break-word;
}

.product-category-button-brand .product-category-button-text {
    color: #031813;
}

.product-category-icon-wrapper {
    width: 20px;
    height: 20px;
    position: relative;
}

.product-category-icon {
    width: 13.75px;
    height: 7.5px;
    position: absolute;
    background-color: #F5E1E8;
    left: 3.12px;
    top: 6.88px;
}

.product-category-button-brand .product-category-icon {
    background-color: #031813;
}

.cart-icon img {
    width: 40px; /* Adjust icon size */
    height: auto; /* Maintain aspect ratio */
}

.product-page-container {
    width: 100%;
    display: flex;
    padding-left: 10px;
	padding-right: 10px;
    padding-top: 14px;
	padding-bottom: 32px;
}

.product-image-container {
    width: 480px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-product-image {
    width: 360px;
    height: 360px;
    padding: 12px;
    border-radius: 16px;
}

.thumbnail-container {
    display: flex;
    gap: 12px;
}

.thumbnail-image {
    width: 96px;
    height: 96px;
    padding: 12px;
    border-radius: 8px;
}

.product-info-container {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.product-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-page-category {
    max-width: 288px;
    height: 40px;
    border: 1px solid #0D775E;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #073D30;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
}

.product-page-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-page-title {
    color: #031813;
    font-size: 26px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
}

.product-page-price {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #C0275D;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
}

.product-page-currency-symbol {
    font-size: 34px;
}

.product-page-price-value {
    font-size: 34px;
}

.product-page-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-page-feature, .product-page-usage, .product-page-instructions, .product-page-notice {
    background: #F5F5F5;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid #0D775E;
}

/* promotion page */
.promo-page-gallery {
    width: 100%;
    height: auto;
    display: flex; 
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start; 
    gap: 30px;
    flex-wrap: wrap;
     padding-top: 30px;
     padding-left: 30px;
     padding-right: 30px;
}

.promo-page-card {
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #CFE4DF;
    display: flex; 
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.promo-page-image-container {
    flex: 1 0 45%; 
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.promo-page-image {
    align-self: stretch; 
    flex: 1 1 0;
}

.promo-page-image-container {
    margin: 0 auto;
}

/* Terms */
.terms-container {
    width: 100%;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    padding-top: 50px;
    padding-left: 250px;
    padding-right: 300px
}

.terms-section {
    min-height: 445px; /* Changed to min-height */
    display: flex;
    flex-direction: column; /* Keep items in a column */
    justify-content: flex-start; /* Align items to the start */
    align-items: stretch; /* Allow items to stretch */
    gap: 16px;
}


.terms-header {
    align-self: stretch;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.terms-number,
.terms-sub-number {
    text-align: center;
    color: #731738;
    font-size: 24px;
    font-family: "Noto Sans HK", sans-serif;
    font-weight: 700;
    line-height: 28.80px;
    word-wrap: break-word;
}

.terms-title {
    flex: 1 1 0;
    color: #731738;
    font-size: 24px;
    font-family: "Noto Sans HK", sans-serif;
    font-weight: 700;
    line-height: 28.80px;
    word-wrap: break-word;
}

.terms-content {
    min-height: 400px; /* Changed to min-height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch; /* Ensure items use full width */
    gap: 20px;
}


.terms-item {
    align-self: stretch;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.terms-description {
    flex: 1 1 0;
    text-align: justify;
    color: #031813;
    font-size: 16px;
    font-family: "Noto Sans HK", sans-serif;
    font-weight: 500;
    line-height: 19.20px;
    word-wrap: break-word;
}

.terms-indent {
    padding-left: 24px;
}

.box-container {
    width: 100%;

    padding-bottom: 20px;
    
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	width: 85%;
	padding-left:15%;
	position: absolute;
	bottom: 0;
}
  
  .box-header {
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
  }
  
  .box-button {
    flex: 1 1 0;
    height: 51px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    background: White;
    border-radius: 16px;
    border: 2px #0A5F4B solid;
    display: flex;
    justify-content: center;
    align-items: center;
	color: #0A5F4B;
  }
  
  .box-button:hover {
	  background: #CFE4DF;
  }
  
  .box-button-text {
    font-size: 16px;
    font-family: "Noto Sans HK", sans-serif;
    font-weight: 700;
    line-height: 19.20px;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  
/* Make sure profile-container is centered */
.profile-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap:24px;
}

/* Profile Header Styling */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /*max-width: 1200px;  Optional: set a max-width for the container */
    padding: 16px;
    margin: auto;
}

/* User Info Styling */
.profile-user-info {
    display: flex;
    align-items: center;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-right: 16px;
}

.profile-user-details {
    display: flex;
    flex-direction: column;
}

.profile-username, .profile-status {
    font-family: 'Noto Sans HK', sans-serif;
}

.profile-logout-button {
    background-color: #0A5F4B;
    border-radius: 16px;
    padding: 16px 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
	color: #EBF5F2;
    font-weight: 700;
}

.profile-logout-button:hover {
    color: #4D1025;
	background-color: #f2d4df;
    border: 2px solid #4D1025;
}


/* Menu Styling */
.profile-menu-row {
    display: flex;
    gap: 16px;
    justify-content: center; /* Centers buttons horizontally */
    width: 100%;
    max-width: 1140px; /* Optional: set a max-width for the row */
}

.profile-menu-item {
    padding: 16px 24px;
    background-color: #0A5F4B;
    border-radius: 16px;
    border: 2px solid #053026;
    color: #EBF5F2;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    width: 100%; /* Make buttons stretch to full width */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

.profile-menu-item:hover {
    /*background-color: #0D775E;  Hover effect */
	color: #4D1025;
	background-color: #f2d4df;
    border: 2px solid #4D1025;
}

.profile-menu-item-white-background {
    padding: 16px 24px;
    background-color: #ebf5f2;
    border: 2px solid #053026;
    border-radius: 16px;
    color: #053026;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    width: 100%; /* Make buttons stretch to full width */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

.profile-menu-item-white-background:hover {
    background-color: #CFE4DF;  /*Hover effect */
}

/* White Background for specific buttons */
.white-background {
    background-color: #FFFFFF;
    border: 2px solid #D3D3D3;
}

.dark-text {
    color: #1E1E1E;
}

/* Ensure everything is centered */
nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 600px; 
    
}

.centered-popup-container {
    position: fixed; /* Use fixed positioning to overlay the content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure the popup appears above other content */
}

.alert-message-container {
    position: fixed; /* Use fixed positioning to overlay the content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Ensure the popup appears above other content */
}

.profile-editor-container {
    width: 100%;
    max-width: 600px; /* Limit the width of the popup */
    padding: 48px 32px;
    background: #EBF5F2;
    border-radius: 16px;
    border: 2px solid #053026;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
}


/* The rest of your styles remain unchanged */


.profile-editor-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-editor-title {
    color: #073D30;
    font-size: 44px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 52.8px;
}

.close-button {
    width: 48px;
    height: 48px; 
    padding: 8px;
    border-radius: 40px;
    border: 2px solid #0D775E;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.close-icon {
    width: 22px; 
    height: 22px; 
}


.profile-editor-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-editor-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 88px;
}

.profile-editor-label {
    color: #073D30;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
}

.profile-editor-input {
    padding: 16px;
    background: #F5F5F5;
    border-radius: 8px;
    border: 1px solid #0D775E;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-editor-value {
    color: #0D775E;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
	padding: 16px;
    background: #F5F5F5;
    border-radius: 8px;
    border: 1px solid #0D775E;
}

.profile-editor-save {
    width: 100%;
    padding: 16px 24px;
    background: #0A5F4B;
    border-radius: 16px;
    border: 2px solid #053026;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-editor-save-content {
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    background: transparent; /* Make background transparent */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.profile-update-container {
    width: 100%;
    max-width: 600px; /* Limit the width of the popup */
    padding: 48px 32px;
    background: #EBF5F2;
    border-radius: 16px;
    border: 2px solid #053026;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
}

.profile-update-header {
    align-self: stretch;
    /*height: 53px;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.profile-update-title {
    align-self: stretch;
    text-align: center;
    color: #C0275D;
    font-size: 28px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 52.8px;
    word-wrap: break-word;
}

.profile-update-content {
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.confirm-button {
    width: 192px;
    padding: 16px 24px;
    border-radius: 16px;
    border: 2px solid #053026;
    background: transparent; /* Make the background transparent */
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.2px;
    cursor: pointer; /* Change cursor to pointer */
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirm-button:hover {
	color: #260813;
	background-color: #f2d4df;
}

.cart-container {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: inline-flex;
    padding-top: 10px;
}

.cart-item {
    width: 100%;
    padding: 16px;
    background: #F5F5F5;
    border-radius: 16px;
    border: 1px #0D775E solid;
    justify-content: space-between;
    align-items: flex-start;
    display: inline-flex;
}

.cart-item-details {
    flex: 1 1 0;
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    display: flex;
}

.cart-item-image {
    width: 120px;
    height: 120px;
    padding: 12px;
    border-radius: 8px;
}

.cart-item-info {
    align-self: stretch;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    display: inline-flex;
}

.cart-item-titles {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex;
}

.cart-item-brand,
.cart-item-name {
    align-self: stretch;
    color: #073D30;
    font-family: Noto Sans HK;
    word-wrap: break-word;
}

.cart-item-brand {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

.cart-item-name {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px;
}

.cart-item-price {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    display: inline-flex;
}

.cart-currency,
.cart-amount {
    color: #0D775E;
    font-size: 24px;
    font-family: Noto Sans HK;
    font-weight: 700;
    line-height: 28.8px;
}

.cart-item-actions {
    /*width: 376px;*/
	min-width: 10%;
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 120px;
    display: flex;
}

.cart-quantity {
    width: 172px;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: flex;
}

.cart-decrement,
.cart-increment {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 40px;
    border: 2px #0D775E solid;
    justify-content: center;
    align-items: center;
    display: flex;
}

.cart-decrement-icon,
.cart-increment-icon {
    width: 32px;
    height: 32px;
    position: relative;
}

.cart-quantity-box {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    background: #CFE4DF;
    border-radius: 8px;
    border: 1px #0D775E solid;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
}

.cart-quantity-value {
    color: #073D30;
    font-size: 20px;
    font-family: Noto Sans HK;
    font-weight: 500;
    line-height: 24px;
}

.cart-total-price {
    align-self: stretch;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    display: inline-flex;
}

.cart-delete-icon {
    width: 32px;
    height: 32px;
    position: relative;
}

.cart-total {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    display: inline-flex;
}

.cart-currency-red,
.cart-amount-red {
    color: #C0275D;
    font-size: 24px;
    font-family: Noto Sans HK;
    font-weight: 700;
    line-height: 28.8px;
}

.cart-discount {
    align-self: stretch;
    height: 88px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex;
}

.cart-discount-label {
    align-self: stretch;
    color: #073D30;
    font-size: 20px;
    font-family: Noto Sans HK;
    font-weight: 500;
    line-height: 24px;
}

.cart-discount-input {
    align-self: stretch;
    padding: 16px;
    background: #F5F5F5;
    border-radius: 8px;
    border: 1px #0D775E solid;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}

.cart-placeholder {
    flex: 1 1 0;
    color: #B3B3B3;
    font-size: 20px;
    font-family: Noto Sans HK;
    font-weight: 400;
    line-height: 24px;
}

.cart-summary {
    align-self: stretch;
    height: 136px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex;
}

.cart-summary-line {
    align-self: stretch;
    padding-top: 8px;
    padding-bottom: 8px;
    justify-content: flex-end;
    align-items: center;
    gap: 64px;
    display: inline-flex;
}

.cart-summary-label {
    color: #031813;
    font-size: 20px;
    font-family: Noto Sans HK;
    font-weight: 700;
    line-height: 24px;
}

.cart-summary-price {
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    display: flex;
}

.cart-summary-price .cart-currency,
.cart-summary-price .cart-amount {
    color: #031813;
    font-size: 20px;
    font-family: Noto Sans HK;
    font-weight: 700;
    line-height: 24px;
}

.cart-price-section {
    width: 100%;
    height: 100%;
    padding-left: 350px;
    padding-right: 350px;
}
/*
.price-symbol, .price-value {
    color: #0D775E;
    font-size: 36px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 43.2px;
}
*/

.org-price-value {
    color: #0D775E;
    font-size: 18px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 16.2px;
}

.btn-checkout {
    background: #EBF5F2;
}

.btn-product {
    background: #053026;
}

.btn-more {
    background: #CFE4DF;
}

.relative-container {
    position: relative;
}

.background-box {
    width: 192px;
    height: 48px;
    background: #EBF5F2;
    border-radius: 40px;
}

.background-box-grey {
    width: 665.83px;
    height: 48px;
    background: #F5F5F5;
    position: absolute;
    top: 48px;
}

.order-card-container {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: #F5F5F5;
    border: 2px #76B8A8 solid;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: inline-flex;
}

.order-status-indicator {
    height: 40px;
    padding-left: 24px;
    padding-right: 24px;
    background: #ABE0D4;
    border-radius: 12px;
    overflow: hidden;
    border: 1px #053026 solid;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.order-status-text {
    color: #031813;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    line-height: 19.20px;
}

.order-image-quantity-container {
    align-self: stretch;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    display: inline-flex;
}

.order-product-image {
    width: 200px;
    height: 200px;
    padding: 12px;
    border-radius: 8px;
}

.order-quantity-text {
    color: #0D775E;
    font-size: 36px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 43.20px;
}

.order-details-container {
    align-self: stretch;
    height: 178px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: flex;
}

.order-date-price-container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex;
}

.order-date-text {
    color: #031813;
    font-size: 24px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 28.80px;
}

.order-price-container {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    display: inline-flex;
}

.order-price-symbol,
.order-price-value {
    color: #C0275D;
    font-size: 36px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 43.20px;
}

.order-phone-number {
    color: #031813;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 19.20px;
}

.order-detail-button {
    align-self: stretch;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    background: #0A5F4B;
    border-radius: 16px;
    border: 2px #053026 solid;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.order-detail-button-text {
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.20px;
}

.order-detail-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding: 16px 24px;
    background: #0A5F4B;
    border-radius: 16px;
    border: 2px solid #053026;
}

.button-text {
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK';
    font-weight: 700;
    line-height: 19.2px;
}

.details-container {
    width: 100%;
    height: 100%;
    padding-top: 50px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    display: inline-flex;
}

.details-header {
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}

.details-info {
    width: 1120px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: inline-flex;
}

.details-date {
    color: #031813;
    font-size: 24px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 28.80px;
    word-wrap: break-word;
}

.details-order-number {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    display: inline-flex;
}

.details-label {
    color: #031813;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 24px;
}

.details-button {
    padding: 16px 12px;
    border-radius: 16px;
    border: 2px #053026 solid;
    justify-content: center;
    align-items: center;
    display: flex;
	min-width: 200px;
}

.details-button-label {
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 18.20px;
    word-wrap: break-word;
}

.details-product-list {
    align-self: stretch;
    height: 416px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: flex;
}

.details-product-info {
	min-width: 402px; 
	align-self: stretch; 
	justify-content: flex-start; 
	align-items: center; 
	gap: 40px; 
	display: flex;
}

.details-product-item {
    align-self: stretch;
    justify-content: space-between;
    align-items: flex-start;
    display: inline-flex;
}

.details-product-image {
    width: 200px;
    height: 200px;
    padding: 12px;
    border-radius: 8px;
}

.details-product-details {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: inline-flex;
}

.details-product-title {
    color: #073D30;
    font-size: 24px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 28.80px;
    word-wrap: break-word;
}

.details-price-info {
    justify-content: flex-end;
    align-items: center;
    display: flex;
}

.details-price {
    justify-content: flex-end;
    align-items: center;
    display: flex;
}

.details-qty {
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: flex;
}

.details-total-price {
    color: #031813;
    font-size: 24px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 28.80px;
    word-wrap: break-word;
}

.details-summary {
    align-self: stretch;
    height: 168px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    display: flex;
}

.details-summary-item {
    align-self: stretch;
	padding-left: 65%;
    padding-top: 8px;
    padding-bottom: 8px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 64px;
    display: inline-flex;
}

.details-final-total {
    align-self: stretch;
    height: 64px;
	padding-left: 65%;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 2px #0D775E dotted;
    justify-content: space-between;
    align-items: flex-start;
    gap: 64px;
    display: inline-flex;
}

.details-final-total-label {
    color: #031813;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 24px;
    word-wrap: break-word;
}

.details-final-total-amount {
    color: #073D30;
    font-size: 36px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 43.20px;
    word-wrap: break-word;
}

.search-container {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    background: #F5F5F5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px; 
    z-index: 1000;
}

.search-header {
    height: 70px;
    align-items: center;
	justify-content: center;
    display: flex;
    width: 100%; 
}


.search-item {
	position: relative;
    display: inline-block;
}

.search-item input {
    height: 48px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px #073D30 solid;



	padding-left: 48px;
	padding-right: 48px;
}

.search-icon {
	/*
    width: 32px;
    height: 32px;
    position: relative;*/
	position: absolute;
	top: 0;
	left: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
	padding-top: 8px;
	padding-left: 16%;
}

.search-text {
    color: #031813;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.search-clear {
    color: #073D30;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 24px;
    word-wrap: break-word;
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	padding-top: 12px;
	padding-right: 16%;
}

.login-container {
    width: 100%;
    height: 100%;
    padding-top: 50px;
    padding-bottom: 32px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*gap: 64px;*/
    display: inline-flex;
}

.login-header {
    text-align: center;
    color: var(--text-purple-brand, #C0275D);
	text-align: center;
	/* Noto Sans HK/Bold/Display */
	font-family: "Noto Sans HK";
	font-size: 44px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%; /* 52.8px */
}

.login-content {
    align-self: stretch;
    height: 436px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /*gap: 20px;*/
    display: flex;
}

.login-form {
    align-self: stretch;
    height: 243px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    display: flex;
}

.login-input {
    align-self: stretch;
    height: 88px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex;
}

.login-title {
	color: var(--text-green-secondary, #073D30);

	/* Noto Sans HK/Medium/H3 */
	font-family: "Noto Sans HK";
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 24px */
}

.input-field {
    align-self: stretch;
    padding: 16px;
    background: #F5F5F5;
    border-radius: 8px;
    overflow: hidden;
    border: 1px #0D775E solid;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
    /*color: #B3B3B3;*/
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word;
}

.forgot-password {
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 2px #053026 solid;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.login-actions {
    align-self: stretch;
    height: 153px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    display: flex;
}

.login-button {
    align-self: stretch;
    padding-top: 16px;
    padding-bottom: 16px;
    background: #0A5F4B;
    border-radius: 16px;
    border: 2px #053026 solid;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.20px;
}

.login-button:hover {
	color: #260813;
	background-color: #f2d4df;
}

.login-register {
    align-self: stretch;
    height: 78px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: flex;
}

.register-button {
    align-self: stretch;

    padding-top: 16px;
    padding-bottom: 16px;
    border-radius: 16px;
    border: 2px #053026 solid;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.20px;
    word-wrap: break-word;
}

.register-button:hover {
	color: #031813;
	background-color: #cfe4df;
}

.register-container {
    width: 100%;
    height: 100%;
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.register-title {
    text-align: center;
    color: #C0275D;
    font-size: 44px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 70.40px;
    word-wrap: break-word;
}

.register-form {
    align-self: stretch;
    height: 728px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}

.form-field {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.field-label {
    align-self: stretch;
    color: #073D30;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 24px;
    word-wrap: break-word;
}

.input-container {
    align-self: stretch;
    padding: 16px;
    background: #F5F5F5;
    border-radius: 8px;
    overflow: hidden;
    border: 1px #0D775E solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-placeholder {
    flex: 1;
    color: #B3B3B3;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.password-icon {
    width: 24px;
    height: 24px;
    position: relative;
}

.password-info {
    color: #1E1E1E;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    line-height: 19.20px;
    word-wrap: break-word;
}

.terms-container {
	align-self: stretch;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terms-checkbox {
    background: #0A5F4B;
}

.terms-text {
    flex: 1;
    color: #031813;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 19.20px;
    word-wrap: break-word;
	width:100%;
}

.register-button-container {
    align-self: stretch;
    height: 102px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    padding-bottom: 250px;
}

.register-button {
    align-self: stretch;
    padding: 16px;
    background: #0A5F4B;
    border-radius: 16px;
    border: 2px #053026 solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.register-button {
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.20px;
    word-wrap: break-word;
}

.login-prompt {
    align-self: stretch;
    padding: 4px;
    border-bottom: 2px #053026 solid;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 19.20px;
    word-wrap: break-word;
}

.manage-container { 
    width: 100%;
    max-width: 900px; 
    padding: 48px 32px;
    background: #EBF5F2;
    border-radius: 16px;
    border: 2px solid #053026;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
}

.manage-title {
    color: #073D30;
    font-size: 44px;
    font-family: 'Noto Sans HK';
    font-weight: 700;
    line-height: 52.8px;
}

.manage-close-button {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 40px;
    border: 2px solid #0D775E;
}

.manage-close-icon {
    width: 22px;
    height: 22px;
    border: 1.6px solid #031813;
    transform: rotate(45deg);
    transform-origin: 0 0;
}

.manage-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.copper-manage-level-copper,
.copper-manage-level-silver,
.copper-manage-level-gold,
.silver-manage-level-copper,
.silver-manage-level-silver,
.silver-manage-level-gold,
.gold-manage-level-copper,
.gold-manage-level-silver,
.gold-manage-level-gold,
.manage-level-copper,
.manage-level-silver,
.manage-level-gold {
    width: 100px;
    height: 50px;
    padding: 0 24px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans HK';
    font-size: 16px;
    font-weight: 400;
}

.manage-save {
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    background: transparent; /* Make background transparent */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}


.manage-section .d-flex {
    gap: 10px; 
}

.copper-manage-level-copper {
    background: #EB9553;
    color: #053026;
    border: 1px solid #053026;
}

.copper-manage-level-silver {
    background: #D3E3EB;
    color: #053026;
    border: 1px solid #053026;
}

.copper-manage-level-gold {
    background: #F5DFA6;
    color: #053026;
    border: 1px solid #053026;
}

.silver-manage-level-copper {
    background: #FADCC8;
    color: #053026;
    border: 1px solid #053026;
}

.silver-manage-level-silver {
    background: #A5B2B8;
    color: #053026;
    border: 1px solid #053026;
}

.silver-manage-level-gold {
    background: #F5DFA6;
    color: #053026;
    border: 1px solid #053026;
}

.gold-manage-level-copper {
    background: #FADCC8;
    color: #053026;
    border: 1px solid #053026;
}

.gold-manage-level-silver {
    background: #D3E3EB;
    color: #053026;
    border: 1px solid #053026;
}

.gold-manage-level-gold {
    background: #E0B02D;
    color: #053026;
    border: 1px solid #053026;
}

.manage-level-copper {
    background: #C0275D;
    color: #F5F5F5;
    border: 1px solid #4D1025;
}

.manage-level-silver,
.manage-level-gold {
    background: #ABE0D4;
    color: #031813;
    border: 1px solid #053026;
}

.manage-benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.manage-benefit {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manage-benefit-title {
    color: #260813;
    font-size: 24px;
    font-family: 'Noto Sans HK';
    font-weight: 700;
}

.manage-benefit-description {
    color: #031813;
    font-size: 16px;
    font-family: 'Noto Sans HK';
    font-weight: 500;
}

.manage-benefit-item {
    display: flex;
    gap: 8px;
}

.manage-benefit-number {
    text-align: center;
    color: #031813;
    font-size: 16px;
    font-family: 'Noto Sans HK';
    font-weight: 500;
}

.manage-benefit-text {
    color: #031813;
    font-size: 16px;
    font-family: 'Noto Sans HK';
    font-weight: 500;
}

.manage-pricing-options {
    display: flex;
    gap: 8px;
}

.copper-manage-price-normal,
.copper-manage-price-copper,
.copper-manage-price-silver,
.copper-manage-price-gold,
.silver-manage-price-normal,
.silver-manage-price-copper,
.silver-manage-price-silver,
.silver-manage-price-gold,
.gold-manage-price-normal,
.gold-manage-price-copper,
.gold-manage-price-silver,
.gold-manage-price-gold,
.manage-price-normal,
.manage-price-copper,
.manage-price-silver,
.manage-price-gold {
    padding: 8px 24px;
    border-radius: 12px;
    font-family: 'Noto Sans HK';
    font-size: 16px;
    font-weight: 500;
    height: 100px;
    display: flex;
    flex-direction: column;   
    justify-content: center;     
    align-items: center;         
    text-align: center; 
}

.copper-manage-price-normal {
    background: #EB9553;
    color: #1E1E1E;
    border: 1px solid #4D1025;
}

.copper-manage-price-copper,
.copper-manage-price-silver,
.copper-manage-price-gold {
    background: #FADCC8;
    color: #031813;
    border: 1px solid #053026; 
}

.silver-manage-price-normal {
    background: #A5B2B8;
    color: #1E1E1E;
    border: 1px solid #4D1025;
}

.silver-manage-price-copper,
.silver-manage-price-silver,
.silver-manage-price-gold {
    background: #D3E3EB;
    color: #031813;
    border: 1px solid #053026; 
}

.gold-manage-price-normal {
    background: #E0B02D;
    color: #1E1E1E;
    border: 1px solid #4D1025;
}

.gold-manage-price-copper,
.gold-manage-price-silver,
.gold-manage-price-gold {
    background: #F5DFA6;
    color: #031813;
    border: 1px solid #053026; 
}

.manage-price-normal {
    background: #C0275D;
    color: #F5F5F5;
    border: 1px solid #4D1025;
}

.manage-price-copper,
.manage-price-silver,
.manage-price-gold {
    background: #CFE4DF;
    color: #031813;
    border: 1px solid #053026; 
}

.manage-price-original {
    color: #073D30;
    font-size: 10px;
    font-weight: 400;
}

.manage-subscribe-button {
    background-color: #C0275D; 
    color: #F5F5F5;           
    border: none;            
    border-radius: 12px;      
    padding: 12px 24px;       
    font-family: 'Noto Sans HK';
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;          
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.manage-subscribe-button:hover {
    background-color: #A02050; 
}

.manage-subscribe-text {
    font-size: 16px;
    font-weight: 500;
}

.gold-manage-add-save,
.silver-manage-add-save,
.copper-manage-add-save,
.manage-add-save {
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    background: transparent; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
    margin: 0; 
    width: 100%;
}

.manage-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.address-container {
    width: 100%;
    height: 100%;
	overflow: auto;
    max-width: 900px; 
    padding: 48px 32px;
    background: #EBF5F2;
    border-radius: 16px;
    border: 2px solid #053026;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.address-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.address-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.address-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.address-card-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.address-title {
    color: #073D30;
    font-size: 44px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 52.8px;
    word-wrap: break-word;
}

.address-icon {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 40px;
    border: 2px #0D775E solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-icon-inner {
    width: 32px;
    height: 32px;
    position: relative;
}

.address-icon-inner::before {
    content: '';
    width: 22px;
    height: 22px;
    left: 16px;
    top: 0.44px;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: 0 0;
    border: 1.6px #031813 solid;
}

.address-content {
    align-self: stretch;
    /*height: 372px;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.address-card {
    align-self: stretch;
    padding: 16px;
    background: #F5F5F5;
    border-radius: 16px;
    border: 1px #0D775E solid;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
}

.address-details {
    display: flex;
    flex-direction: column; /* Stack address lines vertically */
    gap: 4px; /* Space between lines */
    flex: 1; /* Allow the details to take available space */
}

.address-line {
    flex: 1 1 0;
    display: inline-flex;
    gap: 4px;
}

.address-part {
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 19.2px;
    word-wrap: break-word;
}

.address-separator {
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 19.2px;
    word-wrap: break-word;
}

.address-tags {
    display: flex;
    gap: 8px; /* Space between tags */
    align-items: center; /* Center tags vertically */
}

.address-tag {
    width: 90px;
    height: 30px;
    padding: 0 16px;
    background: #C0275D;
    border-radius: 16px;
    overflow: hidden;
    border: 1px #4D1025 solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-tag div {
    color: #F5F5F5;
    font-size: 12px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    line-height: 14.4px;
    word-wrap: break-word;
}

.address-actions {
    align-self: stretch;
    display: inline-flex;
    gap: 12px;
}

.address-button {
    flex: 1 1 0;
    height: 51px;
    padding: 16px 24px;
    border-radius: 16px;
    border: 2px #053026 solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.address-delete {
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.2px;
    word-wrap: break-word;
}

.address-edit {
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.2px;
    word-wrap: break-word;
}

.address-save-button {
    width: 100%;
    max-height: 16%;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    background: #0A5F4B;
    border-radius: 16px;
    border: 2px #053026 solid;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Makes it look clickable */
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif; /* Ensure the font-family is applied correctly */
    font-weight: 700;
    line-height: 19.20px;
    word-wrap: break-word; /* Ensure the text wraps correctly */
}

.address-save-button:hover {
    background: #0A4B3F; /* Darker shade for hover effect */
}

.address-save-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
	max-height: 
}

.address-save-title {
    color: inherit; /* Inherit color from the button */
}

.edit-address-container {
    width: 100%;
    height: 100%;
	overflow: auto;
    max-width: 900px; 
    padding: 48px 32px;
    background: #EBF5F2;
    border-radius: 16px;
    border: 2px solid #053026;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.edit-address-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.edit-address-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.edit-address-header {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-address-title {
    color: #073D30;
    font-size: 44px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 52.8px;
}

.edit-address-close-button {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 40px;
    border: 2px #0D775E solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit-address-close-icon {
    width: 32px;
    height: 32px;
    position: relative;
}

.edit-address-close-icon:before {
    content: "";
    width: 22px;
    height: 22px;
    left: 16px;
    top: 0.44px;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: 0 0;
    border: 1.6px #031813 solid;
}

.edit-address-form {
    align-self: stretch;
    /*height: 585px;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.edit-address-row {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.edit-address-unit,
.edit-address-floor,
.edit-address-street-number,
.edit-address-street-name {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.edit-address-building,
.edit-address-region {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.edit-address-label {
    align-self: stretch;
    color: #073D30;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 24px;
}

.edit-address-input {
    align-self: stretch;
    padding: 16px;
    background: #F5F5F5;
    border-radius: 8px;
    border: 1px #0D775E solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-address-save-as {
    flex-direction: column;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.edit-address-save-title {
    width: 736px;
    color: #073D30;
    font-size: 24px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 28.8px;
}

.edit-address-save-options {
    width: 268px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.edit-address-residential,
.edit-address-office {
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit-address-unselected {
    border: 1px #0D775E solid;
	border-radius: 16px;
	padding: 10px;
}

.edit-address-selected {
    background: #C0275D;
    border: 1px #4D1025 solid;
    color: #F5F5F5;
	border-radius: 16px;
	padding: 10px;
}

.edit-address-default-address {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.edit-address-default-icon {
    width: 16px;
    height: 16px;
    background: #0A5F4B;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit-address-default-text {
    color: #031813;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 19.2px;
}

.edit-address-submit {
    align-self: stretch;
    padding: 16px 24px;
    background: #0A5F4B;
    border-radius: 16px;
    border: 2px #053026 solid;
    display: flex;
    justify-content: center;
    align-items: center;
	color: #F5F5F5;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    line-height: 24px;
}

.edit-address-submit-text {
    color: #F5F5F5;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    line-height: 24px;
}

.language-container {
    width: 100%;
    height: 60%;
    max-width: 900px;
    padding: 48px 32px;
    background-color: #EBF5F2;
    border: 2px solid #053026;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
}

.language-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.language-title {
    color: #073D30;
    font-size: 44px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 52.8px;
}

.language-close-icon {
    width: 48px;
    height: 48px;
    padding: 8px;
    border: 2px solid #0D775E;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.language-close-line {
    width: 22px;
    height: 22px;
    position: relative;
    transform: rotate(45deg);
    border: 1.6px solid #031813;
}

.language-selection {
    width: 100%;
    padding: 8px;
    background-color: #ABE0D4;
    border-radius: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.language-option {
    flex: 1 1 0;
    padding: 16px 12px;
    background-color: transparent;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.language-option-selected {
    background-color: #EBF5F2;
    border: 1px solid #0D775E;
}

.language-text {
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.2px;
}

.language-submit {
    width: 100%;
    padding: 16px 24px;
    background-color: #0A5F4B;
    border: 2px solid #053026;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.language-submit-text {
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.2px;
}

.password-button {
    background-color: transparent;
    border: none;
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.password-button:hover {
    color: #0A5F4B;
}

.forgot-password-container {
    width: 100%;
    height: 100%;
    max-width: 700px;
    max-height: 370px;
    padding: 40px 32px;
    background-color: #EBF5F2;
    border: 2px solid #053026;
    border-radius: 16px;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.change-password-container {
    width: 100%;
    height: 100%;
    max-width: 700px;
	max-height: 480px;
    padding: 20px 32px;
    background-color: #EBF5F2;
    border: 2px solid #053026;
    border-radius: 16px;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}


.forgot-password-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.change-password-header {
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
}

.forgot-password-title {
    color: #073D30;
    font-size: 44px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 52.8px;
}

.change-password-title {
    color: #073D30;
    font-size: 44px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 52.8px;
}

.change-password-title-small {
    color: #073D30;
    font-size: 12px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 300;
    line-height: 12.8px;
}

.forgot-password-form {
    width: 100%;
    height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.change-password-form {
    width: 100%;
    height: 288px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.forgot-password-field {
    width: 100%;
    height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.forgot-password-label {
    width: 100%;
    color: #073D30;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 24px;
}

.forgot-password-input {
    width: 100%;
    padding: 16px;
    background: #F5F5F5;
    border-radius: 8px;
    border: 1px #0D775E solid;
    color: #B3B3B3;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word;
}

.forgot-password-placeholder {
    
}

.forgot-password-action {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.forgot-password-button {
    width: 192px;
    padding: 16px 24px;
    background-color: #0A5F4B;
    border: 2px solid #053026;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
	color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.2px;
}

.forgot-password-button:hover {
	color: #260813;
	background-color: #f2d4df;
}

.change-password-action {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}


.left-popup-container {
    position: fixed; /* Use fixed positioning to overlay the content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: flex-start; 
    align-items: center; 
    z-index: 1000; 
    padding-left: 0; 
    z-index: 1000; 
}

.sidebar-container {
    width: 100%;
    height: 100%;
    background: #EBF5F2;
    border: 2px #0D775E solid;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /*gap: 136px;*/
    max-width: 300px;
}

.sidebar-content {
    align-self: stretch;
	
    height: 557px;
    
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.sidebar-header {
    align-self: stretch;
    padding: 10px 16px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.sidebar-avatar {
    width: 48px;
    height: 48px;
    border-radius: 40px;
}

.sidebar-user-info {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
}

.sidebar-username {
    color: #1E1E1E;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.20px;
}

.sidebar-status {
    color: #0D775E;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 19.20px;
}

.sidebar-settings {
    padding: 10px 20px;
    background: #0A5F4B;
    border-radius: 16px;
    border: 2px #053026 solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-settings-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*gap: 8px;*/
}

.sidebar-settings-text {
    color: #EBF5F2;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 19.20px;
}

.sidebar-menu {
    align-self: stretch;
    /*height: 445px;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.sidebar-menu-item {
    align-self: stretch;
    padding: 10px 32px;
    border-top: 2px #0D775E solid;
    border-bottom: 2px #0D775E solid;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
	cursor: pointer;
}

.sidebar-icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.sidebar-icon-active {
    width: 16.50px;
    height: 17.25px;
    position: absolute;
    background: #C0275D;
    border-radius: 2px;
    border: 2px #C0275D solid;
    left: 3.75px;
    top: 3.50px;
}

.sidebar-icon-inactive {
    width: 16.50px;
    height: 17.25px;
    position: absolute;
    background: #1E1E1E;
    left: 3px;
    top: 3px;
}

.sidebar-menu-text {
    color: #0D775E;
    font-size: 24px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 28.80px;
}

.sidebar-bottom-text {
    color: #0D775E;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 28.80px;
}

.dz-banner {
	position: relative; 
}
.dz-banner .banner-bg {
    /*background-image: url("../images/banner/pic1.png");*/
    position: absolute;
    background-size: cover;
    height: 100%;
    width: 100%;
    z-index: -1; 
}
.dz-banner .banner-content {
    padding: 20px 15px; 
}
.dz-banner .banner-content span 
{
    display: block;
    margin-bottom: 5px;
    color: var(--primary); 
}
.dz-banner .banner-content .offer {
    font-weight: 800;
    margin-bottom: 5px;
    color: #000; 
}
.dz-banner .banner-content p {
    margin-bottom: 10px;
    color: #000;
    font-size: 18px;
    opacity: 0.8; 
}
.dz-banner .banner-content.content-right {
    width: 55%;
    float: right; 
}

.category:hover {
	background-color: #abe0d4;
	font-size: 18px;
}

.product {
	color: #0D775E;
	text-align: center;
	/* Noto Sans HK/Bold/H2 */
	font-family: "Noto Sans HK";
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	text-wrap: wrap;
}

.name {
	color: white;
	background-color: white;
	text-align: center;
	/* Noto Sans HK/Bold/H3 */
	font-family: "Noto Sans HK";
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%; /* 24px */
	padding-top:10px;
	padding-bottom:10px;
}

.name:hover {
	color: var(--text-green-invert, #EBF5F2);
	background-color: #0D775E;
}


.digit-group {
  display: flex;
  flex-direction: initial;
  margin-bottom: 20px;
  justify-content: center; 
}
.digit-group input {
    margin: 0 8px;
    border-radius: 0;
    text-align: center;
    font-size: 18px;
    color: var(--dark);
    padding: 0;
    width: 50px;
    height: 50px; 
}

.text-lowercase {
  text-transform: lowercase !important; 
}

.password-input-container {
	position: relative;
	width:100%;
}

.p-viewer {
	z-index: 999;
	position: absolute;
	top: 30%;
	right: 10px;
}

.fa-eye {
	color: #000;
}

.back-button {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 40px;
    border: 2px #0D775E solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-button:hover {
    background-color: #9a1f4a;
	border: 2px #2c2c2c solid;
}

.bottom {
    padding-bottom:180px;
}

.form-check-input{
	height: 32px;
	width: 32px;
}

.sort-by-content {
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
	width: 100%;
}

.sort-by-label {
    width: 100%;
    color: #073D30;
    font-size: 20px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 24px;
	gap: 32px;
}

.sort-by-container {
    width: 100%;
    max-width: 600px; /* Limit the width of the popup */
	max-height: 80%;
    padding: 48px 32px;
    background: #EBF5F2;
    border-radius: 16px;
    border: 2px solid #053026;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
	overflow: auto;
	scrollbar-width: none;
}

.sort-by-container::-webkit-scrollbar {
  display: none;
}

.button-add-to-cart {
    display: flex;
	justify-content: right;
    align-items: center;
	margin-top: 12px;
	margin-bottom: 8px;
}

.container-bottom {
    padding-left: 0;
    padding-right: 0;
	align-items: center;
}


.button-add-cart {
    width: 132px;
    padding: 0px; 
    height: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans HK', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 80%;
    word-wrap: break-word;
    cursor: pointer; 
	color: var(--text-green-primary, #031813);
	background-color: #CFE4DF;
    border: 2px solid #053026;
	box-shadow: 0px 5px 0px #053026;
	transition: background-color .5s ease-in;
}

.button-add-cart:hover {
	color: #4d1025;
	background: white;
    border: 2px solid #4d1025;
	box-shadow: 0px 10px 0px #4d1025;
	transform: translateY(-10px);
}

.footer-price-container {
    width: 100%;
    position: fixed;
    bottom: 100px;
    background-color: #f4f4f4;
    z-index: 1000;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
	border-top: 1px solid #0A5F4B;
}

.status-button {
    padding: 12px 20px 12px 24px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
	width: 50%;
}

.status-button-brand {
    background-color: #ABE0D4;
    border-color: #053026;
}

.status-button-outer {
	padding: 10px;
}

.status-text {
    color: #031813;
}

.status-button-brand-white {
    background-color: #C0275D;
    border-color: #4D1025;
}

.status-text-white {
    color: white;
}

.order-detail-button-white {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding: 16px 24px;
    border-radius: 16px;
	background-color: #f2d4df;
    border: 2px solid #4D1025;
}

.button-text-white {
    color: var(--text-green-primary, #4D1025);
    font-size: 16px;
    font-family: 'Noto Sans HK';
    font-weight: 700;
    line-height: 19.2px;
}

.order-date-text-white {
    color: white;
    font-size: 24px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 28.80px;
}

.order-price-symbol-white,
.order-price-value-white {
    color: white;
    font-size: 36px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
    line-height: 43.20px;
}

.order-phone-number-white {
    color: white;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 19.20px;
}

.no-more-orders {
	text-align: center;
	color: #0A5F4B;
	font-size: 18px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 600;
    line-height: 100%;
}

.input-wrapper {
	position: relative;
	display: inline-block;
}

.input-wrapper input {
	padding-right: 40px;
}

.input-wrapper button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
}

.menu-language-selection {
    background-color: #ABE0D4;
	border-radius: 12px; 
	padding: 6px;
}

.menu-language-option {
    display: flex; 
	justify-content: center;
	align-items: center;
	color: #073D30;
	font-size: 16px;
	font-family: 'Noto Sans HK', sans-serif;
	font-weight: 700;
}

.menu-language-option-selected {
    display: flex; 
	justify-content: center;
	align-items: center;
	background-color: #EBF5F2;
	border: 1px solid #0D775E;
	border-radius: 8px; 
	color: #073D30;
	font-size: 16px;
	font-family: 'Noto Sans HK', sans-serif;
	font-weight: 700;
}

.menu-language-text {
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 700;
}

.term-condition-container {
    width: 100%;
    height: 100%;
    max-width: 700px;
	max-height: 100px;
    padding: 20px 32px;
    background-color: #EBF5F2;
    border: 2px solid #053026;
    border-radius: 16px;
	gap: 12px;
}

.term-condition-row {
	display:flex; 
	justify-content:space-between; 
	align-items:center; 
	padding: 8px;
}

.term-condition-col {
	color: var(--text-green-secondary, #073D30);
	font-family: "Noto Sans HK";
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%; /* 19.2px */ 
	border: 1px solid #0D775E;
	border-radius: 12px; 
	padding:10px; 
	text-align:center;
}

.term-condition-detail {
	color: var(--text-green-primary, #031813);
	text-align: justify;
	/* Noto Sans HK/Medium/H4 */
	font-family: "Noto Sans HK";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 19.2px */
}

.term-condition-header {
	color: var(--text-purple-secondary, #731738);
	/* Noto Sans HK/Bold/H2 */
	font-family: "Noto Sans HK";
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%; /* 28.8px */
}



/**********************************swiper bundle product details*********************************************/
.dz-product-preview {
  position: relative;
  overflow: hidden; 
}

.dz-product-preview .product-detail-swiper {
    /*position: absolute;*/
	position: relative;
	top: auto;
    right: 20px;
    /*bottom: 20px;*/
	bottom: -5px;
    left: 20px; 
}

.dz-product-preview .product-detail-swiper .swiper-slide {
	width: 50px; 
}

.dz-product-preview .product-detail-swiper .swiper-slide .dz-media {
	border: 2px solid #fff; 
}

.dz-product-preview .product-detail-swiper .swiper-slide {
	width: 50px; 
}

.dz-product-preview .product-detail-swiper .swiper-slide .dz-media img{
	width: 100%;
	height: auto;
}

.dz-product-preview .product-detail-swiper-2 .swiper-slide .dz-media img{
	width: 100%;
	height: auto;
}

.dz-product-preview .product-detail-swiper .swiper-slide .dz-media:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          background-color: var(--bg-white);
          opacity: 0;
          width: 100%;
          height: 100%; 
}

.dz-product-preview .product-detail-swiper .swiper-slide-thumb-active .dz-media {
	border-color: var(--primary); 
}

.dz-product-preview .product-detail-swiper .swiper-slide-thumb-active .dz-media:after {
	opacity: 0.50; 
}

.swiper-wrapper {
	margin-bottom: 0; 
}
/********************************swiper bundle product details************************************/

.product-extra-info {
    background: #F5F5F5;
    border-radius: 16px;
    border: 1px solid #0D775E;
}

.product-extra-info img{
    border-radius: 16px;
}

.product-extra-info iframe{
    border-radius: 16px;
	min-height: 360px;
}

.account-area {
	display: flex;
	flex-direction: column; 
}

.digit-group {
	display: flex;
	flex-direction: initial;
	margin-bottom: 20px;
	justify-content: center; 
}

.digit-group input {
    margin: 0 8px;
    border-radius: 0;
    text-align: center;
    font-size: 18px;
    color: var(--dark);
    padding: 0;
    width: 50px;
    height: 50px; 
}

.edit-coupon-input {
    align-self: stretch;
    padding: 4px;
    background: #F5F5F5;
    border-radius: 8px;
    border: 1px #0D775E solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit-coupon-label {
    align-self: stretch;
    color: #073D30;
    font-size: 16px;
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: 500;
    line-height: 16px;
	padding: 8px;
}

.edit-coupon-row {
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
	flex-direction: column;
}

.coupon-update-container {
    width: 100%;
    max-width: 600px; /* Limit the width of the popup */
    padding: 48px 32px;
    background: #EBF5F2;
    border-radius: 16px;
    border: 2px solid #053026;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
}