/* --- [Definitive] Chikenfield Amazon Dropdown CSS - Dark Theme v2 --- */

/* 1. Main Wrapper & Label 
-----------------------------------------------------------------*/
.amazon-dropdown-wrapper {
    max-width: 350px; /* <--- THIS IS THE NEW LINE. Adjust this value as you like. */
    margin-bottom: 1em; /* Standard WooCommerce spacing */
}

.amazon-dropdown-label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
    color: #f5f5dc; /* Beige label text */
}

/* 2. The Main (Closed) Dropdown Box
-----------------------------------------------------------------*/
/* This is the main visible container of the dropdown */
.select2-container--default .select2-selection--single {
	  display: flex !important;
    align-items: center !important;
    background-color: #333 !important;
    border: 1px solid #555 !important;
    height: 44px !important; /* Adjust if needed to match theme */
    border-radius: 4px !important;
	
}

/* This is the text (and flag) of the currently selected item */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f5f5dc !important; /* Beige text */
    line-height: 42px !important; /* Center text vertically */
    padding-left: 12px !important;
}


/* 3. The Dropdown Arrow (Specifics)
-----------------------------------------------------------------*/
/* This targets the container for the little dropdown arrow on the right */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

/* This targets the arrow itself */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #f5f5dc transparent transparent transparent !important; /* Arrow pointing down */
    margin-top: -2px !important; /* Fine-tune vertical position */
}

/* This changes the arrow's direction and color when the dropdown is OPEN */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #f5f5dc transparent !important; /* Arrow pointing up */
}


/* 4. The Open Dropdown Panel & Options
-----------------------------------------------------------------*/
/* This is the main panel that opens up with all the options */
.select2-dropdown {
    background-color: #333 !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
}

/* This styles each individual option in the list */
.select2-results__option {
    color: #f5f5dc !important; /* Beige text for all options */
    padding: 8px 12px !important;
}

/* This styles the option you are currently HOVERING over */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #555 !important; /* A slightly lighter dark for contrast */
    color: #ffffff !important; /* Make hover text brighter */
}

/* This styles a selected item in the list (if you re-open it) */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #444 !important;
}

/* Styles for the search box that can appear in Select2 */
.select2-search--dropdown .select2-search__field {
    background-color: #222 !important;
    color: #f5f5dc !important;
    border: 1px solid #555 !important;
}


/* 5. Functional & Helper Styles
-----------------------------------------------------------------*/
/* Style for the flag icons in the dropdown */
.country-flag-icon {
    width: 20px;
    height: auto;
    margin-right: 10px;
    vertical-align: middle;
    border: 1px solid #555; /* Dark border for flags */
    border-radius: 2px;
}

/* This is the disabled state for the ORIGINAL WooCommerce button */
.single_add_to_cart_button.amazon-link-disabled {
    background-color: #777 !important;
    color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* To prevent the hover effect when disabled */
.single_add_to_cart_button.amazon-link-disabled:hover {
    background-color: #777 !important;
    opacity: 0.6 !important;
}


/* --- Style the Select2 Dropdown Scrollbar --- */

/* For Firefox */
.select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: #555 #333;
}

/* For Chrome, Safari, Edge, and other WebKit browsers */
.select2-results__options::-webkit-scrollbar {
  width: 8px;
}

.select2-results__options::-webkit-scrollbar-track {
  background: #333; /* The background of the scrollbar track */
}

.select2-results__options::-webkit-scrollbar-thumb {
  background-color: #555; /* The color of the draggable handle */
  border-radius: 4px;
  border: 2px solid #333; /* Creates a nice padding effect */
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
  background-color: #777; /* Lighter color on hover */
}
/* --- Styling for the Amazon Disclaimer Text --- */
.amazon-disclaimer {
    font-size: 0.9em;      /* Slightly smaller than normal text */
    color: #a0a0a0;        /* A muted grey color, less prominent than the label */
    font-style: italic;
    margin-bottom: 0.5em;  /* A little space before the label */
    padding-left: 2px;
}
