body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	background-color: #1F2937;
	color: white;
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 2rem;
	background: linear-gradient(to right, #1E3A8A, #7C3AED);
	height: 50px;
	position: relative;
}

.logo-container {
	flex: 50 0 auto;
	/* Prevent shrinking, fixed width based on content */
	/* position: relative; */
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	padding-top: 80px;
}

.navbar .large-logo {
	height: 90px;
	width: auto;
	top: 20px !important;
	position: static !important;
	left: 200px !important;
	animation: zoomOut 1s ease-out forwards;
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 2rem;
	margin: 0;
	align-items: center;
}

.nav-links a {
	color: white;
	text-decoration: none;
	font-weight: 700;
}

.nav-links a:hover {
	color: #2DD4BF;
}


.account-btn {
	color: white;
	text-decoration: none;
	font-weight: 700;
	padding: 0.5rem 1rem;
	padding: 2px 5px !important;
	background-color: #1cc5bf;
	border-radius: 4px;
	transition: background-color 0.3s, color 0.3s;
	/* Ensure smooth transition for both */
}


.account-btn:hover {
	background-color: #7C3AED;
	/* Deep Purple, as selected */
	color: white !important;
	/* Force white text on hover for visibility */
}

.sign-up-account-btn {
  display: inline-block; /* Only for this instance */
}


/* Global rule for all top-level sections */
section {
	margin-top: 20px;
	/* Revert to original global value, overridden by .signup */
	padding: 2rem;
}

/* Global styling for all h1 headers */
h1 {
	font-size: 2.5rem;
	/* Consistent font size */
	font-weight: 700;
	background: linear-gradient(to right, #1E3A8A, #7C3AED);
	/* Consistent color gradient */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0;
	/* Remove default margin to control height and spacing */
	padding: 0;
	/* Remove default padding */
	line-height: 1.2;
	/* Consistent height control */
	text-align: center;
	/* Ensure consistent alignment */
}

.hero {
	text-align: center;
}

.hero p {
	font-size: 1.2rem;
	margin: 1rem 0;
	color: #D1D5DB;
}

.cta-btn {
	display: inline-block;
	padding: 1rem 2rem;
	background-color: #1cc5bf;
	color: #1F2937;
	text-decoration: none;
	font-weight: 700;
	border-radius: 5px;
	transition: transform 0.2s;
}

.cta-btn:hover {
	transform: scale(1.05);
}

.hero-video video {
	width: 100%;
	max-width: 600px;
	margin-top: 1rem;
	margin-bottom: 0rem;
	border-radius: 10px;
}

footer {
	text-align: center;
	padding: 1rem;
	background-color: #111827;
}

footer a {
	color: #2DD4BF;
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

.form-group {
	margin-bottom: 1.5rem;
	text-align: left;
}

.form-group label {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

/* Adjusted to support .signup-form class */
.signup-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.signup-form input {
	padding: 0.75rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 16px;
	width: 100%;
	/* Match form-group input width */
}

.signup-form button {
	padding: 0.75rem;
	background-color: #1cc5bf;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	transition: background-color 0.3s;
	margin-bottom: 0;
}

.signup-form button:hover {
	background-color: #218838;
}

.form-btn {
	display: inline-block;
	padding: 1rem 2rem;
	background-color: #1cc5bf;
	color: #1F2937;
	text-decoration: none;
	font-weight: 700;
	border-radius: 5px;
	transition: background-color 0.3s;
	width: 100%;
	border: none;
	cursor: pointer;
	margin-top: 0;
	/* Removed extra margin to match gap */
}

.form-btn:hover {
	background-color: #218838;
}

.form-error {
	color: #F87171;
	font-size: 0.9rem;
	margin-top: 1rem;
	height: 1.5rem;
}

.login-link {
	margin-top: 1.5rem;
	font-size: 1rem;
	color: #D1D5DB;
}

.login-link a {
	color: #2DD4BF;
	text-decoration: none;
}

.login-link a:hover {
	text-decoration: underline;
}

/* Update .toggle with .signup specificity */
.signup .toggle {
	display: inline-block;
	/* Ensure the link behaves as a block for proper spacing */
	font-size: 20px !important;
	color: #1cc5bf !important;
	/* Force the teal color */
	text-decoration: none;
}

.signup .toggle:hover,
.signup .toggle:focus {
	text-decoration: underline;
	color: #2DD4BF !important;
	/* Force the brighter teal on hover */
	outline: none;
}

/* Added error and success styles */
.error {
	color: #ff4444;
	margin-top: 0.5rem;
	display: none;
	font-size: 14px;
}

.success {
	color: #28a745;
	margin-top: 0.5rem;
	display: none;
	font-size: 14px;
}

.features {
	text-align: center;
	/* Center children (h1, p, cta-btn) */
	/* padding: 2rem 2rem 5rem 2rem; */
	max-width: 1200px;
	margin: 0 auto;
	/* margin-top: 40px; */
}

.features p {
	font-size: 1.2rem;
	color: #D1D5DB;
	margin-bottom: 3rem;
}

.feature-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-bottom: 3rem;
}

.feature-item {
	background-color: #374151;
	padding: 2rem;
	border-radius: 10px;
	transition: transform 0.3s ease;
	opacity: 0;
	animation: fadeIn 0.5s ease-out forwards;
}

.feature-item:hover {
	transform: translateY(-5px) scale(1.05) !important;
	/* Force hover effect */
}

.feature-item:nth-child(1) {
	animation-delay: 0.1s;
}

.feature-item:nth-child(2) {
	animation-delay: 0.2s;
}

.feature-item:nth-child(3) {
	animation-delay: 0.3s;
}

.feature-item:nth-child(4) {
	animation-delay: 0.4s;
}

.feature-item:nth-child(5) {
	animation-delay: 0.5s;
}

.feature-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.feature-item h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #2DD4BF;
	margin-bottom: 1rem;
}

.feature-item p {
	font-size: 1rem;
	color: #D1D5DB;
}



.feature-item.fleet-interactions ul {
    /* font-size: .95rem; */
	text-align: left; /* Left-align the bullet list */
    margin: 10px 0; /* Add vertical spacing */
    padding-left: 0px; /* Ensure bullets have proper indentation */
	padding-right: 0px;
    list-style-type: disc; /* Use standard bullet points */
}

.feature-item.fleet-interactions li {
    margin-bottom: 8px; /* Space between bullet items */
    line-height: 1.5; /* Improve readability */
}


.feature-item.fleet-interactions strong {
    color: #1cc5bf; /* Match the purple theme */
}




#qr-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.redirect-rule {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.redirect-rule input {
	flex: 1;
	padding: 0.75rem;
	border: none;
	border-radius: 5px;
	background-color: #374151;
	color: white;
	font-size: 1rem;
}

