/* Target the specific label based on its attributes */
label[for="3"], label[for="5"] {
    background: none !important;
    position: relative;
    display: inline-block;
    width: 33%;
    font-size: 12px !important;
    line-height: 36px !important;
}

label[for="3"]::before {
    content: "\f09d"; /* Unicode for the Font Awesome credit card icon */
    font-family: 'FontAwesome'; /* Ensure you're using the correct font-family */
    display: block;
    padding-left: 20px;
    line-height: 30px; /* Center the icon vertically */
    font-size: 40px; /* Adjust size as needed */
    color: #000; /* Icon color */
}

label[for="5"]::before {
    content: "\f15a"; /* Unicode for the Font Awesome credit card icon */
    font-family: 'FontAwesome'; /* Ensure you're using the correct font-family */
    display: block;
    padding-left: 20px;
    line-height: 30px; /* Center the icon vertically */
    font-size: 40px; /* Adjust size as needed */
    color: #F7931A; /* Icon color */
}

.invoice-gateway {
    border: unset !important;
}

/* General body styles */
body {
    font-family: 'Open Sans', sans-serif !important;
    background-color: #f4f4f4;
}

/* Style Font */
h1, h2, h3, h4, h5, h6,
.accordion-button,
.card-header-tabs a {
    color: #0e5077 !important; /* Deep blue color */
    font-size: 16px !important; /* Uniform font size */
}
.card-header h5, .accordion-header h5 {
	font-weight: 500;
}
.accordion-body h5, .accordion-body h3 {
	font-weight: 600; 
}
.accordion-body p, .accordion-body a, .card-body {
	color: #333;
	font-size: 14px !important;
	font-weight: 500 !important;
}

.list-group.email-list a.list-group-item {
    font-size: 16px !important;
}

.nav.nav-tabs .nav-link.active {
    background: #fff !important;
}

.card {
    background-color: #fff;
    border: 1px solid #ddd !important; /* Light gray border for visibility */
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.card.mb-4 {
    border-bottom: 20px solid #f5f5f5 !important;

}

/* Header and navigation styles */
header {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.navbar {
    padding: 10px 20px;
}

.navbar-brand {
    font-weight: 600;
    color: #5a5a5a;
}

.nav-link {
    color: #5a5a5a;
    font-weight: 400;
}

.navbar-toggler {
    border-color: #ddd;
}

/* Main content and sidebar styles */
.container {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

/* General card styling */
.card.mb-4 {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* General style for card headers */
.card.mb-4 .card-header {
    padding: 10px 15px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #eaeaea;
    position: relative;
    border-top: 3px solid #3498db; /* Applying blue to all headers */
}

.link-underline {
    text-decoration: none;
    color: #007bff;
}

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

/* Utility classes */
.text-muted {
    color: #6c757d;
}

/* Custom buttons for mobile views */
.btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
}

.btn-outline-primary:hover {
    background-color: #007bff;
    color: #fff;
}

/* Button Hover Effect with Bottom Shadow Only */
button,
.nav-pills .nav-link,
.btn {
    padding: 6px 18px;
    border-radius: 3px;
    letter-spacing: 0px;
    font-size: 16px;
	text-align: center !important;
}

button#domain-check, button#transfer-check, .nav-pills .nav-link {
    min-width: 100px;
    margin-bottom: 15px;
}

.btn-primary, .btn-dark {
    border-color: #0a3c59; /* Border color for depth */
    color: white; /* Text color for readability */
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow effect */
}

.btn-primary:hover, .btn-dark:hover {
    border-color: #062c3f; /* Darker border on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow at the bottom for a subtle lift effect */
    text-decoration: none; /* Maintain no underline on hover */
}

.btn-primary:focus, .btn-dark:focus {
    outline: none; /* Removes outline */
    box-shadow: 0 0 0 3px rgba(14, 80, 119, 0.5); /* Custom focus glow effect */
}

/* Enhance visibility, size, and style of form fields */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="date"], 
input[type="url"], 
input[type="tel"], 
input[type="search"], 
input[type="time"], 
textarea, select, select.form-select {
    font-size: 14px; /* Increase font size for better readability */
	background: #fff;
    border-radius: 5px; /* Add rounded corners */
    border: 1px solid #0e5077; /* Define a border with theme color */
    outline: none; /* Remove default outline */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for border and shadow */
    width: 100% !important; /* Ensure fields take up the full width of their container */
    box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
    appearance: none; /* Remove default browser styling for a consistent look */
}

select, select.form-select {
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center; /* Add SVG arrow to the right */
    padding-right: 30px; /* Add padding to avoid text overlaying the arrow */
}

.form-check-input {
	background: #fff !important;
    accent-color: #fff; /* Changes the selection color, works in most modern browsers */
}

.form-check-input:checked {
	background: #005fc5 !important;
    accent-color: #005fc5; /* Changes color to green when selected */
}

/* Specific styling for select fields to make them consistent */
select, select.form-select  {
    -webkit-appearance: none; /* Remove default webkit appearance */
    -moz-appearance: none; /* Remove default moz appearance */
    appearance: none; /* Remove default appearance */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="gray"><path d="M7 10l5 5 5-5z"/></svg>'); /* Add custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px; /* Add padding to accommodate custom dropdown arrow */
}

/* Enhance focus state for form fields */
input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus, 
input[type="number"]:focus, 
input[type="date"]:focus, 
input[type="url"]:focus, 
input[type="tel"]:focus, 
input[type="search"]:focus, 
input[type="time"]:focus, 
textarea:focus, 
select:focus, select.form-select:focus  {
    border-color: #062c3f; /* Darker border color on focus */
    box-shadow: 0 0 5px rgba(14, 80, 119, 0.5); /* Add a subtle shadow for focus indication */
}

/* Optional: Add some margin for spacing between fields */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="date"], 
input[type="url"], 
input[type="tel"], 
input[type="search"], 
input[type="time"], 
textarea, 
select, select.form-select  {
    margin-bottom: 15px; /* Add margin below each field */
}

