blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0;border:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}progress{vertical-align:baseline}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}body,button,input,select,textarea{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;text-transform:none;font-size:17px;line-height:1.5}p{margin-bottom:1.5em}h1,h2,h3,h4,h5,h6{font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit}pre{background:rgba(0,0,0,.05);font-family:inherit;font-size:inherit;line-height:normal;margin-bottom:1.5em;padding:20px;overflow:auto;max-width:100%}blockquote{border-left:5px solid rgba(0,0,0,.05);padding:20px;font-size:1.2em;font-style:italic;margin:0 0 1.5em;position:relative}blockquote p:last-child{margin:0}table,td,th{border:1px solid rgba(0,0,0,.1)}table{border-collapse:separate;border-spacing:0;border-width:1px 0 0 1px;margin:0 0 1.5em;width:100%}td,th{padding:8px}th{border-width:0 1px 1px 0}td{border-width:0 1px 1px 0}hr{background-color:rgba(0,0,0,.1);border:0;height:1px;margin-bottom:0px;margin-top:0px}fieldset{padding:0;border:0;min-width:inherit}fieldset legend{padding:0;margin-bottom:1.5em}h1{font-size:42px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h2{font-size:35px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h3{font-size:29px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h4{font-size:24px}h5{font-size:20px}h4,h5,h6{margin-bottom:20px}ol,ul{margin:0 0 1.5em 3em}ul{list-style:disc}ol{list-style:decimal}li>ol,li>ul{margin-bottom:0;margin-left:1.5em}dt{font-weight:700}dd{margin:0 1.5em 1.5em}b,strong{font-weight:700}cite,dfn,em,i{font-style:italic}address{margin:0 0 1.5em}code,kbd,tt,var{font:15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{text-decoration:none}sub,sup{font-size:75%;height:0;line-height:0;position:relative;vertical-align:baseline}sup{bottom:1ex}sub{top:.5ex}small{font-size:75%}big{font-size:125%}figure{margin:0}table{margin:0 0 1.5em;width:100%}th{font-weight:700}img{height:auto;max-width:100%}button,input[type=button],input[type=reset],input[type=submit]{background:#55555e;color:#fff;border:1px solid transparent;cursor:pointer;-webkit-appearance:button;padding:10px 20px}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{border:1px solid;border-radius:0;padding:10px 15px;max-width:100%}textarea{width:100%}a,button,input{transition:color .1s ease-in-out,background-color .1s ease-in-out}a{text-decoration:none}.button,.wp-block-button .wp-block-button__link{padding:10px 20px;display:inline-block}.wp-block-button .wp-block-button__link{font-size:inherit;line-height:inherit}.using-mouse :focus{outline:0}.using-mouse ::-moz-focus-inner{border:0}.alignleft{float:left;margin-right:1.5em}.alignright{float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin:0 auto}.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail{max-width:100%;height:auto}.no-sidebar .entry-content .alignfull{margin-left:calc(-100vw / 2 + 100% / 2);margin-right:calc(-100vw / 2 + 100% / 2);max-width:100vw;width:auto}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}#primary[tabindex="-1"]:focus{outline:0}.main-navigation{z-index:100;padding:0;clear:both;display:block}.main-navigation a{display:block;text-decoration:none;font-weight:400;text-transform:none;font-size:15px}.main-navigation ul{list-style:none;margin:0;padding-left:0}.main-navigation .main-nav ul li a{padding-left:20px;padding-right:20px;line-height:60px}.inside-navigation{position:relative}.main-navigation .inside-navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}.main-navigation .main-nav>ul{display:flex;flex-wrap:wrap;align-items:center}.main-navigation li{position:relative}.main-navigation .menu-bar-items{display:flex;align-items:center;font-size:15px}.main-navigation .menu-bar-items a{color:inherit}.main-navigation .menu-bar-item{position:relative}.main-navigation .menu-bar-item.search-item{z-index:20}.main-navigation .menu-bar-item>a{padding-left:20px;padding-right:20px;line-height:60px}.sidebar .main-navigation .main-nav{flex-basis:100%}.sidebar .main-navigation .main-nav>ul{flex-direction:column}.sidebar .main-navigation .menu-bar-items{margin:0 auto}.sidebar .main-navigation .menu-bar-items .search-item{order:10}.nav-align-center .inside-navigation{justify-content:center}.nav-align-center .main-nav>ul{justify-content:center}.nav-align-right .inside-navigation{justify-content:flex-end}.main-navigation ul ul{display:block;box-shadow:1px 1px 0 rgba(0,0,0,.1);float:left;position:absolute;left:-99999px;opacity:0;z-index:99999;width:200px;text-align:left;top:auto;transition:opacity 80ms linear;transition-delay:0s;pointer-events:none;height:0;overflow:hidden}.main-navigation ul ul a{display:block}.main-navigation ul ul li{width:100%}.main-navigation .main-nav ul ul li a{line-height:normal;padding:10px 20px;font-size:14px}.main-navigation .main-nav ul li.menu-item-has-children>a{padding-right:0;position:relative}.main-navigation.sub-menu-left ul ul{box-shadow:-1px 1px 0 rgba(0,0,0,.1)}.main-navigation.sub-menu-left .sub-menu{right:0}.main-navigation:not(.toggled) ul li.sfHover>ul,.main-navigation:not(.toggled) ul li:hover>ul{left:auto;opacity:1;transition-delay:150ms;pointer-events:auto;height:auto;overflow:visible}.main-navigation:not(.toggled) ul ul li.sfHover>ul,.main-navigation:not(.toggled) ul ul li:hover>ul{left:100%;top:0}.main-navigation.sub-menu-left:not(.toggled) ul ul li.sfHover>ul,.main-navigation.sub-menu-left:not(.toggled) ul ul li:hover>ul{right:100%;left:auto}.nav-float-right .main-navigation ul ul ul{top:0}.menu-item-has-children .dropdown-menu-toggle{display:inline-block;height:100%;clear:both;padding-right:20px;padding-left:10px}.menu-item-has-children ul .dropdown-menu-toggle{padding-top:10px;padding-bottom:10px;margin-top:-10px}.sidebar .menu-item-has-children .dropdown-menu-toggle,nav ul ul .menu-item-has-children .dropdown-menu-toggle{float:right}.widget-area .main-navigation li{float:none;display:block;width:100%;padding:0;margin:0}.sidebar .main-navigation.sub-menu-right ul li.sfHover ul,.sidebar .main-navigation.sub-menu-right ul li:hover ul{top:0;left:100%}.sidebar .main-navigation.sub-menu-left ul li.sfHover ul,.sidebar .main-navigation.sub-menu-left ul li:hover ul{top:0;right:100%}.site-main .comment-navigation,.site-main .post-navigation,.site-main .posts-navigation{margin:0 0 2em;overflow:hidden}.site-main .post-navigation{margin-bottom:0}.paging-navigation .nav-next,.paging-navigation .nav-previous{display:none}.paging-navigation .nav-links>*{padding:0 5px}.paging-navigation .nav-links .current{font-weight:700}.nav-links>:first-child{padding-left:0}.site-header{position:relative}.inside-header{padding:5px 40px}.main-title{margin:0;font-size:25px;line-height:1.2em;word-wrap:break-word;font-weight:700;text-transform:none}.site-description{margin:0;line-height:1.5;font-weight:400;text-transform:none;font-size:15px}.site-logo{display:inline-block;max-width:100%}.site-header .header-image{vertical-align:middle}.inside-header{display:flex;align-items:center}.header-widget{margin-left:auto}.header-widget p:last-child{margin-bottom:0}.nav-float-right .header-widget{margin-left:20px}.nav-float-right #site-navigation{margin-left:auto}.nav-float-left #site-navigation{margin-right:auto;order:-10}.nav-float-left .header-widget{margin-left:0;margin-right:20px;order:-15}.header-aligned-center:not([class*=nav-float-]) .inside-header{justify-content:center;flex-direction:column;text-align:center}.header-aligned-center:not([class*=nav-float-]) .header-widget{margin-left:auto;margin-right:auto}.header-aligned-center:not([class*=nav-float-]) .inside-header>:not(:first-child){margin-top:1em}.header-aligned-right:not([class*=nav-float-]) .inside-header{justify-content:flex-end}.header-aligned-right:not([class*=nav-float-]) .header-widget{margin-right:auto;margin-left:0;order:-10}.site-branding-container{display:inline-flex;align-items:center;text-align:left;flex-shrink:0}.site-branding-container .site-logo{margin-right:1em}.sticky{display:block}.entry-header .gp-icon,.posted-on .updated{display:none}.byline,.entry-header .cat-links,.entry-header .comments-link,.entry-header .tags-links,.group-blog .byline,.single .byline{display:inline}footer.entry-meta .byline,footer.entry-meta .posted-on{display:block}.entry-content:not(:first-child),.entry-summary:not(:first-child),.page-content:not(:first-child){margin-top:2em}.page-links{clear:both;margin:0 0 1.5em}.archive .format-aside .entry-header,.archive .format-status .entry-header,.archive .format-status .entry-meta,.archive .format-status .entry-title,.blog .format-aside .entry-header,.blog .format-status .entry-header,.blog .format-status .entry-meta,.blog .format-status .entry-title{display:none}.archive .format-aside .entry-content,.archive .format-status .entry-content,.blog .format-aside .entry-content,.blog .format-status .entry-content{margin-top:0}.archive .format-status .entry-content p:last-child,.blog .format-status .entry-content p:last-child{margin-bottom:0}.entry-header,.site-content{word-wrap:break-word}.entry-title{margin-bottom:0}.author .page-header .page-title{display:flex;align-items:center}.author .page-header .avatar{margin-right:20px}.page-header .author-info>:last-child,.page-header>:last-child{margin-bottom:0}.entry-meta{font-size:85%;margin-top:.5em;line-height:1.5}footer.entry-meta{margin-top:2em}.cat-links,.comments-link,.tags-links{display:block}.entry-content>p:last-child,.entry-summary>p:last-child,.page-content>p:last-child,.read-more-container,.taxonomy-description p:last-child{margin-bottom:0}.wp-caption{margin-bottom:1.5em;max-width:100%;position:relative}.wp-caption img[class*=wp-image-]{display:block;margin:0 auto 0;max-width:100%}.wp-caption .wp-caption-text{font-size:75%;padding-top:5px;opacity:.8}.wp-caption img{position:relative;vertical-align:bottom}.wp-block-image figcaption{font-size:13px;text-align:center}.wp-block-gallery,ul.blocks-gallery-grid{margin-left:0}.wp-block-gallery .blocks-gallery-image figcaption,.wp-block-gallery .blocks-gallery-item figcaption{background:rgba(255,255,255,.7);color:#000;padding:10px;box-sizing:border-box}.gallery{margin-bottom:1.5em}.gallery-item{display:inline-block;text-align:center;vertical-align:top;width:100%}.gallery-columns-2 .gallery-item{max-width:50%}.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery-columns-4 .gallery-item{max-width:25%}.gallery-columns-5 .gallery-item{max-width:20%}.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery-caption{display:block}.site-main .gallery{margin-bottom:1.5em}.gallery-item img{vertical-align:bottom}.gallery-icon{padding:5px}embed,iframe,object{max-width:100%}.wp-block-post-template{margin-left:0}.widget-area .widget{padding:40px}.widget select{max-width:100%}.footer-widgets .widget :last-child,.sidebar .widget :last-child{margin-bottom:0}.widget-title{margin-bottom:30px;font-size:20px;line-height:1.5;font-weight:400;text-transform:none}.widget ol,.widget ul{margin:0}.widget .search-field{width:100%}.widget .search-form{display:flex}.widget .search-form button.search-submit{font-size:15px}.footer-widgets .widget{margin-bottom:30px}.footer-widgets .widget:last-child,.sidebar .widget:last-child{margin-bottom:0}.widget ul li{list-style-type:none;position:relative;margin-bottom:.5em}.widget ul li ul{margin-left:1em;margin-top:.5em}.wp-calendar-table{table-layout:fixed}.site-content{display:flex}.grid-container{margin-left:auto;margin-right:auto;max-width:1200px}.page-header,.sidebar .widget,.site-main>*{margin-bottom:20px}.both-left .inside-left-sidebar,.both-right .inside-left-sidebar{margin-right:10px}.both-left .inside-right-sidebar,.both-right .inside-right-sidebar{margin-left:10px}.one-container.both-right .site-main,.one-container.right-sidebar .site-main{margin-right:40px}.one-container.both-left .site-main,.one-container.left-sidebar .site-main{margin-left:40px}.one-container.both-sidebars .site-main{margin:0 40px 0 40px}.one-container.archive .post:not(:last-child):not(.is-loop-template-item),.one-container.blog .post:not(:last-child):not(.is-loop-template-item){padding-bottom:40px}.one-container .site-content{padding:40px}.separate-containers .comments-area,.separate-containers .inside-article,.separate-containers .page-header,.separate-containers .paging-navigation{padding:40px}.separate-containers .site-main{margin:20px}.separate-containers.no-sidebar .site-main{margin-left:0;margin-right:0}.separate-containers.both-right .site-main,.separate-containers.right-sidebar .site-main{margin-left:0}.separate-containers.both-left .site-main,.separate-containers.left-sidebar .site-main{margin-right:0}.separate-containers .inside-left-sidebar,.separate-containers .inside-right-sidebar{margin-top:20px;margin-bottom:20px}.inside-page-header{padding:40px}.widget-area .main-navigation{margin-bottom:20px}.one-container .site-main>:last-child,.separate-containers .site-main>:last-child{margin-bottom:0}.full-width-content .container.grid-container{max-width:100%}.full-width-content.no-sidebar.separate-containers .site-main{margin:0}.full-width-content.one-container .site-content,.full-width-content.separate-containers .inside-article{padding:0}.full-width-content .entry-content .alignwide{margin-left:0;width:auto;max-width:unset}.contained-content.one-container .site-content,.contained-content.separate-containers .inside-article{padding:0}.sidebar .grid-container{max-width:100%;width:100%}.both-left .is-left-sidebar,.both-sidebars .is-left-sidebar,.left-sidebar .sidebar{order:-10}.both-left .is-right-sidebar{order:-5}.both-right .is-left-sidebar{order:5}.both-right .is-right-sidebar,.both-sidebars .is-right-sidebar{order:10}.inside-site-info{display:flex;align-items:center;justify-content:center;padding:20px 40px}.site-info{text-align:center;font-size:15px}.post-image:not(:first-child){margin-top:2em}.featured-image{line-height:0}.separate-containers .featured-image{margin-top:20px}.separate-containers .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.one-container .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.gp-icon{display:inline-flex;align-self:center}.gp-icon svg{height:1em;width:1em;top:.125em;position:relative;fill:currentColor}.close-search .icon-search svg:first-child,.icon-menu-bars svg:nth-child(2),.icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:first-child{display:none}.close-search .icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:nth-child(2){display:block}.entry-meta .gp-icon{margin-right:.6em;opacity:.7}nav.toggled .icon-arrow-left svg{transform:rotate(-90deg)}nav.toggled .icon-arrow-right svg{transform:rotate(90deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon svg{transform:rotate(180deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-left svg{transform:rotate(-270deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-right svg{transform:rotate(270deg)}.container.grid-container{width:auto}.menu-toggle,.mobile-bar-items,.sidebar-nav-mobile{display:none}.menu-toggle{padding:0 20px;line-height:60px;margin:0;font-weight:400;text-transform:none;font-size:15px;cursor:pointer}.menu-toggle .mobile-menu{padding-left:3px}.menu-toggle .gp-icon+.mobile-menu{padding-left:9px}.menu-toggle .mobile-menu:empty{display:none}button.menu-toggle{background-color:transparent;flex-grow:1;border:0;text-align:center}button.menu-toggle:active,button.menu-toggle:focus,button.menu-toggle:hover{background-color:transparent}.has-menu-bar-items button.menu-toggle{flex-grow:0}nav.toggled ul ul.sub-menu{width:100%}.toggled .menu-item-has-children .dropdown-menu-toggle{padding-left:20px}.main-navigation.toggled .main-nav{flex-basis:100%;order:3}.main-navigation.toggled .main-nav>ul{display:block}.main-navigation.toggled .main-nav li{width:100%;text-align:left}.main-navigation.toggled .main-nav ul ul{transition:0s;visibility:hidden;box-shadow:none;border-bottom:1px solid rgba(0,0,0,.05)}.main-navigation.toggled .main-nav ul ul li:last-child>ul{border-bottom:0}.main-navigation.toggled .main-nav ul ul.toggled-on{position:relative;top:0;left:auto!important;right:auto!important;width:100%;pointer-events:auto;height:auto;opacity:1;display:block;visibility:visible;float:none}.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle{float:right}.mobile-menu-control-wrapper{display:none;margin-left:auto;align-items:center}.has-inline-mobile-toggle #site-navigation.toggled{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search .nav-search-active{position:relative}.has-inline-mobile-toggle #site-navigation.has-active-search .navigation-search input{outline:auto}.nav-float-left .mobile-menu-control-wrapper{order:-10;margin-left:0;margin-right:auto;flex-direction:row-reverse}@media (max-width:768px){.hide-on-mobile{display:none!important}a,body,button,input,select,textarea{transition:all 0s ease-in-out}.inside-header{flex-direction:column;text-align:center}.site-header .header-widget{margin-top:1.5em;margin-left:auto;margin-right:auto;text-align:center}.site-content{flex-direction:column}.container .site-content .content-area{width:auto}.is-left-sidebar.sidebar,.is-right-sidebar.sidebar{width:auto;order:initial}.is-left-sidebar+.is-right-sidebar .inside-right-sidebar{margin-top:0}.both-left .inside-left-sidebar,.both-left .inside-right-sidebar,.both-right .inside-left-sidebar,.both-right .inside-right-sidebar{margin-right:0;margin-left:0}#main{margin-left:0;margin-right:0}body:not(.no-sidebar) #main{margin-bottom:0}.alignleft,.alignright{float:none;display:block;margin-left:auto;margin-right:auto}.comment .children{padding-left:10px;margin-left:0}.entry-meta{font-size:inherit}.entry-meta a{line-height:1.8em}}@media (min-width:769px) and (max-width:1024px){.hide-on-tablet{display:none!important}}@media (min-width:1025px){.hide-on-desktop{display:none!important}}
html {
scroll-behavior: smooth;
}


#custom-metal-prices-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
position: relative;
}
#custom-metal-prices-header h1 {
margin: 0;
color: #333;
}
#custom-metal-prices-search-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
flex-wrap: wrap;
position: relative;
}
.search-wrapper-two {
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: border-color .3s;
position: relative;
order: 1;
}
.search-wrapper-two:hover,
.search-wrapper-two:focus-within {
border-color: #3CB441;
}
.search-icon {
padding: 0 10px;
color: #3CB441;
font-size: 16px;
}
#metal-search-input {
flex: 1;
padding: 10px;
padding-right: 30px;
border: none;
outline: none;
font-size: 14px;
}
#metal-search-input::placeholder {
color: #999;
}
.clear-input {
position: absolute;
right: 10px;
cursor: pointer;
color: red;
font-size: 16px;
display: none;
}
.clear-input.show {
display: block;
}
.autocomplete-suggestions {
position: absolute;
top: 100%;
left: 0;
width: 100%;
border: 1px solid #ccc;
background: #fff;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-radius: 4px;
margin-top: 2px;
box-sizing: border-box;
display: none;
transition: all .3s ease;
order: 3;
}
.autocomplete-suggestions.show {
display: block;
}
.autocomplete-suggestion {
padding: 10px 15px;
cursor: pointer;
color: #333;
border-bottom: 1px solid #eee;
transition: background .2s;
}
.autocomplete-suggestion:last-child {
border-bottom: none;
}
.autocomplete-suggestion:hover {
background: #f0f0f0;
}
.category-filter-wrapper {
flex: 1 1 0;
min-width: 150px;
max-width: 240px;
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
order: 2;
}
.category-filter-wrapper button {
width: 100%;
padding: 10px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
color: #333;
cursor: pointer;
text-align: left;
transition: border-color .3s, box-shadow .3s, color .3s;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
position: relative;
}
.category-filter-wrapper button:hover,
.category-filter-wrapper button:focus {
border-color: #3CB441;
box-shadow: 0 0 5px rgba(60,180,65,0.5);
color: #333;
outline: none;
}
.category-filter-wrapper button::after {
content: "▼";
font-size: 12px;
margin-left: 10px;
transition: transform .3s;
}
.category-filter-wrapper button.active::after {
transform: rotate(180deg);
}
.category-filter-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
max-height: 200px;
overflow-y: auto;
width: 100%;
margin-top: 2px;
box-sizing: border-box;
}
.category-filter-dropdown.show {
display: block;
}
.category-filter-dropdown label {
display: flex;
align-items: center;
padding: 8px;
cursor: pointer;
font-size: 14px;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.category-filter-dropdown label:hover {
background: #f0f0f0;
}
.category-filter-dropdown input[type="checkbox"] {
margin-right: 8px;
width: 16px;
height: 16px;
cursor: pointer;
}
.selected-count {
background: #3CB441;
color: #fff;
border-radius: 4px;
padding: 2px 6px;
font-size: 12px;
margin-left: 8px;
display: none;
width: 24px;
height: 24px;
line-height: 20px;
text-align: center;
}
.category-filter-wrapper button.has-selected .selected-count {
display: inline-block;
}
@media (max-width:529px) {
#custom-metal-prices-search-container {
flex-direction: column;
}
.search-wrapper-two {
order: 1;
}
.autocomplete-suggestions {
order: 2;
position: static;
width: 100%;
margin-top: -15px;
}
.category-filter-wrapper {
order: 3;
}
}
@media (min-width:769px) {
#metal-search-input,
.category-filter-wrapper {
max-width: 240px;
min-width: 200px;
}
}
@media (max-width:499px) {
#custom-metal-prices-header {
flex-direction: column;
align-items: flex-start;
}
#custom-metal-prices-header h1 {
margin-bottom: 20px;
width: 100%;
text-align: left;
}
#custom-metal-prices-search-container {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.search-wrapper-two,
.category-filter-wrapper {
flex: 1 1 100%;
width: 100%;
max-width: none;
margin-bottom: 10px;
}
.autocomplete-suggestions {
max-height: 150px;
}
}
@media (min-width:500px) and (max-width:768px) {
#custom-metal-prices-header {
flex-direction: column;
align-items: flex-start;
}
#custom-metal-prices-header h1 {
margin-bottom: 20px;
width: 100%;
text-align: left;
}
#custom-metal-prices-search-container {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
width: 100%;
}
.search-wrapper-two,
.category-filter-wrapper {
flex: 1 1 48%;
width: 48%;
max-width: none;
}
.autocomplete-suggestions {
max-height: 150px;
}
}
#custom-metal-prices-table-container {
width: 100%;
display: block;
overflow-x: auto;
margin: 0 auto;
box-sizing: border-box;
}
#custom-metal-prices-table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: #FFF;
font-size: 15px;
box-sizing: border-box;
}
#custom-metal-prices-table th,
#custom-metal-prices-table td {
padding: 10px;
border-bottom: 1px solid #eee;
color: #333;
box-sizing: border-box;
}
#custom-metal-prices-table th {
font-weight: 650;
color: #8293A3;
text-align: left;
background: transparent;
border-bottom: 2px solid #ddd;
font-size: 14px;
}
#custom-metal-prices-table td {
text-align: left;
font-weight: 550;
font-size: 14px;
}
#custom-metal-prices-table td:not(:first-child),
#custom-metal-prices-table th:not(:first-child) {
text-align: center;
white-space: nowrap;
}
#custom-metal-prices-table .metal-row:hover {
background: #f1f1f1;
}
#custom-metal-prices-table img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
vertical-align: middle;
}
#custom-metal-prices-table .metal-name {
font-weight: 650;
font-size: 15px;
padding-left: 4px;
}
#custom-metal-prices-table .price-up {
color: green;
font-weight: 650;
font-size: 15px;
}
#custom-metal-prices-table .price-down {
color: red;
font-weight: 650;
font-size: 15px;
}
#custom-metal-prices-table button {
background: #0073AA;
color: #FFF;
border: none;
padding: 9px 17px;
border-radius: 4px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: background-color .3s;
}
#custom-metal-prices-table button:hover {
background: #34a136;
}
#custom-metal-prices-table .chart-img {
width: 190px;
height: 80px;
object-fit: contain;
margin: -20px;
}
@media (max-width:668px) {
#custom-metal-prices-table td:not(:first-child),
#custom-metal-prices-table th:not(:first-child) {
text-align: center;
white-space: nowrap;
max-width: 100px;
}
#custom-metal-prices-table th.extra-column,
#custom-metal-prices-table td.extra-column {
display: none;
}
#custom-metal-prices-table .additional-info {
display: table-row;
}
#custom-metal-prices-table .additional-content {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px;
background: #f9f9f9;
}
#custom-metal-prices-table .additional-content .chart-img {
flex-grow: 1;
width: 100%;
max-width: none;
height: 65px;
object-fit: contain;
margin-right: 15px;
}
#custom-metal-prices-table button {
padding: 8px 14px;
font-size: 14px;
flex-shrink: 0;
}
}
@media (max-width:500px) {
#custom-metal-prices-table .additional-content .chart-img {
height: 45px;
margin-right: 0;
}
}
@media (min-width:668px) {
#custom-metal-prices-table .additional-info {
display: none;
}
#custom-metal-prices-table th,
#custom-metal-prices-table td {
padding: 8px 14px;
}
#custom-metal-prices-table th {
font-size: 14px;
}
#custom-metal-prices-table td {
font-size: 13px;
}
}





























