/* 
- Mobile (xs)
- Small tablets (sm)
- Tablets (md) 
- Laptops (lg)
- Desktops (xl)
- Large desktops (xxl)
*/

/* Base styles (xs: up to 576px) */
@media (max-width: 575px) {
	.btn-close {
		display: block !important;
	}
	#topbar .logo {
		max-height: 50px;
	}

	/* Center icons properly in mobile view */
	#topbar .order-2 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#topbar .order-2 .d-flex {
		justify-content: center !important;
		width: 100%;
	}

	#topbar .icon-link {
		margin: 0 0.3rem;
	}

	/* Menu Responsive */
	.menu {
		padding-top: 1rem;
		background-image: url("../images/mobile-menu.png");
		background-size: 400px;
		background-position: right top;
	}
	body..no-webp .menu,
	body.no-js .menu {
		background-image: url("../images/mobile-menu.png");
	}
	body..webp .menu {
		background-image: url("../images/mobile-menu.webp");
	}

	.menu-link {
		font-size: 45px;
		line-height: 1.2;
		/* padding: 0.5rem 0;
		margin: 0.3rem 0; */
		display: flex; /* Changed to flex */
		justify-content: flex-end; /* Align right */
		padding-right: 4rem;
		padding-left: 0;
		width: 100%;
	}

	.menu-fire-img {
		max-width: 150px;
		margin: 1rem 0;
		margin-left: auto;
		margin-right: 4rem;
		display: block;
	}

	#btn-close-menu img {
		max-width: 50px;
	}

	#btn-close-menu {
		left: auto;
		top: 464px !important;
		right: 104px !important;
		width: 45px !important;
	}
	.slider-wrapper {
		height: 200px;
	}

	#slide .text-1 {
		font-size: 100px;
		line-height: 100px;
	}
	#slide .text-2 {
		font-size: 30px;
		line-height: 40px;
	}
	#slide .text-3 {
		font-size: 100px;
		line-height: 100px;
	}
	.slide-red-fire {
		position: absolute;
		top: 0;
		left: 50%;
		height: 150px;
		transform: translateX(-50%);
		/* z-index: 1000; */
	}

	/* Custom Slider Mobile */
	.custom-slider-container {
		padding: 50px 0; /* Reset padding */
		overflow: visible; /* Allow scaled item to show */
	}

	.slider-item {
		width: 200px; /* Smaller width for mobile */
		height: 200px; /* Same as width for square shape */
	}

	/* Adjust positions for mobile to prevent overflow */
	.item-left {
		transform: translate(-90%, -50%) scale(1);
		display: none;
	}
	.item-right {
		transform: translate(-10%, -50%) scale(1);
		display: none;
	}

	.slider-nav img {
		width: 30px; /* Smaller arrows */
	}

	.prev-btn {
		left: 10px;
	}

	.next-btn {
		right: 10px;
	}

	#category .category-box {
		height: 290px !important;
	}
	#category .category-box .category-title {
		font-size: 30px;
	}
	#category h2,
	#new-items h2,
	#hot-items h2,
	#page h2,
	#category-product h2 {
		font-size: 50px;
		line-height: 1;
	}

	#detail-product h2 {
		font-size: 40px;
		line-height: 1;
	}

	.btn-outline-primary {
		border: 1px solid #a6a6a6;
		border-radius: 18px;
		font-family: "Alinore";
		font-style: normal;
		font-weight: 400;
		font-size: 20px;
		line-height: 36px;
		padding: 0 1rem;
	}

	#menu .container {
		margin-top: -10px !important;
		background-size: cover !important;
		background-repeat: no-repeat;
		background-position: top;
	}
	.menu-fire {
		width: 60px;
	}
	.menu-item {
		margin: 10px 0;
	}
	.menu-item img {
		width: 30px;
	}
	#fullMenuModal {
		background: url("./img/bg-menu.png") !important;

		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}
	body..no-webp #fullMenuModal,
	body.no-js #fullMenuModal {
		background-image: url("./img/bg-menu.png") !important;
	}
	body..webp #fullMenuModal {
		background-image: url("./img/bg-menu.webp") !important;
	}
	.menu-item a {
		line-height: 10px;
		font-size: 25px;
	}

	.menu-home {
		margin-top: 3rem !important;
	}
	.menu-home img {
		width: 70px !important;
	}
	.menu-footer {
		margin-bottom: 2rem;
		font-size: 14px;
	}

	/* Character Resize and Reposition for Mobile */
	.char-wrap {
		height: 350px; /* Further reduced height */
	}
	.big img {
		width: 130px;
	}
	.big {
		animation: none; /* Disable animation */
	}
	.medium img {
		width: 70px;
	}
	.medium {
		animation: none; /* Disable animation */
	}
	.small img {
		width: 45px;
	}
	.small {
		animation: none; /* Disable animation */
	}

	/* Adjust positions for tighter mobile layout */
	/* Medium - Inner Square */
	.m-top-left {
		top: 22%;
		left: 15%;
	}
	.m-top-right {
		top: 22%;
		right: 15%;
	}
	.m-bottom-left {
		bottom: 22%;
		left: 15%;
	}
	.m-bottom-right {
		bottom: 22%;
		right: 15%;
	}

	/* Small - Outer Ring */
	.s1 {
		top: 2%;
		left: 15%;
	}
	.s2 {
		top: 2%;
		margin-left: -22.5px;
	} /* Half of 45px */
	.s3 {
		top: 2%;
		right: 15%;
	}

	.s4 {
		top: 30%;
		right: 2%;
	}
	.s5 {
		bottom: 35%;
		right: 2%;
	}

	.s6 {
		bottom: 2%;
		right: 15%;
	}
	.s7 {
		bottom: 2%;
		margin-left: -22.5px;
	} /* Half of 45px */
	.s8 {
		bottom: 2%;
		left: 15%;
	}

	.s9 {
		bottom: 35%;
		left: 2%;
	}
	.s10 {
		top: 30%;
		left: 2%;
	}

	.custom-modal-dialog {
		margin: 0rem auto;
		width: 100%;
	}
	.newsletter-title {
		font-size: 28px;
	}

	.newsletter-subtitle {
		font-size: 10px;
		margin-bottom: 5px;
	}
	.newsletter-label {
		margin-bottom: 0;
		font-size: 14px;
	}
	.side-option .side-option-label {
		padding: 3px 20px 0px 55px;
	}

	.newsletter-checkbox-label {
		font-size: 10px;
	}
	.newsletter-modal-content {
		background-image: url("../images/bg-newsletter-mobile.png");
		background-size: 625px;
	}
	body..no-webp .newsletter-modal-content,
	body.no-js .newsletter-modal-content {
		background-image: url("../images/bg-newsletter-mobile.png");
	}
	body..webp .newsletter-modal-content {
		background-image: url("../images/bg-newsletter-mobile.webp");
	}

	.character-preview {
		display: none;
	}
	.newsletter-modal-body {
		width: 300px;
		margin: 0 auto;
	}
	.newsletter-close {
		/* top: 0; */
		right: 0;
		width: 100px;
		height: auto;
	}

	#page-login h2 {
		font-size: 30px;
		line-height: 2;
	}

	#page-login h5 {
		font-size: 16px;
		line-height: 0;
	}

	.card-item .title {
		font-size: 20px;
		line-height: 10px;
	}

	.btn-view {
		font-size: 14px;
		width: 100px;
		height: 33.02px;
		line-height: normal;
	}
}

