.form-control {
	border-color: #a8aeb4 !important;
}

/* header spacing: the template's px-lg-1-6 / px-xl-2-5 / px-xxl-2-9 utility
   classes were never included in the css, so the logo sat flush left at
   bootstrap's 12px default on every page. this restores the intended padding. */
@media (min-width: 992px) {
	.navbar-default .container-fluid {
		padding-left: 1.6rem;
		padding-right: 1.6rem;
	}
}
@media (min-width: 1200px) {
	.navbar-default .container-fluid {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}
@media (min-width: 1400px) {
	.navbar-default .container-fluid {
		padding-left: 2.9rem;
		padding-right: 2.9rem;
	}
}

/* the top bar's .row has no .container parent, so its negative margins push
   it 12px off-canvas and can create a horizontal scrollbar */
#top-bar .row {
	margin-left: 0;
	margin-right: 0;
}

.page_content a {
	/* color:#0d6efd !important; */
	color: #012a5c !important;
}
.accordion-style .btn-link {
	font-weight: 600 !important;
}
.alert-info {
	background-color: #fdfdfd;
	border-color: #4a83fd;
}
.alert-danger {
	color: #b90f1f;
	background-color: hsl(0, 100%, 99%);
	border-color: #b90f1f;
}
.alert-success {
	color: #009a40;
	background-color: #fff;
	border-color: #009a40;
}
.phone-input-container {
	display: flex;
	align-items: start;
	flex-wrap: wrap;
}

/* Style for the country code wrapper */
.country-code-wrapper {
	width: 85px;
	margin-right: 0;
}

/* Style for the country code select */
.country-code-select {
	border-radius: 4px 0 0 4px;
	height: 38px;
	background-color: #f5f5f5;
	cursor: not-allowed;
	border-right: none;
}

/* Style for the phone input */
.phone-input {
	flex: 1;
	min-width: 200px;
	border-radius: 0 4px 4px 0;
}

/* Ensure disclaimer text appears below both inputs */
.phone-input-container p {
	width: 100%;
	margin-top: 8px;
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
.loader {
	border: 5px solid #f3f3f3;
	border-top: 5px solid #4a83fd;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 0.8s linear infinite;
	/* display:none; */
}

.scroll-to-top {
	display: none !important;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 30px;
	/* Add space for the custom arrow */
	background-image: url("/images/ico-caret.png");
	background-size: 20px 20px;
	/* Replace with your arrow image */
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) center;
}

#google_translate_element {
	display: inline-block;
	margin-right: 15px;
	/* Adjust as needed */
	font-size: 0.9rem;
	line-height: normal;
}

/* Pay Invoice Ref Code Plate Tab */
.myaccount-buttons .butn-style3 {
	width: 300px;
	font-size: 14px;
}

.search-method-container {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.search-method-tabs {
	display: flex;
	margin-bottom: 20px;
	border-bottom: 1px solid #dee2e6;
}

.search-tab {
	padding: 12px 24px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	color: #6c757d;
	transition: all 0.3s ease;
}

.search-tab.active {
	color: #007bff;
	border-bottom-color: #007bff;
}

.search-tab:hover {
	color: #007bff;
}

.search-content {
	display: none;
}

.search-content.active {
	display: block;
}

.form-divider {
	text-align: center;
	margin: 20px 0;
	position: relative;
}

.form-divider:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: #dee2e6;
}

.form-divider span {
	background: #fff;
	padding: 0 15px;
	color: #6c757d;
	font-size: 14px;
}

.reference-inputs {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 400px;
}

.reference-inputs input:first-child {
	max-width: 100px;
}

.reference-inputs input:last-child {
	max-width: 300px;
}

.reference-separator {
	font-size: 24px;
	font-weight: bold;
	color: #6c757d;
}

.license-inputs {
	display: flex;
	gap: 15px;
	align-items: end;
	max-width: 400px;
}

.license-inputs .form-group {
	flex: 1;
}

.license-inputs .form-group:first-child {
	max-width: 150px;
}
/* Pay Invoice Ref Code Plate Tab */

@media (max-width: 768px) {
	.search-method-tabs {
		flex-direction: column;
	}

	.reference-inputs,
	.license-inputs {
		flex-direction: column;
		align-items: stretch;
	}

	.reference-separator {
		display: none;
	}
}

.disclaimer-area {
	background: #e7f3ff;
	border: 1px solid #b8daff;
	border-radius: 6px;
	padding: 12px 16px;

	margin-bottom: 10px;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #004085;
}

.disclaimer-icon {
	margin-right: 8px;
	font-size: 16px;
	flex-shrink: 0;
}

.disclaimer-text {
	line-height: 1.4;
}

.tab-style3 .resp-tabs-list li {
	padding: 0 !important;
}

.inner-title {
	border: none;
	margin: 0;
	padding: 0;
}

.tab-style3 .resp-tabs-list li.resp-tab-active {
	border: 1px solid #171717 !important;
}

apple-pay-button {
	display: none;
	width: var(--apple-pay-button-width);
	height: var(--apple-pay-button-height);
	flex: 0 0 auto; /* Prevents flex stretching/shrinking */
	--apple-pay-button-width: 260px; /* Adjust this value as needed; min 140px for "buy" type */
	--apple-pay-button-height: 44px;
	--apple-pay-button-border-radius: 10px;
	--apple-pay-button-padding: 0px;
	--apple-pay-button-box-sizing: border-box;
}

