/* Base Variables */
:root {
    --theme-primary: rgba(102, 158, 0, 1);
    --theme-light: rgba(143, 196, 0, 1);
    --theme-dark: rgba(80, 122, 0, 1);
    --theme-bg-medium: rgba(143, 196, 0, .2);
	--theme-bg-slider: rgba(255, 255, 255, .3);
}

/* Base Elements */
a:hover {
    color: var(--theme-primary);
}

.qq-upload-button {
	background: var(--theme-bg-medium) !important;
}

/* Typography/Headings */

h1 {
    color: var(--theme-primary) !important;
    font-size: 2.5em !important;
    margin-bottom: 20px !important;
}

h2 {
    color: var(--theme-dark) !important;
    font-size: 2em !important;
    margin-bottom: 15px !important;
}

h3 {
    color: var(--theme-dark) !important;
    font-size: 1.75em !important;
    margin-bottom: 15px !important;
}

h4 {
	color: var(--theme-dark) !important;
    font-size: 1.5em !important;
    margin-bottom: 15px !important;
}

h5 {
	color: var(--theme-dark) !important;
    font-size: 1.25em !important;
    margin-bottom: 10px !important;
}

h6 {
	color: var(--theme-dark) !important;
    font-size: 1em !important;
    margin-bottom: 10px !important;
}

#h1_latest, 
#h1_latest strong {
    color: var(--theme-primary) !important;
}

/* Layout & Structural Elements */
[class*=col_].visible {
    background: var(--theme-bg-medium) !important;
    border: 1px dotted var(--theme-primary) !important;
}

#map {
    border: 1px solid var(--theme-primary);
}

.box_location_main {
    border-top: 1px solid var(--theme-primary);
}

#footer {
	color: var(--theme-dark) !important;
	font-weight:500 !important;
}

/* Navigation & Header Elements */
ul.button-bar li {
    border: 1px solid var(--theme-dark) !important;
    background: var(--theme-light) !important;
    background: linear-gradient(to bottom, var(--theme-light) 0, var(--theme-primary) 100%) !important;
}

ul.button-bar li a {
    color: white !important;
    text-shadow: 0 -1px 0 var(--theme-dark) !important;
    border-left: 1px solid var(--theme-light) !important;
}

ul.button-bar li a:hover {
    text-shadow: 0 1px 0 var(--theme-primary) !important;
    background: linear-gradient(to bottom, rgba(198, 226, 120, 1) 0, rgba(167, 211, 44, 1) 100%) !important;
}

ul.button-bar li a:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2), inset 0 -10px 20px rgba(0, 0, 0, .07) !important;
    border-left: 1px solid var(--theme-dark) !important;
}

/* breadcrumbs */
ul.breadcrumbs li {
	background:transparent !important;
}

ul.breadcrumbs.alt1 li.last a {
	background: rgba(232, 249, 187, .6) !important;
}

ul.breadcrumbs.alt1 li a {
    padding: 10px 25px 10px 15px;
    background: url(img/green/breadcrumbs-bg.png) right center no-repeat;
    text-decoration: none;
    border-top: 1px solid var(--theme-dark) !important;
    border-bottom: 1px solid var(--theme-dark) !important;
    font-size: 12px
}

/* Menu container styling */
.menu {
    border: 1px solid var(--theme-dark);
    background: var(--theme-light);
    background: -moz-linear-gradient(top, var(--theme-light) 0%, var(--theme-primary) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--theme-light)), color-stop(100%, var(--theme-primary)));
    background: -webkit-linear-gradient(top, var(--theme-light) 0%, var(--theme-primary) 100%);
    background: -o-linear-gradient(top, var(--theme-light) 0%, var(--theme-primary) 100%);
    background: linear-gradient(to bottom, var(--theme-light) 0%, var(--theme-primary) 100%);
    z-index: 600;
}

/* Menu link styling */
.menu li a {
    text-shadow: 0 -1px 0 var(--theme-dark);
    padding: 15px 20px;
    text-decoration: none;
    font-size: .9em;
    color: #fff;
}