/* Small devices (sm: 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
	.menu {
		background-size: 576px !important;
		padding-top: 3rem;
		background-image: url("../images/mobile-menu.png");
		background-repeat: no-repeat;
		background-position: right top;
	}
	body..no-webp .menu,
	body.no-js .menu {
		background-image: url("../images/mobile-menu.png");
	}
	body..webp .menu {
		background-image: url("../images/mobile-menu.webp");
	}
	.menu-link {
		font-size: 80px;

		display: flex; /* Changed to flex */
		justify-content: flex-end; /* Align right */
		padding-right: 2rem;
		padding-left: 0;
	}
	#btn-close-menu {
		max-width: 80px;
		top: 690px; /* Adjusted slightly */
		left: 50%;
	}

	#btn-close-menu {
		left: auto;
		top: 680px !important;
		right: 169px !important;
		width: 45px !important;
	}

	#topbar .logo {
		max-height: 50px;
	}

	/* Menu Responsive */
	/* .menu {
		padding-top: 3rem;
	} */

	/* .menu-link {
		font-size: 50px;
		line-height: 1.2;
		padding: 0.6rem 0;
		margin: 0.4rem 0;
		display: block;
	} */

	.menu-fire-img {
		max-width: 200px;
		margin: 1.5rem auto;
	}

	#btn-close-menu img {
		max-width: 60px;
	}

	.slider-wrapper {
		height: 300px;
	}

	#slide .text-1 {
		font-size: 100px;
		line-height: 100px;
	}
	#slide .text-2 {
		font-size: 30px;
		line-height: 40px;
	}
	#slide .text-3 {
		font-size: 100px;
		line-height: 100px;
	}
	.slide-red-fire {
		position: absolute;
		top: 0;
		left: 50%;
		height: 150px;
		transform: translateX(-50%);
		/* z-index: 1000; */
	}

	/* Custom Slider Mobile */
	.custom-slider-container {
		padding: 1px 0; /* Reset padding */
		overflow: visible; /* Allow scaled item to show */
	}

	.slider-item {
		width: 150px; /* Smaller width for mobile */
		height: 150px; /* Same as width for square shape */
	}

	/* Adjust positions for mobile to prevent overflow */
	/* .item-left {
		transform: translate(-90%, -50%) scale(1);
		display: none;
	}
	.item-right {
		transform: translate(-10%, -50%) scale(1);
		display: none;
	} */

	.slider-nav img {
		width: 30px; /* Smaller arrows */
	}

	.prev-btn {
		left: -20px;
	}

	.next-btn {
		right: -20px;
	}

	/* #slide .text-1 {
		font-size: 100px;
		line-height: 100px;
	}
	#slide .text-2 {
		font-size: 30px;
		line-height: 40px;
	}
	#slide .text-3 {
		font-size: 100px;
		line-height: 100px;
	}
	.slide-red-fire {
		position: absolute;
		top: 0;
		right: 0;
		height: 200px;
		transform: none;
	} */

	/* Custom Slider Small Tablet */
	/* .slider-item {
		flex: 0 0 100%;
		max-width: 100%;
	} */
	#category .category-box .category-title {
		font-size: 60px;
	}

	#category h2,
	#new-items h2,
	#hot-items h2,
	#page h2,
	#category-product h2 {
		font-size: 35px;
		line-height: 1;
	}

	#detail-product h2 {
		font-size: 40px;
		line-height: 1;
	}
	.menu-fire {
		width: 80px;
	}

	#detail-product h2 {
		font-size: 40px;
		line-height: 1;
	}

	#menu .container {
		margin-top: -10px !important;
		background-size: cover !important;
		background-repeat: no-repeat;
		background-position: top;
	}

	#menu .container {
		margin-top: -10px !important;
		background-size: cover !important;
		background-repeat: no-repeat;
		background-position: top;
	}
	.menu-fire {
		width: 60px;
	}
	.menu-item {
		margin: 10px 0;
	}
	.menu-item img {
		width: 30px;
	}
	#fullMenuModal {
		background: url("./img/bg-menu.png") !important;

		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}
	body..no-webp #fullMenuModal,
	body.no-js #fullMenuModal {
		background-image: url("./img/bg-menu.png") !important;
	}
	body..webp #fullMenuModal {
		background-image: url("./img/bg-menu.webp") !important;
	}
	.menu-item a {
		line-height: 10px;
		font-size: 25px;
	}

	.menu-home {
		margin-top: 3rem !important;
	}
	.menu-home img {
		width: 70px !important;
	}
	.menu-footer {
		margin-bottom: 2rem;
		font-size: 14px;
	}

	.custom-modal-dialog {
		margin: 0rem auto;
	}
	.newsletter-title {
		font-size: 30px;
	}

	.newsletter-subtitle {
		font-size: 12px;
		margin-bottom: 0;
	}
	.newsletter-label {
		margin-bottom: 0;
		font-size: 14px;
	}
	.side-option .side-option-label {
		padding: 3px 20px 0px 55px;
	}

	.newsletter-checkbox-label {
		font-size: 10px;
	}
	.newsletter-modal-content {
		background-image: url("../images/bg-newsletter-mobile.png");
		background-size: 625px;
	}
	body..no-webp .newsletter-modal-content,
	body.no-js .newsletter-modal-content {
		background-image: url("../images/bg-newsletter-mobile.png");
	}
	body..webp .newsletter-modal-content {
		background-image: url("../images/bg-newsletter-mobile.webp");
	}

	.character-preview {
		display: none;
	}
	.newsletter-modal-body {
		width: 380px;
		margin: 0 auto;
	}
	.big img {
		width: 170px;
	}

	.medium img {
		width: 100px;
	}
	.small img {
		width: 80px;
	}
}

