/*
Theme Name: BG Lib Theme
Theme URI: https://bglib.id/ 
Author: Rendy Setiotomo
Author URI: https://bglib.id/
Description: Theme for BG Lib
Version: 1.0
License: Commercial
License URI: http://bglib.id/
Tags: green, white
Text Domain: bglib
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus { outline: 0; }
body { background: #fff; line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
del { color: #333; }
ins { background: #fff9c0; text-decoration: none; }
hr { background-color: #ccc; border: 0; height: 1px; margin: 24px; margin-bottom: 1.714285714rem; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
small { font-size: smaller; }
img { border: 0; -ms-interpolation-mode: bicubic; }
.position-relative { position: relative; }


/* GENERAL */
body {
	font-family: "Roboto", Arial, sans-serif;
	font-size: 14px;
	color: #363636;
	background: #ffffff;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; color: #000; }
sup { font-size: 60%; }
strong { font-weight: bold; }
em { font-style: italic; }
.clear { clear: both; }
small { font-size: 12px; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
img { border: 0; -ms-interpolation-mode: bicubic; }
.floatright { float: right; }
.floatleft { float: left; }
.floatnone { float: none; }
.none { display: none; }

/* Header */
header .mainmenu { 
    max-width: 980px !important; 
}

/* GENERAL WP */
.wrapper { position: relative; width: 100%; margin: 0 auto; }
.wrap { position: relative; width: 1200px; margin: 0 auto; }
.wrap-content { position: relative; display: block; }
.wrap-content .wrap { position: relative; padding: 10px 0px 15px; }
.wrapper-grey { background: #fff; }

.thecontent h1 { font-family: "Roboto", Arial, sans-serif; font-size: 34px; line-height: 38px; font-weight: bold; color:#CB5C33; margin-bottom: 20px;  }
.thecontent h2 { font-family: "Roboto", Arial, sans-serif; font-size: 28px; line-height: 32px; font-weight: bold; color:#CB5C33; margin-bottom: 15px; }
.thecontent h3 { font-family: "Roboto", Arial, sans-serif; font-size: 20px; line-height: 24px; margin-bottom: 15px; color:#CB5C33; font-weight: bold; }
.thecontent h4 { font-family: "Roboto", Arial, sans-serif; font-size: 18px; line-height: 22px; margin-bottom: 15px; color:#CB5C33; }
.thecontent h5 { font-family: "Roboto", Arial, sans-serif; font-size: 16px; line-height: 20px; color:#333333; margin-bottom: 15px; }
.thecontent h6 { font-family: "Roboto", Arial, sans-serif; font-size: 14px; line-height: 18px; color:#333333; margin-bottom: 15px; }
.thecontent p { font-family: "Roboto", Arial, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 15px; color:#333333; }
.thecontent a { font-family: "Roboto", Arial, sans-serif; color: #109bc5; font-size: 18px; line-height: 22px; cursor: pointer; font-style: normal; font-weight: normal; }
.thecontent a:hover { color: #88bbc8; text-decoration: none; }
.thecontent img { max-width: 100%; height: auto; }
.thecontent img, .thecontent img.alignleft {float: left; display: block; margin: 0px 30px 17px 0px; }
.thecontent img.aligncenter {float: none; margin: 0 auto 17px;  }
.thecontent img.alignright { float: right; margin: 0px 0px 17px 30px;}
.thecontent ul { list-style: disc; margin-bottom: 15px; padding-left: 40px; }
.thecontent ol { list-style: decimal; margin-bottom: 15px; padding-left: 40px; }
.thecontent ul.alpha, .thecontent ol.alpha {list-style-type: lower-alpha; }
.thecontent ul li, .thecontent ol li { font-family: "Roboto", Arial, sans-serif; font-size: 18px; line-height: 22px; color:#333333; padding-left: 8px; }

/* Nav Menu */
.headermobi-sosmed h3 { margin-bottom: 12px; } 
.headermobi-sosmed.none { display: none; }
.headermobi-search.none { display: none; }
.navmenu_shop a {
  align-items: center;
  gap: 6px; /* jarak antara gambar dan teks */
}
.navmenu_shop a::after {
    position: relative;
    content: '';
    display: inline-block;
    width: 20px; /* ukuran gambar */
    height: 20px;
    background-image: url('https://bglib.id/wp-content/uploads/2025/05/shopping-bag-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
    opacity: 1 !important;
}

/* Pagination */
.wp-pagenavi { font-family: "Roboto", Arial, sans-serif; display: block; position: relative; margin: 40px auto 20px; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: bold; text-align: center; padding: 0px !important; }
.wp-pagenavi, .wp-pagenavi a { font-family: "Roboto", Arial, sans-serif; color: #054D97; border: 0px; font-style: normal; font-weight: normal; font-size: 14px; padding: 10px 17px; }
.wp-pagenavi a:hover { background: #868686; color: #fff; text-decoration: none; }
.wp-pagenavi span.current { background: #054D97; color: #fff; border: 0px; padding: 10px 17px; }
.wp-pagenavi span.pages { background: #054D97; color: #fff; border: 0px; padding: 10px 17px; }

.elementor-pagination { margin-top: 45px !important; }
.elementor-pagination .page-numbers { width: 35px; height: 35px; text-align: center; color: #919191; background: #f8f8f8; display: inline-block;
    vertical-align: middle; border-radius: 50%; line-height: 35px; box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2); }
.elementor-pagination .page-numbers:hover { background: #F6B519; color: #ffffff; }
.elementor-pagination .page-numbers.current { background: #F6B519; color: #ffffff; }

.gallery-wrapper {
    width: 100%;
    max-width: 100%;
}
.wrapper_productloop .elementor-loop-container { display: block; }
.wrapper_productloop .slidernav img { padding: 10px 5px; cursor: pointer; }
.wrapper_productloop .slick-prev { left: 0px; }
.wrapper_productloop .slick-next { right: 0px; }
.wrapper_productloop .slick-prev, .wrapper_productloop .slick-next { z-index: 10; }
.wrapper_productloop .slick-prev:before, .wrapper_productloop .slick-next:before { color: #333333; }

/* Peta Indonesia / Mapping */
.indonesia_mapping svg {
    width: 100%;
    max-width: 100%;
}
.pulau {
    stroke: #6d6d6d;
    transition: transform 0.3s ease, fill 0.3s ease, filter 0.3s ease;
    transform-origin: center;
    cursor: pointer;
}
.pulau:hover {
    stroke: #222222;
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.1));
    transform: scale(1.01); 
}

@media only screen and (max-width: 450px) {
  .thecontent img { float: none; width: 100%; margin: 0 auto 17px; }
}