/* Current menu item styling */
.menu li.current.hover > a,
.menu li.current > a,
.menu li.current > a:hover {
    background: var(--theme-light);
    background: -moz-linear-gradient(top, var(--theme-light) 0%, var(--theme-primary) 44%, var(--theme-dark) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--theme-light)), color-stop(44%, var(--theme-primary)), color-stop(100%, var(--theme-dark)));
    background: -webkit-linear-gradient(top, var(--theme-light) 0%, var(--theme-primary) 44%, var(--theme-dark) 100%);
    background: -o-linear-gradient(top, var(--theme-light) 0%, var(--theme-primary) 44%, var(--theme-dark) 100%);
    background: linear-gradient(to bottom, var(--theme-light) 0%, var(--theme-primary) 44%, var(--theme-dark) 100%);
    color: #fff;
    text-shadow: 0 -1px 0 var(--theme-dark);
    cursor: default;
}

/* Hover state styling for main menu */
.menu > li > a:hover,
.menu > li.hover > a {
    background: var(--theme-bg-medium);
}

/* Hover state styling for submenu */
.menu ul li a:hover,
.menu ul li.hover > a {
    background: rgba(143, 196, 0, 0.9); /* Brighter highlight for submenu hover with higher opacity */
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); /* Enhanced text shadow for better readability on highlight */
}

/* Submenu styling */
.menu ul {
    background: rgba(102, 158, 0, 0.85); /* Darker version of --theme-primary with opacity */
    border: 1px solid var(--theme-dark);
}

/* Submenu link text styling */
.menu ul li a {
    color: #fff !important; /* Force white text in dropdown */
    text-shadow: 0 -1px 0 var(--theme-dark);
}

/* Content Elements */
.user_info {
    border: 1px solid var(--theme-primary);
    background-color: transparent;
    padding: 5px;
    border-top: none;
}

.user-card {
    border: 1px solid var(--theme-primary);
    background-color: transparent;
    padding: 4px;
    border-bottom: none;
    min-height: 144px;
}

.profile_pic {
    border: 1px solid var(--theme-primary);
    background-color: transparent;
}

.comment {
    border: 1px dotted var(--theme-primary);
}

/* Listings */
.view_list .listing_div,
.view_grid .listing_div {
    border: 1px solid var(--theme-primary);
}

.view_list .listing_div .price_list span,
.view_grid .listing_div .price_grid {
    background-color: var(--theme-primary);
    color: white;
}

#color{border-color: blue; border-style: solid; border-width: 5px !important;}

/* Category Elements */
.main_category_select {
    background-color: var(--theme-light);
    color: #FFFFFF;
}

#draw_cat {
    border: 1px solid var(--theme-primary);
}

/* Form & Interactive Elements */
#contact_user,
#newAddTitDesc,
#newAddLoc,
#images_upload,
#admin_contact_form, 
#user_login_form,
#item-content,
#item-sidebar {
    border: 1px solid var(--theme-primary);
}

#new_item_Page .qq-upload-button {
    border: 1px dotted var(--theme-primary);
}

/* Buttons & Controls */
button, 
a.btn, 
input[type="submit"], 
input[type="reset"], 
input[type="button"] {
    background: linear-gradient(to bottom, var(--theme-light) 0%, var(--theme-primary) 100%);
    border-color: var(--theme-dark);
	text-shadow: none;
    color: #fff;
}

/* Hover styles - remove the space before :hover */
button:hover, 
a.btn:hover, 
input[type="submit"]:hover, 
input[type="reset"]:hover, 
input[type="button"]:hover {
    background: linear-gradient(to bottom, var(--theme-primary) 0%, var(--theme-light) 100%) !important;
	text-shadow: none;
    color: #fff;
}

.button.green,
button.green,
a.btn.green,
input[type="submit"].green,
input[type="button"].green {
    text-shadow: 0 -1px 0 var(--theme-dark);
    color: white;
    border: 1px solid var(--theme-dark);
    background: var(--theme-light);
    background: linear-gradient(to bottom, var(--theme-light) 0%, var(--theme-primary) 100%);
}

.button.green:hover,
button.green:hover,
a.btn.green:hover {
    background: linear-gradient(to bottom, var(--theme-primary) 0%, var(--theme-light) 100%);
}

/* Search Controls */
#search_bar button.medium.green {
    background: linear-gradient(to bottom, var(--theme-light) 0%, var(--theme-primary) 100%);
    border-color: var(--theme-dark);
}

#search_bar button.medium.green:hover {
    background: linear-gradient(to bottom, var(--theme-primary) 0%, var(--theme-light) 100%);
}