.metal-prices-wrapper {padding:15px; box-sizing:border-box; font-family:Arial, sans-serif;}











 







.price_inform_container {
margin: 0 auto;
margin-top: 40px;
}

.price_inform_header {
text-align: center;
margin-bottom: 30px;
}

.price_inform_header h1 {
margin-bottom: 10px;
color: #212529;
}

.price_inform_header p {
font-size: 1rem;
color: #6c757d;
margin: 5px 0;
}

.price_inform_grid-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}

.price_inform_group {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 16px;
}


.price_inform_group h2 {
font-size: 1.25rem;
margin-bottom: 15px;
border-bottom: 1px solid #e9ecef;
padding-bottom: 10px;
color: #212529;
}

.price_inform_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}

.price_inform_card {
background-color: #f0f4f8;
border-radius: 8px;
padding: 15px;
text-align: center;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
transition: background-color 0.3s ease;
}



.price_inform_card h3 {
font-size: 0.9rem;
margin: 0;
color: #495057;
margin-bottom: 8px;
}

.price_inform_value {
font-size: 1.1rem;
font-weight: bold;
margin-top: 6px;
}

.price_inform_value.high {
color: #007bff;
}

.price_inform_value.low {
color: #dc3545;
}

.price_inform_value.avg {
color: #28a745;
}