/* Radio Card Container */
.radio-card-container {
	background: #f8f9fa;
	padding: 15px 15px 5px 15px;
	border-radius: 8px;
	border: 1px solid #dee2e6;
	display: grid;
	grid-template-columns: 1fr 1fr; /* Two equal columns */
	gap: 10px; /* Space between cards */
}

/* Radio Card Label */
.radio-card {
	display: block;
	font-size: 14px;
	padding: 10px;
	background: white;
	border-radius: 6px;
	cursor: pointer;
	border: 2px solid #e9ecef;
	transition: all 0.2s;
	margin-bottom: 10px;
}

.radio-card:hover {
	border-color: #0066cc;
	box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

/* Radio Input */
.radio-card-input {
	margin-right: 10px;
	transform: scale(1.2);
	accent-color: #0066cc;
}

/* Radio Label Text */
.radio-card-text {
	line-height: 1.6;
	color: #111;
}

/* Checked State */
.radio-card-input:checked + .radio-card-text {
	font-weight: 600;
	color: #0066cc;
}

.radio-card:has(.radio-card-input:checked) {
	border-color: #0066cc;
	background: #e7f3ff;
}

/* ============================================================
   Invoice table — used on pay-invoice-results & pay-invoice-checkout
   ============================================================ */

.invoice-table {
	border-collapse: collapse;
	font-size: 14px;
}

/* horizontal rules only — no vertical grid */
.invoice-table th,
.invoice-table td {
	border: none;
	border-bottom: 1px solid #e6e8eb;
	padding: 12px 10px;
	vertical-align: middle;
}

/* quieter, single-line headers */
.invoice-table thead td,
.invoice-table thead th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7280;
	white-space: nowrap;
	border-bottom: 2px solid #d5d8dc;
	padding-bottom: 8px;
}

/* Bootstrap forces border-bottom-color: currentColor on the last row of any
   row group that isn't the last group. Match its specificity to win. */
.invoice-table.table > :not(:last-child) > :last-child > * {
	border-bottom-color: #e6e8eb;
}

.invoice-table.table > thead > tr:last-child > * {
	border-bottom-color: #d5d8dc;
}

/* ---- Rows ---- */

/* stripe class is set in PHP, not nth-child — restriction rows would
   otherwise shift the parity for every account after them */
.invoice-table tbody tr.stripe td {
	background: #fafbfc;
}

/* ---- Columns ---- */

.invoice-table .col-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.invoice-table .col-nowrap {
	white-space: nowrap;
}

.invoice-table .col-creditor {
	min-width: 140px;
}

.invoice-table .col-muted {
	color: #6b7280;
}

/* ============================================================
   Results page only — editable amounts, restriction rows, totals
   ============================================================ */

.invoice-table--editable tbody tr:hover td {
	background: #f2f6fb;
}

.invoice-table--editable tbody tr.payment-restriction-row td {
	background: #fff3cd;
}

/* a FULL-payment row and its warning row read as one block */
.invoice-table--editable tbody tr.account-row.has-restriction td {
	border-bottom: none;
}

.invoice-table--editable input[type="text"] {
	width: 85px;
	text-align: right;
	padding: 4px 6px;
	border: 1px solid #dee2e6;
	border-radius: 3px;
}

.invoice-table--editable tfoot td {
	border-top: 1px solid #d5d8dc;
	border-bottom: none;
	padding-top: 14px;
}

/* ============================================================
   Checkout page only — fee row
   ============================================================ */

.invoice-table tr.fee-row td {
	border-bottom: none;
	border-top: 1px solid #d5d8dc;
	padding-top: 14px;
	color: #6b7280;
}

@media (max-width: 576px) {
	.radio-card-container {
		grid-template-columns: 1fr;
	}
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.radio-card-container {
		padding: 15px;
	}

	.radio-card {
		padding: 8px;
	}
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.i-am-container {
		padding: 15px;
	}

	.i-am-option {
		padding: 8px;
	}
}

@media (min-width: 992px) {
	.navbar-nav .submenu-button:before,
	.navbar-nav .submenu-button:after {
		display: none !important;
	}
}

/* For Firefox */
@-moz-document url-prefix() {
	select {
		padding-right: 30px;
		/* Add space for the custom arrow */
		background-image: url("/images/ico-caret.png");
		background-size: 20px 20px;
		/* Replace with your arrow image */
		background-repeat: no-repeat;
		background-position: calc(100% - 10px) center;
	}
}

@media screen and (max-width: 1310px) {
	.navbar-nav > li > a {
		font-size: 13px !important;
	}
	.logodefault img {
		max-height: 44px !important;
	}
}

@media screen and (max-width: 1200px) {
	.btn-pay-bill .butn-style3 {
		padding: 10px 17px !important;
		font-size: 11px;
		margin-top: -5px !important;
	}

	.navbar {
		height: 80px !important;
	}

	.navbar-toggler {
		top: 16px;
	}
}

@media screen and (max-width: 1025px) {
	.navbar-nav > li > a {
		font-size: 12px !important;
	}
}