.redirect-rule .remove-rule {
	padding: 0.5rem 1rem;
	background-color: #F87171;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.redirect-rule .remove-rule:hover {
	background-color: #EF4444;
}

#qr-code {
	width: 200px;
	height: 200px;
	margin: 1rem auto;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
}

#qr-code canvas {
	border: 2px solid transparent;
	border-image: linear-gradient(to right, #1E3A8A, #7C3AED) 1;
}

#download-link {
	margin-top: 1rem;
}

/* Layered Menu Overlay Styles */
.menu-overlay {
	padding: 2rem 2rem 5rem 2rem;
	max-width: 100%;
	margin: 0;
	height: calc(100vh - 50px - 80px);
	/* Adjust for navbar and footer */
	overflow: hidden;
}

.camera-simulator {
	background-color: #333333;
	/* Simulated camera view */
	height: 100%;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 100%;
	background: linear-gradient(to right, #1E3A8A, #374151);
	padding: 2rem;
	color: white;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	transform: translateX(-100%);
	/* Start off-screen */
	animation: slideIn 0.5s ease-out forwards;
	/* Slide in animation */
}

.overlay h1 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.overlay p {
	font-size: 1rem;
	color: #D1D5DB;
}

.menu-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.menu-link {
	text-decoration: none;
	color: #2DD4BF;
	font-weight: 700;
	transition: color 0.3s ease;
}

.menu-link:hover {
	color: #FFFFFF;
}

.menu-link span {
	margin-right: 0.5rem;
}

section {
	margin-top: 20px;
	/* Matches current signup.html spacing */
	padding: 2rem;
	/* Matches current signup.html padding */
}

/* Specific styling for signup section */
/* Specific styling for signup section */
.signup {
	max-width: 500px;
	/* Matches current signup.html width */
	margin: 0 auto;
	/* Ensures centering */
}

.signup h1 {
	text-align: center;
	/* Ensures header is centered */
}

.signup p {
	font-size: 1.1em;
	/* Matches typical paragraph size */
	color: white;
	/* Ensures visibility on black background */
	line-height: 1.6;
	text-align: center;
	/* Centers the text */
}

.signup p b {
	font-weight: 700;
	/* Ensures bold text stands out */
}

.signup-form input {
	background-color: #444444;
	/* Dark grey, adjust to match your other forms */
	border: 1px solid #666666;
	/* Slightly lighter grey border for contrast */
	padding: 10px;
	/* Matches typical input padding */
	color: white;
	/* White text for typed input */
	font-size: 1em;
	/* Matches typical input size */
	width: 100%;
	/* Ensures full width of container */
	box-sizing: border-box;
	/* Includes padding and border in width */
}

.signup-form input::placeholder {
	color: white;
	/* White placeholder text */
	opacity: 0.8;
	/* Slightly faded for distinction, adjust as needed */
}

.signup-form .form-btn {
	width: 100%;
	/* Matches input width */
	padding: 10px;
	/* Matches input padding for consistent height */
	font-size: 1em;
	/* Matches input text size */
	box-sizing: border-box;
	/* Includes padding and border in width */
	background-color: #1cc5bf;
	/* Teal to match theme */
	color: white;
	/* Readable on teal */
	border: none;
	/* Clean look */
	cursor: pointer;
	/* Indicates clickable */
}

.signup-form .form-btn:hover,
.signup-form .form-btn:focus {
	background-color: #2DD4BF;
	/* Brighter teal on hover/focus */
	outline: none;
}

.signup .toggle {
	display: block;
	/* Allows centering */
	font-size: 1.25em;
	/* Slightly larger, consistent with relative sizing */
	color: #1cc5bf !important;
	/* Teal color */
	text-decoration: none;
	margin: 0 auto;
	/* Centers the link horizontally */
	text-align: center;
	/* Ensures text aligns center within the block */
}

.signup .toggle:hover,
.signup .toggle:focus {
	text-decoration: underline;
	color: #2DD4BF !important;
	/* Brighter teal on hover/focus */
	outline: none;
}

.add-rule {
	background-color: #4B5563;
	color: #1cc5bf;
	border: none;
}

.add-rule:hover {
	background-color: #6B7280;
}

/* Modal Styles */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	background: black;
	padding: 20px;
	border-radius: 8px;
	max-width: 400px;
	text-align: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-content h2 {
	margin: 0 0 10px;
	font-size: 1.5em;
	color: #7C3AED;
	/* Match your theme */
}

.modal-content p {
	margin: 0 0 20px;
	font-size: 1em;
}

.modal-buttons {
	display: flex;
	justify-content: space-around;
}

.cta-btn {
	padding: 10px 20px;
	font-size: 1em;
	cursor: pointer;
}

/* Style Add Another Layer button */
#qr-form .cta-btn.add-rule {
	/* background-color: pink; */
	color: white;
	border: none;
}