.price_inform_footer {
margin-bottom: 30px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 16px;
}

.price_inform_footer h2 {
font-size: 1.25rem;
margin-bottom: 15px;
border-bottom: 1px solid #e9ecef;
padding-bottom: 10px;
text-align: center;
color: #212529;
}

.price_inform_footer .price_inform_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
text-align: center;
}

.price_inform_footer .price_inform_grid div {
background-color: #f8f9fa;
border-radius: 8px;
padding: 15px;
}



.price_inform_footer .price_inform_grid div h3 {
font-size: 1rem;
margin-bottom: 5px;
color: #495057;
}

.price_inform_footer .price_inform_grid div .price_inform_price {
font-size: 1.2rem;
font-weight: bold;
color: #343a40;
}

.price_inform_formula-block {
margin-bottom: 30px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 16px;
}

.price_inform_formula-block h2 {
font-size: 1.25rem;
margin-bottom: 15px;
border-bottom: 1px solid #e9ecef;
padding-bottom: 10px;
text-align: center;
color: #212529;
}

.price_inform_formula-block p {
margin: 10px 0;
color: #495057;
}

.price_inform_formula-block ul {
margin: 10px 0 20px 0;
padding-left: 20px;
}

.price_inform_formula-block ul li {
list-style: disc;
margin: 5px 0;
}

.tab_pricer_list-table-container {
width: 100%;
overflow-x: auto;
margin-bottom: 30px;
}

.tab_pricer_list-table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
font-size: 16px;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 16px;
}

.tab_pricer_list-table th, .tab_pricer_list-table td {
padding: 12px;
border: none;
vertical-align: middle;
white-space: nowrap;
}

.tab_pricer_list-table th {
background-color: #374151;
color: #fff;
text-align: left;
}

.tab_pricer_list-table tr:nth-child(even) {
background-color: #f9fafb;
}

.tab_pricer_list-table tr:nth-child(odd) {
background-color: #ffffff;
}

.tab_pricer_list-table th:nth-child(n+2), 
.tab_pricer_list-table td:nth-child(n+2) {
text-align: center;
}

.tab_pricer_list-badge {
display: inline-block;
width: 90px;
height: 30px;
line-height: 30px;
border-radius: 5px;
font-weight: 500;
font-size: 14px;
color: #fff;
text-align: center;
}

.tab_pricer_list-badge-positive {
background-color: #8ACA2B;
}

.tab_pricer_list-badge-negative {
background-color: #DC2626;
}

.tab_pricer_list-badge-neutral {
background-color: #64748B;
}

.tab_pricer_list-percentage-positive, 
.tab_pricer_list-percentage-negative, 
.tab_pricer_list-percentage-neutral {
display: inline-block;
width: 90px;
height: 30px;
line-height: 30px;
border-radius: 5px;
font-weight: 500;
font-size: 14px;
text-align: center;
color: #fff;
}

.tab_pricer_list-percentage-positive {
background-color: #8ACA2B;
}

.tab_pricer_list-percentage-negative {
background-color: #DC2626;
}

.tab_pricer_list-percentage-neutral {
background-color: #64748B;
}

.tab_pricer_list-date-cell {
cursor: pointer;
color: #1d4ed8;
text-decoration: underline;
}

.tab_pricer_list-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 20px;
z-index: 1000;
width: 90%;
max-width: 400px;
text-align: center;
border: 2px solid #374151;
}

.tab_pricer_list-modal h3 {
margin-bottom: 15px;
padding: 10px;
border-radius: 6px 6px 0 0;
}

.tab_pricer_list-modal table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

.tab_pricer_list-modal table tr {
border-bottom: 1px solid #ddd;
}

.tab_pricer_list-modal table td {
padding: 10px;
text-align: left;
}

.tab_pricer_list-modal table td:last-child {
text-align: right;
}

.tab_pricer_list-modal button {
margin-top: 15px;
background-color: #1d4ed8;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
}

.tab_pricer_list-modal button:hover {
background-color: #2563eb;
}

.tab_pricer_list-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}

.tab_pricer_list-modal.active, .tab_pricer_list-modal-overlay.active {
display: block;
}

@media (max-width: 768px) {


.tab_pricer_list-table {
font-size: 12px;
}

.tab_pricer_list-table th, .tab_pricer_list-table td {
padding: 8px;
}

.tab_pricer_list-badge, 
.tab_pricer_list-percentage-positive, 
.tab_pricer_list-percentage-negative, 
.tab_pricer_list-percentage-neutral {
width: 60px;
height: 25px;
line-height: 25px;
font-size: 12px;
}

.tab_pricer_list-modal {
width: 90%;
padding: 15px;
}

.tab_pricer_list-modal table {
font-size: 12px;
}

.tab_pricer_list-modal button {
font-size: 12px;
padding: 8px 15px;
}

.price_inform_grid-wrapper {
grid-template-columns: 1fr;
}

.price_inform_footer .price_inform_grid {
grid-template-columns: 1fr;
}
}







/* Стилі для блоку .card та заголовку h2 */
.my-metal-chart-and-table .card {
background: #fff;
border: 1px solid #dcdcdc;
border-radius: 3px;
padding: 20px;
margin-bottom: 20px;
}
.my-metal-chart-and-table .card h2 {
color: #333;
border-bottom: 2px solid #ddd;
padding-bottom: 8px;
margin-bottom: 16px;
text-align: center;
}
/* Стилі для блоку .dropdown */
.dropdowns { 
display: grid; 
grid-template-columns: 1fr auto 1fr; 
align-items: center; 
margin-bottom: 8px; 
}
.dropdowns span { 
display: flex; 
flex-direction: column; 
align-items: center; 
}
.dropdowns select { 
min-width: 100px; 
height: 40px; 
border: 1px solid #dcdcdc; 
border-radius: 4px; 
background-color: #fff; 
padding: 0 8px; 
cursor: pointer; 
text-align: center; 
text-align-last: center; 
}
.dropdowns select:focus { 
outline: none; 
border-color: #28a745; 
}
/* Додаткові стилі для більшого шрифту у dropdown */
.dropdowns .big-text {
font-size: 1.75rem;
font-weight: 500;
}
.dropdowns .small-text {
font-size: 0.875rem;
}
/* Стилі для зміни кольору відсотка у dropdown */
.dropdowns #percentage-change.positive {
color: #3CB441;
}
.dropdowns #percentage-change.negative {
color: #FF0000;
}
@media (max-width:600px){
.dropdowns { 
grid-template-areas: "left right" "select select"; 
grid-template-columns: 1fr 1fr; 
grid-template-rows: auto auto; 
gap: 10px; 
}
.dropdowns span:first-child { grid-area: left; }
.dropdowns span:last-child { grid-area: right; }
.dropdowns select { grid-area: select; width: 100%; }
}




