/* --- Additional Landing Page Styles --- */

		/* Form container for the Order ID input */
		#form_info {
			background: #f8f9fa;
			border-radius: 20px;
			padding: 25px;
			margin-bottom: 0px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.03);
		}
		
		/* Order ID Input Field */
		input[name="txt_orderid"] {
			border-radius: 12px !important;
			border: 1px solid #ddd !important;
			padding: 12px !important;
			height: auto !important;
			font-weight: 600;
			letter-spacing: 2px;
			margin-bottom: 15px;
			text-align: center;
		}
		
		/* Specific styling for the Main Menu button on this page */
		.btn-ok.mainmenu-button {
			background-color: #000 !important;
			color: #fff !important;
			border-radius: 15px !important;
			padding: 15px !important;
			font-weight: 700 !important;
			border: none !important;
			width: 100%;
			box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
			transition: transform 0.2s ease;
		}
		
		.btn-ok.mainmenu-button:active {
			transform: scale(0.98);
		}
		
		/* Contact Item text alignment (to ensure it aligns with icons) */
		.contact-item {
			text-align: left;
			max-width: 300px;
			margin-left: auto;
			margin-right: auto;
		}
		
		/* Small instructions text inside the card */
		.card-text {
			font-size: 14px;
			color: #555;
			line-height:1.6em;
			margin-bottom: 15px;
			display: block;
		}


		.profile-section {
			max-width: 500px;
			margin: 0 auto;
			text-align: center;
			padding: 20px;
		}
		
		.logo-circle {
			width: 110px;
			height: 110px;
			border-radius: 50%;
			object-fit: cover;
			margin-bottom: 20px;
			box-shadow: 0 8px 20px rgba(0,0,0,0.08);
		}
		
		.store_main_name {
			font-weight: 700;
			font-size: 24px;
			margin-bottom: 5px;
			text-transform: uppercase;
			letter-spacing: 1px;
		}
		
		.store-desc {
			font-size: 14px;
			color: #777;
			line-height: 1.6;
			margin-bottom: 25px;
		}
		
		/* Styling the existing contact list (Not as buttons) */
		.contact-item {
			display: block;
			font-size: 15px;
			color: #444 !important;
			text-decoration: none !important;
			margin-bottom: 12px;
			transition: color 0.2s;
		}
		
		.contact-item i {
			width: 25px;
			color: #000;
			margin-right: 10px;
		}
		
		.contact-item:hover {
			color: #007AFF !important;
		}
		
		/* Styled Link-Style Icons at the bottom */
		.social-icons {
			margin-top: 30px;
			padding-top: 20px;
			border-top: 1px solid #eee;
		}
		
		.social-icons a {
			font-size: 20px;
			color: #000 !important;
			margin: 0 10px;
			transition: opacity 0.2s;
		}
		
		.social-icons a:hover {
			opacity: 0.6;
		}
		
		/* Elegant Order Link */
		.order-link {
			display: inline-block;
			margin-top: 20px;
			font-weight: 700;
			color: #000 !important;
			text-decoration: none;
			border-bottom: 2px solid #000;
			padding-bottom: 5px;
			transition: all 0.3s;
		}
		
		.order-link:hover {
			letter-spacing: 2px;
		}
		
		.square {
			width: 100%;
			aspect-ratio: 1 / 1; /* Forces the container to stay square */
			position: relative;
			overflow: hidden;
			background-color: #f8f9fa; /* Optional: placeholder color while loading */
		}
		
		.square img {
			width: 100%;
			height: 100%;
			object-fit: cover; /* This prevents the image from stretching */
			position: absolute;
			top: 0;
			left: 0;
		}
		
		
		/* Container for the tabs - Force Full Viewport Width */
		#list-cat {
			position: fixed !important;
			top: 70px !important; /* Adjust to match your navbar height */
			left: 0 !important;
			right: 0 !important;
			width: 100vw !important; /* Use Viewport Width */
			height: 60px !important;
			background-color: #FFFFFF !important;
			display: flex;
			align-items: center;
			overflow-x: auto;
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;
			border-bottom: 1px solid #f0f0f0;
			z-index: 999 !important;
			padding: 0 !important;
			margin: 0 !important;
		}
		
		/* Hide scrollbar */
		#list-cat::-webkit-scrollbar {
			display: none;
		}
		
		/* Adjust the internal content spacing */
		#searchMenuButton {
			padding: 0 15px !important;
			background: white;
			z-index: 10;
			position: sticky;
			left: 0;
		}
		
		/* Padding for the first and last items so they don't touch the screen edge */
		.menu-category:first-of-type {
			margin-left: 15px !important;
		}
		
		.menu-category:last-of-type {
			margin-right: 15px !important;
		}
		
		.menu-category {
			display: inline-block;
			padding: 8px 20px;
			border-radius: 50px;
			background-color: #f1f1f1;
			color: #555;
			font-size: 13px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s ease;
			border: 1px solid transparent;
			font-family: 'Montserrat', sans-serif;
		}

		
		/* Elegant "Active" Tab Style */
		.catsub-style {
			background-color: #000 !important; /* Dark elegant theme */
			color: #fff !important;
			box-shadow: 0 4px 10px rgba(0,0,0,0.15);
			transform: translateY(-1px);
		}
		
		
		
		
		
		/* Header Container */
		.navbar.fixed-top {
			padding: 15px 20px;
			height: 70px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0 2px 15px rgba(0,0,0,0.05);
			border: none !important;
		}
		
		/* Icon Styling (Back & Info) */
		.up-icon, .info-icon, .back-icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f8f9fa;
			border-radius: 12px;
			color: #333 !important;
			transition: all 0.2s ease;
			text-decoration: none !important;
		}
		
		.up-icon:active, .info-icon:active, .back-icon:active {
			background: #eeeeee;
			transform: scale(0.95);
		}
		
		.navbar-center {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: auto;
			white-space: nowrap;
		}
		
		/* Branding Title */
		.navbar-center span {
			font-family: 'Montserrat', sans-serif;
			font-weight: 700 !important;
			letter-spacing: 1px;
			text-transform: uppercase;
		}
		
		
		.cust-data {
			margin-top:20px;
			width: auto;
			font-size:14px;
			letter-spacing: 1px;
			text-transform: uppercase;
		}
		
		.cust-data a {
			font-size:14px;
		}
		
		
		
		/* Modal Refinement */
		.modal-content {
			border-radius: 20px !important;
			border: none !important;
			overflow: hidden;
		}
		
		.modal-body {
			padding: 30px 20px !important;
		}
		
		/* Store Logo Styling */
		.modal-logo {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			object-fit: cover;
			box-shadow: 0 4px 15px rgba(0,0,0,0.1);
			margin-bottom: 15px;
		}
		
		/* Contact Buttons Grid */
		.contact-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			margin-top: 20px;
		}
		
		.contact-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12px;
			border-radius: 12px;
			font-size: 14px;
			font-weight: 500;
			text-decoration: none !important;
			transition: all 0.2s ease;
		}
		
		.btn-whatsapp { background: #25D366; color: white !important; }
		.btn-call { background: #007AFF; color: white !important; }
		.btn-insta { background: #E1306C; color: white !important; }
		.btn-email { background: #444; color: white !important; }
		.btn-website { background-color: #6f42c1; /* Elegant Purple */ color: white !important; }
		
		/* Address & Hours */
		.info-text {
			color: #666;
			font-size: 14px;
			margin-bottom: 5px;
		}
		
		
		/* Floating Bottom Navigation */
		.nav-bottom-style {
			bottom: 20px !important;
			left: 20px !important;
			right: 20px !important;
			width: auto !important;
			border-radius: 20px !important;
			border: none !important;
			box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
			padding: 10px 0 !important;
			background-color: rgba(255, 255, 255, 0.95) !important;
			backdrop-filter: blur(10px); /* Modern frosted glass effect */
		}
		
		/* Nav Item Styling */
		.nav-bottom-style .nav-item .btn {
			border: none !important;
			color: #888 !important;
			font-size: 11px !important;
			font-weight: 600 !important;
			transition: all 0.3s ease;
		}
		
		/* Active State */
		.nav-bottom-style .nav-item.active .btn,
		.nav-bottom-style .nav-item .btn:hover {
			color: #000 !important;
			transform: translateY(-3px);
		}
		
		.nav-bottom-style .nav-item i {
			font-size: 18px !important;
			margin-bottom: 4px;
		}
		
		/* Add a little dot for the active page */
		.nav-item.active::after {
			content: '';
			display: block;
			width: 4px;
			height: 4px;
			background: #000;
			border-radius: 50%;
			margin: 0 auto;
		}
		
		
		
		/* Search Modal Specific Styling */
		#searchMenu .modal-content {
			border-radius: 25px !important;
			border: none !important;
		}
		
		#searchMenu .modal-body {
			padding: 35px 25px !important;
		}
		
		/* Modern Search Input Wrapper */
		.search-wrapper {
			position: relative;
			background: #f8f9fa;
			border-radius: 15px;
			padding: 5px 15px;
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			border: 1px solid #eee;
		}
		
		.search-wrapper input {
			border: none !important;
			background: transparent !important;
			padding: 10px 5px !important;
			font-weight: 500;
			box-shadow: none !important;
		}
		
		/* Search Modal Buttons */
		.btn-search-action {
			border-radius: 12px !important;
			padding: 12px !important;
			font-weight: 600 !important;
			transition: all 0.2s ease;
			border: none !important;
		}
		
		#buttonSearchMenu {
			background-color: #000 !important;
			color: #fff !important;
		}
		
		#buttonCloseSearchMenu {
			background-color: #f1f1f1 !important;
			color: #555 !important;
		}
		
		


    	body {
			font-family: 'Montserrat', sans-serif;
			background-color: #fff;
		}
		
		/* Back Button & Header */

		
		/* Hero Image Section */
		.item-image-header {
			width: 100%;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}
		
		/* Content Wrapper */
		.detail-container {
			padding: 25px 20px;
			margin-top: -30px; /* Overlaps image slightly for modern look */
			background: #fff;
			border-radius: 30px 30px 0 0;
			position: relative;
			z-index: 10;
		}
		
		.item-name {
			font-weight: 700;
			font-size: 24px;
			margin-bottom: 5px;
		}
		
		.item-price {
			font-size: 18px;
			font-weight: 600;
			color: #d32f2f;
			margin-bottom: 15px;
		}
		
		/* Modifier Group Styling */
		.table-mod {
			border: none !important;
			margin-bottom: 20px;
		}
		
		.table-mod th {
			background-color: #f8f9fa !important;
			border: none !important;
			padding: 12px 15px !important;
			border-radius: 10px;
			font-weight: 700;
			font-size: 14px;
			text-transform: uppercase;
		}
		
		.table-mod td {
			border-bottom: 1px solid #f2f2f2 !important;
			padding: 15px 5px !important;
			vertical-align: middle !important;
		}
		
		/* Quantity Controls */
		.mod-qty-control {
			background: #f1f1f1;
			border-radius: 8px;
			display: flex;
			align-items: center;
			overflow: hidden;
		}
		
		.btn-qty {
			border: none;
			background: transparent;
			padding: 5px 12px;
			font-weight: bold;
		}
		
		/* Bottom Floating Add to Cart */
		.footer-order {
			position: fixed;
			bottom: 20px;
			left: 20px;
			right: 20px;
			background: #000;
			border-radius: 15px;
			padding: 15px;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 10px 25px rgba(0,0,0,0.2);
			z-index: 1000;
		}


		/* Modern Quantity Section */
		.qty-container {
			background: #f8f9fa;
			border-radius: 20px;
			padding: 20px;
			margin: 20px 0;
			text-align: center;
		}
		
		.qty-label {
			font-weight: 700;
			font-size: 14px;
			text-transform: uppercase;
			color: #888;
			margin-bottom: 15px;
			display: block;
		}
		
		/* Enhanced Touch Control for Quantity */
		.qty-controls {
			display: inline-flex;
			align-items: center;
			background: #fff;
			border-radius: 50px;
			padding: 8px 20px; /* Increased padding */
			box-shadow: 0 4px 15px rgba(0,0,0,0.08);
		}
		
		.qty-btn {
			background: transparent;
			border: none;
			padding: 12px; /* Larger clickable area */
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: transform 0.1s ease;
		}
		
		.qty-btn:active {
			transform: scale(0.85); /* Visual feedback when pressed */
		}
		
		.qty-btn i {
			font-size: 28px; /* Significantly bigger icons for touch */
			color: #000;
		}
		
		#qty-item {
			width: 70px;
			text-align: center;
			font-size: 24px; /* Larger font for readability */
			font-weight: 700;
			border: none;
			background: transparent;
			color: #000;
			margin: 0 5px;
		}
		
		/* Ensure the minus button looks disabled when qty is 1 */
		.qty-btn i.text-muted {
			color: #e0e0e0 !important;
		}
		
		/* Floating Order Button Improvement */
		#btn-order {
			background-color: #000 !important;
			border: none !important;
			border-radius: 15px !important;
			padding: 15px !important;
			font-weight: 700 !important;
			box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
		}
		
		
		
		/* Group Header Styling */
		
		.mod-group-header {
			background-color: #fcfcfc;
			padding: 12px 20px;
			font-weight: 700;
			font-size: 14px;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: #000;
			margin-bottom: 20px;
			text-align: center;
		}
		
		.mod-group-title {
			background-color: #f8f9fa;
			padding: 12px 15px;
			font-weight: 700;
			font-size: 13px;
			text-transform: uppercase;
			color: #444;
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.mod-group-title small {
			text-transform: none;
			font-weight: 400;
		}
		
		/* Modifier Row Styling */
		.mod-row {
			display: flex;
			align-items: center;
			padding: 15px;
			border-bottom: 1px solid #f2f2f2;
			background: #fff;
		}
		
		.mod-row:last-child {
			border-bottom: none;
		}
		
		.mod-check-column {
			flex: 1;
		}
		
		.mod-qty-column {
			min-width: 100px;
			text-align: right;
		}
		
		/* Custom Checkbox size & touch area */
		.custom-control-label {
			width: 100%;
			cursor: pointer;
			font-weight: 500;
		}
		
		/* Fixed Note Area at Bottom */
		.note-container {
			padding: 20px;
			background: #fff;
			margin-top: 20px;
			/*border-top: 8px solid #f8f9fa;  Visual separator */
			text-align: left;
		}
		
		#txtnote {
			border-radius: 12px;
			border: 1px solid #e0e0e0;
			padding: 12px;
			font-size: 14px;
			margin-top: 10px;
		}
		
		
		
		
		/* Modern Problem Card */
		.infobox-card {
			margin-left: auto;
			margin-right: auto;
			margin-top: 50px;
			
			background: #ffffff;
			border-radius: 25px;
			padding: 40px 30px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.05);
			border: none;
			text-align: center;
			max-width: 400px;
			width: 90%;
		}
		
		.infobox-icon {
			font-size: 60px;
			color: #e86b77; /* Soft red matching order-cancelled style */
			margin-bottom: 20px;
		}
		
		.infobox-title {
			font-weight: 700;
			font-size: 20px;
			color: #333;
			margin-bottom: 10px;
		}
		
		.infobox-text {
			color: #888;
			font-size: 14px;
			line-height: 1.6;
			margin-bottom: 30px;
		}
		
		/* Modern Button Style 
		.btn-retry {
			background-color: #000;
			color: #fff;
			border-radius: 15px;
			padding: 15px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 1px;
			border: none;
			transition: transform 0.2s;
			text-decoration: none !important;
			display: block;
		}
		
		.btn-retry:active {
			transform: scale(0.96);
		}
		*/
		
		
