@charset "UTF-8";
main {
        flex: 1 0 auto;
    }
    footer {
        flex-shrink: 0;
       
        padding: 2rem 0;
        text-align: center;
        font-size: 0.9rem;
        max-height: 300px;
        overflow: hidden;
        transition: max-height 0.5s ease, opacity 0.5s ease;
        opacity: 1;
    }
    footer.hidden {
        max-height: 0;
        opacity: 0;
        padding: 0;
    }
    footer h5 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    footer ul.list-unstyled, footer ul.list-inline {
        margin: 0;
        padding: 0;
    }
    footer ul li {
        margin-bottom: 0.5rem;
    }
    footer .list-inline-item a {
        color: #6c757d;
        font-size: 1rem;
        margin: 0 0.5rem;
    }
    footer .list-inline-item a:hover {
        color: #0d6efd;
    }
    footer hr {
        margin: 1.5rem 0;
        border-color: #dee2e6;
    }
    footer .text-md-end a {
        color: #6c757d;
        margin-left: 1rem;
    }
    footer .text-md-end a:hover {
        color: #0d6efd;
        text-decoration: none;
    }
    .toggle-footer-btn {
        margin-bottom: 1rem;
    }
   
    /* Button grid styling */
    .button-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Vertical space between rows */
    }
    .button-row {
        display: flex;
        justify-content: center;
        gap: 20px; /* Horizontal space between buttons */
    }
    .uniform-btn {
        width: 150px;
        min-height: 60px;
        border: 2px solid #000000;
        color: #000000;
        background-color: transparent;
        text-align: center;
       
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        line-height: 1.2;
        transition: all 0.3s ease;
        text-decoration: none; /* Ensure no underline for links */
    }
    .uniform-btn:hover {
        background-color: #000000;
        color: #ffffff;
        text-decoration: none;
    }
    /* Logout button specific styling */
    .logout-container {
        text-align: center;
        width: 100%;
    }
    .logout-btn {
        width: 200px; /* Smaller width */
        min-height: 37px; /* Smaller height */
        font-size: 14px; /* Adjust font size */
		 border: 2px solid #000000;
        color: #000000;
        background-color: transparent;
        text-align: center;
      
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        line-height: 1.2;
        transition: all 0.3s ease;
        text-decoration: none; /* Ensure no underline for links */
    }
		
		
	.floating-cart-icon {
    position: fixed;
    bottom: 20px;
    right: 100px; /* Increased from 70px to add more spacing from the Back to Top icon */
    z-index: 1000; /* Ensure it appears above other elements */
    text-decoration: none;
    transition: all 0.3s ease;
		cursor: pointer;
	}

	.floating-cart-icon .floating-icon {
		width: 40px;
		height: 40px;
		display: block;
		color: #000000; /* Black icon color to match theme */
	}

	.floating-cart-icon:hover .floating-icon {
		color: #0d6efd; /* Blue on hover to match theme hover effects */
	}

	/* Adjust cart count badge */
	.floating-cart-icon .cart-count {
		position: absolute;
		top: -10px;
		right: -10px;
		background: red;
		color: white;
		border-radius: 50%;
		padding: 2px 6px;
		font-size: 12px;
	}

	/* Adjust for mobile screens */
	@media (max-width: 576px) {
		.floating-cart-icon {
			bottom: 15px;
			right: 75px; /* Adjusted for mobile spacing */
		}
		.floating-cart-icon .floating-icon {
			width: 25px;
			height: 25px;
		}
		.floating-cart-icon .cart-count {
			font-size: 10px;
			padding: 1px 5px;
			top: -8px;
			right: -8px;
		}
	}
	.static-cart-icon {
		cursor: pointer;
		position: relative;
		display: inline-block;
	}

	.static-cart-icon .static-icon {
		width: 40px;
		height: 40px;
		display: block;
	}

	.static-cart-icon:hover .static-icon {
		opacity: 0.7; /* Subtle effect for image-based icon on hover */
	}

	.static-cart-icon .cart-count {
		position: absolute;
		top: -10px;
		right: -10px;
		background: red;
		color: white;
		border-radius: 50%;
		padding: 2px 6px;
		font-size: 12px;
	}

	/* Adjust for mobile screens */
	@media (max-width: 576px) {
		.static-cart-icon .static-icon {
			width: 25px;
			height: 25px;
		}
		.static-cart-icon .cart-count {
			font-size: 10px;
			padding: 1px 5px;
			top: -8px;
			right: -8px;
		}
	}
	.logout-btn:hover {
        background-color: #000000;
        color: #ffffff;
        text-decoration: none;
    }
	.return-btn {
        width: 200px; /* Smaller width */
        min-height: 37px; /* Smaller height */
        font-size: 14px; /* Adjust font size */
		 border: 2px solid #000000;
        color: white;
        background-color: red;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        line-height: 1.2;
        transition: all 0.3s ease;
        text-decoration: none; /* Ensure no underline for links */
    }
	.return-btn:hover {
        background-color: transparent;
        color: red;
        text-decoration: none;
    }
	.modal-content {
		border-radius: 0; /* Removes rounded corners, making them square */
	}
    /* Mobile-specific adjustments */
    @media (max-width: 576px) {
        .uniform-btn {
            width: 300px;
            min-height: 50px;
            font-size: 14px;
            margin: 0 auto;
            padding: 12px 16px;
        }
        .button-row {
            flex-direction: column;
            align-items: center;
        }
        .button-grid {
            gap: 10px;
        }
        .logout-btn {
            width: 200px; /* Adjust for mobile if needed */
        }
    }
	.floating-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Ensure it appears above other elements */
    display: block; /* */
    background-color: #000000; /* Match your button style */
    border: 2px solid #000000;
    border-radius: 50%; /* Circular button */
    padding: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.floating-back-to-top:hover {
    background-color: #ffffff;
    border-color: #000000;
}