#qr-form .cta-btn.add-rule:hover {
	background-color: #6B7280;
}


/* Product Details & Product Edit  */
.edit-icon {
            cursor: pointer;
            color: #FFD700;  /* yellow */
            transition: color 0.3s ease;
			margin-left: 10px;
        }
        .edit-icon:hover {
            color: #00ffcc;  /* Cyan on hover */
        }
        .details-container {
            text-align: center; 
            padding: 10px;
        }
        .info-header {
            position: relative;
            display: inline-block; 
        }
        .info-header h2 {
            margin: 0;
            font-size: 24px;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(0, 255, 204, 0.7);
        }
        .info-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }
        .info-display {
            max-width: 400px;
            width: 100%;
        }
        .info-display p {
            margin: 10px 0;
            text-align: left; /* Keep field text left-aligned for readability */
        }
        
        .fields-and-image {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            /* <!-- gap: 20px;  --> */
            margin-top: 10px;
			/* <!-- margin-right: 20px; --> */
            width: 100%;
            max-width: 550px; /* Reduced to match actual content width (400px fields + 150px image) */
        }
    
        .fields-column {
            max-width: 400px;
            width: auto; /* Let the column shrink to fit content */
            text-align: left; /* Ensure fields are left-aligned */
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* Align fields to the left within the column */
            margin: 0; /* Remove any default margins */
            padding: 0; /* Remove any default padding */
        }
    
        .fields-column p {
            margin: 10px 0;
            width: auto; 
        }

        .info-image {
            max-width: 300px; 
            margin: 0; 
			margin-left: 20px;
            padding: 0; 
        }
        
        .info-image img {
            max-width: 100%;
            max-height: 150px; 
        }
        .upgrade-prompt {
            margin-top: 20px;
            text-align: center;
        }
        .upgrade-prompt p {
            display: inline-block;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
        }
        .upgrade-prompt a {
            color: #00ffcc;
            text-decoration: underline;
        }


#custom-fields-section {
    margin-top: 20px;
}

.custom-field {
    margin: 10px 0;
}

.custom-field label {
    margin-right: 10px;
}

.hide-checkbox {
    margin-left: 10px;
}


.custom-upload {
  
  padding: 6px !important;
  margin-top: 9px;
  padding-left: 3px !important;
  padding-right: 14px !important;
  max-width: 92px; 
  border: 2px dashed #ccc;
  border-radius: 5px;
  background-color: #FFD700 !important;
  cursor: pointer;
  transition: border-color 0.3s;
}

.custom-upload:hover {
  border-color: #888;
}

.signout-btn {
	background-color: #ff4444;
	/* Red background */
	color: white;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	transition: background-color 0.3s;
}

.signout-btn:hover {
	background-color: #cc0000;
	/* Darker red on hover */
}

.edit-qr-page {
	background-color: #000 !important;
	color: white;
	min-height: 100vh;
	overflow-x: hidden;
	/* Prevents horizontal scrollbars */
	overflow-y: auto;
	/* Allows vertical scrolling only when needed */
}

/* shows AR preview of selected custom icon??  */
.ar-preview {
    color: #666;
    font-size: 0.9em;
}



.edit-qr {
	width: 100%;
	max-width: 1010px;
	/* Keeps it from getting too wide */
	text-align: center;
	/* Centers inline elements */
	padding: 2rem;
	margin: 0 auto;
	/* Centers the section horizontally */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Centers content vertically if needed */
	min-height: 80vh;
	/* Ensures content is centered even if short */
}

