/* General Container */
.generator-qr-kode-container {
    display: flex;
    flex-direction: column;
	border-radious:7px;
	margin:0;
}

/* QR Code Types Row */
.qr-code-types {
    display: flex;
    gap: 0px;
    flex-wrap: wrap;
    margin-bottom: 0px;
	background:none;
}

.qr-type-btn {
    padding: 10px 15px;
    border: none;
    background: none!important;
    cursor: pointer;
    border-radius: 0px;
    transition: background-color 0.2s;
}

.qr-type-btn.active, .qr-type-btn:hover {
    background: none!important;
    color: white;
    border-bottom: 2px solid #f9fafb;
}

/* Content Columns */
.qr-code-content {
    display: flex;
    gap: 0px;
    flex-wrap: wrap;
	margin:0;
}

.qr-code-left {
    flex: 1;
    min-width: 50%;
	background:#f9fafb;
	padding:40px 30px;
	color:#000000;
}

.qr-code-left-top {
	background: #d7d8d9;
	padding: 10px 15px; /* 10px top & bottom, 15px left & right */
	display: flex;
	align-items: stretch; /* Ensure content is vertically centered */
	flex: 1; /* Allows divs to expand equally */
	padding: 10px 15px; /* 10px top & bottom, 15px left & right */
	color:#4f46e5;
}

.top-container {
	display: flex;
	align-items: center; /* Align items vertically */
	background: #e9eaeb;
	margin:0 0 10px;
}

.top-icon {
	text-align:center;
	background:#4f46e5;  padding: 10px 15px; /* 10px top & bottom, 15px left & right */
	display: flex;
	align-items: center; /* Ensure content is vertically centered */
	padding: 13px 15px; /* 10px top & bottom, 15px left & right */
	flex: 1; /* Allows divs to expand equally */
	max-width: 50px; /* Restrict the width to 50px */
}

.qr-inputs input, .qr-inputs areatext{
    border-radious:5px!important;
	margin:10px 10px 0 0;
	width:100%;
}

.qr-code-left label, .qr-code-left input {
    margin:10px 10px 0 0;
	border-radius:5px;
	width:100%;
}

.qr-code-right {
    width: 340px;
    flex-shrink: 0;
	padding:20px;
	background:#ffffff;
}

/* Customization Panel */
.qr-customization-toggle {
    margin-top: 30px;
    cursor: pointer;
    color: ;
    background: #4f46e5;
    border: none;
	width:100%;
	text-align:left;
}

.qr-customization label, .qr-customization input {
    display: block;
    margin: 10px 10px 0 0;
	border-radius:5px;
	width:100%;
}

.qr-code-left-label {
	clear:both;
	padding:10px 0 0;
	font-size:1rem;
}

/* Buttons */
.qr-generate-btn, .qr-download-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #4f46e5;
    color: white;
    cursor: pointer;
    margin-top: 10px;
}

.qr-generate-btn:hover, .qr-download-btn:hover {
    background-color: #4338ca;
}

/* QR Code Placeholder */
.qr-code-placeholder {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
}

.underinput {
	padding-top:15px;
}

.two-column-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 100%;
}

/* Columns setup */
.left-column,
.right-column {
    flex: 1;
    padding: 10px 0;
    box-sizing: border-box;
    min-width: 300px;
    background-color: #f9fafb;
}

/* Ensure both columns have the same height */
.two-column-container > div {
    display: flex;
    flex-direction: column;
}

/*3 column design*/
.three-column-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.three-column {
    flex: 1;
    min-width: 300px;
    box-sizing: border-box;
    padding: 20px;
    background-color: #f9fafb;
    border: 1px solid #ddd;
}

.qr-code-encryption {
	clear:both;
	padding: 10px 0 0;
	font-size:1rem;
}

.qr-code-encryption select{
	margin:10px 0 0;
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.checkbox-container label {
    margin-right: 10px;
}

.checkbox-input {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

/* Make columns stack vertically on narrow screens */
@media screen and (max-width: 900px) {
    .two-column-container {
        flex-direction: column;
    }
	
	.three-column-container {
        flex-direction: column;
    }
}

@media screen and (max-width: 760px) {
    .qr-code-content {
        flex-direction: column;
    }

    .qr-code-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .qr-generate-btn, .qr-download-btn {
        max-width: 300px;
        width: 100%;
        margin: 10px auto;
    }
}