/* Medium devices (md: 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
	.menu {
		background-size: 768px !important;
		padding-top: 4rem;
	}
	.menu-fire-img {
		width: 200px;
	}
	.menu-link {
		font-size: 60px;
	}
	#btn-close-menu {
		width: 50px;
		top: 435px; /* Adjusted slightly */
		left: 50%;
	}

	#slide .text-1 {
		font-size: 250px;
		line-height: 220px;
	}
	#category .category-box {
		height: 290px !important;
	}
	#category .category-box .category-title {
		font-size: 60px;
	}
	#category h2,
	#new-items h2,
	#hot-items h2,
	#page h2,
	#category-product h2 {
		font-size: 50px;
		line-height: 50px;
		margin-bottom: 1rem;
	}

	#detail-product h2 {
		font-size: 40px;
		line-height: 1rem;
	}

	#slide .text-1 {
		font-size: 100px;
		line-height: 100px;
	}
	#slide .text-2 {
		font-size: 30px;
		line-height: 40px;
	}
	#slide .text-3 {
		font-size: 100px;
		line-height: 100px;
	}
	#slide .text-4 {
		font-size: 50px;
		line-height: 50px;
	}
	#slide .text-5 {
		font-size: 20px;
		line-height: 30px;
	}
	#slide .text-6 {
		font-size: 20px;
		line-height: 25px;
		margin-bottom: 1rem;
	}
	.slide-red-fire {
		position: absolute;
		top: 10%;
		right: 5%;
		height: 250px;
		left: auto;
		transform: none;
	}

	/* Custom Slider Tablet */
	.slider-item {
		flex: 0 0 33.333%; /* 3 items per view */
		max-width: 33.333%;
	} /* z-index: 1000; */

	#menu .container {
		margin-top: -10px !important;
		background-size: cover !important;
		background-repeat: no-repeat;
		background-position: top;
	}

	#fullMenuModal .modal-content {
		/* background: url('./img/bg-menu.png') !important; */

		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
		padding-top: 5rem;
		margin-top: -25px;
	}
	.menu-item a {
		line-height: 100px;
	}

	.menu-home {
		margin-top: 3rem !important;
	}
	.menu-footer {
		margin-top: 5rem;
		margin-bottom: 2rem;
	}
	.custom-modal-dialog {
		margin: 0rem auto;
	}
	.newsletter-title {
		font-size: 40px;
	}

	.newsletter-subtitle {
		font-size: 14px;
	}

	/* .custom-modal-dialog {
		margin: 0rem auto;
	}
	.newsletter-title {
		font-size: 30px;
	}

	.newsletter-subtitle {
		font-size: 12px;
		margin-bottom: 0;
	} */
	.newsletter-label {
		margin-bottom: 0;
		font-size: 14px;
	}
	.side-option .side-option-label {
		padding: 3px 20px 0px 55px;
	}

	.newsletter-checkbox-label {
		font-size: 10px;
	}

	.newsletter-modal-content {
		background-image: url("../images/bg-newsletter-mobile.png");
		background-size: 768px;
	}
	body..no-webp .newsletter-modal-content,
	body.no-js .newsletter-modal-content {
		background-image: url("../images/bg-newsletter-mobile.png");
	}
	body..webp .newsletter-modal-content {
		background-image: url("../images/bg-newsletter-mobile.webp");
	}

	.character-preview {
		display: none;
	}
	.newsletter-modal-body {
		width: 460px;
		margin: 0 auto;
	}

	.big img {
		width: 200px;
	}

	.medium img {
		width: 100px;
	}
	.small img {
		width: 80px;
	}
}