.qr-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.qr-item {
	background: rgba(255, 255, 255, 0.1);
	padding: 1.5rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.qr-details {
	flex: 1;
	/* margin-right: 0rem; */
}

.qr-item h3 {
	margin: 0 0 1rem;
	font-size: 18px;
}

.qr-name-container {
    margin-bottom: 5px;
}
.qr-name {
    margin: 0;
}


.qr-name-container .qr-name {
    display: inline; /* Only affects qr-name inside qr-name-container */
}
.qr-name-container .edit-icon {
    display: inline-block; /* Keeps icon inline with spacing */
}

.edit-qr-input {
    display: none;
    margin-left: 10px;
    margin-right: 5px;
}
.edit-qr-submit {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    color: #fff;
}




/* ========================= */
/* Edit QR Page Styles */
/* ========================= */
.edit-qr-page .cta-btn {
	padding: 10px 10px !important;
	/* 10px top/bottom, 5px left/right */
	font-size: 14px !important;
	display: inline-block !important;
	/* Adjusts width to content */
	width: auto !important;
	/* Ensures width fits the text */
}

.edit-qr-page .add-rule {
	margin-bottom: 2px !important;
	margin-right: 30px !important;
}

.qr-item .redirect-rule .field-group:has(select[name="icon"]) {
    max-width: 175px; /* Reinforce cap in edit-qr.html context */
}

.qr-item .redirect-rule input[type="url"] {
    min-width: 200px; /* Reinforce URL size in edit-qr.html */
}

/* Base styles for .field-group (shared across pages) */
.field-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 0.5rem;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
}

/* General redirect-rule container */
.redirect-rule {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

/* URL input - prevent shrinking, consistent size */
.redirect-rule input[type="url"] {
    width: 100%;
    max-width: 315px;
    min-width: 250px; /* Ensures it doesn't shrink below this */
    flex-shrink: 0; /* Prevents shrinking */
    background: #e8f0fe;
    box-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
    color: black;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Icon dropdown - allow shrinking, cap size */
.redirect-rule .field-group:has(select[name="icon"]) {
    flex-shrink: 2; /* Allow it to shrink more than others */
    flex-basis: 175px; /* Starting size */
    flex-grow: 0; /* Prevent growing */
    max-width: 175px; /* Cap its width */
	min-width: 100px;
}

/* Ensure select inside icon field-group respects size */
.redirect-rule select[name="icon"] {
    width: 100%;
    max-width: 175px; /* Match field-group max-width */
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}


.redirect-rule {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}



.field-group label {
	margin-bottom: 1px;
	text-transform: capitalize;
	font-size: 12px;
	text-align: center;
	color: #ccc;
}




.redirect-rule input[type="url"],
.redirect-rule select {
	width: 100%;
	max-width: 315px;
	background: #e8f0fe;
	box-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
	color: black;
	padding: 0.5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.redirect-rule input[type="date"] {
	width: 100%;
	max-width: 120px;
	padding: 0.5rem;
	background: #374151;
	color: white;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
}

.redirect-rule input[type="checkbox"] {
	margin: 0 auto;
	height: 20px;
	width: 20px;
	display: block;
}

.redirect-rule input[type="file"] {
	display: none;
}

.inactive-date-container {
	display: none;
}

/* Create qr styles */
.create-qr .redirect-rule {
	min-width: 1000px;
	max-width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.create-qr .redirect-rule .inactive-date-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-right: 0.5rem;
	flex-basis: auto;
	flex-grow: 0;
}


.create-qr .redirect-rule input[type="url"]:focus,
.create-qr .redirect-rule input[type="url"].has-value {
	background: #e8f0fe;
	box-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
}

.create-qr .redirect-rule select {
	background: white;
	box-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
	color: black;
	padding: 10px 8px;
	line-height: 1.5;
	border: 1px solid #ccc;
	border-radius: 4px;
	height: 40px;
	width: 100%;
	max-width: 140px;
}

.create-qr .redirect-rule label {
	display: block;
	margin-bottom: 1px;
	text-transform: capitalize;
	font-size: 12px;
	text-align: center;
	max-width: 100px;
	white-space: nowrap;
}

.redirect-rule .remove-rule {
	width: 100%;
	max-width: 100px;
	flex-shrink: 0;
	margin-top: 20px;
}

.edit-qr .remove-rule {
	width: 100%;
	max-width: 70px;
	/* flex-shrink: 0; */
	margin-top: 19px;
	padding: 7px 3px;
}

/* Standard QR button styles */
.standard-qr-btn {
	background-color: #ff5733;
}

.standard-qr-btn:hover {
	background-color: #e64a19;
	transform: scale(1.05);
}

.standard-qr-section .generate-btn {
	background-color: #ff5733;
	color: white;
	padding: 10px 15px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
}

.standard-qr-section {
	display: none;
	margin-top: 10px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.standard-qr-section input[type="url"] {
	width: 100%;
	max-width: 315px;
	min-width: 150px;
	background: #e8f0fe;
	box-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
	color: black;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin: 0;
}

.icon-preview {
	max-width: 50px;
	max-height: 50px;
	margin-left: 10px;
	vertical-align: middle;
}

/* change?? below .qr-result and added more styles */
/* .qr-result { */
/* margin-top: 2rem; */
/* } */
.qr-result {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
}

.qr-result h2 {
	margin-bottom: 5px;
}

.qr-code-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	width: auto;
	padding: 0;
	background: transparent;
}

.qr-code-container canvas {
	display: block;
	margin: 0 auto;
	padding: 0;
	background: transparent;
	border: none;
}

.qr-code-container:not(:last-child) {
	margin-right: 20px;
}

#qr-code-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

/* Create QR page styles */
.create-qr {
	max-width: 1200px;
	margin: 0 auto;
}

.create-qr p {
	font-size: 1.2rem;
	margin: 1rem 0;
	color: #D1D5DB;
	text-align: center;
}

#qr-form {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

#qr-name {
	width: 100%;
	min-width: 150px;
	background: #374151;
	color: white;
	padding: 10px;
	border-radius: 10px;
	box-sizing: border-box;
	font-size: 16px;
}

#qr-name::placeholder {
	color: #999;
	opacity: 1;
}

.qr-result .cta-btn {
	font-size: 16px;
}

#qr-form .cta-btn {
	font-size: 16px;
	border-radius: 10px;
	color: white;
}