/* Стилі для модального вікна */
.tab_pricer_list-modal {
  display: none;
  position: fixed;
  top: 20px;                /* відступ зверху */
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 5px;
  padding: 15px;
  padding-top: 60px;        /* простір для хрестика */
  z-index: 1000;
  width: 90%;
  max-width: 350px;
  max-height: calc(100vh - 40px);  /* 20px відступ зверху і знизу */
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-align: center;
}

.tab_pricer_list-modal h3 {
  margin-bottom: 10px;
  font-size: 1rem;
}

.tab_pricer_list-modal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tab_pricer_list-modal table th,
.tab_pricer_list-modal table td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.tab_pricer_list-modal button {
  margin-top: 10px;
  background: #28A745;
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 4px;
  cursor: pointer;
}

.tab_pricer_list-modal button:hover {
  background: #218838;
}

.tab_pricer_list-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

.tab_pricer_list-modal.active,
.tab_pricer_list-modal-overlay.active {
  display: block;
}

/* Хрестик закриття – завжди на одному місці */
.tab_pricer_list-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #28A745;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  border-top-right-radius: 5px;
  z-index: 1010;
}

/* Мобільний режим: екрани 601px і менше */
@media (max-width: 601px) {
  .tab_pricer_list-modal {
    width: 90%;
    max-width: 350px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-height: calc(100vh - 40px);
    border-radius: 5px;
    padding: 15px;
    padding-top: 60px;
  }
}

/* Десктоп: збільшення мінімальної ширини модального вікна */
@media (min-width: 769px) {
  .tab_pricer_list-modal {
    min-width: 466px;
    max-width: 600px;
  }
}

/* Адаптивні стилі для таблиці та шрифтів */
@media (max-width:768px) {
  .tab_pricer_list-table { font-size: 12px; }
  .tab_pricer_list-table th,
  .tab_pricer_list-table td { padding: 8px; }
  .tab_pricer_list-badge,
  .tab_pricer_list-percentage-positive,
  .tab_pricer_list-percentage-negative,
  .tab_pricer_list-percentage-neutral {
    width: 60px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
  }
  .tab_pricer_list-modal {
    font-size: 12px;
    padding: 10px;
    padding-top: 60px;
  }
  .tab_pricer_list-modal table { font-size: 12px; }
  .tab_pricer_list-modal button { font-size: 12px; padding: 8px 15px; }
  .price_inform_grid-wrapper { grid-template-columns: 1fr; }
  .price_inform_footer .price_inform_grid { grid-template-columns: 1fr; }
}