/* Large devices (lg: 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
	.menu {
		background-size: 992px !important;
		padding-top: 8rem;
	}
	#btn-close-menu {
		max-width: 80px;
		top: 560px; /* Adjusted slightly */
		left: 50%;
	}

	/* Menu Responsive */
	.menu-link {
		font-size: 70px;
		/* line-height: 1.2;
		padding: 1rem 0;
		margin: 0.6rem 0; */
	}

	.menu-fire-img {
		max-width: 200px;
	}

	#slide .text-1 {
		font-size: 250px;
		line-height: 220px;
	}
	#category .category-box .category-title {
		font-size: 60px;
	}

	.newsletter-modal-body {
		padding: 7rem 0;
	}

	.newsletter-form-container {
		padding-left: 70px;
	}
	.newsletter-close {
		top: 70px !important;
		right: 30px !important;
		width: 100px !important;
		height: 60px !important;
	}
}

/* Extra large devices (xl: 1200px and up) */
@media (min-width: 1200px) and (max-width: 1399px) {
	.menu {
		background-size: 1200px !important;
		padding-top: 8rem;
	}
	.menu-link {
		font-size: 80px;
	}
	#btn-close-menu {
		max-width: 80px;
		top: 690px; /* Adjusted slightly */
		left: 50%;
	}
	#slide .text-1 {
		font-size: 250px;
		line-height: 220px;
	}
	#category .category-box .category-title {
		font-size: 60px;
	}

	.newsletter-close {
		top: 70px !important;
		right: 0px !important;
	}
}