/* end of create qr styles */
.edit-qr .cta-btn {
	width: 100%;
	max-width: 200px;
	padding: 0.75rem;
	background-color: #1cc5bf;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	transition: background-color 0.3s;
}

.edit-qr .cta-btn:hover {
	background-color: #218838;
}

.error {
	color: #ff4444;
	margin-top: 0.5rem;
	display: none;
	font-size: 14px;
}

.success {
	color: #28a745;
	margin-top: 0.5rem;
	display: none;
	font-size: 14px;
}

.create-qr-link {
	color: #1cc5bf;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.3s;
}

.create-qr-link:hover {
	color: #218838;
	text-decoration: underline;
}

.qr-code {
	width: 150px;
	height: 150px;
	margin-left: 1rem;
	background-color: #ffffff;
	padding: 5px;
	border: 1px solid #ccc;
}

.edit-qr-page body {
	background-color: #000 !important;
	/* Ensures black background */
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}

/* Login page specific styles */
.login-container {
	max-width: 400px;
	margin: 0 auto;
	padding: 2rem;
	text-align: center;
	background-color: #000000;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	margin-top: 50px;
	margin-bottom: 50px;
}

.login-container h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	color: white;
	margin-bottom: 1.5rem;
}

.login-container .form-group {
	margin-bottom: 1rem;
	/* Overrides global .form-group margin-bottom: 1.5rem */
	text-align: left;
}

.login-container .form-group label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: white;
	margin-bottom: 0.25rem;
}

.login-container .form-group input {
	width: 100%;
	padding: 0.75rem;
	background-color: #000000;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	border: 1px solid #666666;
	border-radius: 4px;
	box-sizing: border-box;
	color: white;
}

.login-container .form-group input::placeholder {
	color: #D1D5DB;
	opacity: 0.8;
}

.login-container button[type="submit"] {
	width: 100%;
	padding: 0.75rem;
	background-color: #603ad0;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	transition: background-color 0.3s ease;
}

.login-container button[type="submit"]:hover {
	background-color: #7C3AED;
}

.login-container .error,
.login-container .success {
	margin-top: 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9rem;
}

.login-container .toggle-mode {
	margin-top: 1rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	color: white;
	cursor: pointer;
}

.login-container .toggle-mode a {
	color: white;
	text-decoration: none;
}

.login-container .toggle-mode:hover {
	text-decoration: underline;
}

.login-container .signout-btn {
	width: 100%;
	padding: 0.75rem;
	background-color: #ff4444;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	margin-top: 1rem;
	display: none;
}

.login-container .signout-btn:hover {
	background-color: #cc0000;
}

.tutorial-container {
	background: black;
	/* Consistent with other containers, optional */
	padding: 2rem;
	border-radius: 10px;
	max-width: 1000px;
	/* Matches your design */
	width: 100%;
	margin: 0 auto 0;
	/* Top margin for navbar, auto for horizontal centering */
	text-align: left;
	/* Keeps text left-aligned inside */
	border: 3px solid rgba(255, 255, 255, 0.2);
	/* Consistent border */
	/* flex: 1 0 auto; */
	font-size: 17px;
}


.qcatch-section {
    margin-top: 20px;
    padding: 20px;
    background: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(28, 197, 191, 0.3);
    border-radius: 12px;
    color: #e0e0e0;
    font-size: 1rem;
    line-height: 1.6;
}