/* Скидаємо стандартні відступи для ul, щоб WordPress-стилі не впливали */
.cities-tab-nav {
list-style: none;
padding: 0;
margin: 0 0 15px 0;
display: flex;
border-bottom: 2px solid #28a745;
}
.home_met_mak-main-content, .home_met_mak-side-col { min-width:0 } 
.home_met_mak-container { display:grid; grid-template-columns:2fr 1fr; gap:20px; box-sizing:border-box } 
.home_met_mak-block { background:#fff; border:1px solid #eaeaea; padding:15px; border-radius:4px; margin-bottom:20px; box-sizing:border-box } 
.home_met_mak-icon { color:#28a745; margin-right:5px } 
.home_met_mak-btn { 
background: #28a745; 
color: #fff; 
border: none; 
padding: 8px 12px; 
border-radius: 4px; 
font-size: 14px; 
cursor: pointer; 
transition: background-color .3s; 
text-decoration: none; 
}

.home_met_mak-btn:hover { 
background: #218838; 
color: #fff; 
}


.home_met_mak-grid { display:grid; gap:15px } 
.home_met_mak-search-stats { background:white; border:2px solid #28a745; padding:15px; border-radius:4px; text-align:center; margin-bottom:30px } 
.home_met_mak-info_met-container { margin-bottom:30px } 
.home_met_mak-info_met-card { background:#fff; border:1px solid #ddd; border-radius:3px; box-shadow:0 2px 4px rgba(0,0,0,.1); padding:16px; margin-bottom:20px; box-sizing:border-box } 
.home_met_mak-info_met-card-title { font-size:1.2rem; color:#333; border-bottom:2px solid #ddd; padding-bottom:8px; margin-bottom:16px; text-align:center } 
.home_met_mak-info_met-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; box-sizing:border-box } 
.home_met_mak-info_met-item { background:#f8f9fa; border:1px solid #e0e0e0; border-radius:6px; padding:20px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:background-color .3s, border-color .3s; box-sizing:border-box } 
.home_met_mak-info_met-item i { font-size:2.5rem; color:#28A745; margin-bottom:10px } 
.home_met_mak-calculator-container { background:#fff; border:1px solid #eaeaea; padding:20px; border-radius:4px; margin-bottom:20px; box-sizing:border-box; position:relative } 
.home_met_mak-calc-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:15px } 
.home_met_mak-custom-dropdown { position:relative; flex:1; margin-right:10px; border:1px solid #ccc; border-radius:4px; padding:8px; font-size:14px; cursor:pointer; background:#fff; box-sizing:border-box } 
.home_met_mak-custom-dropdown:after { content:'\f078'; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#888 } 
.home_met_mak-dropdown-search { width:100%; padding:8px; box-sizing:border-box; border:none; outline:none; font-size:14px } 
.home_met_mak-dropdown-options { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #ccc; border-top:none; max-height:200px; overflow-y:auto; z-index:100; display:none; margin:0; padding:0; list-style:none } 
.home_met_mak-dropdown-option { padding:8px; cursor: pointer; font-size:14px; display:flex; align-items:center } 
.home_met_mak-dropdown-option i { margin-right:8px; color:#28a745 } 
.home_met_mak-dropdown-option:hover { background:#f1f1f1 } 
.home_met_mak-calc-body { display:flex; flex-direction:column; gap:10px } 
.home_met_mak-calc-row { display:flex; flex-direction:column; border-bottom:1px solid #eaeaea; padding:8px 0; gap:5px; box-sizing:border-box } 
.home_met_mak-calc-name { font-weight:bold; color:#333; margin-bottom:5px } 
.home_met_mak-calc-details { display:flex; align-items:center; gap:10px; width:100% } 
.home_met_mak-calc-details input { flex:1; padding:8px; border:1px solid #ccc; border-radius:4px; font-size:14px; box-sizing:border-box } 
.home_met_mak-calc-price { flex:1; font-weight:bold; color:#28a745; text-align:right } 
.home_met_mak-delete-btn { background:transparent; border:none; color:#dc3545; font-size:1.2rem; cursor:pointer; transition:background-color .3s, color .3s } 
.home_met_mak-delete-btn:hover { background:#f1f1f1; color:#dc3545 } 
.home_met_mak-calc-summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; background:#e6f9e6; border:1px solid #28a745; padding:10px 15px; border-radius:4px; margin-top:15px; box-sizing:border-box } 
.home_met_mak-calc-summary span { font-size:16px; color:#28a745; margin-right:15px } 
.home_met_mak-calc-summary button { background:#28a745; border:none; color:#fff; padding:8px 12px; border-radius:4px; font-size:14px; cursor:pointer; transition:background .3s } 
.home_met_mak-calc-summary button:hover { background:#218838 } 
.home_met_mak-side-col .home_met_mak-block { margin-bottom:20px } 
.modal { display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,0.5) } 
.modal-content { background:#fff; margin:10% auto; padding:20px; border-radius:4px; width:90%; max-width:500px; position:relative } 
.modal-close { position:absolute; top:10px; right:15px; font-size:20px; color:#aaa; cursor:pointer } 
.modal-close:hover { color:#000 } 
.calc-info { font-size:12px; color:#555; margin-top:5px; cursor:pointer; display:inline-flex; align-items:center } 
.calc-info i { margin-left:5px; font-size:22px } 
@media (max-width:1100px){ .home_met_mak-container { grid-template-columns:1fr } } 
#popular-companies .home_met_mak-grid.home_met_mak-grid-3 { grid-template-columns: repeat(3, 1fr); } 
@media (max-width:768px){ #popular-companies .home_met_mak-grid.home_met_mak-grid-3 { grid-template-columns: repeat(1, 1fr); } } 
@media (max-width:480px){ #popular-companies .home_met_mak-grid.home_met_mak-grid-3 { grid-template-columns: 1fr; } } 
@media (min-width: 1101px) {
#popular-companies .home_met_mak-grid.home_met_mak-grid-3 {
grid-template-columns: 100% !important;
}
}

#popular-companies .company-card { display: flex; align-items: center; background: #fff; border: 1px solid #eaeaea; border-radius: 4px; padding: 10px; text-decoration: none; color: #333; transition: box-shadow .3s; } 
#popular-companies .company-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } 
#popular-companies .company-icon { margin-right: 10px; font-size: 1.5em; color: #28a745; display: flex; align-items: center; justify-content: center; width: 40px; } 
#popular-companies .company-info { flex: 1; } 
#popular-companies .company-name { margin: 0; font-weight: bold; font-size: 1rem; } 
#popular-companies .company-address { margin: 0; font-size: 0.9rem; color: #666; } 
.cities-tabs { margin-top: 30px; } 
/* Ми вже скинули відступи для .cities-tab-nav, тому додаткових відступів немає */
.cities-tab-nav li { margin-right: 15px; } 
.cities-tab-nav button { background: none; border: none; font-size: 1rem; padding: 8px 12px; cursor: pointer; color: #28a745; border-bottom: 2px solid transparent; transition: border-color 0.3s; } 
.cities-tab-nav button.active { border-color: #28a745; font-weight: bold; } 
/* Медіа-запит для вузьких екранів: вертикальне розташування табів з виразним оформленням */
@media (max-width: 570px) {
.cities-tab-nav {
display: block;
border-bottom: none;
margin-bottom: 15px;
}
.cities-tab-nav li {
display: block;
margin: 0 0 10px 0;
}
.cities-tab-nav button {
width: 100%;
box-sizing: border-box;
text-align: left;
font-size: 0.9rem;
padding: 12px 16px;
border: 1px solid #28a745;
border-radius: 4px;
background: #f0f0f0;
cursor: pointer;
position: relative;
}
.cities-tab-nav button::after {
content: "\25BC"; /* стрілочка вниз */
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
color: #28a745;
}
.cities-tab-nav button.active {
background: #28a745;
color: #fff;
}
.cities-tab-nav button.active::after {
content: "\25B2"; /* стрілочка вгору */
color: #fff;
}
}
.cities-search { position: relative; margin-bottom: 15px; } 
.cities-search input { width: 100%; padding: 8px 35px 8px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 0; background: #f1f1f1; transition: border-color 0.3s, box-shadow 0.3s; box-sizing:border-box; } 
.cities-search input:focus { outline: none; border-color: #28a745; box-shadow: 0 0 5px rgba(40,167,69,0.5); } 
.clear-search { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; font-size: 16px; color: #888; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } 
.clear-search:hover { background: #e0e0e0; color: #28a745; } 
.tab-content { display: none; } 
.tab-content.active { display: block; } 
.home_met_mak-grid-cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 15px; } 
#tab-metall .home_met_mak-grid-cities { grid-template-columns: repeat(3, 1fr); } 
.city-card { display: block; background: #fff; border: 1px solid #eaeaea; border-radius: 4px; padding: 10px; text-decoration: none; color: #333; text-align: center; transition: box-shadow 0.3s; position: relative; } 
.city-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } 
.city-name { font-size: 16px; font-weight: bold; margin-bottom: 8px; } 
.company-counts { font-size: 18px; background: #e0e0e0; color: #333; border-radius: 3px; } 
#tab-metall .city-card { padding: 5px; font-size: 14px; } 
#tab-metall .metal-img { max-width: 90%; margin: 0 auto 4px; display: block; }
@media (max-width: 500px) {
#tab-metall .home_met_mak-grid-cities {
grid-template-columns: repeat(2, 1fr);
}
}















/* ===== БАЗОВІ СТИЛІ ===== */
.price_city-category-filter {
display: flex; 
gap: 10px; 
margin-bottom: 20px;
}
.price_city-half {
width: 50%;
}
.price_city-search-wrapper {
position: relative; 
display: flex; 
align-items: center; 
height: 45px;
}
.price_city-search-wrapper input[type="text"] {
width: 100%; 
height: 45px; 
padding-left: 45px; 
padding-right: 30px;
border: 1px solid #ccc; 
border-radius: 4px; 
box-sizing: border-box; 
background: #F7F8F9;
}
.price_city-search-wrapper input[type="text"]:focus {
border: 1px solid #3CB441;
}
.price_city-search-icon {
position: absolute; 
left: 10px; 
top: 50%; 
transform: translateY(-50%); 
color: #3CB441; 
font-size: 16px;
}
.price_city-search-text {
position: absolute; 
left: 45px; 
top: 50%; 
transform: translateY(-50%); 
font-size: 16px; 
color: #999; 
pointer-events: none;
}
.price_city-clear-btn {
position: absolute; 
right: 8px; 
background: transparent; 
border: none; 
cursor: pointer; 
color: #999; 
font-size: 14px;
}
.price_city-select-wrapper {
position: relative; 
display: inline-block; 
width: 100%;
}
.price_city-category-select {
width: 100%; 
height: 45px; 
padding: 8px 40px 8px 10px; 
border: 1px solid #ccc; 
border-radius: 4px; 
background: #F7F8F9; 
appearance: none; 
box-sizing: border-box;
}
.price_city-category-select:focus {
border: 1px solid #3CB441;
}
.price_city-select-icon {
position: absolute; 
right: 10px; 
top: 50%; 
transform: translateY(-50%); 
pointer-events: none; 
color: #999; 
font-size: 16px;
}
.table-responsive {
overflow-x: auto;
}
.metal-table {
width: 100%; 
border-collapse: collapse; 
table-layout: fixed;
}
.metal-table th, .metal-table td {
padding: 8px; 
border-bottom: 1px solid #eaeaea; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;
}
.metal-table thead tr {
border-bottom: 2px solid #28a745; 
background: #f0f0f0;
}
.metal-table td.text-center, .metal-table th.text-center {
text-align: center;
}
.metal-table td:first-child {
white-space: normal;
overflow: visible;
text-overflow: unset;
}
.current-city-desc, .comparison-icon-desc {
font-size: 12px; 
color: #555;
}
/* Іконка плашки біля металу */
.current-city-badge {
margin-left: 5px; 
color: #3CB441; 
cursor: pointer;
}
/* Іконка порівняння */
.price-comparison-icon {
margin-left: 5px; 
color: #3CB441; 
cursor: pointer;
}
/* ===== Модалка ===== */
#mod_price_city_modal {
display: none; 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: rgba(0,0,0,0.6); 
z-index: 9999; 
align-items: center; 
justify-content: center;
}
#mod_price_city_modalContent {
background: #fff; 
padding: 15px; 
width: 600px; 
max-height: 80%; 
overflow-y: auto; 
border-radius: 5px; 
position: relative; 
font-size: 12px;
}
#mod_price_city_modalClose {
position: absolute; 
top: 0; 
right: 0; 
cursor: pointer; 
font-size: 28px; 
color: #fff; 
background: #3CB441; 
width: 40px; 
height: 40px; 
display: flex; 
align-items: center; 
justify-content: center; 
z-index: 10000;
}
#mod_price_city_modalClose:hover {
background: #2a8d34;
}
@media (max-width: 768px) {
#mod_price_city_modalContent {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
margin: 0;
}
}
.clearfix::after {
content: ""; 
clear: both; 
display: table;
}

/* Кнопка калькулятора на мобільних */
@media (min-width: 1102px) {
.home_met_mak-calculator-mobile {
display: none;
}
}
@media (max-width: 1101px) {
.home_met_mak-calculator-mobile {
display: inline-block;
margin-top: 15px;
}
}
/* ===== Стилізація інформаційних блоків ===== */
.info-blocks {
margin-bottom: 20px;
padding: 15px;
background: #f9f9f9;
border: 1px solid #eaeaea;
border-radius: 4px;
}
.info-block {
margin-bottom: 15px;
}
.info-block:last-child {
margin-bottom: 0;
}
.info-block h3 {
margin: 0 0 5px;
font-size: 18px;
color: #333;
}
.info-block p {
margin: 0;
font-size: 14px;
color: #555;
}
/* ===== НОВІ Медіа-запити для адаптивності на екранах менше 700px ===== */
@media (max-width:700px) {
.info-block {
gap: 10px;
padding: 10px;
}
.info-item {
flex: 1 1 100%;
gap: 10px;
}
}


/* Контейнер для всіх блоків */
.info-block {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 20px;
font-family: Arial, sans-serif;
}
/* Окремий блок з іконкою та описом */
.info-item {
flex: 1 1 300px;
display: flex;
align-items: center;
gap: 15px;
}
/* Іконки збільшені для кращої видимості */
.info-icon {
font-size: 32px;
color: #3CB441;
}
/* Опис з чітким текстом */
.info-text {
font-size: 16px;
color: #333;
line-height: 1.4;
}
/* Адаптивність для екранів менше 700px */
@media (max-width: 700px) {
.info-block {
flex-direction: column;
gap: 10px;
padding: 10px;
}
.info-item {
flex: 1 1 100%;
gap: 10px;
}
}
/* Стилі для stats-row та дочірніх елементів */
.stats-row {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 20px;
}
.stats-column {
flex: 1;
text-align: center;
}
.stats-number {
margin: 0;
font-size: 26px;
font-weight: bold;
color: #333;
}
.stats-label {
font-size: 16px;
color: #555;
}
/* Адаптивність для екранів менше 700px для статистики */
@media (max-width: 700px) {
.stats-row {
flex-direction: column;
gap: 10px;
}
.stats-column {
width: 100%;
padding: 5px 0;
}
.stats-number {
font-size: 20px;
}
.stats-label {
font-size: 14px;
}
}




.my-metal-chart-and-table .card h1 {
color: #333;
border-bottom: 2px solid #ddd;
padding-bottom: 8px;
margin-bottom: 16px;
text-align: center;
}































/* Загальні стилі */
.map-wrapper {
position: relative;
max-width: 1400px;
margin: 0 auto;
}
#company-map {
width: 100%;
height: 600px;
position: relative;
}
#map-side-panel {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
width: 350px;
z-index: 900;
}
.card_mini_grid-container {
width: 100%;
height: 100%;
max-height: 100%;
background-color: #e9ecef;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
#map-side-panel.collapsed {
pointer-events: none;
height: auto;
}
#map-side-panel.collapsed .card_mini_grid-container {
pointer-events: auto;
height: auto;
max-height: none;
}
#map-side-panel.collapsed .card_mini_grid-list,
#map-side-panel.collapsed .card_mini_grid-footer {
display: none;
}
.card_mini_grid-header {
background-color: #3b4d61;
color: white;
padding: 8px 12px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
.card_mini_grid-header button {
background-color: #28a745;
border: none;
color: white;
cursor: pointer;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
}
.card_mini_grid-header button::before {
content: attr(data-icon);
font-size: 22px;
line-height: 1;
color: white;
}
.card_mini_grid-list {
overflow-y: auto;
flex-grow: 1;
padding: 10px;
display: block;
}
.card_mini_grid {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
margin-bottom: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
cursor: pointer;
}
.card_mini_grid:hover {
background-color: #f0f8ff;
}
.card_mini_grid h3 {
margin: 0;
font-size: 18px;
color: #333;
}
.card_mini_grid p {
margin: 8px 0 12px;
font-size: 14px;
color: #555;
}
.mini_btn {
display: inline-block;
padding: 8px 12px;
font-size: 14px;
color: #fff !important;
background-color: #3b4d61;
border: none;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
text-align: center;
width: 100%;
}
.mini_btn:hover {
background-color: #28a745;
color: #fff;
}
.card_mini_grid-footer {
padding: 10px;
text-align: center;
background-color: #f4f4f4;
border-top: 1px solid #ddd;
display: block;
}
.card_mini_grid-footer button {
padding: 10px 16px;
font-size: 14px;
color: #fff;
background-color: #3b4d61;
border: none;
border-radius: 4px;
cursor: pointer;
}
.card_mini_grid-footer button:hover {
background-color: #28a745;
}
.card_mini_grid-footer .info {
margin-top: 5px;
font-size: 14px;
color: #555;
}
@media (max-width: 768px) {
#map-side-panel {
position: static;
width: 100%;
height: auto;
margin-top: 10px;
}
#company-map {
height: 400px;
}
}
.company_cards-wrapper {
padding: 15px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(128,128,128,0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.loading-content {
text-align: center;
color: #fff;
}
.spinner {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
margin: 0 auto 10px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.company_cards-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: flex-start;
width: calc(100% + 16px);
margin-right: -16px;
position: relative;
}
.company_card {
flex: 1 1 calc(25% - 16px);
max-width: calc(25% - 16px);
display: flex;
flex-direction: column;
border: 1px solid #d3dce6;
border-radius: 4px;
background-color: #fff;
padding: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
font-size: 14px;
color: #333;
}
@media (max-width: 1000px) {
.company_card {
flex: 1 1 calc(33.333% - 16px);
max-width: calc(33.333% - 16px);
}
}
@media (max-width: 750px) {
.company_card {
flex: 1 1 calc(50% - 16px);
max-width: calc(50% - 16px);
}
}
@media (max-width: 480px) {
.company_card {
flex: 1 1 100%;
max-width: 100%;
}
}
/* Стилі для вмісту картки */
.company_card-body {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.company_card-details {
flex: 2;
}
.company_card-name {
font-size: 20px;
font-weight: 500;
margin-bottom: 8px;
color: #000;
word-break: break-word;
}
.company_card-address {
font-size: 16px;
color: #6c757d;
line-height: 1.5;
}
.company_card-contact-info {
flex: 1;
text-align: center;
}
.company_card-icon img {
width: 60px;
height: 60px;
border-radius: 8px;
background-color: #fff;
border: 1px solid #d3dce6;
object-fit: cover;
}
.company_card-phone {
font-size: 14px;
color: #555;
margin-top: 8px;
display: flex;
flex-direction: column;
align-items: center;
}
.company_card-actions {
display: flex;
gap: 8px;
width: 100%;
}
.company_card-btn {
flex: 1;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
text-align: center;
border: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.company_card-btn-outline {
border: 1px solid #6c757d;
background-color: #fff;
color: #6c757d;
}
.company_card-btn-outline:hover {
background-color: #28a745;
color: #fff;
}
.company_card-btn-primary {
background-color: #28a745;
color: #fff;
border: none;
}
.company_card-btn-primary:hover {
background-color: #34c759;
}
.show-more-container {
width: 100%;
text-align: center;
}
.show-more-container button {
max-width: 200px;
}
/* Стилі для Header і пошукової області */
.header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.header-row h1 {
margin: 0;
color: #333;
word-break: break-word;
}
.company-count {
background-color: #4caf50;
color: #fff;
padding: 4px 10px;
border-radius: 2px;
font-size: 18px;
font-weight: bold;
white-space: nowrap;
}
#company-cards-header {
position: relative;
margin-bottom: 25px;
}
#company-cards-search-container {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
min-width: 0;
}
.left-panel {
display: flex;
gap: 10px;
align-items: center;
width: 100%;
min-width: 0;
}
/* Встановлюємо position: relative для search-wrapper, щоб меню підказок завжди відносилось до форми пошуку */
.search-wrapper {
display: flex;
align-items: center;
text-align: left;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: border-color 0.3s, box-shadow 0.3s;
min-width: 0;
position: relative;
}
.search-input-wrapper {
position: relative;
flex: 1;
}
.search-input-wrapper input {
width: 100%;
padding: 10px;
padding-right: 55px;
border: none;
outline: none;
font-size: 14px;
box-sizing: border-box;
}
.search-input-wrapper button#clear-company-search {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-54%);
font-size: 35px;
color: #B0B0B0;
background: none;
border: none;
cursor: pointer;
max-width: 45px;
border-radius: 50%;
}
.search-input-wrapper button#clear-company-search:hover {
color: #000;
}
.search-wrapper:focus-within {
border-color: #4caf50;
box-shadow: 0 0 5px rgba(76,175,80,0.5);
}
.search-wrapper .search-icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
color: #3CB441;
font-size: 16px;
background: #fff;
transition: background 0.3s;
}
/* Меню підказок */
.autocomplete-suggestions {
position: absolute;
top: 100%;
left: 0;
width: 100%;
border: 1px solid #ccc;
background: #fff;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-radius: 4px;
margin-top: 2px;
box-sizing: border-box;
display: none;
transition: all 0.3s ease;
font-size: 12px;
}
/* На мобільних: меню може бути на всю ширину екрану, але розташоване під формою пошуку */
@media (max-width: 480px) {
.autocomplete-suggestions {
 width: 100vw;
 left: 50%;
 transform: translateX(-50%);
}
}
.autocomplete-suggestions.show {
display: block;
}
.autocomplete-suggestion {
padding: 8px 10px;
cursor: pointer;
color: #333;
transition: background-color 0.2s;
display: flex;
align-items: center;
font-size: 12px;
}
.autocomplete-suggestion i {
margin-right: 8px;
color: #3CB441;
}
.autocomplete-suggestion:hover {
background: #f0f0f0;
}
#filter-container {
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.dropdown.filter-dropdown {
position: relative;
width: 200px;
min-width: 0;
}
.dropdown.filter-dropdown .dropdown-toggle {
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-size: 14px;
cursor: pointer;
width: 100%;
text-align: left;
color: #333;
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
position: relative;
transition: border-color 0.3s, box-shadow 0.3s;
}
.dropdown.filter-dropdown:focus-within .dropdown-toggle,
.dropdown.filter-dropdown .dropdown-toggle:hover {
border-color: #4caf50;
box-shadow: 0 0 5px rgba(76,175,80,0.5);
}
.dropdown.filter-dropdown .dropdown-toggle .filter-selection {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown.filter-dropdown .dropdown-toggle i.fa-caret-down {
margin-left: auto;
}
.dropdown.filter-dropdown .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
z-index: 1000;
width: 100%;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
overflow: auto;
max-height: 250px;
}
.dropdown.filter-dropdown .dropdown-menu label {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 5px;
font-size: 14px;
cursor: pointer;
}
.dropdown.filter-dropdown .dropdown-menu a.clear-filters-btn {
display: block;
margin-top: 10px;
font-size: 13px;
background-color: #28A745;
color: #fff;
text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
text-align: center;
}
.dropdown.filter-dropdown .dropdown-menu a.clear-filters-btn:hover {
background-color: #005a8c;
}
.switcher {
text-align: right;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
padding: 0;
position: relative;
margin-left: 10px;
}
.switcher::before {
content: '';
position: absolute;
top: 25%;
bottom: 25%;
left: 50%;
width: 0.5px;
background-color: #ccc;
transform: translateX(-50%);
}
.switcher button {
width: 50px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
cursor: pointer;
border: none;
transition: background-color 0.3s, color 0.3s;
}
.switcher button i {
font-size: 20px;
color: #ccc;
transition: color 0.3s;
}
.switcher button.active i {
color: #4caf50;
}
@media (min-width: 831px) {
.left-panel {
gap: 10px;
}
.search-wrapper {
flex: 0 0 50%;
}
#filter-container {
flex: 0 0 50%;
display: flex;
gap: 10px;
}
.dropdown.filter-dropdown {
flex: 1;
width: auto;
}
#company-cards-search-container {
gap: 10px;
}
}
@media (max-width: 830px) {
#company-cards-search-container {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 10px;
}
.left-panel {
display: contents;
}
.search-wrapper {
grid-column: 1 / 2;
grid-row: 1;
width: 100%;
}
.switcher {
grid-column: 2 / 3;
grid-row: 1;
margin-left: 0;
}
#filter-container {
grid-column: 1 / 3;
grid-row: 2;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
width: 100%;
}
.dropdown.filter-dropdown {
width: 100%;
}
}
@media (max-width: 400px) {
#filter-container {
display: block;
}
.dropdown.filter-dropdown {
width: 100%;
margin-bottom: 10px;
}
}
@media (max-width: 370px) {
#company-cards-search-container {
grid-template-columns: 1fr;
}
.switcher {
width: 100%;
justify-self: end;
margin-left: 0;
}
.dropdown.filter-dropdown {
width: 100% !important;
}
}
@media (max-width: 600px) {
.header-row {
flex-direction: column;
align-items: flex-start;
}
.company-count {
font-size: 16px;
padding: 2px 8px;
margin-top: 5px;
}
}












/* General adaptive block */
.header_kart_company-wrapper {
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}
.header_kart_company-container {
background-color: #fff;
width: 100%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 3px;
}
/* Information panel */
.header_kart_company-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.header_kart_company-info .info-item {
display: flex;
align-items: center;
gap: 10px;
background-color: #f3f4f6;
padding: 10px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.header_kart_company-info .info-item i {
font-size: 1.25rem;
color: #1f2937;
}
.header_kart_company-info .info-item p {
margin: 0;
font-weight: 500;
color: #111827;
font-size: 0.9rem;
}
/* Buttons */
.header_kart_company-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.header_kart_company-links a {
flex: 1 1 calc(33.33% - 10px);
text-align: center;
padding: 10px;
border-radius: 3px;
color: #fff;
text-decoration: none;
transition: background-color .2s;
font-size: 0.9rem;
}
.header_kart_company-links a:nth-child(1) {
background-color: #6c8ebf;
}
.header_kart_company-links a:nth-child(1):hover {
background-color: #597aa6;
color:white;
}
.header_kart_company-links a:nth-child(2) {
background-color: #7fbf9e;
}
.header_kart_company-links a:nth-child(2):hover {
background-color: #6ea88a;
color:white;
}
.header_kart_company-links a:nth-child(3) {
background-color: #f5b273;
}
.header_kart_company-links a:nth-child(3):hover {
background-color: #e0a065;
color:white;
}
.header_kart_company-links h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
/* Responsiveness */
@media (max-width: 768px) {
.header_kart_company-info {
grid-template-columns: 1fr;
}
.header_kart_company-links a {
flex: 1 1 100%;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.header_kart_company-info {
grid-template-columns: repeat(2, 1fr);
}
}

















/* General Styles */
.my-metal-table {
width: 100%;
box-sizing: border-box;
}

/* Styles for cust-prices-header */
.cust-prices-header {
width: 100%;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 16px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.cust-prices-header .header-left {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 250px;
}
.cust-prices-header #prices-search-container-price_css {
display: flex;
gap: 10px;
flex: 1 1 auto;
justify-content: flex-end;
min-width: 200px;
}
.price_met_update-prices-btn,
.pricecss-acceptance-points-btn {
color: rgb(255, 255, 255);
font-size: 14px;
cursor: pointer;
background: rgb(40, 167, 69);
border-width: initial;
border-style: none;
white-space: nowrap;
border-color: initial;
border-image: initial;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s;
text-decoration: none;
}
.price_met_update-prices-btn:hover,
.pricecss-acceptance-points-btn:hover {
background: #218838;
color: #fff;
}

@media (max-width: 789px) {
.cust-prices-header {
flex-direction: column;
align-items: flex-start;
}
.cust-prices-header .header-left {
width: 100%;
}
.cust-prices-header #prices-search-container-price_css {
width: 100%;
margin-top: 10px;
justify-content: flex-start;
flex: none;
}
}
 @media (max-width: 450px) {
.cust-prices-header #prices-search-container-price_css {
flex-direction: column;
}
.cust-prices-header #prices-search-container-price_css button {
width: 100%;
margin-bottom: 10px;
}
}
 
.info_met-container {
display: flex;
flex-wrap: wrap;
max-width: 1400px;
width: 100%;
margin: auto;
gap: 20px;
align-items: flex-start;
box-sizing: border-box;
}
.info_met-main-content {
display: flex;
flex-wrap: wrap;
flex: 3;
gap: 20px;
box-sizing: border-box;
}
.info_met-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 16px;
flex: 1;
min-width: 350px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
@media (min-width:1180px){
.info_met-card { min-width:400px; }
}
.info_met-card-title {
font-size: 1.2rem;
color: #333;
border-bottom: 2px solid #ddd;
padding-bottom: 8px;
margin-bottom: 16px;
}
.info_met-contact-info,
.info_met-map-card {
min-width: 300px;
box-sizing: border-box;
}
.info_met-map {
width: 100%;
height: 200px;
border: none;
}
.info_met-sidebar-container {
flex: 0 0 400px;
box-sizing: border-box;
}
.info_met-sidebar {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 16px;
box-sizing: border-box;
}
.info_met-contact-item {
display: flex;
align-items: center;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #fafafa;
margin-bottom: 10px;
box-sizing: border-box;
}
.info_met-contact-item:last-child {
margin-bottom: 0;
}
.info_met-contact-icon {
font-size: 1.2rem;
color: #333;
margin-right: 10px;
}
.info_met-contact-social {
display: flex;
gap: 10px;
margin-top: 10px;
}
.info_met-contact-social a {
color: #333;
font-size: 1.5rem;
transition: color 0.3s;
}
.info_met-contact-social a:hover {
color: #28A745;
}

.info_met-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
box-sizing: border-box;
}
.info_met-item {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, border-color 0.3s ease;
box-sizing: border-box;
}
.info_met-item:hover {
background-color: #e9f5ff;
border-color: #28A745;
}
.info_met-item i {
font-size: 2.5rem;
color: #28A745;
margin-bottom: 10px;
}
.info_met-item span {
font-size: 1rem;
color: #333;
font-weight: bold;
}
.card_comp_related {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
gap: 20px;
box-sizing: border-box;
}
.card_comp_related-card {
background: #f8f9fa;
border: 1px solid #ced4da;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 16px;
display: flex;
align-items: center;
text-align: left;
transition: background-color 0.3s;
height: 100%;
box-sizing: border-box;
}
.card_comp_related-icon {
font-size: 3rem;
color: #28A745;
margin-right: 12px;
flex-shrink: 0;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.card_comp_related-info {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.card_comp_related h4 {
font-size: 1.1rem;
color: #212529;
margin: 0 0 8px 0;
font-weight: bold;
}
.card_comp_related p {
font-size: 0.95rem;
color: #495057;
margin: 4px 0;
}
.card_comp_related .card_comp_related-distance {
font-size: 0.85rem;
font-weight: bold;
color: #28a745;
margin: 4px 0 0 0;
}
.card_comp_related-link {
text-decoration: none;
color: inherit;
display: block;
transition: background-color 0.3s;
}
.card_comp_related-link:hover .card_comp_related-card {
background-color: #e9f5ff;
}

/* Styles for popular companies */
.home_met_mak-block {
padding: 20px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.home_met_mak-block h2 {
font-size: 1.5rem;
margin-bottom: 15px;
}

.home_met_mak-grid-3 .company-card {
flex: 1 1 calc(33.33% - 20px);
text-decoration: none;
color: inherit;
border: 1px solid #ddd;
padding: 15px;
border-radius: 4px;
transition: box-shadow 0.3s;
}
.home_met_mak-grid-3 .company-card:hover {
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.company-icon {
font-size: 2rem;
margin-bottom: 10px;
color: #3CB441;
}
.company-info .company-name {
font-weight: bold;
margin: 0 0 5px 0;
}
.company-info .company-address {
font-size: 0.9rem;
margin: 0 0 5px 0;
}
.company-distance {
font-size: 0.8rem;
color: #777;
}
@media (max-width:989px){
.info_met-container {
flex-direction: column;
}
.info_met-sidebar-container {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
}
}

/* Styles for the "View All Prices" button */
.info_met-view-all-button {
display: block;
margin: 20px auto 0;
padding: 10px 20px;
background-color: #28A745;
color: #ffffff;
text-align: center;
text-decoration: none;
border-radius: 4px;
font-size: 1rem;
font-weight: bold;
transition: background-color 0.3s;
white-space: nowrap;
}
.info_met-view-all-button:hover {
background-color: #005177;
}






















.price_list_sitebar-category {
font-size: 13px;
font-weight: bold;
text-align: left;
padding: 6px 0;
border-bottom: 2px solid #ddd;
color: #444;
margin-top: 10px;
}
.price_list_sitebar-grid {
display: grid;
grid-template-columns: 1fr;
gap: 5px;
align-items: center;
padding: 5px 0;
}
.price_list_sitebar-card {
display: flex;
justify-content: space-between;
background: #e9ecef;
padding: 10px;
border-radius: 5px;
color: #333;
border: 1px solid #ddd;
}
.price_group_wrapper {
margin-bottom: 15px;
}
@media (max-width: 1100px) {
.price_list_sitebar-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.price_list_sitebar-grid {
grid-template-columns: 1fr;
}
}
.info_met-view-all-button {
display: block;
margin: 20px auto 0;
padding: 10px 20px;
background-color: #28A745;
color: #ffffff;
text-align: center;
text-decoration: none;
border-radius: 4px;
font-size: 1rem;
font-weight: bold;
transition: background-color 0.3s;
white-space: nowrap;
}







 



































/* General container styles */
.metal-tabs-wrapper {
max-width: 1400px;
margin: 40px auto 20px auto;
padding: 16px;
font-family: sans-serif;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
box-sizing: border-box;
}
.metal-header h1 {
font-size: 2em;
margin-bottom: 20px;
text-align: center;
}
.metal-description {
margin-bottom: 20px;
color: #555;
}
/* Styles for highlighted key text */
.key-highlight {
background-color: #fffae6;
padding: 2px 4px;
border-radius: 3px;
border: 1px solid #ccc;
white-space: nowrap;
}
.tabs-header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
margin-bottom: 15px;
}
.tabs-search {
position: relative;
}
.tabs-search input {
padding: 6px 10px;
padding-left: 30px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
}
.tabs-search .search-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}
.tabs-search .clear-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
}
.metal-tabs-headers {
display: flex;
flex: 1;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
list-style: none;
margin: 0;
padding: 0;
}
.metal-tab-header {
flex: 0 0 auto;
padding: 10px 20px;
cursor: pointer;
border-bottom: 3px solid transparent;
display: flex;
align-items: center;
white-space: nowrap;
outline: none;
}
.metal-tab-header.active {
border-bottom-color: #0073aa;
font-weight: bold;
}
.metal-tab-header .tab-count {
background: #eee;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.9em;
margin-left: 10px;
}
.global-search-results {
display: none;
padding: 15px 0;
}
.tabs-content-wrapper {
margin-top: 15px;
}
.metal-tab-content {
display: none;
padding-top: 15px;
}
.metal-tab-content.active {
display: block;
}
.metal-cards {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.metal-card {
background: #F5F5F5;
border: 1px solid #ddd;
padding: 20px;
text-align: center;
cursor: default;
border-radius: 4px;
transition: none;
}
.metal-card:hover {
transform: none;
}
.metal-img-wrapper {
position: relative;
cursor: pointer;
}
.metal-img {
width: 100%;
height: auto;
display: block;
margin: 0;
border-radius: 4px;
transition: opacity 0.5s ease;
}
.magnify-icon {
position: absolute;
bottom: 5px;
right: 5px;
font-size: 1.2rem;
color: #fff;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
padding: 8px;
}
.image-count {
position: absolute;
bottom: 5px;
left: 5px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 2px 6px;
font-size: 0.8em;
border-radius: 3px;
}
.metal-name {
margin: 10px 0 5px;
font-size: 1.2em;
font-weight: 600;
color: #333;
}
.metal-name a {
color: inherit;
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: border-bottom 0.3s ease;
}
.metal-name a:hover {
border-bottom: 1px dashed currentColor;
}
.metal-name a:after {
content: "\f105";
font-family: FontAwesome;
margin-left: 5px;
}
.metal-price {
background: #fffae6;
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
color: #d35400;
display: inline-block;
margin-top: 5px;
}
.metal-price:before {
content: none;
}
.price-currency,
.price-value,
.price-unit {
vertical-align: middle;
}
.price-separator {
display: inline-block;
height: 1em;
border-left: 1px solid #d35400;
margin: 0 5px;
vertical-align: middle;
}
.metal-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
z-index: 1000;
}
.metal-modal.open {
display: flex;
}
.metal-modal-img {
max-width: 90%;
max-height: 90%;
border-radius: 4px;
transition: opacity 0.5s ease;
}
.metal-modal-close {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
border: none;
color: #fff;
font-size: 2rem;
cursor: pointer;
z-index: 1100;
}
.modal-prev, .modal-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
font-size: 2rem;
padding: 10px;
cursor: pointer;
z-index: 1100;
}
.modal-prev {
left: 10px;
}
.modal-next {
right: 10px;
}
.modal-info {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 4px 8px;
border-radius: 3px;
font-size: 0.9em;
}
@media (max-width: 768px) {
.tabs-header-wrapper {
flex-direction: column;
align-items: stretch;
}
.tabs-search {
margin-bottom: 10px;
width: 100%;
}
.tabs-search input {
width: 100%;
box-sizing: border-box;
}
}


























.custom_ajax_tabs_row-wrapper {
max-width: 1400px;
margin: 40px auto;
padding: 16px;
font-family: sans-serif;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-sizing: border-box;
}
.custom_ajax_tabs_row-header h1 {
font-size: 2em;
margin-bottom: 20px;
text-align: center;
}
.custom_ajax_tabs_row-description {
margin-bottom: 20px;
color: #555;
}
.custom_ajax_tabs_row-badges {
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.custom_ajax_tabs_row-badge {
background: #EEEEEE;
color: #555;
padding: 6px 12px;
border-radius: 12px;
text-decoration: none;
font-size: 0.9em;
}
/* Block for search form and tabs */
.custom_ajax_tabs_row-tabs-header {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 2px solid #ddd;
}
.custom_ajax_tabs_row-search {
position: relative;
flex: 0 0 220px;
}
.custom_ajax_tabs_row-search input[type="text"] {
width: 100%;
padding: 8px 35px 8px 30px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
height: 40px;
box-sizing: border-box;
}
.custom_ajax_tabs_row-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
pointer-events: none;
}
.custom_ajax_tabs_row-clear-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #aaa;
cursor: pointer;
}
.custom_ajax_tabs_row-tabs-nav {
flex: 1;
display: flex;
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
white-space: nowrap;
}
.custom_ajax_tabs_row-tab-nav-item {
flex: 0 0 auto;
padding: 10px 20px;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: background 0.3s, color 0.3s;
white-space: nowrap;
margin-right: 2px;
}
.custom_ajax_tabs_row-tab-nav-item.active {
border-bottom: 3px solid #0073aa;
font-weight: bold;
}
.custom_ajax_tabs_row-tab-name,
.custom_ajax_tabs_row-tab-count {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
.custom_ajax_tabs_row-tab-nav-item .custom_ajax_tabs_row-tab-count {
background: #EEEEEE;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.9em;
margin-left: 10px;
}
.custom_ajax_tabs_row-search-results {
padding: 15px 0;
}
.custom_ajax_tabs_row-tabs-content {
border: 1px solid #ddd;
padding: 20px;
background: #fff;
border-radius: 0 4px 4px 4px;
}
.custom_ajax_tabs_row-tab {
display: none;
}
.custom_ajax_tabs_row-tab.active {
display: block;
}
.custom_ajax_tabs_row-tab-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px dashed #ccc;
padding-bottom: 5px;
margin-bottom: 15px;
}
.custom_ajax_tabs_row-tab-title {
font-size: 1.5em;
white-space: nowrap;
}
.custom_ajax_tabs_row-tab-count {
background: #EEEEEE;
padding: 2px 8px;
border-radius: 12px;
font-size: 1em;
color: #555;
font-weight: bold;
white-space: nowrap;
}
.custom_ajax_tabs_row-cities-grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.custom_ajax_tabs_row-city-card {
background: #f5f5f5;
border: 1px solid #eee;
padding: 10px;
text-align: center;
border-radius: 4px;
transition: box-shadow 0.3s ease;
text-decoration: none;
color: inherit;
display: block;
}
.custom_ajax_tabs_row-city-card:hover {
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.custom_ajax_tabs_row-city-name {
font-size: 1em;
font-weight: 600;
display: block;
}
.custom_ajax_tabs_row-company-count {
display: block;
margin-top: 5px;
font-size: 0.9em;
color: #555;
}
/* Media Queries for tablets and mobile */
@media (max-width: 768px) {
.custom_ajax_tabs_row-tabs-header {
flex-direction: column;
align-items: stretch;
}
.custom_ajax_tabs_row-search {
flex: none;
width: 100%;
margin-bottom: 10px;
}
.custom_ajax_tabs_row-search input[type="text"] {
height: auto;
padding: 8px 35px 8px 30px;
}
.custom_ajax_tabs_row-tabs-nav {
width: 100%;
overflow-x: auto;
}
}




























/* Form styles */
.ad-company-forma-container {
width: 100%;
padding: 0;
box-sizing: border-box;
}
.ad-company-forma {
width: 100%;
background: #fff;
box-sizing: border-box;
font-family: sans-serif;
}
.ad-company-forma-row {
margin-bottom: 15px;
}
.ad-company-forma-row label {
display: block;
font-weight: 600;
margin-bottom: 5px;
}
.ad-company-forma input[type="text"],
.ad-company-forma input[type="url"],
.ad-company-forma input[type="email"],
.ad-company-forma input[type="time"],
.ad-company-forma select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
transition: border-color 0.3s;
}
.ad-company-forma input.error,
.ad-company-forma select.error {
border-color: red;
}
.ad-company-forma input[type="checkbox"] {
display: none;
}
.ad-company-forma h3 {
margin-top: 25px;
margin-bottom: 8px;
font-size: 1.1rem;
color: #333;
font-weight: 700;
}
.description-text {
margin: 0 0 10px 0;
font-size: 0.95rem;
color: #666;
}
.working-hours-table {
width: 100%;
border-collapse: collapse;
margin-top: 5px;
}
.working-hours-table th,
.working-hours-table td {
border: 1px solid #ddd;
padding: 8px;
vertical-align: middle;
text-align: center;
}
.working-hours-table th {
background-color: #f9f9f9;
font-weight: 600;
}
@media (max-width: 600px) {
.working-hours-table, 
.working-hours-table thead, 
.working-hours-table tbody, 
.working-hours-table th, 
.working-hours-table td, 
.working-hours-table tr {
display: block;
}
.working-hours-table tr {
margin-bottom: 15px;
}
.working-hours-table td {
text-align: right;
padding-left: 50%;
position: relative;
}
.working-hours-table td::before {
position: absolute;
left: 10px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: 600;
}
.working-hours-table td:nth-of-type(1)::before { content: "Day:"; }
.working-hours-table td:nth-of-type(2)::before { content: "From:"; }
.working-hours-table td:nth-of-type(3)::before { content: "To:"; }
.working-hours-table th {
display: none;
}
}
.ad-company-forma-flex {
display: flex;
align-items: flex-end;
gap: 15px;
}
.ad-company-forma-wrapper {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.ad-company-add-btn {
background: #28A745;
border: none;
color: #fff;
padding: 0 15px;
height: 40px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
}
.ad-company-add-btn:hover {
background: #218838;
}
.ad-company-submit-btn {
background: #28A745;
color: #fff;
border: none;
border-radius: 4px;
padding: 12px 25px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
width: 100%;
margin-top: 10px;
}
.ad-company-submit-btn:hover {
background: #218838;
}
.ad-company-forma-success-msg {
margin: 10px 0;
padding: 10px;
border-left: 4px solid #00a94f;
background: #f0fff5;
color: #007c2e;
}
.ad-company-forma-error-msg {
margin: 10px 0;
padding: 10px;
border-left: 4px solid #d9534f;
background: #f9e2e2;
color: #d9534f;
}
.button-group {
/*display: flex;*/
flex-wrap: wrap;
gap: 10px;
}
.button-group label {
display: inline-block;
padding: 10px 15px;
border: 2px solid #28A745;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s, color 0.3s;
user-select: none;
}
.button-group label.selected {
background: #28A745;
color: #fff;
}
.button-group label.selected::before {
content: "✓ ";
font-weight: bold;
}
















.gallery-slider {
width: 100%;
margin: 20px auto;
text-align: center;
position: relative;
}
.gallery-main-container {
position: relative;
width: 70%;
margin: 0 auto;
}
.gallery-main {
width: 100%;
position: relative;
}
.gallery-main img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.6);
border: none;
color: #fff;
font-size: 1.5em;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
outline: none;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s, transform 0.3s;
z-index: 2;
}
.gallery-nav:hover,
.gallery-nav:focus {
background: rgba(0, 0, 0, 0.8);
transform: translateY(-50%) scale(1.1);
}
.gallery-nav.prev {
left: -60px;
}
.gallery-nav.next {
right: -60px;
}
.gallery-thumbnails {
margin-top: 10px;
text-align: center;
}
.gallery-thumbnails img {
max-width: 80px;
margin: 0 5px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.3s, transform 0.3s;
border-radius: 4px;
}
.gallery-thumbnails img.active,
.gallery-thumbnails img:hover {
opacity: 1;
transform: scale(1.05);
}

.button-group {
/*display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;*/
}
.button-group a {
display: inline-block;
padding: 10px 20px;
border: 1px solid #3CB441;
background: #3CB441;
border-radius: 4px;
text-decoration: none;
color: #fff;
transition: background 0.3s, color 0.3s;
width: auto;
}
.button-group a:hover {
background: #2a9e2a;
}
.mobile-only {
display: inline-block;
}
@media (min-width: 1100px) {
.mobile-only {
display: none !important;
}
}
 














/* Блок з білим фоном та зовнішніми відступами */
.scrap-block {
background: #fff;
border: 1px solid #eaeaea;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
box-sizing: border-box;
}

/* Іконка полум’я */
.scrap-icon {
color: #28a745;
margin-right: 5px;
}

/* Загальний грід */
.scrap-grid {
display: grid;
gap: 15px;
}

/* Три колонки для .scrap-grid-3 */
.scrap-grid.scrap-grid-3 {
grid-template-columns: repeat(3, 1fr);
}

/* При ширині менше 992px — 2 колонки */
@media (max-width: 992px) {
.scrap-grid.scrap-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}

/* При ширині менше 576px — 1 колонка */
@media (max-width: 576px) {
.scrap-grid.scrap-grid-3 {
grid-template-columns: 1fr;
}
}

/* Карточка компанії */
#scrap-popular .scrap-company-card {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 4px;
padding: 10px;
text-decoration: none;
color: #333;
transition: box-shadow .3s;
}
#scrap-popular .scrap-company-card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Іконка біля назви компанії */
#scrap-popular .scrap-company-icon {
margin-right: 10px;
font-size: 1.5em;
color: #28a745;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
}

/* Інформація всередині карточки */
#scrap-popular .scrap-company-info {
flex: 1;
}
#scrap-popular .scrap-company-name {
margin: 0;
font-weight: bold;
font-size: 1rem;
}
#scrap-popular .scrap-company-address {
margin: 0;
font-size: 0.9rem;
color: #666;
}













@media (min-width: 1100px) {
.mobile-only { display: none; }
}














.scrapsite-breadcrumbs {
background: #fff;
padding: 10px 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 15px auto -20px;
font-size: 16px;
max-width: 1370px;
}
.scrapsite-breadcrumbs ol {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.scrapsite-breadcrumbs li {
display: flex;
align-items: center;
}
.scrapsite-breadcrumbs li + li:before {
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin: 0 8px;
color: #666;
}
.scrapsite-breadcrumb-link {
color: #007a33;
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.scrapsite-breadcrumb-link:hover {
text-decoration: underline;
}
@media(max-width: 480px) {
.scrapsite-breadcrumbs {
padding: 8px 12px;
font-size: 14px;
}
.scrapsite-breadcrumbs li + li:before {
margin: 0 4px;
}
}


.banner_grid_price_company{
  background:#fff;
  padding:20px;
  margin:20px auto 0 auto; /* відступ зверху 20px, центрування */
  max-width:1370px; /* обмеження ширини */
  border:1px solid #dee2e6;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.price-container_grid_price_company{
  flex-grow:1;
  overflow-x:auto;
  white-space:nowrap;
  margin-right:20px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.price-container_grid_price_company::-webkit-scrollbar{display:none}
.price-grid_grid_price_company{display:inline-flex;gap:40px;align-items:flex-end}
.price-card_grid_price_company{text-align:center;min-width:160px}
.label_grid_price_company{font-size:.95em;color:#212529;margin-bottom:3px}
.price_grid_price_company{font-size:1.8em;font-weight:600;color:#198754}
.unit_grid_price_company{font-size:.9em;color:#212529}
.price-card_grid_price_company.up  .price_grid_price_company::after{content:' ▲';color:#198754;font-size:.8em}
.price-card_grid_price_company.down .price_grid_price_company::after{content:' ▼';color:#dc3545;font-size:.8em}
.company_grid_price_company{font-size:.85em;color:#6c757d;margin-top:4px;line-height:1.2}
.date_grid_price_company{font-size:.75em;color:#adb5bd}
.cta-button_grid_price_company{
  background:#198754;color:#fff;padding:6px 12px;font-weight:600;
  border:none;border-radius:3px;text-decoration:none;flex-shrink:0;
  transition:background .3s ease;
}
.cta-button_grid_price_company:hover{background:#146c43}

/* мобільна адаптація */
@media(max-width:768px){
  .banner_grid_price_company{flex-direction:column;align-items:stretch}
  .price-container_grid_price_company{margin:0 0 15px 0}
  .price-grid_grid_price_company{gap:24px}
  .cta-button_grid_price_company{width:100%;text-align:center}
  .price_grid_price_company{font-size:1.4em}
  .label_grid_price_company{font-size:.85em}
  .price-card_grid_price_company.up .price_grid_price_company::after,
  .price-card_grid_price_company.down .price_grid_price_company::after{font-size:.7em}
}