/*		body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f8f9fa;
    padding-bottom: 100px;
}*/

/* Modern Order Card */
.order-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f8f8f8;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.order-code-title {
    font-weight: 700;
    font-size: 15px;
    color: #000;
}

.order-date-label {
    font-size: 11px;
    color: #888;
    display: block;
}

/* Status Pill Badges */
.status-badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-received { background: #e3f2fd; color: #1976d2; }
.status-processed { background: #e8f5e9; color: #000000; }
.status-cancelled { background: #F00; color: #000; }
.status-pending { background: #fff3e0; color: #000000; }
.status-expired { background: #6c757d; color: #FFFFFF; }

.price-total {
    font-weight: 700;
    font-size: 16px;
    color: #000;
}

/* Receipt Item Styling */
.receipt-item-row {
    padding: 10px 0;
    border-bottom: 1px dashed #eee; /* Light dashed separator */
}

.receipt-item-row:last-child {
    border-bottom: none;
}

.item-name {
    font-weight: 700;
    font-size: 14px;
    display: block;
    color: #333;
}

.item-qty-price {
    font-size: 12px;
    color: #888;
}

.item-total-price {
    font-weight: 700;
    font-size: 14px;
    color: #333;
}

.item-note {
    font-size: 11px;
    color: #17a2b8;
    font-style: italic;
    padding-left: 10px;
    border-left: 2px solid #17a2b8;
    margin-top: 4px;
}

/* Grand Total Section */
.receipt-summary {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
}


/* Cart Item Card */
.cart-content {
	background: #fff;
	border-radius: 18px;
	padding: 15px;
	margin: 0 15px 15px 15px; 
	box-shadow: 0 4px 12px rgba(0,0,0,0.03);
	border: none !important;
	width: auto;
}

.cart-content .row {
    margin-left: 0;
    margin-right: 0;
}

/* Add this to emenu_style_classic_grid.css */
.cart-item-card {
    background: #ffffff;
    border-radius: 15px; /* This creates the curved corner */
    margin-bottom: 15px;
    padding: 10px 15px;  /* Padding inside the card */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    overflow: hidden;    /* Ensures nothing spills out of the curves */
    width: calc(100% - 30px); /* Gives margin on left and right */
    margin-left: auto;
    margin-right: auto;
}

.cart-item-card .row {
    margin-left: 0;
    margin-right: 0;
}


.item-name-cart {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 2px;
}

.item-note-cart {
	font-size: 11px;
	color: #17a2b8;
	font-style: italic;
	padding-left: 10px;
	border-left: 2px solid #17a2b8;
	margin-top: 4px;
}

/* Quantity Controls */
.qty-wrapper {
	display: flex;
	align-items: center;
	background: #f1f1f1;
	border-radius: 10px;
	padding: 2px;
}

.btn-qty-cart {
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Order Summary Card */
.summary-card {
	background: #fff;
    border-radius: 20px;
    padding: 20px;
    margin: 20px 15px;
}

.summary-line {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 14px;
	color: #666;
}

/* Floating Checkout Dock */
.footer-checkout {
	position: fixed;
	bottom: 25px;
	left: 20px;
	right: 20px;
	background: #000;
	border-radius: 18px;
	padding: 18px 25px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	z-index: 1000;
	text-decoration: none !important;
}

/* Floating Payment Area - Lifted to avoid nav overlap */
/* Change from Fixed to Relative/Static */
.payment-dock {
	position: relative; /* No longer floating */
	bottom: 0;          /* Reset the lift */
	left: 0;
	right: 0;
	background: #fff;
	padding: 20px;
	border-radius: 20px;
	margin-top: 20px;   /* Adds space below the summary card */
	margin-bottom: 20px;/* Adds space before the bottom nav */
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	z-index: 1;
}


.summary-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
	font-weight: 700;
}

/* Flexbox container to prevent buttons from being on top of each other */
.payment-actions {
	display: flex;
	gap: 10px; /* Creates horizontal space between buttons */
}

.btn-payment {
	flex: 1; /* Forces both buttons to have equal 50% width */
	height: 55px;
	border-radius: 12px;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	border: none;
}

.btn-cashier { background: #f1f1f1; color: #333; }
.btn-qris { background: #000; color: #fff; }
	
	
#btn-ok, .btn-ok {
	background-color: #000 !important;
	border: none !important;
	border-radius: 15px !important;
	padding: 15px !important;
	font-weight: 700 !important;
	box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
	color:#FFF;
}

#btn-ok:hover, .btn-ok:hover {
	color:#CCC;
}

btn-no, .btn-no {
	background-color: #930 !important;
	border: none !important;
	border-radius: 15px !important;
	padding: 15px !important;
	font-weight: 700 !important;
	box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
	color:#FFF;
}

#btn-no:hover, .btn-no:hover {
	color:#CCC;
}


.order-processed {
	border-color: #17a2b8 !important;
}
.order-processed .div-head, .modal .order-processed {
	background-color: #17a2b8 !important;
}
.order-processed .sighn {
	color: #17a2b8 !important;
}
/*---*/
.order-received {
	border-color: #4caed9 !important;
}
.order-received .div-head, .modal .order-received{
	background-color: #4caed9 !important;
}
.order-received .sighn {
	color: #28a745 !important;
}
/*---*/
.order-cancelled {
	border-color: #e86b77 !important;
}
.order-cancelled .div-head, .modal .order-cancelled {
	background-color: #e86b77 !important;
}
.order-cancelled .sighn {
	color: #e86b77 !important;
}
/*---*/
.order-expired {
	border-color: #6c757d !important;
}
.order-expired .div-head, .modal .order-expired {
	background-color: #6c757d !important;
}
.order-expired .sighn {
	color: #e86b77 !important;
}

.payment-card {
	background: #fff;
	border-radius: 30px;
	padding: 30px 20px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.05);
	border: none;
	margin-top: 100px;
	margin-bottom: 120px;
	text-align: center;
}	
	
.trx-code {
	font-size: 12px;
	color: #888;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 5px;
}

.trx-amount {
	font-size: 32px;
	font-weight: 800;
	color: #17a2b8;
	margin-bottom: 25px;
}

.qr-container {
	background: #fff;
	padding: 15px;
	border-radius: 20px;
	display: inline-block;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	margin-bottom: 20px;
	border: 1px solid #f0f0f0;
}

.qr-container img {
	max-width: 220px;
	height: auto;
}

.info-alert {
	background: #e3f2fd;
	color: #0c5460;
	border-radius: 15px;
	padding: 15px;
	font-size: 13px;
	margin-bottom: 20px;
	border: none;
}

.btn-payment-status {
	border-radius: 15px;
	padding: 15px;
	font-weight: 700;
	font-size: 15px;
	transition: transform 0.2s;
	border: none;
}

.btn-payment-status:active { transform: scale(0.98); }

.btn-check { background-color: #000; color: #fff; }
.btn-check:hover { color: #fff; background-color: #333; }

.btn-cancel-link {
	color: #e86b77;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none !important;
	margin-top: 20px;
	display: inline-block;
}