.qcatch-warning {
    background-color: rgba(220, 53, 69, 0.25);
    border: 2px solid #dc3545;
    border-radius: 8px;
    padding: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.25);
    margin-top: 8px; /* small gap below the link */
    margin:auto;
    width:50%;
}

/* Hyperlinks with background color to make them pop */
.tutorial-container a {
	color: white;
	text-decoration: none;
	font-size: 18px;
	padding: 4px;
	display: inline-block;
	background: #374151;
	/* Light background to make URLs pop */
	border-radius: 10px;
	/* Subtle rounded corners */
	box-sizing: border-box;
	/* transition: background 0.3s ease; /* Smooth transition on hover */
	border-bottom: 2px solid #0000FF;
	/* Blue underline */
}

.tutorial-container a:hover {
	text-decoration: none;
	/* Override default underline on hover */
	color: #1cc5bf;
	/* Teal on hover */
	background: rgba(255, 255, 255, 0.3);
	/* Slightly lighter on hover */
	border-bottom: 2px solid #0000FF;
	/* Keep the blue underline on hover */
}

/* Ensure paragraphs and list items inherit the base font size */
/* .tutorial-container p, */
.tutorial-container li {
	line-height: 1.8;
	/* Improves readability with larger font */
}

/* Ensure content pushes footer down */
.tutorial-container {
	flex: 1 0 auto;
	/* Allows container to grow but not shrink below content */
}

.tutorial-image {
	max-width: 50%;
	height: auto;
	margin: 1rem 0;
	border-radius: 25px;
	box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
	display: block;
	/* centering */
	/* text-align: center; */
}

.caption {
	font-size: 14px;
	color: #ccc;
	/* text-align: center; */
	margin-top: 0.5rem;
}

.image-caption-group {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1rem 0;
}

.logo-preview-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 5px;
	gap: 10px;
}

.ARHelp-image {
	max-width: 50%;
	height: auto;
	margin: 1rem 0;
	border-radius: 25px;
	box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
	display: block;
	/* centering */
	/* text-align: center; */
}


.upload-logo-btn {
	display: block;
	margin: 0 auto 10px auto;
	/* Centers the button horizontally */
	padding: 6px 10px;
	background-color: #473ab5;
	/* Example color - adjust as needed */
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}




.upload-logo-btn:hover {
	background-color: #6600cc;
	/* Darker shade for hover - adjust as needed */
}

.qr-logo {
	position: absolute;
	/* top: 10px; */
	left: 50%;
	transform: translateX(-50%);
	max-width: 200px;
	max-height: 50px;
	object-fit: contain;
	z-index: 3;
	transition: transform 0.3s ease;
}


.product-image {
    max-width: 500px;
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
}



/* dropdown for Upload Product Image */
.position-select {
    padding: 2px; /* Adds some internal spacing */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 10px; /* Rounded corners */
    font-family: 'Montserrat', sans-serif; /* Matches your site’s font */
    font-size: 14px; /* Readable size */
    background-color: #ffd700; 
    width: 79px; /* Fixed smaller width instead of 100% */
    margin-left: auto; /* Center it horizontally */
    margin-right: auto; /* Center it horizontally */
    box-sizing: border-box; /* Ensures padding doesn’t increase width */
    cursor: pointer; /* Indicates it’s clickable */
    text-align: center; /* Centers the text inside the dropdown */
}

/* Optional: Style the dropdown options when open */
.position-select:focus {
    outline: none; /* Removes default focus outline */
    border-color: #00ffcc; /* Highlight color on focus, matching your theme */
    box-shadow: 0 0 5px rgba(0, 255, 204, 0.5); /* Subtle glow */
}

/* Optional: Hover effect */
.position-select:hover {
    border-color: #999; /* Darker gray on hover */
}


.qr-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 100px;
	margin-left: 0;
	margin-right: 35px;
	position: relative;
}

.qr-link {
	margin-top: 10px;
}

.qr-link a {
	color: #FFFFFF;
	text-decoration: none;
}

.qr-link a:hover {
	text-decoration: underline;
	color: #0000EE;
}

.delete-qr-btn {
	background-color: #ff4444;
	color: white;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 3px;
	font-size: 14px;
}

.delete-qr-btn:hover {
	background-color: #cc0000;
}

.reset-qr-btn {
    width: 100%;
    background-color: #1cc5bf;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.reset-qr-btn:hover {
    background-color: #218838;
}

.subscribe-section {
	padding: 15px 5px;
	text-align: center;
	background-color: #000000;
	font-size: 1.2em;
}

.subscribe-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.subscribe-steps {
	text-align: left;
	max-width: 90%;
	margin: 20px auto;
	padding-left: 150px;
	/* font-size: 1.2em; */
	line-height: 1.5;
}

.subscribe-container p {
	font-size: 1.2em;
	margin: 10px 0;
}

.support-link {
	color: #7C3AED;
	text-decoration: underline;
}