.floating-back-to-top .floating-icon {
    width: 30px;
    height: 30px;
    display: block;
    color: #ffffff; /* Icon color */
}

.floating-back-to-top:hover .floating-icon {
    color: #000000; /* Icon color on hover */
}

/* Show the button when scrolling */
.floating-back-to-top.visible {
    display: block;
}

/* Adjust for mobile screens */
@media (max-width: 576px) {
    .floating-back-to-top {
        bottom: 15px;
        right: 15px;
    }
    .floating-back-to-top .floating-icon {
        width: 25px;
        height: 25px;
    }
}
.form-group {
		margin-bottom: 15px;
		width: 100%; /* Full width of parent */
		position: relative;
		display: flex; /* Optional: Use flexbox for alignment */
		flex-wrap: wrap; /* Allows content to wrap if needed */
	}
	.form-group input {
		background-color: #fff;
		border: 2px solid #000;
		border-radius: 0;
		height: 40px;
		padding: 10px;
		color: #000;
		font-size: 16px;
		width: 100%;
	}
	.form-group textarea {
		background-color: #fff;
		border: 2px solid #000;
		border-radius: 0;
		height: 80px;
		padding: 10px;
		color: #000;
		font-size: 16px;
		width: 100%;
	}
	.form-group {
		margin-bottom: 15px;
		width: 100%; /* Full width of parent */
		position: relative;
		display: flex; /* Optional: Use flexbox for alignment */
		flex-wrap: wrap; /* Allows content to wrap if needed */
	}
	.form-group input::placeholder {
		font-family: Copperplate Gothic; /* Different font for placeholder */
		font-size: 14px; /* Optional: Adjust size */
		color: #666; /* Optional: Adjust color */
		/*font-style: italic; /* Optional: Add style */
	}
	.form-group label {
		position: absolute;
		top: -10px;
		left: 10px;
		background-color: #fff;
		padding: 0 5px;
		color: #000;
		font-size: 14px;
	}
		
	.cart-qty-input {
		width: 60px;
		padding: 2px 5px;
		font-size: 14px;
		border: 1px solid #000;
		border-radius: 0;
		text-align: center;
	}
	.cart-qty-input::-webkit-inner-spin-button,
	 swaps
	.cart-qty-input::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	.cart-qty-input[type=number] {
		-moz-appearance: textfield; /* Firefox */
	}
		
	.remove-item {
		color: #dc3545; /* Bootstrap danger color */
		text-decoration: none;
	}
	.remove-item:hover {
		text-decoration: underline;
	}