/* MODAL */
.download-5 #downloadmodal .modal-dialog {
	max-width: 500px;
	max-height: unset
	position: absolute;     
    top: 50%;              
    left: 50%;              
    transform: translate(-50%, -50%);
    margin: 0;
}

.download-5 #downloadmodal .modal-content {
	background-color: var(--MODAL_BG);
	color: var(--MODAL_TXT_COLOR)
}

.download-5 #downloadmodal .modal-header {
    position: relative;
    border-bottom: none;
    gap: 5px;
    min-height: 50px;
    width: auto;
    height: auto;
    z-index: 0;
    color: var(--MODAL_HEADER_TXT_COLOR);
    background: var(--MODAL_HEADER_BG)
}

.download-5 #downloadmodal .modal-header .title {
	margin: 0;
	font-size: var(--HEADER_FONT_SIZE);
    font-weight: var(--REG_FONT_WEIGHT);
    text-transform: uppercase
}

.download-5 #downloadmodal .modal-header .btn-modalClose {
	background: var(--MODAL_CLOSE_BTN_BG);
	border: none
}

.download-5 #downloadmodal .modal-header .btn-modalClose i {
	color: var(--MODAL_CLOSE_BTN_COLOR)
}

.download-5 #downloadmodal .modal-body {
	border-radius: 0 0 5px 5px;
	background: var(--MODAL_BG);
	color: var(--MODAL_TXT_COLOR)
}

.download-5 #downloadmodal .downloadQR-content {
	display: flex;
	justify-content: center;
}


.download-5 #downloadmodal .downloadQR-content .downloadQR-item .label {
	display: flex;
    gap: .75rem;
	justify-content: flex-start;
	align-items: center;
	font-size: var(--BODY_TXT_FONT_SIZE);
	color: var(--TXT_COLOR_1);
	margin-bottom: 8%;
	padding-left: 30px;
}

.download-5 #downloadmodal .downloadQR-content .downloadQR-item .label .icon {
	font-size: var(--ICON_LARGE_FONT_SIZE)
}

.download-5 #downloadmodal .downloadQR-content .col-form-label,
.download-5 #downloadmodal .downloadQR-content .col-form-label b {
	color: var(--TXT_COLOR_1);
	font-size: var(--DEFAULT_FONT_SIZE);
	font-weight: var(--REG_FONT_WEIGHT);
}

.download-5 #downloadmodal .downloadQR-content .form-group input {
	color: var(--INPUT_TXT_COLOR);
	background: var(--INPUT_BG);
	border: var(--INPUT_BORDER)
}

.download-5 #downloadmodal .downloadQR-content .copyIcon {
	position: absolute;
    margin: 0;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--TXT_COLOR_1)
}
/* MODAL */

.download-5 .download-list-wrap {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.75rem
}

.download-5 .card-list-item {
	border-radius: .5rem;
	box-shadow: 0px 0px 5px 0px #00000040;
    background: var(--CARD_1_BG)
}

.download-5 .card-list-item .card-image-container {
    display: flex;
    height: 200px;
    max-height: 200px;
}

.download-5 .card-list-item .card-image-container .card-image {
    border-radius: .5rem .5rem 0 0;
    padding: .75rem;
    display: block;
    width: fit-content;
    margin: auto;
    max-width: 200px;
    max-height: 200px;
}

.download-5 .card-list-item .buttons {
    display: flex
}

.download-5 .card-list-item .buttons button {
	width: 50%;
    padding: 10px 35px
}

.download-5 .card-list-item .buttons button:first-child {
	border-bottom-left-radius: .5rem
}

.download-5 .card-list-item .buttons button:last-child {
	border-bottom-right-radius: .5rem
}

.download-5 .card-list-item .buttons button.single {
	width: 100%
}

.download-5 .card-list-item .buttons button[data-downtype='android'] {
	background: var(--THIRD_BTN_BG);
	color: var(--THIRD_BTN_COLOR);
	border: var(--THIRD_BTN_BORDER)
}

.download-5 .card-list-item .buttons button[data-downtype='ios'] {
	background: var(--PRIMARY_BTN_BG);
	color: var(--TXT_COLOR_2);
	border: none
}

.download-5 .card-list-item .buttons button i {
	font-size: var(--ICON_FONT_SIZE)
}

.download-5 .card-list-item .buttons button:hover {
    filter: brightness(.8);
    -webkit-filter: brightness(.8)
}

.download-area .download-header {
    margin-bottom: 25px;
    text-align: left;
}

.download-area .download-title {
    font-family: var(--SECONDARY_FONT_FAMILY);
    font-size: var(--HEADER_FONT_SIZE);
    font-weight: var(--MED_FONT_WEIGHT);
    color: var(--TXT_COLOR_1);
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .download-area .download-header {
        margin-bottom: 24px;
    }
    
    .download-area .download-title {
        font-size: var(--HEADER_FONT_SIZE);
        padding-bottom: 12px;
    }
}

.download-5 #downloadmodal .downloadQR-content .downloadQR-item .label .icon {
	font-size: var(--ICON_LARGE_FONT_SIZE);
	width: 40px; 
	height: 40px; 
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Android icon - Light blue/cyan background */
.download-5 #downloadmodal .downloadQR-content .downloadQR-item .label .icon .fa-android {
	background: var(--SIDE_NAV_MENU_LIST_HOVER_BG);
	color: var(--TXT_COLOR_1);
	width: 46px; /* CHANGED: Match parent (was 40px) */
	height: 44px; /* CHANGED: Match parent (was 40px) */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20%; /* CHANGED: Full circle (was 30%) */
	padding: 12px; /* CHANGED: Increased padding */
}


.download-5 #downloadmodal .downloadQR-content .downloadQR-item .label .icon .fa-apple {
	background: var(--SIDE_NAV_MENU_LIST_HOVER_BG);
	color: var(--SECONDARY_COLOR);
	width: 46px; 
	height: 44px; 
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20%; 
	padding: 12px; 
}

.download-5 #downloadmodal .downloadQR-content .downloadQR-item .img {
	max-width: 180px; 
}

#downloadmodal .modal-dialog .modal-content .modal-body .downloadQR-content .form-group {
    display: flex;
    flex-direction: column; /* Changed from row (default) to column */
    align-items: flex-start; /* Align label to the left */
    width: 100%; /* Ensure the group takes full width of the column */
    margin-bottom: 15px;
}

#downloadmodal .modal-dialog .modal-content .modal-body .downloadQR-content .form-group .form-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%; /* Force full width */
    position: relative;
}

#downloadmodal input.form-control {
    flex: 1; /* Allow input to grow and fill space next to the icon */
    width: 100%;
    background-color: var(--INPUT_BG);
    border: var(--INPUT_BORDER);
    color: var(--INPUT_TXT_COLOR);
    font-family: var(--PRIMARY_FONT_FAMILY);
    font-size: var(--BODY_SMALL_TXT_FONT_SIZE);
    border-radius: 5px;
    height: 40px; /* Slightly taller for better touch target */
    padding-right: 35px; /* Prevent text from hitting the icon */
}

#downloadmodal .modal-dialog .modal-content .modal-body .downloadQR-content .form-group .form-wrap i {
    font-size: var(--BODY_SMALL_TXT_FONT_SIZE);
    padding-left: 10px;
    cursor: pointer;
    color: var(--TXT_COLOR_1);
}