.subscribe-btn {
	margin-top: 18px;
	background: linear-gradient(135deg, #ff9800, #f44336);
	color: white;
	padding: 8px 16px;
	border: none;
	border-radius: 5px;
	font-weight: 550;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	font-size: 16px;
}

.subscribe-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 15px rgba(255, 152, 0, 0.7);
}

.subscribe-btn:active {
	transform: scale(0.95);
}

.venmo-handle {
	text-decoration: underline;
	/* Underline on hover for link clarity */
	background: #e0f0ff;
	/* Slightly darker on hover */
}

.venmo-handle:hover {
	text-decoration: underline;
	/* Underline on hover for link clarity */
	background: white;
	/* Slightly darker on hover */
}

@keyframes slideIn {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(0);
	}
}

.modal-btn {
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 700;
	color: white;
}

.modal-btn.cancel {
	background: #ccc;
	color: #333;
}

.modal-btn.subscribe {
	background: #ff9800;
}

/* Style for the "User logo" position dropdown */
select[name="logo-position"] {
	display: block;
	/* Already set inline, but ensures consistency */
	padding: 2px 5px;
	/* Comfortable padding */
	font-family: 'Montserrat', sans-serif;
	/* Matches your site’s font */
	font-size: 14px;
	/* Readable size */
	color: #000000;
	/* Dark text for contrast */
	background-color: #FFD700;
	/* White background */
	border: 3px solid #000000;
	/* Subtle border */
	border-radius: 8px;
	/* Slightly rounded corners */
	width: 88px;
	/* Fixed width for consistency */
	height: 35px;
	cursor: pointer;
	/* Indicates it’s clickable */
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	/* Smooth transitions */
}

/* Hover effect */
select[name="logo-position"]:hover {
	border-color: #888;
	/* Darker border on hover */
}

/* Focus effect */
select[name="logo-position"]:focus {
	outline: none;
	/* Remove default outline */
	border-color: #00ffcc;
	/* Bright cyan border to match your theme */
	box-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
	/* Subtle glow */
}

/* Option styles */
select[name="logo-position"] option {
	font-family: 'Montserrat', sans-serif;
	background-color: #fff;
	color: #333;
}

/* end of dropdown styles  */


.ar-url-link {
    color: #0ff; /* Cyan for that AR pop */
    font-size: 12px;
	text-decoration: none; /* No underline */
    font-weight: bold; /* Stand out */
    padding: 3px 2px; /* Some breathing room */
    border: 1px solid #0ff; /* Holographic vibe */
    border-radius: 5px; /* Rounded edges */
    background: rgba(0, 255, 255, 0.1); /* Subtle glow */
    transition: background 0.3s, color 0.3s; /* Smooth hover */
}

.ar-url-link:hover {
    background: rgba(0, 255, 255, 0.3); /* Brighter on hover */
    color: #fff; /* White text */
}


.holographic-icon {
    margin-left: 30px;
	background: none;
    border: none;
    font-size: 1rem;
    color: #1cc5bf;
    cursor: pointer;
    /* position: absolute; */
    /* left: calc(50% + 100px); */
    /* transform: translateY(-50%); */
    /* padding: 0.5rem; */
    /* z-index: 3; */
    /* display: none; */
    animation: holographicGlow 2s infinite alternate;
}

.holographic-icon::before,
.holographic-icon::after {
   
	content: '';
	
    box-shadow: 0 0 3px #1cc5bf, 0 0 3px #1cc5bf, 0 0 3px #00ffcc;
    animation: holographicPulse 1.5s infinite alternate;
    opacity: .7;
}