/* Base styles to ensure full width and padding adjustments for all viewports */
.nav.nav-pills  {
    width: 20%; /* Ensure both elements are full width */
}
.tab-content {
    width: 80%; /* Ensure both elements are full width */
}

.input-group .form-control,
.input-group .form-select {
    flex-grow: 1; /* Make input and select elements within input-group take available space */
}

/* Media query for screens smaller than 768px (common breakpoint for tablets and below) */
@media (max-width: 768px) {
	.nav.nav-pills,
	.tab-content {
		width: 100%; /* Ensure both elements are full width */
	}
    .nav.nav-pills {
        flex-direction: column; /* Stack the navigation links vertically */
        margin-bottom: 1rem; /* Add some space between the nav and content */
    }

    .nav-link {
        text-align: center; /* Center-align text in nav links for better readability */
        padding: 0.5rem; /* Increase padding for larger tap targets */
    }

    .d-flex.mb-3 {
        flex-direction: column; /* Stack elements vertically in the form */
    }

    .d-flex.gap-2 {
        flex-direction: column; /* Make sure all flex items in form stack vertically */
        gap: 0.5rem; /* Adjust gap for vertical spacing */
    }

    .input-group {
        flex-direction: column; /* Stack input group elements vertically */
    }

    .form-control,
    .form-select,
    .btn {
        width: 100%; /* Full width for inputs and buttons to utilize space */
    }

    .btn {
        margin-top: 0.5rem; /* Add margin top to button when below inputs */
    }
}


/* Responsive adjustments */
@media (max-width: 767px) {
	/* Mobile Navbar */
	.navbar-brand .d-none {
		display: block !important;
	}
	.navbar-brand .d-sm-none {
		display: none !important;
	}
	.navbar-toggler, .navbar-toggler:hover {
		border: unset !important;
	}
	.navbar-toggler:focus {
		box-shadow: unset !important;
	}
}