/* Extra extra large devices (xxl: 1400px and up) */
@media (min-width: 1400px) {
	#slide .text-1 {
		font-size: 250px;
		line-height: 220px;
	}
	#category .category-box .category-title {
		font-size: 60px;
	}
}

@media screen and (max-width: 991px) {
	.mywtable {
		border: 0;
	}

	.mywtable thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.mywtable tr {
		/* border-bottom: 3px solid #ddd; */
		display: block;
		margin-bottom: 0.625em;
	}

	.mywtable td {
		/* border-bottom: 1px solid #ddd; */
		display: block;
		/* font-size: .8em; */
		text-align: right;
		padding: 5px 10px;
	}

	.mywtable td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		/* text-transform: uppercase; */
	}

	.mywtable td:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 768px) {
    .card.edition .card-body::before {
        background:
            radial-gradient(circle at 20% 30%, rgba(255,255,255,0.25) 0 2px, transparent 3px),
            radial-gradient(circle at 70% 60%, rgba(255,255,255,0.2) 0 2px, transparent 3px),
            radial-gradient(circle at 40% 80%, rgba(255,255,255,0.18) 0 2px, transparent 3px),
            radial-gradient(circle at 85% 20%, rgba(255,255,255,0.22) 0 2px, transparent 3px);

        animation-duration: 14s;
        opacity: 0.6;
    }
}