@keyframes holographicGlow {
    margin-left: 100px;
	from { box-shadow: 0 0 .5px #1cc5bf, 0 0 1px #00ffcc; }
    to { box-shadow: 0 0 .5px #1cc5bf, 0 0 2px #00ffcc, 0 0 35px #00ffcc; }
}


/* Premium Analytics Button Styles */
.analytics-section h1 {
	margin-top: -20px;
}

.analytics-btn {
	background: linear-gradient(135deg, #ff9800, #f44336);
	/* Vibrant gradient */
	color: white;
	padding: 8px 16px;
	border: none;
	border-radius: 5px;
	font-weight: 700;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.analytics-item h3 {
	color: #1cc5bf;
	margin: 0 0 10px;
	font-size: 1.4em;
}

.analytics-btn:hover {
	transform: scale(1.05);
	/* Slight grow effect */
	box-shadow: 0 0 15px rgba(255, 152, 0, 0.7);
	/* Glowing shadow */
}

.analytics-btn::before {
	content: '★ Premium';
	/* Premium badge */
	position: absolute;
	top: -10px;
	right: -40px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 10px;
	padding: 2px 8px;
	transform: rotate(45deg);
}

.analytics-btn:active {
	transform: scale(0.95);
	/* Click feedback */
}

body.analytics-page {
	text-align: center;
	margin: 0;
	background-color: #000000;
	font-family: 'Montserrat', sans-serif;
}

.chart-container {
	margin-top: 20px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.analytics-container {
	max-width: 900px;
	/* Slightly wider for a spacious feel */
	margin: 0 auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	/* Space between items */
}

.analytics-item {
	background: #333333;
	color: #ffffff;
	padding: 20px;
	margin: 0;
	/* Gap handled by container */
	border-radius: 10px;
	/* Softer corners */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	/* Subtle shadow for depth */
	text-align: left;
	transition: transform 0.2s ease;
	/* Smooth hover effect */
}

.analytics-item:hover {
	transform: translateY(-3px);
	/* Slight lift on hover */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	/* Enhanced shadow */
}

.analytics-item p {
	margin: 0;
	font-size: 1.2em;
	color: #ffffff;
	/* Explicitly white for "Scans: 0" */
}

.analytics-dashboard p {
    margin-bottom: 15px; /* Reduces space below the paragraph */
}

.analytics-dashboard h4 {
    margin-top: 5px; /* Reduces space above *Premium Package */
}

.fleet-interactions p {
	margin-bottom: 10px; 
}



.heatmap-container {
	margin-top: 20px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.heatmap-canvas {
	width: 100%;
	height: 200px;
	background-color: #000000;
	/* Changed to black for contrast */
}

.heatmap-label {
	position: absolute;
	color: #fff;
	font-size: 10px;
	pointer-events: none;
}

details summary {
	cursor: pointer;
	color: #1cc5bf;
}

/* Back button (unchanged, just for reference) */
.back-to-edit-btn {
	background: linear-gradient(135deg, #ff9800, #f44336);
	color: white;
	padding: 8px 16px;
	border: none;
	border-radius: 5px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	font-size: 18px;
}

.back-to-edit-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 15px rgba(255, 152, 0, 0.7);
}

.back-to-edit-btn:active {
	transform: scale(0.95);
}

/* Refresh Button Styles with Font Awesome Icon */
.analytics-section #refresh-btn {
	position: relative;
	padding: 10px 15px;
	background: linear-gradient(45deg, #ff9800, #f44336);
	color: #fff;
	border: none;
	border-radius: 5px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
	margin: 2px auto;
	display: block;
	text-align: center;
	overflow: hidden;
	/* Ensure icon stays within button */
}

.analytics-section #refresh-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 15px rgba(0, 255, 204, 0.7);
}

.analytics-section #refresh-btn:active {
	transform: scale(0.95);
}

.analytics-section #refresh-btn.refreshing {
	pointer-events: none;
	opacity: 0.8;
}

.analytics-section #refresh-btn.refreshing i {
	animation: spin 1s linear infinite;
}


.how-it-works {
  position: relative;
}

.how-it-works::after {
  content: "How It Works";
}


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

	100% {
		transform: rotate(360deg);
	}
}

/* End of Refresh button */
/* Animations */
@keyframes zoomOut {
	0% {
		transform: translateY(-20%) scale(0.5);
		opacity: 0.5;
	}

	100% {
		transform: translateY(-20%) scale(1);
		opacity: 1;
	}
}

/* Features Page */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@media (min-width: 1200px) {
	.redirect-rule {
		flex-wrap: nowrap;
	}
}

@media (max-width: 768px) {
	.overlay {
		width: 100%;
		left: 0;
	}

	.navbar {
		flex-wrap: wrap;
		height: auto;
		padding: .5px .5px;
		
	}

	.features {
		font-size: 1rem;
	}
		
	.logo-container {
        flex: 1;
        justify-content: flex-start;
        padding-top: 35px;
		transform: scale(0.8);
		transform-origin: left top;
    }

	.nav-links {
		
		flex: 1 0 100%;
		/* Full width on small screens */
		justify-content: center;
		/* Center links below logo */
		padding: 0px 0px 0px 0px !important;
		gap: .8rem;
		/* Reduce spacing between links from 2rem to 1rem */
		font-size: 12px;
		margin-top: -6px; 
	}
	
	

	.how-it-works::after {
		content: "Demo";
	}
	
	
	
	.qr-display {
		margin-right: 60px;
	}
		
	.analytics-btn {
		padding: 2px 2px;
	}

	.signout-btn {
		padding: 2px 2px;
		
	}


	.tutorial-container {
		max-width: 300px;
	}

	.modal {
			position: fixed; /* Reinforce fixed positioning */
			left: 0; /* Force it to start at the left edge of the viewport */
			width: 100vw; /* Full viewport width */
			overflow-x: hidden; /* Prevent horizontal overflow */
			align-items: flex-start; 
			padding-top:120px;
		}

	.modal-content {
			max-width: 85%; /* Slightly smaller for mobile */
			margin: 0 auto; /* Center horizontally */
		}


	html, body {
		height: 100%; /* Ensures they don’t exceed viewport unless content requires it */
		overflow-x: auto; /* Allows horizontal scrolling as needed */
		overflow-y: auto; /* Only scrolls vertically if content exceeds viewport */
	}


	.hero {
			padding-top: 0 !important; /* Remove any top padding from the container */
			margin-top: 0; /* Ensure no extra margin above */
		}
		
	footer {
		padding: 0rem;
	}


}