/* Show More Buttons */
input[type="button"][class^="show_more_"],
input[type="button"][class*=" show_more_"] {
    text-shadow: 0 -1px 0 var(--theme-dark) !important;
    color: white !important;
    border: 1px solid var(--theme-dark) !important;
    background: var(--theme-light) !important;
    background: linear-gradient(to bottom, var(--theme-light) 0%, var(--theme-primary) 100%) !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
}

input[type="button"][class^="show_more_"]:hover,
input[type="button"][class*=" show_more_"]:hover {
    background: linear-gradient(to bottom, var(--theme-primary) 0%, var(--theme-light) 100%) !important;
}

input[type="button"][class^="show_more_"]:active,
input[type="button"][class*=" show_more_"]:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2), inset 0 -10px 20px rgba(0, 0, 0, .07) !important;
}

/* Details Button */
p.detail .button,
p.detail a.button {
    text-shadow: 0 -1px 0 var(--theme-dark) !important;
    color: white !important;
    border: 1px solid var(--theme-dark) !important;
    background: var(--theme-light) !important;
    background: linear-gradient(to bottom, var(--theme-light) 0%, var(--theme-primary) 100%) !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
}

p.detail .button:hover,
p.detail a.button:hover {
    background: linear-gradient(to bottom, var(--theme-primary) 0%, var(--theme-light) 100%) !important;
}

p.detail .button:active,
p.detail a.button:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2), inset 0 -10px 20px rgba(0, 0, 0, .07) !important;
}

a.btn.small, a.button.small, button.small {
	
    text-shadow: 0 -1px 0 var(--theme-dark) !important;
    color: white !important;
    border: 1px solid var(--theme-dark) !important;
    background: var(--theme-light) !important;
    background: linear-gradient(to bottom, var(--theme-light) 0%, var(--theme-primary) 100%) !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
}

a.btn.small, a.button.small, button.small:hover {
	background: linear-gradient(to bottom, var(--theme-primary) 0%, var(--theme-light) 100%) !important;
}

.back-to-top:hover {
	background: linear-gradient(to bottom, var(--theme-primary) 0%, var(--theme-light) 100%) !important;
}

/* Indicators & Labels */
#tot_item {
    background: var(--theme-primary);
    color: #fff;
}

#item-content .price, 
#custom_fields .meta {
    background-color: var(--theme-primary);
    color: white;
}

#custom_fields .meta strong, 
.price strong {
    color: greenyellow;
}

#info_check {
    color: var(--theme-primary);
}

#viewcontrols a {
	color: var(--theme-dark);
}

#viewcontrols .active {
    color: var(--theme-primary);
}

#premium_search .listing_div {
	background-color: transparent !important;
	border: 3px solid gold !important;
}

/* Pagination */
#searchPagination .searchPaginationSelected {
    background-color: var(--theme-primary) !important;
    color: white !important;
}

/* Sliders & Widgets */
.bx-wrapper .bx-viewport {
    border: 3px solid gold !important;
}

.bx-wrapper .bx-controls-auto .bx-start {
	background: url(img/green/controls.png) -86px -11px no-repeat !important;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(img/green/controls.png) -86px -44px no-repeat;
    margin: 0 3px
}

.bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover {
	background: var(--theme-dark) !important;
}

.bx-wrapper .bx-loading {
	background: url(img/green/bx_loader.gif) center center no-repeat #fff !important;
}

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(img/green/controls.png) 0 -32px no-repeat !important;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(img/green/controls.png) -43px -32px no-repeat !important;
}

/* Premium Badge Styling - Add to each color CSS file */

/* Ensure the premium badge container is always visible */
.premium_list_main {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999 !important; /* Very high z-index to ensure it's always on top */
    pointer-events: none; /* So it doesn't interfere with clicks */
    opacity: 1 !important;
}

/* Default size for desktop */
.premium-badge {
    display: block !important;
    width: 75px;
    height: 60px;
    max-width: 100%;
    visibility: visible !important;
}

/* Responsive adjustments for mobile */
@media only screen and (max-width: 767px) {
    .premium_list_main {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .premium-badge {
        width: 61px !important;
        height: auto !important;
    }
}

/* Smaller screens */
@media only screen and (max-width: 480px) {
    .premium-badge {
        width: 56px !important;
		margin-top:2.1875rem;
		margin-left:0.625rem !important;
    }
}