/*

Theme Name: Pro – Child Theme
Theme URI: https://theme.co/pro/
Author: Themeco
Author URI: https://theme.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/

@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');

#verification-search-box {
    position: relative; /* Set the search box position to relative */
    width: 100%; /* Adjust based on your layout */
    max-width: 400px; /* Adjust based on your layout */
}

#verification-search-input {
    width: 100%; /* Make the search input full width */
    padding: 8px; /* Add some padding for better appearance */
    border: 1px solid #ccc; /* Add a border to the search input */
    border-radius: 4px; /* Optional: rounds the corners of the input box */
	margin-bottom: 0;
}

#verification-search-results {
    position: absolute; /* Position the results absolutely relative to the search box */
    z-index: 1000; /* Ensure the results layer on top of other content */
    width: 100%; /* Match the width of the search box */
    background: white; /* Background color for the results */
    border: 1px solid #ccc; /* Border to match the input field */
    border-top: none; /* Remove the top border to merge with the input field */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional: adds a slight shadow for depth */
    max-height: 300px; /* Set maximum height for results */
    overflow-y: auto; /* Allow scrolling within the results */
    margin-top: -1px; /* Align perfectly with the input box */
}

#verification-search-results:not(:empty) {
    margin-top: 0;
}

.search-result-item {
    padding: 8px; /* Add padding for each result for better readability */
    border-bottom: 1px solid #eee; /* Add a subtle border between items */
    cursor: pointer; /* Change the cursor to indicate clickable items */
}

.search-result-item:last-child {
    border-bottom: none; /* Remove the bottom border from the last item */
}

.search-result-item:hover {
    background-color: #f8f8f8; /* Change background on hover for visual feedback */
}

footer {
	z-index: 999;
}

.alphabet-index a {
	text-decoration: none;
    background: #F9AE00;
    text-align: center;
    height: 36px;
    display: inline-block;
    width: 36px;
    color: #282A5F;
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 5px;
}

.alphabet-section {
    margin-top: 20px;
}

.alphabet-section h2 {
    background-color: #f4f4f4;
    padding: 10px;
}

.alphabet-index a.active {
    text-decoration: underline;
}

#suppliers-listing {
    margin-top: 15px;
}

#supplier-header {
    background: #485474; 
	color: #fff;
}

#supplier-header .x-content {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
	row-gap: 30px;
}

.supplier-logo {
    height: 120px; /* Adjust based on desired uniform height */
    width: auto; /* Ensures width is scaled proportionally */
    object-fit: contain; /* Ensures the image is scaled correctly without being cropped */
    object-position: center; /* Aligns the image nicely */
}

.supplier-details p {
	margin-bottom: 0;
}

.supplier-details a {
	color: #fff;
}

#verification-number-header {
	background: #fff;
	border-top: 1px solid #2b2b5c;
	margin-bottom: 0;
}

#verification-number-header .x-col {
	width: 100%;
}

#verification-card {
	background: #fff;
    display: block;
	width: 600px;
    max-width: 100%;
    margin: 0 auto;
	position: relative;
}

#verification-card span {
    position: absolute;
    left: 9%;
    top: 54%;
    white-space: nowrap;
	font-family: "Barlow", sans-serif;
	font-weight: 400;
	font-style: normal;
    font-size: 3.5vw;
	width: 30.4%;
    display: block;
    text-align: center;
}

#verification-card span:nth-of-type(2) {
    top: 71%;
    white-space: normal;
    font-size: 2vw;
    line-height: 2.7vw;
}

#verification-card.product span {
    color: #224798;
}

#verification-card.system span {
    color: #097852;
}

#verification-card.distributor span, #verification-card.merchant span {
    color: #ee8305;
    top: 64%;
    font-size: 6.6vw;
    width: 57%;
    left: 0;
}

#verification-card.distributor span:nth-of-type(2), #verification-card.merchant span:nth-of-type(2) {
    top: 79%;
    font-size: 3.85vw;
    line-height: 4.9vw;
}

#verification-card.distributor, #verification-card.merchant {
    width: 320px;
}

@media (min-width: 682px) {
	#verification-card span {
		font-size: 24px;
	}
	#verification-card span:nth-of-type(2) {
        font-size: 14px;
        line-height: 18px;
	}
}

@media (min-width: 364px) {
	#verification-card.distributor span, #verification-card.merchant span {
		font-size: 24px;
	}
	#verification-card.distributor span:nth-of-type(2), #verification-card.merchant span:nth-of-type(2) {
        font-size: 14px;
        line-height: 18px;
	}
    #verification-card.distributor span, #verification-card.merchant span {
        padding-top: 0;
    }
}

/* Menu edits */
#menu-item-1137 .x-anchor-content {
    padding-right: 0; /* Remove right padding on the contact us button */ 
}
#menu-item-1137 .x-anchor-content .x-anchor-text {
    margin-right: 0; /* Remove right margin on the contact us button */ 
}
#menu-item-24 {
	display: none; /* Hide "Home" */
}
@media (min-width: 1472px) {
	#menu-item-24 {
		display: flex; /* Show "Home" on large screen size */
	}
}
@media (min-width: 979px) {
    header .x-anchor.x-anchor-toggle.x-hide-lg {
        display: inline-flex !important; /* Show mobile menu */
    }
}
@media (min-width: 1200px) {
    header .x-anchor.x-anchor-toggle.x-hide-xl {
        display: inline-flex !important; /* Show mobile menu */
    }
}
header .x-menu-first-level.x-menu.x-menu-inline {
	display: none; /* Hide main menu */
}
@media (min-width: 1384px) {
	header .x-menu-first-level.x-menu.x-menu-inline {
		display: flex; /* Show main menu on large screen size */
	}
    header .x-anchor.x-anchor-toggle.x-hide-xl {
        display: none !important; /* hide mobile menu */
    }
}