:root {
--primary: #f01010;
--primary-hover: #c50d0d;
--primary-light: #ff4a4a;
--primary-glow: rgba(240,16,16,.14);
--primary-border: rgba(240,16,16,.45);
--btn-gradient: linear-gradient(135deg, #f43333 0%, #f01010 50%, #c50d0d 100%);
--btn-gradient-hover: linear-gradient(135deg, #ff4a4a 0%, #f01010 60%, #c50d0d 100%);
--btn-shadow: 0 4px 18px rgba(240,16,16,.35), 0 1px 0 rgba(255,255,255,.12) inset;
--btn-shadow-hover: 0 6px 24px rgba(240,16,16,.50), 0 1px 0 rgba(255,255,255,.16) inset;
--bg-body: #031B23;
--bg-header: #1A2234;
--bg-footer: #1A2234;
--bg-card: #0F2233;
--bg-surface: #1E3448;
--bg-overlay: #212D42;
--bg-input: #071820;
--product-card-bg: #0c2433;
--bg-deepest: #031B23;
--bg-deep: #071820;
--bg-elevated: #1A2234;
--text-primary: #FFFFFF;
--text-body: #FFFFFF;
--text-muted: #7A90A8;
--text-faint: #3D5570;
--text-disabled: rgba(255,255,255,.25);
--link-color: #f01010;
--link-hover: #ff4a4a;
--border-subtle: rgba(255,255,255,.06);
--border-soft: rgba(255,255,255,.10);
--border-visible: rgba(255,255,255,.18);
--color-success: #34D399;
--color-info: #90CDF4;
--color-warning: #FBBF24;
--color-error: #F87171;
--primary-color: #f01010;
--font-lato: "Lato", sans-serif;
--font-roboto: "Roboto", sans-serif;
--vbx-bg: var(--bg-footer);
--vbx-card: var(--bg-card);
--vbx-ac: var(--primary);
--vbx-text: var(--text-body);
--vbx-dim: var(--text-muted);
--vbx-br: 14px;
}
body {
font-family: var(--font-lato);
background: var(--bg-body);
color: var(--text-primary);
letter-spacing: .3px;
overflow-x: hidden;
font-size: 14px;
line-height: 1.6;
}
/* Global link color */
a { color: var(--link-color); }
a:hover { color: var(--link-hover); text-decoration: none; }
/* ============================================
VOUCHERBD BUTTON GRADIENT — CTA ONLY
শুধু primary action buttons-এ gradient
Generic button/input সব বাদ
============================================ */
/* WooCommerce primary CTA buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
button#place_order,
.checkout-button,
.single_add_to_cart_button,
.vbx-order-summary .single_add_to_cart_button,
/* Login page CTA */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
/* My account, order CTA */
.woocommerce-MyAccount-content .button,
/* Coupon apply */
form.woocommerce-cart-form .coupon .button,
/* Blog read more */
.vbx-blog-readmore,
/* 404 button */
.vbd_404_button a {
background: var(--btn-gradient) !important;
box-shadow: var(--btn-shadow) !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
transition: background .25s ease, box-shadow .25s ease, transform .2s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
button#place_order:hover,
.checkout-button:hover,
.single_add_to_cart_button:hover,
.vbx-order-summary .single_add_to_cart_button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce-MyAccount-content .button:hover,
form.woocommerce-cart-form .coupon .button:hover,
.vbx-blog-readmore:hover,
.vbd_404_button a:hover {
background: var(--btn-gradient-hover) !important;
box-shadow: var(--btn-shadow-hover) !important;
color: #fff !important;
transform: translateY(-2px) !important;
}
/* .button class — general fallback, only where no other style */
.button {
background: var(--btn-gradient);
box-shadow: var(--btn-shadow);
color: #fff;
border: none;
border-radius: 6px;
font-weight: 700;
transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}
.button:hover {
background: var(--btn-gradient-hover);
box-shadow: var(--btn-shadow-hover);
color: #fff;
transform: translateY(-1px);
}
body.admin-bar .vbd_content_outer {
min-height: calc(100vh - 32px);
}
.vbd_row {
display: flex;
flex-flow: row wrap;
margin-left: -5px;
margin-right: -5px;
}
.vbd_col_1_1 {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.vbd_content_area {
width: 100%;
padding: 0 0px;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
font-family: var(--font-roboto);
line-height: 1.2;
}
h2 {
font-size: 24px;
margin-bottom: 15px !important;
}
h3 {
font-size: 20px;
}
a,a:focus{
text-decoration: none !important;
outline: none !important;
}
body:not(.admin-bar) .login-menu,
body.admin-bar .logout-menu {
display: none !important;
}
.elementor-button {
background: var(--btn-gradient) !important;
box-shadow: var(--btn-shadow) !important;
border-radius: 6px !important;
border: none !important;
font-size: 13px !important;
font-family: var(--font-roboto) !important;
font-weight: 700 !important;
padding: 12px 24px !important;
text-transform: uppercase !important;
transition: all .25s ease !important;
color: #fff !important;
letter-spacing: .04em !important;
}
.elementor-button:hover {
background: var(--btn-gradient-hover) !important;
box-shadow: var(--btn-shadow-hover) !important;
transform: translateY(-1px) !important;
color: #fff !important;
}
.fb-comments {
width: 100% !important;
}
.fb-comments > span {
width: 100% !important;
}
.fb-comments > span > iframe {
width: 100% !important;
}
.woocommerce-orders-table__cell-order-actions .pay,
.woocommerce-orders-table__cell-order-actions .cancel {
display: none !important;
}
.woocommerce-order-details .order-again {
display: none !important;
}
.woocommerce-error li[data-0="vbd-wallet-topup-notice"] + li {
display: none !important;
}
.woocommerce-error li[data-0="vbd-wallet-topup-notice"] a {
display: inline-block;
background: #fff;
color: #000;
font-weight: 600;
font-size: 13px;
padding: 7px 12px;
border-radius: 3px;
margin-top: 8px;
transition: all .3s ease-in-out .0s;
}
.woocommerce-error li[data-0="vbd-wallet-topup-notice"] a:hover {
background: #000;
color: #fff;
}
.vbd_content_outer div#primary ~ aside {
display: none !important;
}
.vbd_content_outer div#primary {
padding: 60px 10px;
max-width: 1260px;
margin-left: auto;
margin-right: auto;
}
.fue-unsubscribe-form br {
display: none;
}
.fue-unsubscribe-form input#fue_submit {
background: var(--primary);
color: #fff;
padding: 14px 30px 15px;
font-size: 15px;
font-weight: 600;
border: none;
cursor: pointer;
}
.vbd-my-account-or {
text-align: center;
padding-top: 30px;
position: relative;
z-index: 1;
}
.vbd-my-account-or span {
font-weight: 700;
font-size: 17px;
display: inline-block;
background: var(--bg-surface);
border-radius: 4px;
padding: 5px 12px 3px;
line-height: 1;
}
.vbd-my-account-or::before {
content: "";
position: absolute;
width: 70%;
height: 1px;
background: #ffffff;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
z-index: -1;
opacity: .15;
}
.vbd-my-account-or + .wp_google_login .wp_google_login__button {
color: #000 !important;
font-weight: 600;
}
body.admin-bar .vbd_main_header {
top: 32px;
}
.vbd_header_logo h1 {
margin: 0;
}
.vbd_main_header .vbd_row {
align-items: center;
min-height: 64px;
padding: 10px 0;
}
.vbd_header_logo img {
max-width: 150px;
margin-bottom: 0;
display: block;
}
.vbd_header_logo {
width: 190px;
padding-left: 0;
padding-right: 0;
display: flex;
align-items: center;
}
.vbd_header_my_acount {
width: 190px;
padding-left: 20px;
padding-right: 0px;
text-align: right;
}
.vbd_header_menu {
width: calc(100% - 380px);
text-align: center;
padding-left: 0px;
padding-right: 15px;
}
.vbd_header_my_acount a {
background-color: var(--primary);
width: 35px;
height: 35px;
display: inline-block;
border-radius: 50%;
padding: 5px;
}
.vbd_header_my_acount svg {
width: 24px;
height: 24px;
}
.vbd_header_my_acount svg g {
fill: #fff;
}
.vbd_header_menu .menu {
margin: 0;
padding: 0;
list-style: none;
}
.vbd_header_menu .menu > li {
display: inline-block;
position: relative;
}
.vbd_header_menu .menu > li > a {
font-size: 14px;
line-height: 1.4;
font-family: var(--font-roboto);
font-weight: 600;
padding: 8px 16px;
text-decoration: none !important;
color: rgba(255,255,255,.75) !important;
transition: color .2s ease;
border-bottom: none;
display: inline-block;
letter-spacing: .01em;
}
.vbd_header_menu .menu > li > a:hover {
color: #fff !important;
}
.vbd_header_menu .menu > li.current-menu-item > a {
color: var(--primary-color) !important;
font-weight: 700;
}
.vbd_header_menu .menu > li ul.sub-menu {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% - 3px);
z-index: 1;
background: #fff;
box-shadow: 0 5px 5px rgb(0 0 0 / 15%);
border-top: 3px solid var(--primary-color);
width: 180px;
text-align: left;
transition: all .3s ease-in-out .0s;
opacity: 0;
visibility: hidden;
text-align: center;
}
.vbd_header_menu .menu > li.menu-item-has-children:hover ul.sub-menu {
opacity: 1;
visibility: visible;
}
.vbd_header_menu .menu > li ul.sub-menu li + li {
border-top: 1px solid rgb(0 42 84 / 15%);
}
.vbd_header_menu .menu > li ul.sub-menu a {
padding: 10px 15px;
display: block;
font-size: 14px;
color: #444;
font-weight: 700;
text-transform: capitalize;
transition: all .3s ease-in-out .0s;
text-decoration: none;
}
.vbd_header_menu .menu > li ul.sub-menu a:hover {
color: var(--primary-color);
}
.vbd_header_menu .menu > li ul.sub-menu::before {
content: "";
border-top: 1px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid var(--primary-color);
position: absolute;
left: 50%;
top: -13px;
transform: translateX(-50%);
}
.vbd_header_mobile_menu_target {
display: none;
}
.vbd_header_mobile_menu {
display: none;
}
/*.vbd_header_mobile_menu_trigger .fa-bars::before {
content: "\f0c9" !important;
display: block !important;
float: none !important;
visibility: visible !important;
}
*/
.vbd_custom_search_wrapper .search-form {
position: relative;
}
/* টাইপ করা লেখা সাদা (কালো হয়ে যাচ্ছিল) + 16px (iOS মোবাইল জুম বন্ধ করে) */
.vbd_custom_search_wrapper .search-field{
color: #ffffff !important;
font-size: 16px !important; /* 16px এর নিচে হলে iOS input এ জুম করে */
-webkit-text-fill-color: #ffffff; /* iOS Safari fix */
}
.vbd_custom_search_wrapper .search-field::placeholder{
color: rgba(255,255,255,.55) !important;
-webkit-text-fill-color: rgba(255,255,255,.55);
}
.vbd_custom_search_wrapper .search-field:focus{
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
}
.vbd_custom_search_wrapper .search-form button {
position: absolute;
top: 0;
right: 0;
height: 45px;
width: 45px;
font-size: 18px;
padding: 0;
background: transparent !important;
border: none !important;
cursor: pointer !important;
color: #ffffff;
transition: all .3s ease-in-out .0s;
}
.vbd_custom_search_wrapper .search-form button:hover {
color: var(--primary-color);
}
/* ===== Live search suggestion dropdown ===== */
.vbd-live-suggest{
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: #0c2433;
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,.5);
z-index: 9999;
overflow: hidden;
display: none;
max-height: 420px;
overflow-y: auto;
}
.vbd-live-suggest.show{ display: block; }
.vbd-live-suggest .vls-item{
display: flex;
align-items: center;
gap: 11px;
padding: 9px 12px;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.05);
transition: background .15s ease;
}
.vbd-live-suggest .vls-item:last-child{ border-bottom: none; }
.vbd-live-suggest .vls-item:hover,
.vbd-live-suggest .vls-item.active{
background: #15384f;
}
.vbd-live-suggest .vls-img{
width: 40px; height: 40px;
border-radius: 9px;
overflow: hidden;
flex: 0 0 40px;
background: rgba(0,0,0,.25);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.vbd-live-suggest .vls-img img{
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.vbd-live-suggest .vls-info{
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.vbd-live-suggest .vls-name{
font-size: 14px;
font-weight: 600;
color: #f1f6fb;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vbd-live-suggest .vls-price{
font-size: 13px;
color: #ff4a4a;
font-weight: 600;
}
.vbd-live-suggest .vls-price del{
color: rgba(255,255,255,.4);
font-weight: 400;
margin-right: 5px;
}
/* মোবাইলে dropdown text একটু ছোট */
@media (max-width: 767px){
.vbd-live-suggest .vls-name{ font-size: 13px; }
.vbd-live-suggest .vls-price{ font-size: 12px; }
.vbd-live-suggest .vls-img{ width: 36px; height: 36px; flex: 0 0 36px; }
}
.vbd_post_grid_shortcode .vbd_post_item_thumb img {
height: 120px;
}
.vbd_post_grid_shortcode .vbd_post_item_author_avatar img {
width: 40px;
height: 40px;
}
.vbd_post_grid_shortcode .vbd_post_item_author_avatar {
margin-top: -28px;
}
.vbd_post_grid_shortcode .vbd_post_item_title {
margin-left: -15px;
margin-right: -15px;
}
.vbd_post_grid_shortcode .vbd_post_item_footer li:last-child {
margin-right: 0;
}
.woocommerce .products {
display: flex;
flex-flow: row wrap;
margin-left: -10px;
margin-right: -10px;
}
.woocommerce .products.columns-6 > .product {
width: 16.666667%;
margin: 0;
padding-left: 0px;
padding-right: 8px;
margin-bottom: 8px;
}
.vbd_product_inner img.attachment-woocommerce_thumbnail {
width: 100%;
}
.woocommerce-loop-product__title {
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-weight: 900;
color: #ffffff;
padding-left: 8px;
padding-right: 8px;
margin-bottom: 0 !important;
padding-top: 12px;
padding-bottom: 12px;
font-family: var(--font-roboto);
transition: all .3s ease-in-out .0s;
}
.vbd_product_inner a {
text-decoration: none !important;
}
.woocommerce-loop-product__title:hover {
color: var(--primary-color);
}
.vbd_product_onsale {
background: var(--primary-color);
color: #fff;
font-size: 14px;
font-family: var(--font-lato);
font-weight: 600;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
position: absolute;
top: 7px;
left: 7px;
}
.vbd_product_inner > a {
position: relative;
}
.vbd_sold_out {
position: absolute;
width: 50px;
height: 50px;
top: 7px;
right: 7px;
background: #fff;
z-index: 1;
color: #000 !important;
text-transform: uppercase;
text-align: center;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
line-height: 1.2;
font-family: var(--font-lato);
font-weight: 600;
padding-top: 4px;
}
.vbd_product_inner {
background: var(--product-card-bg);
height: 100%;
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px;
overflow: hidden;
position: relative;
}
.woocommerce-pagination ul.page-numbers {
text-align: center;
margin-bottom: 0;
padding-top: 20px;
padding-bottom: 40px;
}
.woocommerce-pagination ul.page-numbers li {
display: inline-block;
}
.woocommerce-pagination ul.page-numbers li * {
width: 30px;
height: 30px;
display: flex;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
align-items: center;
justify-content: center;
transition: all .3s ease-in-out .0s;
}
.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce-pagination ul.page-numbers li .current {
background-color: var(--primary-color);
color: #fff;
}
.vbd_woocommerce_shop_page_header_area {
text-align: center;
padding-top: 50px;
padding-bottom: 15px;
}
.vbd_woocommerce_content .vbd_content_area {
display: flex;
flex-flow: row wrap;
}
.vbd_woocommerce_content .vbd_content_area > * {
width: 100%;
}
.vbd_woocommerce_content .vbd_content_area .woocommerce-result-count {
width: 50%;
color: rgb(255 255 255 / 70%);
font-weight: 600;
font-size: 15px;
font-family: var(--font-lato);
}
.vbd_woocommerce_content .vbd_content_area .woocommerce-ordering {
width: 50%;
text-align: right;
}
.vbd_woocommerce_content .vbd_content_area > .products {
width: auto;
}
.vbd_woocommerce_content .vbd_content_area .woocommerce-ordering select.orderby {
background: transparent !important;
border: none !important;
padding: 0 !important;
color: rgb(255 255 255 / 70%);
font-family: var(--font-lato);
font-size: 15px;
font-weight: 600;
outline: none !important;
height: auto !important;
}
.vbd_woocommerce_content .vbd_content_area .woocommerce-ordering select.orderby option {
color: #000;
}
.vbd_content_area .products {
margin-top: 8px;
}
.vbd_woocommerce_shop_page_title {
font-size: 30px;
margin-bottom: 28px;
}
.woocommerce-tabs.wc-tabs-wrapper {
position: relative;
z-index: 1;
padding: 50px 0;
color: #ffffff;
margin: 40px 0px 15px 0px;
}
.woocommerce-tabs.wc-tabs-wrapper::before {
content: "";
position: absolute;
width: 10000px;
height: 100%;
background: var(--bg-elevated);
left: -3500px;
top: 0;
z-index: -1;
}
.woocommerce-tabs.wc-tabs-wrapper a,
.woocommerce-tabs.wc-tabs-wrapper a:visited {
color: #000;
}
.woocommerce-tabs.wc-tabs-wrapper a:hover,
.woocommerce-tabs.wc-tabs-wrapper a:focus,
.woocommerce-tabs.wc-tabs-wrapper a:active {
color: var(--primary-color);
}
.woocommerce-tabs ul.tabs {
display: none !important;
}
.woocommerce-tabs.wc-tabs-wrapper section.elementor-section {
margin-left: -10px;
margin-right: -10px;
}
/* ══════════════════════════
SINGLE PRODUCT — CLEAN
══════════════════════════ */
.vbx-sp-wrap { background: var(--bg-body); }
.single-product .vbd_main_content.vbd_woocommerce_content { padding: 0; }
.single-product .vbd_content_area { padding: 0; }
.single-product div.product { display: block; padding: 0; }
.vbx-hero-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.vbx-hero-text {
flex: 1;
min-width: 0;
}
.vbx-hero-badges {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin: 10px 0 12px;
}
.vbx-hero-desc p { margin:0 0 4px; }
.vbx-sp-left { flex:1; min-width:0; }
.vbx-var-group { margin:0; }
.vbx-var-group select, .vbx-sp-left select { display:none !important; }
.vbd_variation_radio_item input[type="radio"] {
position:absolute; width:0; height:0; opacity:0; visibility:hidden;
}
.vbd_variation_radio_item label sup { display:none !important; }
.vbx-var-prices { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
.vbx-wc-product, .vbx-order-body { margin:0; padding:0; }
.vbx-order-summary { padding:0; background:transparent !important; text-align:left !important; border:none !important; box-shadow:none !important; margin:0 !important; border-radius:0 !important; }
.vbx-order-summary .product_title { display:none !important; }
.vbx-order-summary .woocommerce-variation-description { display:none; }
.vbx-order-summary .woocommerce-variation-price { display:none; }
.vbx-order-summary .woocommerce-variation-availability { display:none; }
.vbx-order-summary .variations, .vbx-order-summary select[name^="attribute_"] { display:none !important; }
#vbx-sb-live-price { padding:12px 20px 0; display:none; }
.vbx-live-bdt { display:block; font-size:17px; font-weight:700; color:var(--primary-color); }
.vbx-live-usd { font-size:12px; font-weight:600; color:var(--color-success); }
/* WC variable product: quantity visibility managed by JS */
.woocommerce-variation-add-to-cart-enabled .quantity { display:flex !important; }
.vbx-order-summary .reset_variations { color:var(--text-faint) !important; font-size:12px; padding:0 20px 10px; display:block; }
.vbx-order-summary .reset_variations[style*="hidden"] { display:none !important; }
.vbd-ppom-rendering-fields-trigger { display:none !important; }
.single-product div.product .price { display:none !important; }
.vbx-sp-desc .woocommerce-tabs ul.tabs li {
list-style: none;
margin: 0;
}
.vbx-sp-desc .woocommerce-Tabs-panel h1 { font-size: 22px; }
.vbx-sp-desc .woocommerce-Tabs-panel h5,
.vbx-sp-desc .woocommerce-Tabs-panel h6 { font-size: 14px; }
.vbx-sp-desc .woocommerce-Tabs-panel table {
width: 100%;
border-collapse: collapse;
}
.vbx-sp-desc .woocommerce-Tabs-panel table th,
.vbx-sp-desc .woocommerce-Tabs-panel table td {
padding: 8px 12px;
border-bottom: 1px solid var(--border-subtle);
font-size: 13px;
color: var(--text-muted);
text-align: left;
}
.vbx-sp-desc .woocommerce-Tabs-panel table th {
color: var(--text-body);
font-weight: 600;
width: 160px;
}
.vbx-pkg-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
/* variation description — Selected Package এর নিচে highlight note/warning box */
.vbx-pkg-desc {
margin-top: 10px;
padding: 10px 12px 10px 14px;
border-radius: 9px;
background: rgba(255, 193, 7, .1); /* হালকা amber/হলুদ ব্যাকগ্রাউন্ড */
border-left: 3px solid #ffc107; /* বাম পাশে হলুদ accent bar */
font-size: 12.5px;
line-height: 1.55;
color: #ffd866; /* হাইলাইট হলুদ টেক্সট — চোখে পড়ে */
}
.vbx-pkg-desc p { margin: 0 0 5px; }
.vbx-pkg-desc p:last-child { margin-bottom: 0; }
.vbx-pkg-desc ul, .vbx-pkg-desc ol { margin: 4px 0 4px 18px; padding: 0; }
.vbx-pkg-desc li { margin-bottom: 3px; }
.vbx-pkg-desc strong, .vbx-pkg-desc b { color: #fff3b0; font-weight: 700; }
.vbx-pkg-desc a { color: #ffd866; text-decoration: underline; }
.vbx-pkg-left { flex: 1; min-width: 0; }
.vbx-pkg-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex-shrink: 0;
}
.vbx-qty-section {
padding: 16px 20px 4px;
border-top: 1px solid var(--border-subtle);
}
.vbx-qty-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 6px;
border-top: 1px solid var(--border-subtle);
margin-top: 4px;
gap: 12px;
margin-bottom: 6px;
}
.vbx-qty-limit::before {
content: "ℹ";
font-size: 10px;
opacity: .6;
}
.vbx-order-summary .single_add_to_cart_button:active {
transform: translateY(0) !important;
}
/* ── IMO fields inside sidebar ── */
.vbx-order-body .mvimo-row {
flex-direction: column;
gap: 8px;
}
.vbx-order-body .mvimo-codewrap {
flex: none;
width: 100%;
}
.vbx-order-body .mvimo-codebtn {
width: 100%;
border-radius: 8px;
}
.vbx-order-body .mvimo-phone {
width: 100%;
}
.vbx-order-body .mvimo-select,
.vbx-order-body .mvimo-input {
border-radius: 8px;
background: var(--bg-card);
border: 1.5px solid var(--border-soft);
}
.vbx-order-body .mvimo-select:focus,
.vbx-order-body .mvimo-input:focus {
border-color: var(--primary-color);
box-shadow: none;
background: var(--bg-card);
}
/* ✅ MV IMO সব ফিল্ড — typing অবস্থায়ও টেক্সট সাদা
(phone input, select, country search — modal body-তে গেলেও কাজ করবে) */
.mvimo-input,
.mvimo-select,
.mvimo-modal-searchinp,
.mvimo-input:focus,
.mvimo-select:focus,
.mvimo-modal-searchinp:focus {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
caret-color: #ffffff !important;
}
.mvimo-input::placeholder,
.mvimo-modal-searchinp::placeholder {
color: rgba(255,255,255,.35) !important;
-webkit-text-fill-color: rgba(255,255,255,.35) !important;
}
/* ✅ Autofill — কালো টেক্সট + হলুদ bg override */
.mvimo-input:-webkit-autofill,
.mvimo-input:-webkit-autofill:hover,
.mvimo-input:-webkit-autofill:focus,
.mvimo-input:-webkit-autofill:active,
.mvimo-modal-searchinp:-webkit-autofill,
.mvimo-modal-searchinp:-webkit-autofill:hover,
.mvimo-modal-searchinp:-webkit-autofill:focus,
.mvimo-modal-searchinp:-webkit-autofill:active {
-webkit-text-fill-color: #ffffff !important;
-webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
caret-color: #ffffff !important;
transition: background-color 9999s ease-in-out 0s !important;
}
@media (max-width:860px) {
.vbx-sp-body { flex-direction:column; gap:14px; }
.vbx-sp-right { width:100%; position:static; }
}
@media (max-width:600px) {
.vbx-hero { margin-top: 20px; padding: 18px 0; }
.vbx-hero-inner { gap: 14px; }
.vbx-hero-img-box { width: 100px; height: 100px; border-radius: 12px; }
.vbx-hero-title { font-size: 17px; letter-spacing:.01em; }
.vbx-hero-desc { font-size:12px; }
.vbx-badge { font-size:10.5px; padding:3px 9px; }
.vbd_container { padding-left:10px; padding-right:10px; }
.vbd_variation_radios { gap:5px !important; }
.vbx-var-name { font-size:11px; }
.vbx-var-bdt { font-size:11px; }
.vbx-var-usd { font-size:10px; }
.vbx-order-summary .ppom-field-wrapper { padding:12px 14px 0; }
.vbx-qty-row { padding:12px 14px 6px; }
.vbx-qty-limit { padding:0 14px 8px; }
.vbx-order-summary form.cart { padding:0 14px 14px; }
.vbx-order-title { padding:13px 14px 11px; }
#vbx-sb-live-price { padding:10px 14px 0; }
.vbx-order-summary .single_add_to_cart_button { height:44px !important; line-height:44px !important; font-size:13px !important; }
}
.woocommerce-cart .entry-content .woocommerce {
background: #fff;
border-radius: 10px;
margin-top: 40px;
margin-bottom: 40px;
display: flex;
flex-flow: row wrap;
}
.woocommerce-cart .entry-content .woocommerce > * {
width: 100%;
}
.woocommerce-cart .entry-content .woocommerce a {
color: #000;
}
.woocommerce-cart .entry-content .woocommerce a:hover {
color: var(--primary-color);
}
.woocommerce-cart .entry-content .woocommerce .woocommerce-cart-form {
width: 66.66%;
padding: 15px;
color: #000;
}
.woocommerce-cart .entry-content .woocommerce .cart-collaterals {
width: 33.33%;
padding: 15px;
color: #000;
}
.woocommerce-cart .entry-content .woocommerce .cart-collaterals .cart_totals {
border: 3px solid #e5e5e5;
padding: 25px;
}
.woocommerce-cart-form__cart-item img {
max-width: 80px !important;
}
.woocommerce-cart-form__contents th {
font-size: 16px;
text-transform: uppercase;
font-family: var(--font-roboto);
padding: 15px 10px;
border-bottom: 2px solid #e5e5e5;
}
.product-name a {
font-size: 14px;
font-weight: 600;
font-family: var(--font-roboto);
text-decoration: none;
line-height: 1.2;
display: inline-block;
margin-bottom: 5px;
}
.product-name .variation {
margin: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 400;
}
td.product-remove {
font-size: 20px;
padding: 10px;
}
td.product-remove a.remove {
text-decoration: none !important;
}
.product-subtotal {
text-align: right !important;
}
.product-subtotal .woocommerce-Price-amount.amount {
font-size: 16px;
font-weight: 600;
color: var(--primary-color);
}
.woocommerce-cart-form__cart-item td {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e5e5e5;
padding-left: 10px;
padding-right: 10px;
}
.quantity .qty {
-moz-appearance: textfield;
padding: 0;
text-align: center;
border: none !important;
border-left: 2px solid #e5e5e5 !important;
border-right: 2px solid #e5e5e5 !important;
height: auto !important;
}
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.quantity {
display: flex;
border: 2px solid #e5e5e5;
}
.quantity button {
background: transparent !important;
border: none;
font-size: 20px;
cursor: pointer;
transition: all .3s ease-in-out .0s;
width: 30px;
text-align: center;
padding: 0;
border-radius: 0;
min-width: 30px;
color: #ffffff !important;
}
.quantity button:hover {
background-color: var(--primary-color) !important;
color: #fff !important;
}
.product-quantity .quantity {
height: 43px;
overflow: hidden;
width: 110px;
}
form.woocommerce-cart-form .coupon {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
form.woocommerce-cart-form .coupon label {
display: none;
}
form.woocommerce-cart-form .coupon input {
width: auto;
margin-right: 10px;
margin-bottom: 15px;
}
form.woocommerce-cart-form .coupon .button {
height: 45px;
}
a.checkout-button {
width: 100%;
display: block;
text-align: center;
color: #fff !important;
}
tr.cart-subtotal th {
font-size: 16px;
}
tr.order-total {
font-size: 18px;
}
tr.order-total span.woocommerce-Price-amount.amount {
color: var(--primary);
font-size: 22px;
font-weight: 600;
}
.cart-collaterals tr.cart-subtotal th,
.cart-collaterals tr.cart-subtotal td {
border-bottom: 1px solid #0000001b;
}
/* ============================================================
CHECKOUT PAGE — PREMIUM DARK UI
============================================================ */
/* Page base */
/* ================================================================
CHECKOUT PAGE — FRESH CSS
WC form structure:
form.checkout (grid: col2-set | order_review)
├── .woocommerce-notices-wrapper → full width (errors go here)
├── div.col2-set → grid col 1 (billing)
└── div#order_review → grid col 2 (summary + payment)
================================================================ */
/* 1. Kill all white backgrounds */
body.woocommerce-checkout { background: var(--bg-body) !important; color: var(--text-primary); }
body.woocommerce-checkout article,
body.woocommerce-checkout article.page,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .hentry,
body.woocommerce-checkout .elementor-section,
body.woocommerce-checkout .elementor-column,
body.woocommerce-checkout .elementor-widget-wrap,
body.woocommerce-checkout .elementor-widget-container,
body.woocommerce-checkout .elementor-element {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* vbd_row flex breaks grid — only inside content area */
body.woocommerce-checkout .vbd_content_area .vbd_row,
body.woocommerce-checkout .vbd_woocommerce_content .vbd_row {
display: block !important;
margin: 0 !important;
}
/* WC woocommerce div — transparent, centered */
body.woocommerce-checkout .vbd_content_area .woocommerce,
body.woocommerce-checkout .elementor-widget-container .woocommerce {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 28px 10px 60px !important;
margin: 0 auto !important;
max-width: 1260px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 2. Top notices (login toggle, coupon toggle) */
body.woocommerce-checkout .woocommerce-form-login-toggle {
margin-bottom: 12px;
}
/* WC login form — never show, mv-glm popup handles it */
body.woocommerce-checkout .woocommerce-form-login { display: none !important; }
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
margin-bottom: 12px;
}
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
background: var(--bg-card) !important;
color: var(--text-body) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: 8px !important;
padding: 11px 16px !important;
margin: 0 0 10px !important;
font-size: 13px !important;
font-weight: 500 !important;
}
.woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-form-login-toggle .woocommerce-info a { color: var(--link-color) !important; font-weight: 600 !important; }
/* 3. GRID on form.checkout */
form.checkout.woocommerce-checkout {
display: grid !important;
grid-template-columns: 1fr 400px !important;
grid-template-rows: auto 1fr !important;
gap: 0 28px !important;
align-items: start !important;
background: transparent !important;
}
/* Error notice — row 1, full width */
form.checkout.woocommerce-checkout > .woocommerce-notices-wrapper {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
}
/* Billing — row 2, col 1 */
form.checkout.woocommerce-checkout > .col2-set {
grid-column: 1 !important;
grid-row: 2 !important;
margin: 0 !important;
}
/* Order review — row 1-2, col 2 (spans both rows, sticky) */
form.checkout.woocommerce-checkout > #order_review {
grid-column: 2 !important;
grid-row: 1 / 3 !important;
position: sticky !important;
top: 80px !important;
}
/* Hide WC's own order review heading */
#order_review_heading { display: none !important; }
/* 4. Billing card */
#customer_details {
background: var(--bg-card) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: 14px !important;
padding: 24px !important;
margin: 0 !important;
}
.woocommerce-billing-fields h3 {
font-size: 15px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .07em !important;
color: #c5d2e0 !important;
margin: 0 0 20px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid var(--border-soft) !important;
}
body.woocommerce-checkout label {
display: block !important;
margin-bottom: 6px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
color: var(--text-body) !important;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p { margin-bottom: 14px !important; }
body.woocommerce-checkout #customer_details input:not([type=radio]):not([type=checkbox]):not([type=submit]):not(.qty),
body.woocommerce-checkout #customer_details select {
width: 100% !important;
height: 46px !important;
background: var(--bg-deep) !important;
color: var(--text-primary) !important;
border: 1.5px solid var(--border-soft) !important;
padding: 0 14px !important;
border-radius: 8px !important;
font-size: 15px !important;
outline: none !important;
transition: border-color .2s, box-shadow .2s !important;
}
body.woocommerce-checkout #customer_details input:focus,
body.woocommerce-checkout #customer_details select:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(240,16,16,.10) !important;
outline: none !important;
}
/* Autofill — dark bg + white text override browser default */
body.woocommerce-checkout #customer_details input:-webkit-autofill,
body.woocommerce-checkout #customer_details input:-webkit-autofill:hover,
body.woocommerce-checkout #customer_details input:-webkit-autofill:focus,
body.woocommerce-checkout #customer_details input:-webkit-autofill:active {
-webkit-text-fill-color: var(--text-primary) !important;
-webkit-box-shadow: 0 0 0px 1000px var(--bg-deep) inset !important;
box-shadow: 0 0 0px 1000px var(--bg-deep) inset !important;
caret-color: var(--text-primary) !important;
border: 1.5px solid var(--border-soft) !important;
transition: background-color 9999s ease-in-out 0s !important;
}
/* Invalid field highlight */
body.woocommerce-checkout .woocommerce-invalid input,
body.woocommerce-checkout .woocommerce-invalid select {
border-color: #e74c3c !important;
}
body.woocommerce-checkout .woocommerce-invalid label { color: #e74c3c !important; }
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .woocommerce-error {
color: #e74c3c !important;
font-size: 12px !important;
margin-top: 4px !important;
display: block !important;
}
/* 5. Error notice inside form (validation errors) */
/* Error notice — beat WC default #712111 with high specificity */
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error,
body.woocommerce-checkout form.checkout .woocommerce-notices-wrapper .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
list-style: none !important;
background-color: #c0392b !important;
background: #c0392b !important;
color: #fff !important;
border-radius: 10px !important;
padding: 16px 20px !important;
margin: 0 0 16px !important;
border: none !important;
border-left: none !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
box-shadow: 0 4px 16px rgba(192,57,43,.35) !important;
}
body.woocommerce-checkout .woocommerce-error li {
padding: 3px 0 !important;
color: #fff !important;
background: none !important;
border: none !important;
list-style: none !important;
}
body.woocommerce-checkout .woocommerce-error a { color: #ffe0dc !important; text-decoration: underline !important; }
/* 6. Order Summary card */
#order_review {
background: var(--bg-card) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: 14px !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
#order_review::before {
display: block !important;
content: "ORDER SUMMARY" !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
color: #c5d2e0 !important;
padding: 18px 20px 14px !important;
border-bottom: 1px solid var(--border-soft) !important;
background: transparent !important;
position: relative !important; top: auto !important; left: auto !important;
transform: none !important; width: auto !important; height: auto !important;
}
#order_review::after { display: none !important; }
/* Order table */
table.shop_table.woocommerce-checkout-review-order-table {
width: 100% !important; margin: 0 !important; padding: 0 !important;
background: transparent !important; border: none !important; box-shadow: none !important;
}
table.shop_table.woocommerce-checkout-review-order-table thead th {
font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important;
letter-spacing: .06em !important; color: var(--text-muted) !important;
padding: 14px 20px 12px !important; border-bottom: 1px solid var(--border-soft) !important;
}
table.shop_table.woocommerce-checkout-review-order-table .cart_item td {
padding: 16px 20px !important; font-size: 15px !important; font-weight: 600 !important;
border-bottom: 1px solid var(--border-subtle) !important; color: #c5d2e0 !important;
}
table.shop_table.woocommerce-checkout-review-order-table .cart_item td.product-total {
text-align: right !important; font-weight: 700 !important; color: var(--text-primary) !important;
}
table.shop_table.woocommerce-checkout-review-order-table tfoot tr th {
padding: 12px 20px !important; font-size: 14px !important; font-weight: 700 !important; color: var(--text-body) !important;
}
table.shop_table.woocommerce-checkout-review-order-table tfoot tr td {
padding: 10px 20px !important; text-align: right !important; font-size: 14px !important; font-weight: 600 !important;
}
table.shop_table.woocommerce-checkout-review-order-table tfoot tr td .woocommerce-Price-amount { color: var(--primary) !important; font-weight: 700 !important; }
table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
padding: 14px 20px !important; border: none !important; border-top: 1px solid var(--border-subtle) !important;
}
table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th { font-size: 14px !important; font-weight: 700 !important; color: var(--text-primary) !important; }
table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount { font-size: 22px !important; }
/* 7. Payment methods */
#payment {
padding: 0 20px 20px !important;
background: transparent !important;
border-top: 1px solid var(--border-subtle) !important;
margin-top: 4px !important;
}
#payment > h3 { display: none !important; }
#payment > .woocommerce-checkout-payment { padding-top: 14px !important; }
ul.wc_payment_methods { list-style: none !important; padding: 0 !important; margin: 0 0 14px !important; }
ul.wc_payment_methods li {
border-top: 1px solid var(--border-subtle) !important;
border-left: none !important; border-right: none !important; border-bottom: none !important;
border-radius: 0 !important; padding: 11px 0 !important; margin: 0 !important;
background: transparent !important;
}
ul.wc_payment_methods li:first-child { border-top: none !important; }
ul.wc_payment_methods li label {
display: inline !important; font-size: 14px !important; font-weight: 500 !important;
text-transform: none !important; letter-spacing: 0 !important;
color: var(--text-primary) !important; cursor: pointer !important; margin: 0 !important; vertical-align: middle;
}
ul.wc_payment_methods li input[type=radio] {
height: 15px !important; width: 15px !important; accent-color: var(--primary) !important;
vertical-align: middle !important; margin-right: 8px !important; border-color: inherit !important;
}
.payment_box {
background: var(--bg-deep) !important; border: none !important; border-radius: 6px !important;
padding: 10px 12px !important; margin-top: 8px !important;
font-size: 13px !important; color: var(--text-muted) !important; line-height: 1.6 !important;
}
.payment_box::before { display: none !important; }
.payment_box p { margin: 0 !important; }
/* Payment shift smooth — WC blockUI overlay flicker কমানো */
#order_review .blockUI.blockOverlay {
background: var(--bg-card) !important;
opacity: .45 !important;
transition: opacity .25s ease !important;
}
/* Order review wrapper — content পরিবর্তনে smooth fade */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
transition: opacity .2s ease !important;
}
/* Payment method box reveal smooth */
.woocommerce-checkout .wc_payment_method .payment_box {
transition: opacity .25s ease !important;
}
/* 8. Terms + Place order */
.woocommerce-terms-and-conditions-wrapper {
font-size: 12px; color: var(--text-muted); line-height: 1.6;
padding-top: 12px; border-top: 1px solid var(--border-subtle); margin-bottom: 14px;
}
.woocommerce-terms-and-conditions-wrapper a { color: var(--link-color); }
#order_review button#place_order {
width: 100% !important; height: 52px !important; font-size: 15px !important;
font-weight: 700 !important; border-radius: 10px !important; letter-spacing: .05em !important;
text-transform: uppercase !important;
}
/* 9. Coupon form */
.checkout_coupon.woocommerce-form-coupon {
background: var(--bg-card); border: 1px solid var(--border-subtle);
border-radius: 10px; padding: 18px; margin-bottom: 14px;
display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
}
.checkout_coupon.woocommerce-form-coupon p.form-row-first { flex: 1; min-width: 160px; margin: 0 !important; }
.checkout_coupon.woocommerce-form-coupon p.form-row-last { flex: 0 0 auto; margin: 0 !important; }
.checkout_coupon.woocommerce-form-coupon input#coupon_code { height: 46px !important; border-radius: 8px !important; font-size: 14px !important; color: var(--text-primary) !important; background: var(--bg-deep) !important; }
.checkout_coupon.woocommerce-form-coupon .button {
height: 46px !important; padding: 0 22px !important; font-size: 14px !important;
border-radius: 8px !important; white-space: nowrap !important;
display: inline-flex !important; align-items: center !important; width: auto !important;
}
/* 10. Responsive */
@media (max-width: 860px) {
form.checkout.woocommerce-checkout {
grid-template-columns: 1fr !important;
gap: 16px 0 !important;
}
form.checkout.woocommerce-checkout > .woocommerce-notices-wrapper { grid-row: 1 !important; }
form.checkout.woocommerce-checkout > .col2-set { grid-column: 1 !important; grid-row: 2 !important; }
form.checkout.woocommerce-checkout > #order_review { grid-column: 1 !important; grid-row: 3 !important; position: static !important; }
/* Outer container — side padding কমিয়ে section width বাড়ানো */
body.woocommerce-checkout .vbd_content_area .woocommerce,
body.woocommerce-checkout .elementor-widget-container .woocommerce { padding: 14px 8px 40px !important; }
body.woocommerce-checkout .woocommerce { max-width: 100% !important; }
#customer_details { padding: 20px 16px !important; border-radius: 12px !important; }
#order_review { border-radius: 12px !important; }
/* Login + coupon toggle — full width */
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 12px !important; }
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { padding: 14px 16px !important; }
body.woocommerce-checkout #customer_details input:not([type=radio]):not([type=checkbox]):not([type=submit]):not(.qty) {
font-size: 16px !important; height: 50px !important;
}
body.woocommerce-checkout label { font-size: 13px !important; }
/* Elementor container side padding kill — full width section */
body.woocommerce-checkout .elementor-section .elementor-container,
body.woocommerce-checkout .elementor-column-wrap,
body.woocommerce-checkout .elementor-widget-wrap { padding-left: 0 !important; padding-right: 0 !important; }
}
body.woocommerce-account .vbd_content_area {
color: #ffffff !important;
}
body.woocommerce-account .vbd_content_area a {
color: #ffffff;
}
body.logged-in.woocommerce-account .woocommerce {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
background: var(--bg-elevated);
border-radius: 6px;
margin: 40px auto;
}
nav.woocommerce-MyAccount-navigation {
position: relative;
width: 25%;
border-right: 1px solid #0000001b;
padding: 20px;
}
.woocommerce-MyAccount-content {
width: 75%;
padding: 30px;
font-size: 15px;
}
nav.woocommerce-MyAccount-navigation::before {
content: "My Account";
padding: 0 15px 10px;
margin-bottom: 15px;
border-bottom: 1px solid #0000001b;
display: block;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
}
nav.woocommerce-MyAccount-navigation ul li{
margin-bottom: 5px;
}
nav.woocommerce-MyAccount-navigation ul li a {
display: block;
padding: 10px 15px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: var(--text-primary) !important; /* থিম standard সাদা (অরেঞ্জ link-color override) */
border-radius: 8px;
transition: background .18s ease, color .18s ease;
}
nav.woocommerce-MyAccount-navigation ul li.is-active a {
background: var(--btn-gradient) !important;
color: #ffffff !important;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(240,16,16,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
nav.woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover {
background: rgba(255,255,255,.06);
color: #ffffff !important;
border-radius: 8px;
}
nav.woocommerce-MyAccount-navigation ul li a::before {
margin-right: 5px;
}
.woocommerce-MyAccount-content .woocommerce-info {
background: var(--primary-hover) !important;
color: #fff;
padding: 18px;
}
.woocommerce-MyAccount-content .woocommerce-info a {
padding: 0;
background: transparent !important;
border-bottom: 2px solid #fff;
color: #fff !important;
margin: 10px;
}
.woocommerce-MyAccount-content .woocommerce-info a:hover {
color: #222 !important;
border-color: #222 !important;
}
.woocommerce-MyAccount-content .woocommerce-Addresses {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0 -15px;
}
.woocommerce-MyAccount-content .woocommerce-Addresses > div {
display: block;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
background: #f7f7f7;
}
header.woocommerce-Address-title {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #00000013;
margin-bottom: 10px;
}
header.woocommerce-Address-title h3 {
margin-bottom: 10px;
}
header.woocommerce-Address-title a {
display: block;
background: var(--primary);
color: #fff !important;
font-size: 14px;
font-weight: 600;
padding: 5px 15px;
margin-bottom: 10px;
}
header.woocommerce-Address-title a:hover {
background: var(--primary-hover);
}
fieldset {
margin-bottom: 20px;
padding: 20px 40px;
border: 2px solid #0000001b;
border-radius: 0;
}
fieldset legend {
margin-bottom: 0;
padding-right: 15px;
padding-left: 15px;
width: auto;
font-size: 22px;
font-weight: 600;
}
.woocommerce-orders-table__cell-order-total span.woocommerce-Price-amount.amount {
color: var(--primary);
font-weight: 600;
}
table.woocommerce-orders-table tbody .button {
padding: 10px 14px;
font-size: 12px;
color: #fff;
margin-bottom: 10px !important;
display: inline-block;
}
.woocommerce-orders-table__cell-order-actions,
.woocommerce-orders-table__header-order-actions {
text-align: right !important;
}
.woocommerce-order-details tfoot tr:last-child {
font-size: 20px;
}
.woo-wallet-content .woo-wallet-price {
color: var(--primary);
font-weight: 600;
}
/* Wallet Add Amount input — সাদা ব্যাকগ্রাউন্ডে কালো টেক্সট (নাহলে পড়া যায় না) */
#topup_amount,
input#topup_amount,
.woo-wallet-amount,
input.woo-wallet-amount,
form.woo-wallet-add-amount-form input[type="number"],
form.woo-wallet-add-amount-form input[type="text"],
.woo-wallet-add-amount input[type="number"],
.woo-wallet-add-amount input[type="text"]{
color: #111111 !important;
-webkit-text-fill-color: #111111 !important;
background: #ffffff !important;
}
#topup_amount::placeholder,
.woo-wallet-amount::placeholder,
form.woo-wallet-add-amount-form input::placeholder,
.woo-wallet-add-amount input::placeholder{
color: rgba(0,0,0,.45) !important;
-webkit-text-fill-color: rgba(0,0,0,.45) !important;
}
.vbd_wc_account_dashboard_extra_info {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
margin-left: -10px;
margin-right: -10px;
}
.vbd_wc_account_dashboard_extra_info > div {
width: 33%;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}
.vbd_wc_account_dashboard_extra_info a {
position: relative;
display: block;
padding: 24px 16px;
background: var(--bg-card);
border: 1px solid var(--border-soft);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
font-size: 13px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
color: #fff !important;
border-radius: var(--vbx-br);
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vbd_wc_account_dashboard_extra_info a:hover {
transform: translateY(-3px);
border-color: var(--primary-border);
box-shadow: 0 6px 16px rgba(0,0,0,.26);
}
.vbd_wc_account_dashboard_extra_info div a::before {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: 14px;
background: var(--primary-glow);
border: 1px solid var(--primary-border);
color: var(--primary-light);
font-size: 24px;
font-weight: 900;
font-family: "Font Awesome 5 Free";
line-height: 1;
text-align: center;
transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.vbd_wc_account_dashboard_extra_info a:hover::before {
background: var(--btn-gradient);
border-color: transparent;
box-shadow: var(--btn-shadow);
color: #fff;
}
.vbd_wc_account_dashboard_extra_info .orders-link a::before {
content: "";
}
.vbd_wc_account_dashboard_extra_info .downloads-link a::before {
content: "";
}
.vbd_wc_account_dashboard_extra_info .edit-address-link a::before {
content: "";
}
.vbd_wc_account_dashboard_extra_info .woo-wallet-link a::before {
content: "\f555";
}
.vbd_wc_account_dashboard_extra_info .edit-account-link a::before {
content: "";
}
.vbd_wc_account_dashboard_extra_info .customer-logout-link a::before {
content: "";
}
.vbd_wc_account_dashboard_extra_info .uap-link a::before {
content: "";
}
.vbd_wc_account_dashboard_extra_info .redeem-voucher-link a::before {
content: "\f06b";
}
.vbd_wc_account_dashboard_extra_info .communication-preferences-link a::before {
content: "\f086";
}
body:not(.logged-in) div#customer_login {
margin-bottom: 50px;
}
.vbd_wc_login_register_tabs {
display: flex;
flex-flow: row;
justify-content: center;
gap: 10px;
margin: 50px auto 0;
}
.vbd_wc_login_register_tabs > span {
display: block;
width: 120px;
height: 42px;
background: #e5e5e5;
color: #000;
font-size: 14px;
text-transform: uppercase;
line-height: 42px;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all .3s ease;
}
.vbd_wc_login_register_tabs > span:hover,
.vbd_wc_login_register_tabs > span.active {
background: var(--primary) !important;
color: #fff !important ;
}
body:not(.logged-in) div#customer_login .u-column2.col-2 > a {
display: block;
}
body:not(.logged-in) div#customer_login > div:not(.active) {
display: none;
}
body:not(.logged-in) div#customer_login button {
width: 100%;
}
.woocommerce-LostPassword.lost_password {
text-align: right;
margin-bottom: 0 !important;
}
.woocommerce-notices-wrapper ul[role] {
margin-top: 30px;
padding: 15px 20px;
border-radius: 5px;
}
.woocommerce-notices-wrapper .woocommerce-message[role] .button {
background: var(--primary-color);
color: #fff;
text-decoration: none;
font-size: 14px;
padding: 8px 15px;
display: inline-block;
line-height: 1;
border-radius: 3px;
}
.vbd_wc_account_dashboard_extra_info .dashboard-link {
display: none;
}
.woocommerce-cart-form__contents {
margin-bottom: 0;
}
form.woocommerce-cart-form tbody tr td.actions {
padding-left: 0;
padding-right: 0;
border: none;
padding-bottom: 5px;
padding-top: 18px;
}
.vbd_wc_cart_coupon_wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.vbd_wc_cart_coupon_wrap input#coupon_code {
margin-bottom: 0;
height: 45px;
border-radius: 3px;
padding: 0 15px;
border: 2px solid #e5e5e5 !important;
font-size: 15px;
}
.vbd_wc_cart_coupon_wrap input#coupon_code:focus {
border-color: var(--primary-color) !important;
}
.cart-collaterals th {
padding-left: 0;
}
.cart-collaterals td {
text-align: right !important;
padding-right: 0;
}
ul.wc_payment_methods li input[type="radio"] {
position: relative;
top: 2px;
}
.single_variation_wrap .woocommerce-variation.single_variation {
display: none !important;
position: relative;
top: -10px;
}
.woocommerce-notices-wrapper + .woocommerce-form-login-toggle {
margin-top: 20px;
}
.woocommerce-form-login-toggle .woocommerce-info {
background: transparent !important;
font-weight: 600;
}
.woocommerce-form-login-toggle .woocommerce-info a {
color: var(--primary);
font-weight: 600;
}
.woocommerce-form-login-toggle .woocommerce-info a:hover {
color: #000;
}
.woocommerce-form-login-toggle + .woocommerce-form.woocommerce-form-login.login {
}
.woocommerce-form-coupon-toggle {
margin-top: 10px;
}
.woocommerce-form-coupon-toggle .woocommerce-info a:hover {
color: var(--primary-light);
}
.woocommerce-notices-wrapper .woocommerce-message[role] {
margin-top: 30px;
padding: 15px 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: row-reverse;
color: #fff;
}
.woocommerce-order:not(.wd-with-extra-content) {
margin: 0 auto;
max-width: 800px;
}
.woocommerce-thankyou-order-received {
margin-bottom: 30px;
padding: 3%;
width: 100%;
border: 2px dashed var(--primary);
border-radius: var(--wd-brd-radius);
color: var(--primary);
text-align: center;
font-weight: 600;
font-size: 22px;
line-height: 1.4;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li strong {
display: block;
margin-top: 10px;
color: #ffffff;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li + li {
border-left: 1px solid #e5e5e5;
}
.woocommerce-order-details__title {
text-transform: uppercase;
font-size: 22px;
margin-top: 60px;
}
.woocommerce-order-details th {
padding-left: 0;
padding-right: 0;
}
.woocommerce-order-details a {
color: #ffffff;
}
.woocommerce-order-details a:hover {
color: var(--link-color);
}
.woocommerce-order-details tr > * {
border-bottom: 1px solid rgba(255,255,255,.07);
}
.woocommerce-order-details tr td:first-child {
padding-left: 0;
}
.woocommerce-order-details tr td:last-child {
padding-right: 0;
}
.woocommerce-order-details .woocommerce-table__product-name .wc-item-meta {
margin-bottom: 0 !important;
margin-top: 5px;
}
.woocommerce-order-details .woocommerce-table__product-name .wc-item-meta li {
color: var(--text-body);
font-size: 12px;
display: flex;
}
.woocommerce-order-details .woocommerce-table__product-name .wc-item-meta li p {
margin: 0;
}
.vbd_wc_order_page_video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vbd_wc_order_page_video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
margin-top: 50px;
margin-bottom: 20px;
}
form.woocommerce-ResetPassword {
width: 500px;
max-width: 100%;
background: var(--bg-elevated);
padding: 40px !important;
border: 2px solid var(--primary);
border-radius: 8px;
margin: 40px auto;
color: #ffffff;
}
body:not(.woocommerce-shop) .woocommerce-result-count,
body:not(.woocommerce-shop) .woocommerce-ordering {
display: none !important;
}
form.woocommerce-form.woocommerce-form-login.login .woocommerce-form-login__rememberme {
display: none;
}
form.woocommerce-form.woocommerce-form-login.login a {
color: var(--link-color);
}
.post-type-archive-product .vbd_content_area {
padding-top: 0 !important;
}
body.woocommerce-account:not(.logged-in) .woocommerce-message {
justify-content: center;
}
body.woocommerce-account .woocommerce-error a {
color: #000;
}
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-error a:hover {
color: #fff;
}
.woocommerce-lost-password .woocommerce-message {
padding: 20px;
color: #fff;
border-radius: 6px;
margin-bottom: 20px;
}
.woocommerce-lost-password .entry-content {
color: #fff;
padding: 40px 0;
}
.woocommerce-cart .cart-empty.woocommerce-info {
padding: 20px;
color: #000;
background: transparent;
margin-bottom: 0;
}
.woocommerce-cart .return-to-shop {
padding: 0 20px 20px 20px;
}
.woocommerce-cart .return-to-shop .button {
display: inline-block;
color: #fff !important;
}
.woocommerce-cart .woocommerce-message {
max-width: calc(100% - 40px);
margin-left: 20px;
}
div#tab-description ul {
list-style: disc !important;
padding-left: 18px;
}
div#tab-description ol {
list-style: decimal !important;
padding-left: 18px;
}
.woocommerce-variation-availability {
display: none !important;
}
display: none !important;
}
.vbd_post_grid {
display: flex;
flex-flow: row wrap;
margin-left: -15px;
margin-right: -15px;
}
.vbd_post_item {
width: 33.33%;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30px;
}
.vbd_post_item_inner {
background: #fff;
color: #000;
padding: 25px 30px 60px;
border-radius: 5px;
height: 100%;
position: relative;
overflow: hidden;
}
.vbd_post_item_inner a {
color: #000;
transition: all .3s ease-in-out .0s;
}
.vbd_post_item_thumb {
position: relative;
margin-left: -30px;
margin-right: -30px;
margin-top: -30px;
border-radius: 5px 5px 0 0;
}
.vbd_post_item_thumb img {
height: 140px;
object-fit: cover;
}
.vbd_post_item_thumb .vbd_post_item_cat {
position: absolute;
top: 15px;
right: 15px;
background: var(--text-muted);
color: #fff;
font-size: 12px;
padding: 8px 12px;
line-height: 1;
border-radius: 50px;
text-transform: uppercase;
}
.vbd_post_item_author_avatar img {
border-radius: 50% !important;
}
.vbd_post_item_author_avatar {
margin-top: -37px;
z-index: 1;
position: relative;
margin-bottom: 8px;
}
.vbd_post_item_inner a:hover {
color: var(--primary-color);
}
.vbd_post_item_excerpt {
color: var(--text-muted);
font-size: 14px;
}
.vbd_post_item_readmore {
margin-top: 20px;
}
.vbd_post_item_readmore a {
color: #444;
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
}
.vbd_post_item_footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-top: 1px solid #e5e5e5;
padding: 10px 30px;
}
.vbd_post_item_footer ul {
margin: 0;
padding: 0;
list-style: none;
}
.vbd_post_item_footer ul li {
display: inline-block;
color: var(--text-muted);
font-size: 12px;
text-transform: capitalize;
position: relative;
margin-right: 15px;
}
.vbd_post_item_footer ul li:not(:last-child)::after {
content: "";
background: var(--text-muted);
width: 4px;
height: 4px;
position: absolute;
right: -10px;
top: 8px;
border-radius: 50%;
}
.vbd_navigation ul {
padding: 0;
text-align: center;
margin: 0;
}
.vbd_navigation {
width: 100%;
padding: 0 15px;
}
.vbd_navigation ul li {
display: inline-block;
}
.vbd_navigation ul li a {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease-in-out 0s;
}
.vbd_navigation ul li.active a,
.vbd_navigation ul li a:hover {
background: var(--primary-color);
color: #fff;
}
.blog .vbd_main_content {
padding-top: 40px;
padding-bottom: 40px;
}
.vbd_single_post_content_area {
width: 70%;
padding: 0 15px;
margin-top: 25px;
margin-bottom: 30px;
}
.vbd_single_post_sidebar {
width: 30%;
padding: 0 15px;
}
.vbd_single_post_title {
font-size: 28px;
text-align: center;
}
ul.vbd_single_post_meta {
display: block;
margin-bottom: 20px;
text-align: center;
}
ul.vbd_single_post_meta li {
display: inline-block;
padding-right: 8px;
margin-right: 8px;
border-right: 1px solid #ddd;
color: #444;
}
ul.vbd_single_post_meta li:last-child {
padding-right: 0;
margin-right: 0 !important;
border-right: none;
}
ul.vbd_single_post_meta li a {
color: #444;
}
.archive .vbd_content_area,
.search .vbd_content_area {
padding-top: 40px;
margin-bottom: 40px;
}
.vbd_single_post_content_area nav.navigation {
margin: 30px 0;
}
.vbd_single_post_content_area nav.navigation a,
#comments input[type="submit"]{
background: var(--primary);
color: #fff;
line-height: 1.5;
padding: 10px 20px;
border: none !important;
border-radius: 3px;
cursor: pointer;
}
.vbd_single_post_content_area nav.navigation a:hover,
#comments input[type="submit"]:hover {
background: var(--primary-hover);
}
.vbd_404_content_area {
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
}
.vbd_404_button a {
display: inline-block;
margin-top: 30px;
}
.vbd_404 {
font-size: 80px;
font-weight: 800;
line-height: 1;
margin-bottom: 20px;
}
.vbd_content_outer {
padding-top: 64px;
display: flex;
flex-flow: column;
align-items: inherit;
min-height: 100vh;
justify-content: space-between;
overflow-x: hidden;
}
.elementor-tab-title.elementor-active {
background: var(--primary) !important;
}
.elementor-tab-title.elementor-active * {
color: #fff !important;
}
.uap-login-form-wrap {
background: #fff;
padding: 20px !important;
border-radius: 6px;
margin: 50px auto!important;
width: 550px !important;
}
.uap-login-template-13 .uap-form-links-reg a,
.uap-register-14 .uap-login-link a {
background: #333 !important;
color: #fff !important;
}
.uap-register-14 .uap-login-link,
.uap-register-form.uap-register-14 .uap-login-link,
.uap-login-template-13 form#uap_login_form .uap-form-links-reg {
background: transparent !important;
padding: 0 !important;
border: none !important;
}
.uap-register-14 .uap-login-link a,
.uap-login-template-13 .uap-form-links-reg a{
padding: 16px 20px;
width: 100%;
display: block;
border-radius: 4px;
border-bottom: 2px solid #000 !important;
overflow: hidden;
}
.uap-register-14 .uap-login-link a:hover,
.uap-login-template-13 .uap-form-links-reg a:hover {
background: var(--primary) !important;
border-color: var(--primary) !important;
color: #fff !important;
}
.uap-login-template-13 .uap-form-submit input,
.uap-register-14 .uap-submit-form input{
background: var(--primary) !important;
}
.uap-login-template-13 .uap-form-submit input:hover,
.uap-register-14 .uap-submit-form input:hover{
background: var(--primary-hover) !important;
}
.uap-login-form-wrap a {
color: #000 !important;
}
.uap-login-form-wrap a:hover {
color: var(--primary) !important;
}
.uap-register-form {
background: #fff;
padding: 25px 25px 30px!important;
border-radius: 6px;
max-width: 1000px !important;
margin: 0px auto !important;
}
.uap-register-form form {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin-left: -5px;
margin-right: -5px;
}
.uap-register-form form > * {
width: 100%;
}
.uap-register-form form .uap-form-text,
.uap-register-form form .uap-form-password {
width: 50% !important;
}
.uap-register-row-left, .uap-register-row-right {
padding: 0 5px;
}
.uap-register-form form .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 40px;
margin-top: -8px;
}
.uap-register-form form .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px;
}
.uap-upload-image-wrapper {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
position: relative;
padding-bottom: 40px;
}
.uap-avatar-trigger .uap-upload-avatar {
position: absolute;
bottom: 0;
left: 5px;
}
.uap-upload-image-remove-bttn {
display: block;
width: 120px;
position: absolute;
bottom: 0;
left: 0;
margin-left: 0;
}
.uap-user-page-wrapper {
background: #fff;
width: 1240px;
max-width: 100%;
margin: 50px auto;
border-radius: 6px;
padding: 20px !important;
}
.uap-user-page-top-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
}
.uap-user-page-top-wrapper .uap-account-page-top-mess {
padding: 10px 0 0 !important;
}
.uap-user-page-top-wrapper .uap-top-rank {
padding-left: 0 !important;
}
.uap-user-page-top-wrapper .uap-stats-label {
margin-bottom: 5px;
}
.uap-user-page-wrapper .uap-user-page-top-wrapper .uap-right-side {
float: right !important;
margin: 0 !important;
}
.uap-ap-menu {
background: var(--primary)20;
border: none !important;
}
.uap-user-page-wrapper .uap-ap-menu ul li {
margin: 0 !important;
}
.uap-user-page-wrapper .uap-ap-menu ul li a {
color: #000 !important;
font-weight: 600;
padding: 10px 20px;
}
.uap-user-page-wrapper .uap-ap-menu ul li:hover a {
color: #fff !important;
}
.uap-user-page-wrapper .uap-ap-theme-4 .uap-ap-menu .uap-ap-menu-item:hover,
.uap-user-page-wrapper .uap-ap-theme-4 .uap-ap-menu .uap-ap-menu-tab-item:hover,
.uap-user-page-wrapper .uap-ap-theme-4 .uap-ap-menu .uap-ap-submenu-item:hover .uap-ap-menu-tab-item {
background-color: var(--primary) !important;
}
.uap-ap-theme-4 .uap-ap-menu .uap-ap-submenu-item:hover>.uap-public-ap-menu-subtabs {
margin-top: 50px;
}
.uap-user-page-wrapper .uap-ap-theme-4 .uap-ap-menu .uap-ap-menu-item-selected,
.uap-user-page-wrapper .uap-ap-theme-4 .uap-ap-menu .uap-ap-menu-tab-item-selected{
background-color: var(--primary) !important;
}
.uap-ap-theme-4 .uap-ap-menu .uap-ap-menu-item-selected a,
.uap-ap-theme-4 .uap-ap-menu .uap-ap-menu-tab-item-selected a{
color: #fff !important;
}
.uap-ap-theme-4 .uap-ap-menu .uap-ap-submenu-item .uap-public-ap-menu-subtabs {
background-color: rgba(240,16,16,.12) !important;
}
.uap-user-page-wrapper .uap-ap-theme-4 .uap-ap-menu .uap-public-ap-menu-subtabs .uap-ap-menu-item a {
color: #000!important;
padding: 10px;
width: 100%;
}
.uap-ap-theme-4 .uap-ap-menu .uap-public-ap-menu-subtabs .uap-ap-menu-item:hover a {
color: #fff !important;
}
.uap-user-page-content {
padding: 0 !important;
margin-bottom: 0 !important;
}
.uap-warning-box,
.uap-user-page-content div>h3 {
margin: 0 0 20px;
}
.uap-warning-box a {
color: var(--primary) !important;
font-weight: 600;
}
.uap-warning-box a:hover {
color: #000 !important;
}
.uap-ap-wrap > h3 {
font-size: 22px;
color: #000;
}
.cropControls {
padding: 17px 12px 13px !important;
}
.cropControls i:hover {
background-color: transparent !important;
}
.uap-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
margin: 0 -8px!important;
}
.uap-row>[class*=uapcol-] {
padding: 0 8px !important;
margin-bottom: 16px !important;
}
.uap-account-no-box {
height: 100%;
}
.uap-profile-box-content .uap-col-xs-12 {
padding: 5px;
}
.uap-account-summary-month-data {
padding-left: 10px !important;
padding-right: 10px !important;
}
.uap-account-summary-graph-content {
min-height: 200px !important;
}
.uap-account-summary-summary-content .uap-row > div {
padding: 15px 0 0 !important;
}
.uap-account-summary-graph-col,
.uap-account-summary-month-col {
min-width: 300px;
padding: 0 5px !important;
}
.uap-account-summary-month-data .uap-account-summary-month-content {
padding: 20px 0 !important;
}
.uap-account-summary-graph-title,
.uap-account-summary-month-title {
color: var(--primary) !important;
}
.uap-account-summary-month {
border: 1px solid #e8e8e8 !important;
background-color: #fafafa !important;
margin-bottom: 15px;
border-radius: 5px !important;
}
.uap-user-page-content .uap-register-form {
margin-right: auto !important;
margin-left: inherit !important;
padding: 0 !important;
}
.uap-user-page-content .uap-change-password-field-wrap > *:not(.button) {
display: block !important;
width: 1024px;
text-align: left;
}
.uap-user-page-content .uap-register-form form .uap-form-text,
.uap-user-page-content .uap-register-form form .uap-form-password {
width: 100% !important;
}
.uap-profile-box-content .uap-col-xs-6 {
padding: 0 5px;
}
.uap-profile-box-wrapper .uap-col-xs-8 {
padding: 0 5px;
}
.uap-user-page-content .uap-profile-box-content .uap-col-xs-8 a {
color: var(--primary) !important;
}
.uap-user-page-content .uap-profile-box-content .uap-col-xs-8 a:hover {
color: #000 !important;
}
.uap-banners-wrapp {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.uap-banners-wrapp h3 {
margin: 0 0 15px!important;
width: 100%;
}
.uap-achievements-title,
.uap-banners-wrapp .uap-banner .uap-banner-title {
background: var(--primary) !important;
padding: 10px !important;
}
.uap-banners-wrapp .uap-banner .uap-banner-copypaste textarea {
min-height: 100px;
padding: 10px !important;
}
table.uap-account-table {
margin: 10px 0 !important;
}
.uap-profile-box-content .uap-account-table a {
color: #000;
}
.uap-profile-box-content .uap-account-table a:hover {
color: var(--link-color);
}
body.page-id-160643 .entry-content p {
width: 680px;
max-width: 100%;
margin: 20px auto 0 !important;
}
.uap-pass-form-wrap {
background: #fff;
padding: 20px !important;
border-radius: 6px;
margin: 50px auto !important;
width: 550px !important;
max-width: 100% !important;
}
.uap-login-template-13 .uap-form-line-fr {
box-sizing: border-box !important;
}
.uap-login-error {
width: 1240px;
max-width: 100%;
margin: -40px auto 20px;
color: #ff0000;
text-align: center;
}
.woocommerce-MyAccount-content .uap-user-page-wrapper {
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-MyAccount-content .uap-register-form {
margin: 0 !important;
padding: 0 !important;
}
.vbd-become-affiliate-btn .elementor-button {
font-size: 18px !important;
font-weight: 400 !important;
text-transform: inherit !important;
padding: 13px 25px !important;
border-radius: 5px !important;
}
.vbd_footer_widgets {
background-color: var(--bg-deep);
padding-top: 20px;
padding-bottom: 0;
}
.vbd_footer_widget_col {
width: 33.33%;
padding: 0 15px;
margin-bottom: 20px;
}
.vbd_footer_widget_col_inner {
/*background: #fff;
border-radius: 10px;
height: 100%;
box-shadow: 0px 0px 10px 0px rgb(255 255 255 / 50%);*/
padding: 10px 20px;
}
.vbd_footer_widgets .widget-title {
font-size: 19px;
text-transform: uppercase;
font-weight: 600;
color: #fff;
margin-bottom: 25px;
}
section#custom_html-3 .widget-title {
text-align: left;
}
.vbd_footer_sicon {
margin: 0;
list-style: none;
padding: 0;
text-align: center;
}
.vbd_footer_sicon li {
display: inline-block;
}
.vbd_footer_sicon li a {
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
line-height: 50px;
border-radius: 5px;
font-size: 20px;
background: var(--bg-body);
color: #fff;
margin: 0 2px 7px;
transition: all .3s ease-in-out .0s;
}
.vbd_footer_sicon li.vbd_facebook a {
background: #3b5998;
}
.vbd_footer_sicon li.whatsapp a {
background: #2CD46B;
}
.vbd_footer_sicon li.youtube a {
background: #cd201f;
}
.vbd_footer_sicon li.telegram a {
background: #2ca5e0;
}
.vbd_footer_sicon li a:hover {
opacity: .7;
}
.vbd_footer_gplay img {
max-width: 150px;
}
.vbd_footer_gplay {
text-align: center;
margin-top: 15px;
}
.vbd_footer_widget_col_inner .widget {
margin-bottom: 0;
}
.vbd_footer_cinfo {
margin-bottom: 0;
}
.vbd_footer_cinfo a {
color: #fff;
text-decoration: none;
font-size: 14px;
position: relative;
padding-left: 23px;
transition: all .3s ease-in-out .0s;
}
.vbd_footer_cinfo a:hover {
color: var(--primary-color);
}
.vbd_footer_cinfo a i {
position: absolute;
left: 23px;
top: 21px;
color: var(--primary-color);
}
#menu-footer-information-menu {
margin-bottom: 0;
}
#menu-footer-information-menu > li > a {
font-size: 14px;
text-decoration: none;
color: #fff;
transition: all .3s ease-in-out .0s;
padding-left: 22px;
}
#menu-footer-information-menu > li > a:hover {
color: var(--primary-color);
}
#menu-footer-information-menu > li > a::before {
content: "";
font-family: "Font Awesome 5 Free";
font-weight: 600;
color: var(--primary);
width: 22px;
display: inline-block;
margin-left: -22px;
position: relative;
top: 1px;
}
.vbd_footer_copyarea {
background-color: var(--bg-elevated);
padding: 10px 0;
}
.vbd_footer_copyarea_text {
width: 50%;
padding: 0 15px;
}
.vbd_footer_copyarea_pay_img {
width: 50%;
padding: 0 15px;
text-align: center;
}
.vbd_footer_copyarea .vbd_row {
align-items: center;
}
.vbd_footer_copyarea_text p {
margin: 0;
color: #fff;
font-size: 12px;
text-align: center;
font-family: var(--font-lato);
}
.vbd_footer_copyarea_text a {
color: #fff;
text-decoration: none;
transition: all .3s ease-in-out .0s;
}
.vbd_footer_copyarea_text a:hover {
color: var(--primary-color);
}
.vbd_footer_copyarea_pay_img img {
margin-bottom: -8px;
max-width: 80%;
}
.sg-popup-builder-content input[type="submit"] {
background: var(--primary);
color: #fff;
border: none;
font-size: 16px;
font-weight: 600;
padding: 10px 20px 12px;
cursor: pointer;
}
.woo-wallet-sidebar ul li.card {
background: var(--bg-surface) !important;
}
.woo-wallet-my-wallet-container .woo-wallet-sidebar{
background: var(--bg-elevated) !important;
}
/* My Wallet header title সাদা (ধূসর হয়ে যাচ্ছিল) */
.woo-wallet-my-wallet-container h1,
.woo-wallet-my-wallet-container h2,
.woo-wallet-my-wallet-container h3,
.woocommerce-MyAccount-content > h1,
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content .woo-wallet-header h2,
.woocommerce-MyAccount-content .entry-title{
color: #ffffff !important;
}
.daterangepicker {
background-color: var(--bg-elevated) !important;
}
.daterangepicker .calendar-table{
background-color: var(--bg-surface) !important;
}
@media only screen and (max-width: 1200px) {
.vbd_header_menu .menu > li > a {
padding: 10px;
}
}
@media only screen and (max-width:1024px){
.vbd_header_mobile_menu_trigger {
color: var(--primary-color);
}
.vbd_header_menu .menu-main-menu-container {
display: none;
}
.vbd_header_mobile_menu {
display: block;
}
.vbd_header_mobile_menu_target a {
color: #ffffff !important;
font-size: 15px;
font-weight: 700;
display: block;
padding: 8px 10px;
}
.vbd_header_mobile_menu_target .menu {
margin: 0;
}
.vbd_header_mobile_menu_target .current-menu-item a,
.vbd_header_mobile_menu_target a:hover {
background: var(--primary-color);
color: #fff !important;
}
.vbd_header_menu {
width: 60px;
text-align: left;
order: 1;
}
.vbd_header_logo {
order: 2;
width: calc(100% - 140px);
text-align: center;
}
.vbd_header_my_acount {
order: 3;
width: 80px;
}
.vbd_main_header {
padding: 12px 0;
}
.vbd_header_mobile_menu_trigger {
font-size: 22px;
}
.vbd_header_mobile_menu_target {
margin-top: 12px;
}
.vbd_header_mobile_menu_trigger.active .fa-bars::before {
content: "";
}
nav.woocommerce-MyAccount-navigation::before {
font-size: 16px;
}
.woocommerce-MyAccount-content .woocommerce-Addresses > div {
width: 100%;
}
table thead th {
font-size: 15px;
}
table td {
font-size: 14px;
}
fieldset {
padding: 20px 25px;
}
fieldset legend {
font-size: 18px;
}
.woo-wallet-sidebar ul li {
margin: 15px !important;
}
.woo-wallet-sidebar ul li.card a {
padding: 10px !important;
}
.woocommerce-cart .entry-content .woocommerce .woocommerce-cart-form,
.woocommerce-cart .entry-content .woocommerce .cart-collaterals {
width: 100% !important;
}
.vbd_wc_account_dashboard_extra_info a {
padding: 15px 10px 10px;
font-size: 13px;
}
.vbd_wc_account_dashboard_extra_info div a::before {
width: 50px;
height: 50px;
font-size: 22px;
}
.woocommerce .products.columns-6 > .product {
width: 25%;
}
.vbd_post_item {
width: 50%;
}
.single-product div.product .summary.entry-summary {
padding: 22px 18px;
}
.single-product div.product .summary.entry-summary .product_title.entry-title {
margin-bottom: 10px;
font-size: 20px;
}
.vbd_single_post_title {
font-size: 24px;
}
.vbd_single_post_content h2 {
font-size: 20px;
}
.vbd_single_post_content h3 {
font-size: 16px;
}
.vbd_post_item_inner {
padding: 25px 20px 55px;
}
.vbd_post_item_footer {
padding: 10px 20px;
}
.vbd_single_post_content_area {
width: 65%;
}
.vbd_single_post_sidebar {
width: 35%;
}
.vbd_post_grid_shortcode .vbd_post_item {
width: 50%;
}
.woocommerce-MyAccount-content .uapcol-md-4 {
width: 50% !important;
}
.woocommerce-MyAccount-content .uap-account-summary-month-data {
width: 100%;
}
.woocommerce-MyAccount-content .uap-account-summary-graph-col {
width: 100% !important;
}
.woocommerce-MyAccount-content .uap-banner {
width: 100% !important;
}
}
@media only screen and (max-width:767px){
nav.woocommerce-MyAccount-navigation {
width: 100%;
border-right: none;
border-bottom: 1px solid #0000001b;
}
.woocommerce-MyAccount-content {
width: 100%;
padding: 20px;
}
.vbd_footer_widget_col {
width: 100%;
}
.vbd_footer_copyarea_text {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.vbd_footer_copyarea_pay_img {
width: 100%;
margin-bottom: 8px;
}
.vbd_footer_copyarea_pay_img img {
max-width: 60%;
}
.woocommerce .products.columns-6 > .product {
width: 33.33%;
}
.vbd_woocommerce_shop_page_title {
font-size: 24px;
margin-bottom: 20px;
}
.vbd_woocommerce_shop_page_header_area {
padding-top: 35px;
}
.vbd_woocommerce_content .vbd_content_area .woocommerce-result-count {
width: 100%;
margin-bottom: 2px;
}
.vbd_woocommerce_content .vbd_content_area .woocommerce-ordering {
text-align: left;
width: 100%;
margin-bottom: 8px;
}
.vbd_woocommerce_content .vbd_content_area .woocommerce-ordering select.orderby {
margin-left: -4.5px;
}
.woocommerce-loop-product__title {
font-size: 11px;
padding: 5px;
font-weight:700;
}
.vbd_product_onsale, .vbd_sold_out {
width: 40px;
height: 40px;
font-size: 10px;
}
.woocommerce .products.columns-6 > .product {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
}
.woocommerce .products {
margin-left: -5px;
margin-right: -5px;
}
.vbd_post_item {
width: 100%;
}
.single-product div.product .vbd_single_product_images {
width: 100%;
margin-bottom: 16px;
position: static;
}
.single-product div.product {
flex-direction: column;
gap: 0;
}
.single-product div.product .vbd_single_product_images img {
width: 100%;
max-height: 240px;
object-fit: cover;
}
.single-product div.product .summary.entry-summary {
width: 100%;
margin-left: 0;
padding: 20px 16px;
}
margin-left: auto;
}
.table-responsive-label {
display: inline-block;
}
.shop_table_responsive {
display: block;
}
.shop_table_responsive :is(thead, th) {
display: none;
}
.shop_table_responsive :is(tbody, tfoot, tr) {
display: block;
}
.shop_table_responsive tr {
position: relative;
margin-bottom: 40px;
padding-bottom: 10px;
border-bottom: 1px solid #0000001b;
}
.shop_table_responsive tr:last-child {
margin-bottom: 0
}
.shop_table_responsive td {
display: block;
margin-bottom: 8px;
padding: 0 0 8px;
border-bottom: none;
text-align: right
}
.shop_table_responsive td:before {
content: attr(data-title);
float: left;
padding-top: 3px;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
}
.shop_table_responsive td:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents tr.cart_item {
margin-bottom: 25px;
padding-bottom: 25px;
padding-left: 115px;
min-height: 136px;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 5px;
padding: 0;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td>* {
margin-bottom: 5px
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td:before {
flex: 1 1 auto;
margin-bottom: 5px;
padding-top: 0;
text-align: left;
font-size: 11px;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td:not(:last-child) {
border-bottom: 1px dashed #0000001b;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td.product-thumbnail {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
margin-bottom: 0;
padding-bottom: 0;
max-height: 115px;
border-bottom: none;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td.product-thumbnail img {
min-width: 100px;
max-width: 100px;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td.product-remove {
position: absolute;
top: -7px;
right: -7px;
z-index: 1;
margin-bottom: 0;
padding-bottom: 0;
border: none;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td.product-name {
margin-bottom: 0;
padding-bottom: 0;
padding-right: 20px;
border-bottom: none;
text-align: left;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td.product-name>:is(a, label, span) {
margin-bottom: 10px;
padding-right: 5px;
}
form.woocommerce-cart-form .woocommerce-cart-form__contents td.product-name:before {
content: none;
}
tr.woocommerce-cart-form__cart-item.cart_item td.product-quantity .quantity {
height: 30px !important;
width: 90px !important;
}
tr.woocommerce-cart-form__cart-item.cart_item td.product-quantity .quantity .qty {
width: 30px !important;
min-width: 30px !important;
}
.vbd_single_post_content_area,
.vbd_single_post_sidebar {
width: 100%;
}
.vbd_single_post_sidebar_inner {
margin-top: 15px;
}
.vbd_post_grid_shortcode .vbd_post_item {
width: 100%;
text-align: center;
}
.woocommerce-MyAccount-content,
nav.woocommerce-MyAccount-navigation {
padding: 10px !important;
}
body:not(.logged-in) div#customer_login > div {
position: relative;
width: 500px;
max-width: 100%;
background: var(--bg-elevated);
padding: 20px !important;
margin-left: auto;
margin-right: auto;
border: 2px solid var(--primary);
border-radius: 8px;
}
.woocommerce-form-login__rememberme {
position: absolute;
bottom: 15px;
left: 20px;
}
.uap-ap-wrap .uap-row:first-child .uapcol-md-4 {
width: 50% !important;
}
.uap-banner {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 30px !important;
margin: 0 0 30px !important;
}
.vbd-affiliate-register-col .uap-register-form {
margin: 0 !important;
padding-left: 5px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-right: 5px !important;
}
.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details > li {
width: 100%;
text-align: center;
padding-left: 20px;
padding-right: 20px;
color: #ffffff;
border-left: none !important;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 15px;
margin-bottom: 15px;
}
.woocommerce-orders-table tbody .woocommerce-orders-table__row + .woocommerce-orders-table__row {
margin-top: 40px;
}
.woocommerce-orders-table tbody .woocommerce-orders-table__row {
padding-bottom: 0;
}
}
@media only screen and (max-width:600px){
.woo-wallet-sidebar ul li.card a {
padding: 20px !important;
}
.vbd_wc_account_dashboard_extra_info > div{
width: 50% !important;
}
.vbd_wc_cart_coupon_wrap {
flex-flow: row wrap;
}
form.woocommerce-cart-form .coupon {
width: 100%;
margin-bottom: 10px;
}
.vbd_wc_cart_coupon_wrap input#coupon_code {
width: 100%;
margin-bottom: 10px;
}
.vbd_wc_cart_coupon_wrap button {
width: 100%;
}
}
@media only screen and (max-width:570px){
.uap-user-page-top-wrapper .uap-right-side {
border-top: 1px solid #eee;
padding-top: 10px;
}
}
@media only screen and (max-width:480px){
.vbd_wc_account_dashboard_extra_info > div{
width: 100% !important;
}
.uap-ap-wrap .uap-row:first-child .uapcol-md-4 {
width: 100% !important;
}
.uap-register-form form .uap-form-text,
.uap-register-form form .uap-form-password {
width: 100% !important;
}
}
/* Checkout USD badge */
.vbx-co-usd {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-left: 5px;
vertical-align: middle;
}
/* ── Footer & Global ── */
/* Product card container */
.woocommerce ul.products li.product .vbd_product_inner {
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
border-radius: 10px;
background: var(--product-card-bg);
}
/* Hover lift effect */
.woocommerce ul.products li.product .vbd_product_inner:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
/* Image zoom */
.woocommerce ul.products li.product .vbd_product_inner img {
transition: transform 0.5s ease;
}
.woocommerce ul.products li.product .vbd_product_inner:hover img {
transform: scale(1.04);
}
/* Gradient glow bar */
.woocommerce ul.products li.product .vbd_product_inner::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), #ff0000, var(--primary));
opacity: 0;
transform: scaleX(0);
transition: transform 0.4s ease, opacity 0.4s ease;
}
.woocommerce ul.products li.product .vbd_product_inner:hover::after {
opacity: 1;
transform: scaleX(1);
}
/* Title hover color */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
transition: color 0.3s ease;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product .vbd_product_inner:hover .woocommerce-loop-product__title {
color: var(--primary);
}
/* parent li.product এ কোনো বাইরের glow/shadow/border নয় — শুধু .vbd_product_inner এ shadow।
এটাই Netflix-টাইপ বাইরের glow দূর করে, hot-card এর মতো clean রাখে। */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product:hover {
box-shadow: none !important;
outline: none !important;
background: transparent !important;
}
/* ===== Footer (scoped) ===== */
/* wrapper */
.vbx-footer-pro{
background: var(--bg-footer);
border-top: 1px solid var(--border-subtle);
color: var(--vbx-text);
font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.vbx-wrap{max-width:1260px;width:100%;margin:0 auto;padding:40px 20px 8px}
/* grid */
.vbx-grid{
display:grid; gap:22px; margin-bottom:18px;
grid-template-columns: repeat(12,1fr);
}
.vbx-col{
grid-column: span 12;
padding:16px;
}
@media (min-width:740px){
.vbx-col{grid-column: span 4}
}
.vbx-h{
margin:0 0 20px; font-size:20px; letter-spacing:.09em;
text-transform:uppercase; color:#fff;
}
/* social buttons */
.vbx-social{display:flex; gap:10px; align-items:center; margin-bottom:12px}
.vbx-sbtn{
--s:40px; width:var(--s); height:var(--s);
display:inline-flex; align-items:center; justify-content:center;
border-radius:999px; color:#fff; text-decoration:none;
background: var(--border-subtle);
border:1px solid var(--border-soft);
transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.vbx-sbtn:hover{
transform: translateY(-2px);
background: var(--primary-glow);
box-shadow: 0 10px 26px -12px var(--primary-border);
}
/* store badge */
.vbx-storebtn img{
height:45px; width:auto; display:block;
border-radius:10px; margin-top:8px;
border:1px solid var(--border-soft); background:var(--bg-deep);
filter: contrast(1.05);
}
/* pill links */
.vbx-pill{
display:flex; gap:12px; align-items:center;
background: var(--bg-elevated);
border:1px solid rgba(255,255,255,.07);
border-radius: 14px;
padding:0px 0px; margin:10px 0;
color: var(--vbx-text); text-decoration:none;
position:relative; overflow:hidden;
transition: transform .18s ease, box-shadow .28s ease, border-color .28s ease;
}
.vbx-pill:hover{
transform: translateY(-2px);
border-color: var(--primary-border);
box-shadow: 0 12px 30px -16px rgba(240,16,16,.5);
}
.vbx-pill span:last-child{line-height:1.35}
/* icon box (no external icon font needed) */
.vbx-ico{
width:34px; height:34px; flex:0 0 auto; border-radius:10px;
background: radial-gradient(120% 120% at 20% 15%, var(--primary-light), var(--primary) 55%, var(--primary-hover) 100%);
box-shadow: inset 0 0 0 1px var(--border-visible), 0 6px 14px -6px rgba(240,16,16,.6);
position:relative;
}
.vbx-ico::after{
content:""; position:absolute; inset:0;
mask: var(--m) center / 18px 18px no-repeat; -webkit-mask: var(--m) center / 18px 18px no-repeat;
background:var(--bg-deepest); mix-blend:screen; opacity:.95;
}
/* mask SVGs */
.vbx-ico--chat{ --m: url("data:image/svg+xml;utf8,"); }
.vbx-ico--call{ --m: url("data:image/svg+xml;utf8,"); }
.vbx-ico--mail{ --m: url("data:image/svg+xml;utf8,"); }
.vbx-ico--off { --m: url("data:image/svg+xml;utf8,"); }
.vbx-ico--star{ --m: url("data:image/svg+xml;utf8,"); }
.vbx-ico--refresh{ --m: url("data:image/svg+xml;utf8,"); }
.vbx-ico--shield{ --m: url("data:image/svg+xml;utf8,"); }
.vbx-ico--doc{ --m: url("data:image/svg+xml;utf8,"); }
/* payment badges */
.vbx-trust{
display:flex; gap:14px; flex-wrap:wrap;
justify-content:center; align-items:center; margin:14px 0 10px;
}
.vbx-trust img{
height:38px; width:auto; opacity:.88; filter:grayscale(30%);
transition: transform .22s ease, filter .22s ease;
}
.vbx-trust img:hover{ transform: translateY(-2px); filter:none }
/* bottom text */
.vbx-bottom{ text-align:center; color:#ffffff; font-size:13px; }
.vbx-note{ opacity:.9; font-size: 12px; margin-top:-15px }
/* ── Blog Grid (vbd_post_grid shortcode) ── */
@media (max-width: 900px) {
.vbx-blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
.vbx-blog-grid { grid-template-columns: 1fr !important; }
}
/* ── From Additional CSS (Customize) ── */
/* ── Header & Footer ── */
/* ── Additional CSS (from Customizer) ── */
body.single-post ul {
list-style: disc;
margin-left: 20px;
margin-bottom: 20px;
}
body.single-post ol {
list-style: Auto;
margin-left: 20px;
margin-bottom: 20px;
}
.swal2-confirm {
background-color: var(--primary) !important;
border-color: #e5e5e5 !important;
}
div.nsl-container[data-align="left"] {
text-align: center !important;
}
to {
transform: rotate(360deg);
}
}
.woocommerce-store-notice {
background-color: rgba(3,27,35,.9);
color: var(--link-color);
}
/* ── Header & Footer Fix ── */
.vbd_main_header {
background: var(--bg-header) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
border-bottom: 1px solid var(--border-subtle) !important;
box-shadow: 0 4px 24px rgba(0,0,0,.4) !important;
}
.vbd_container {
max-width: 1260px !important;
width: 100% !important;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
footer.vbx-footer-pro {
background: var(--bg-body) !important;
border-top: 1px solid var(--border-subtle) !important;
width: 100% !important;
}
footer.vbx-footer-pro .vbx-wrap {
max-width: 1260px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 40px 20px 8px !important;
box-sizing: border-box !important;
}
/* ── Mobile Fix ── */
@media (max-width: 1024px) {
/* Blog grid — 2 column */
.vbx-blog-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
}
@media (max-width: 580px) {
/* Blog grid — 1 column */
.vbx-blog-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.vbx-blog-img-wrap img {
height: 200px !important;
}
/* Header mobile — proper spacing */
.vbd_main_header .vbd_row {
min-height: 56px !important;
padding: 8px 0 !important;
}
.vbd_header_logo img {
max-width: 120px !important;
}
.vbd_header_mobile_menu_target {
background: var(--bg-body) !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
padding: 8px 0 !important;
}
.vbd_header_mobile_menu_target a {
padding: 10px 20px !important;
font-size: 14px !important;
border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.vbd_header_mobile_menu_trigger {
color: var(--primary-color) !important;
font-size: 22px !important;
}
/* Footer mobile */
footer.vbx-footer-pro .vbx-wrap {
padding: 30px 16px 8px !important;
}
}
/* ── Mobile Header Fix ── */
@media (max-width: 1024px) {
.vbd_main_header .vbd_container {
padding-left: 12px !important;
padding-right: 12px !important;
}
.vbd_main_header .vbd_row {
min-height: 60px !important;
padding: 0 !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
/* Hamburger — left */
.vbd_header_menu {
width: 44px !important;
min-width: 44px !important;
padding: 0 !important;
text-align: left !important;
order: 1 !important;
display: flex !important;
align-items: center !important;
}
.vbd_header_mobile_menu {
display: flex !important;
align-items: center !important;
}
.vbd_header_mobile_menu_trigger {
font-size: 24px !important;
color: var(--primary-color) !important;
cursor: pointer !important;
line-height: 1 !important;
}
/* Logo — center */
.vbd_header_logo {
order: 2 !important;
width: auto !important;
flex: 1 !important;
text-align: center !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
}
.vbd_header_logo img {
max-width: 130px !important;
margin: 0 auto !important;
}
/* Profile — right */
.vbd_header_my_acount {
order: 3 !important;
width: 44px !important;
min-width: 44px !important;
padding: 0 !important;
text-align: right !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.vbd_header_my_acount a {
width: 38px !important;
height: 38px !important;
padding: 6px !important;
}
/* Mobile dropdown menu */
.vbd_header_mobile_menu_target {
display: none;
background: var(--bg-body) !important;
border-top: 1px solid rgba(255,255,255,.07) !important;
padding: 6px 0 12px !important;
}
.vbd_header_mobile_menu_target.active {
display: block !important;
}
.vbd_header_mobile_menu_target a {
color: #fff !important;
font-size: 14px !important;
font-weight: 600 !important;
display: block !important;
padding: 10px 20px !important;
border-bottom: 1px solid rgba(255,255,255,.04) !important;
text-decoration: none !important;
}
.vbd_header_mobile_menu_target a:hover,
.vbd_header_mobile_menu_target .current-menu-item a {
color: var(--primary-color) !important;
background: rgba(240,16,16,.06) !important;
}
}
@media (max-width: 1024px) {
.vbd_content_outer {
padding-top: 60px !important;
}
}
/* Link colors */
.woocommerce-loop-product__link,
.vbd_content_area a:not(.button):not([class*="btn"]) {
color: var(--link-color);
transition: color .2s;
}
.woocommerce-loop-product__link:hover,
.vbd_content_area a:not(.button):not([class*="btn"]):hover {
color: var(--link-hover);
}
/* Header nav links */
.vbd_main_header a {
color: var(--text-primary);
transition: color .2s;
}
.vbd_main_header a:hover,
.vbd_main_header .current-menu-item > a {
color: var(--primary);
}
/* Muted secondary text — global */
.woocommerce small,
.woocommerce-product-details__short-description,
.product-short-description,
.vbx-hero-desc,
.posted_in,
.tagged_as {
color: var(--text-muted) !important;
}
/* ============================================
QUANTITY BUTTON — PREMIUM STYLE
Subtle dark with steel-blue accent on hover
============================================ */
button.minus,
button.plus,
.quantity button.minus,
.quantity button.plus,
.vbx-order-summary .quantity button.minus,
.vbx-order-summary .quantity button.plus,
.woocommerce .quantity button.minus,
.woocommerce .quantity button.plus {
background: #162030 !important;
background-image: none !important;
box-shadow: none !important;
transform: none !important;
border-radius: 0 !important;
color: #7A90A8 !important;
font-size: 18px !important;
font-weight: 300 !important;
width: 40px !important;
height: 100% !important;
border: none !important;
cursor: pointer !important;
transition: background .18s, color .18s !important;
line-height: 1 !important;
}
button.minus:hover,
button.plus:hover,
.quantity button.minus:hover,
.quantity button.plus:hover,
.vbx-order-summary .quantity button.minus:hover,
.vbx-order-summary .quantity button.plus:hover,
.woocommerce .quantity button.minus:hover,
.woocommerce .quantity button.plus:hover {
background: #1E3448 !important;
background-image: none !important;
box-shadow: none !important;
transform: none !important;
color: #ffffff !important;
}
/* Quantity wrapper — premium pill */
.vbx-order-summary .quantity,
.woocommerce .vbx-order-summary .quantity {
background: #0d1e2e !important;
border: 1.5px solid rgba(255,255,255,.10) !important;
border-radius: 8px !important;
overflow: hidden !important;
height: 42px !important;
box-shadow: inset 0 1px 4px rgba(0,0,0,.3) !important;
}
/* Qty number input */
.vbx-order-summary .quantity .qty::-webkit-outer-spin-button,
.vbx-order-summary .quantity .qty::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* ============================================
PRODUCT PAGE — SECTION BACKGROUNDS
Consistent depth layering
============================================ */
/* Package list section sits on body (#031B23) */
.vbx-sp-body,
.vbx-sp-left {
background: transparent;
}
/* Thin divider between hero and packages */
/* Package variation label base — just above body */
.vbd_variation_radio_item label:not(.vbx-checked) {
background: #0d1e2e !important;
}
/* Hover state — slightly brighter */
/* Right sidebar order card — matches header (#1A2234) */
/* Input inside order card */
.vbx-order-summary .ppom-field-wrapper input,
.vbx-order-summary input[type="text"],
.vbx-order-summary input[type="number"] {
background: #0d1e2e !important;
border: 1.5px solid rgba(255,255,255,.12) !important;
border-radius: 8px !important;
}
.vbx-order-summary .ppom-field-wrapper input:focus,
.vbx-order-summary input[type="text"]:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(240,16,16,.12) !important;
}
/* Quantity wrapper inside order card */
/* ── GO PAYMENT — Loading: শুধু click block, cursor change ── */
.single_add_to_cart_button.vbd-loading {
pointer-events: none !important;
cursor: wait !important;
opacity: .85 !important;
}
/* ── Checkout Responsive ── */
/* ═══════════ VoucherBD Chat Widget ═══════════ */
.vbx-chat {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.vbx-chat-icons {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(12px) scale(.85);
transform-origin: bottom center;
transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
pointer-events: none;
}
.vbx-chat.is-open .vbx-chat-icons {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.vbx-chat-icon {
width: 46px;
height: 46px;
display: block;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,.28);
transition: transform .18s ease;
}
.vbx-chat-icon:hover { transform: scale(1.08); }
.vbx-chat-icon svg { width: 100%; height: 100%; display: block; }
.vbx-chat-btn {
width: 56px;
height: 56px;
padding: 0;
border: none;
background: transparent;
border-radius: 50%;
cursor: pointer;
position: relative;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(240,16,16,.36);
animation: vbxChatBounce 2.6s ease infinite;
}
.vbx-chat.is-open .vbx-chat-btn { animation: none; }
.vbx-chat-btn svg {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
transition: opacity .22s ease, transform .3s ease;
}
.vbx-chat-btn .vbx-chat-open { opacity: 1; transform: rotate(0); }
.vbx-chat-btn .vbx-chat-close { opacity: 0; transform: rotate(-90deg); }
.vbx-chat.is-open .vbx-chat-btn .vbx-chat-open { opacity: 0; transform: rotate(90deg); }
.vbx-chat.is-open .vbx-chat-btn .vbx-chat-close { opacity: 1; transform: rotate(0); }
@keyframes vbxChatBounce {
0%, 55%, 100% { transform: translateY(0); }
28% { transform: translateY(-10px); }
42% { transform: translateY(-5px); }
}
@media (max-width: 768px) {
.vbx-chat { right: 14px; bottom: 14px; }
.vbx-chat-btn { width: 52px; height: 52px; }
.vbx-chat-icon { width: 44px; height: 44px; }
}
/* ═══════════ End Chat Widget ═══════════ */
/* ============================================================
SINGLE PRODUCT — PREMIUM UI UPGRADE v2.0
স্ক্রিনশট অনুযায়ী: readable contrast, premium depth,
better variation cards, sidebar polish
============================================================ */
/* ── Hero Section ── */
/* Product image box — slightly larger, better shadow */
.vbx-hero-img-box {
flex-shrink: 0;
width: 175px !important;
height: 175px !important;
border-radius: 20px !important;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 12px 40px rgba(0,0,0,.6), 0 0 60px rgba(240,16,16,.08) !important;
}
/* Title — brighter, more weight */
.vbx-hero-title {
font-size: 26px !important;
font-weight: 900 !important;
color: #FFFFFF !important;
margin: 0 0 8px !important;
text-transform: uppercase;
word-break: break-word;
letter-spacing: .03em !important;
line-height: 1.2;
text-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}
/* Description text — readable contrast */
.vbx-hero-desc {
font-size: 14px !important;
color: rgba(200,215,230,.85) !important;
line-height: 1.7 !important;
}
.vbx-hero-desc strong {
color: #fff !important;
}
/* Badges — more colorful, easier to read */
.vbx-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px !important;
font-weight: 700 !important;
padding: 5px 13px !important;
border-radius: 20px !important;
white-space: nowrap;
letter-spacing: .03em !important;
}
.vbx-badge-instant {
background: rgba(240,16,16,.18) !important;
color: #ff5c5c !important;
border: 1px solid rgba(240,16,16,.40) !important;
}
.vbx-badge-region {
background: rgba(99,179,237,.12) !important;
color: #93C5FD !important;
border: 1px solid rgba(99,179,237,.30) !important;
}
.vbx-badge-delivery {
background: rgba(52,211,153,.12) !important;
color: #6EE7B7 !important;
border: 1px solid rgba(52,211,153,.30) !important;
}
/* ── Package Selection Label ── */
.vbx-pick-label {
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.40) !important;
margin: 0 0 14px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.vbx-pick-label::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(255,255,255,.10), transparent);
}
/* ── Variation Radio Cards — PREMIUM ── */
.vbd_variation_radios {
display: flex !important;
flex-wrap: wrap !important;
gap: 7px !important;
margin: 0 !important;
padding: 0 !important;
}
.vbd_variation_radio_item {
width: calc(50% - 3.5px) !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Base card style — better depth */
/* Subtle top shine on every card */
.vbd_variation_radio_item label::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
border-radius: 10px 10px 0 0;
pointer-events: none;
}
/* Hover */
/* Selected state — strong orange glow */
/* Left accent stripe — thicker, gradient */
.vbd_variation_radio_item input:checked + label::before,
.vbd_variation_radio_item label.vbx-checked::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px !important;
background: linear-gradient(180deg, #ff5c5c 0%, #f01010 50%, #c50d0d 100%) !important;
border-radius: 10px 0 0 10px !important;
}
/* Package name text — better legibility */
.vbd_variation_radio_item input:checked + label .vbx-var-name,
.vbd_variation_radio_item label.vbx-checked .vbx-var-name {
color: #fff !important;
}
/* BDT price — brighter orange */
.vbd_variation_radio_item input:checked + label .vbx-var-bdt,
.vbd_variation_radio_item label.vbx-checked .vbx-var-bdt {
color: #ff5c5c !important;
}
/* USD price — visible but secondary */
/* Out of stock */
.vbx-var-oos {
font-size: 11px !important;
color: rgba(248,113,113,.75) !important;
font-style: italic !important;
}
/* ── Order Sidebar Card — PREMIUM ── */
.vbx-sp-right {
width: 300px !important;
flex-shrink: 0;
position: sticky;
top: 76px;
padding-top: 29px;
}
.vbx-order-card {
background: linear-gradient(180deg, #1a2640 0%, #152035 100%) !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
/* Card header */
.vbx-order-title {
font-size: 13px !important;
font-weight: 800 !important;
color: rgba(255,255,255,.90) !important;
padding: 16px 20px 14px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
background: rgba(255,255,255,.03) !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.vbx-order-title::before {
content: "📋";
font-size: 14px;
}
/* Selected package info row */
#vbx-pkg-info {
margin: 0;
padding: 14px 20px !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
background: rgba(240,16,16,.04) !important;
}
.vbx-pkg-label {
display: block;
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.38) !important;
margin-bottom: 4px !important;
}
.vbx-pkg-name {
display: block;
font-size: 13.5px !important;
font-weight: 700 !important;
color: rgba(220,235,250,.95) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vbx-pkg-bdt {
font-size: 18px !important;
font-weight: 800 !important;
color: #ff4a4a !important;
white-space: nowrap;
letter-spacing: -.01em !important;
}
.vbx-pkg-usd {
font-size: 11.5px !important;
font-weight: 600 !important;
color: rgba(150,180,210,.70) !important;
white-space: nowrap;
letter-spacing: .01em;
}
/* Input field */
.vbx-order-summary .ppom-field-wrapper label {
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.50) !important;
display: block !important;
margin-bottom: 8px !important;
}
.vbx-order-summary .ppom-field-wrapper label .required {
color: #FF6B6B !important;
}
.vbx-order-summary .ppom-field-wrapper input {
width: 100% !important;
background: #0a1628 !important;
border: 1.5px solid rgba(255,255,255,.14) !important;
border-radius: 9px !important;
color: #fff !important;
font-size: 14px !important;
padding: 12px 15px !important;
height: auto !important;
box-shadow: none !important;
text-align: left !important;
box-sizing: border-box !important;
transition: border-color .2s, box-shadow .2s !important;
}
.vbx-order-summary .ppom-field-wrapper input:focus {
border-color: #f01010 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(240,16,16,.15) !important;
background: #0c1c2e !important;
}
.vbx-order-summary .ppom-field-wrapper input::placeholder {
color: rgba(255,255,255,.22) !important;
}
/* Quantity section */
.vbx-qty-section, .vbx-qty-row {
padding: 14px 20px 6px !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
}
.vbx-qty-label {
font-size: 12px !important;
font-weight: 700 !important;
color: rgba(255,255,255,.75) !important;
letter-spacing: .04em !important;
text-transform: uppercase;
}
.vbx-qty-limit {
font-size: 11px !important;
color: rgba(150,175,205,.55) !important;
margin: 0 0 10px !important;
padding: 0 20px !important;
display: flex;
align-items: center;
gap: 4px;
}
/* Quantity widget */
.vbx-order-summary .quantity {
display: flex !important;
align-items: center !important;
width: 130px !important;
min-width: 130px !important;
height: 44px !important;
background: #0a1628 !important;
border: 1.5px solid rgba(255,255,255,.14) !important;
border-radius: 9px !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
.vbx-order-summary .quantity button.minus,
.vbx-order-summary .quantity button.plus {
background: #0f2038 !important;
border: none !important;
color: rgba(255,255,255,.60) !important;
font-size: 18px !important;
font-weight: 400 !important;
width: 42px !important;
height: 100% !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background .15s, color .15s !important;
padding: 0 !important;
flex-shrink: 0 !important;
line-height: 1 !important;
box-shadow: none !important;
transform: none !important;
}
.vbx-order-summary .quantity button.minus:hover,
.vbx-order-summary .quantity button.plus:hover {
background: rgba(240,16,16,.25) !important;
color: #ff5c5c !important;
transform: none !important;
box-shadow: none !important;
}
.vbx-order-summary .quantity .qty {
background: transparent !important;
border: none !important;
border-left: 1.5px solid rgba(255,255,255,.10) !important;
border-right: 1.5px solid rgba(255,255,255,.10) !important;
color: #fff !important;
text-align: center !important;
width: 48px !important;
flex-shrink: 0 !important;
height: 100% !important;
font-size: 15px !important;
font-weight: 700 !important;
-moz-appearance: textfield !important;
padding: 0 !important;
letter-spacing: .02em !important;
border-top: none !important;
border-bottom: none !important;
}
/* GO PAYMENT button */
.vbx-order-summary form.cart {
padding: 0 20px 20px !important;
display: flex;
flex-direction: column;
gap: 0;
}
.vbx-order-summary .single_add_to_cart_button,
.single-product div.product .single_add_to_cart_button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
background: linear-gradient(135deg, #f43333 0%, #f01010 55%, #c50d0d 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 11px !important;
font-size: 15px !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
height: 52px !important;
cursor: pointer !important;
text-transform: uppercase !important;
box-shadow: 0 6px 24px rgba(240,16,16,.45), 0 1px 0 rgba(255,255,255,.15) inset !important;
transition: transform .15s ease, box-shadow .15s ease !important;
padding: 0 !important;
position: static !important;
top: 0 !important;
margin: 0 !important;
line-height: 1 !important;
}
.vbx-order-summary .single_add_to_cart_button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 10px 32px rgba(240,16,16,.55), 0 1px 0 rgba(255,255,255,.18) inset !important;
background: linear-gradient(135deg, #ff4a4a 0%, #f01010 55%, #c50d0d 100%) !important;
}
/* ── Description / Tabs Section ── */
.vbx-sp-desc {
margin-top: 36px !important;
padding-bottom: 60px !important;
}
/* Tab navigation */
.vbx-sp-desc .woocommerce-tabs ul.tabs {
display: flex;
padding: 0;
border-bottom: 2px solid rgba(255,255,255,.07) !important;
margin: 0 0 24px;
list-style: none;
background: transparent;
border-radius: 0;
gap: 4px !important;
margin-bottom: 28px !important;
}
.vbx-sp-desc .woocommerce-tabs ul.tabs li a {
display: block;
padding: 10px 20px !important;
font-size: 14px !important;
font-weight: 700 !important;
color: rgba(255,255,255,.40) !important;
border-bottom: 2.5px solid transparent !important;
transition: color .15s, border-color .15s !important;
text-decoration: none;
margin-bottom: -2px !important;
letter-spacing: .01em !important;
}
.vbx-sp-desc .woocommerce-tabs ul.tabs li.active a {
color: #fff !important;
border-bottom-color: #f01010 !important;
}
.vbx-sp-desc .woocommerce-tabs ul.tabs li a:hover {
color: rgba(255,255,255,.80) !important;
}
/* Tab content text — much better readability */
.vbx-sp-desc .woocommerce-Tabs-panel {
background: transparent !important;
border: none !important;
border-radius: 0;
padding: 0 !important;
color: rgba(200,215,235,.85) !important;
font-size: 14.5px !important;
line-height: 1.85 !important;
}
.vbx-sp-desc .woocommerce-Tabs-panel p {
margin: 0 0 14px !important;
color: rgba(200,215,235,.82) !important;
}
/* Description headings — bright and clear */
.vbx-sp-desc .woocommerce-Tabs-panel h1,
.vbx-sp-desc .woocommerce-Tabs-panel h2,
.vbx-sp-desc .woocommerce-Tabs-panel h3,
.vbx-sp-desc .woocommerce-Tabs-panel h4,
.vbx-sp-desc .woocommerce-Tabs-panel h5,
.vbx-sp-desc .woocommerce-Tabs-panel h6 {
color: #FFFFFF !important;
font-weight: 800 !important;
margin: 20px 0 10px !important;
line-height: 1.4 !important;
}
.vbx-sp-desc .woocommerce-Tabs-panel h2 {
font-size: 19px !important;
color: #ff5c5c !important;
}
.vbx-sp-desc .woocommerce-Tabs-panel h3 {
font-size: 16px !important;
}
.vbx-sp-desc .woocommerce-Tabs-panel h4 {
font-size: 15px !important;
}
/* Links */
.vbx-sp-desc .woocommerce-Tabs-panel a {
color: #ff5c5c !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.vbx-sp-desc .woocommerce-Tabs-panel a:hover {
opacity: .8;
color: #FFBD7A !important;
}
/* Bullet lists in description */
.vbx-sp-desc .woocommerce-Tabs-panel ul,
.vbx-sp-desc #tab-description ul {
list-style: none !important;
padding: 0 !important;
margin: 0 0 16px !important;
}
.vbx-sp-desc .woocommerce-Tabs-panel ul li,
.vbx-sp-desc #tab-description ul li {
position: relative !important;
padding-left: 20px !important;
margin-bottom: 8px !important;
color: rgba(200,215,235,.85) !important;
font-size: 14px !important;
line-height: 1.7 !important;
}
.vbx-sp-desc .woocommerce-Tabs-panel ul li::before,
.vbx-sp-desc #tab-description ul li::before {
content: "•" !important;
position: absolute !important;
left: 6px !important;
top: 0 !important;
color: #f01010 !important;
font-weight: 900 !important;
}
/* strong/bold in description */
.vbx-sp-desc .woocommerce-Tabs-panel strong,
.vbx-sp-desc #tab-description strong {
color: #fff !important;
font-weight: 700 !important;
}
/* ── Overall body background between sections ── */
.vbx-sp-body {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 24px 0 44px !important;
border-top: 1px solid rgba(255,255,255,.04) !important;
}
/* ── Mobile Responsive ── */
@media (max-width: 860px) {
.vbx-sp-right { width: 100% !important; }
.vbx-hero-img-box { width: 110px !important; height: 110px !important; }
.vbx-hero-title { font-size: 20px !important; }
}
@media (max-width: 600px) {
.vbx-hero-img-box { width: 88px !important; height: 88px !important; border-radius: 14px !important; }
.vbx-hero-title { font-size: 17px !important; }
.vbx-hero-desc { font-size: 13px !important; }
.vbd_variation_radio_item { width: calc(50% - 3.5px) !important; }
.vbx-var-bdt { font-size: 12px !important; }
.vbx-var-usd { font-size: 10px !important; }
.vbx-var-name { font-size: 11px !important; }
.vbx-order-card { border-radius: 12px !important; }
}
/* ============================================================
END PREMIUM UI UPGRADE v2.0
============================================================ */
/* ============================================================
HERO GRADIENT — PREMIUM REFINEMENT v2.1
ডান পাশের hard-edge orange blob ঠিক করা হলো —
soft ambient glow + subtle aurora + depth vignette
============================================================ */
/* Layer 1 — wide soft right-side glow (replaces the old blob) */
/* Layer 2 — subtle blue aurora on the left for depth/balance */
/* Inner wrapper — add a faint top-edge sheen line for premium polish */
.vbx-hero-inner {
display: flex;
align-items: center;
gap: 22px;
position: relative !important;
z-index: 1 !important;
}
/* Fine grain / vignette overlay via the wrap itself */
/* ── Mobile: keep glow soft, reduce intensity ── */
@media (max-width: 600px) {
.vbx-hero::before {
width: 90% !important;
right: -20% !important;
background:
radial-gradient(ellipse 70% 50% at 80% 50%,
rgba(240,16,16,.08) 0%,
transparent 65%) !important;
}
.vbx-hero::after { opacity: .6 !important; }
}
/* ============================================================
END HERO GRADIENT REFINEMENT v2.1
============================================================ */
/* ============================================================
FINAL ADJUSTMENTS v2.2
1. Hero — solid single color (gradient removed)
2. Description headings H1–H6 all white
3. Package cards brighter
============================================================ */
/* ── 1. HERO: solid color, no gradient, no glow ── */
.vbx-hero::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
right: -10% !important;
width: 70% !important;
height: 200% !important;
background: radial-gradient(ellipse 60% 50% at 75% 50%, rgba(240,16,16,.10) 0%, rgba(240,16,16,.05) 35%, transparent 70%) !important;
pointer-events: none !important;
transform: translateY(-50%) !important;
z-index: -1 !important;
filter: blur(8px) !important;
display: none !important;
}
.vbx-hero::after {
content: "" !important;
position: absolute !important;
top: -30% !important;
left: -5% !important;
width: 45% !important;
height: 160% !important;
background: radial-gradient(ellipse 50% 45% at 25% 40%, rgba(64,120,200,.10) 0%, rgba(40,90,160,.04) 40%, transparent 72%) !important;
pointer-events: none !important;
z-index: -1 !important;
filter: blur(10px) !important;
display: none !important;
}
/* ── 2. DESCRIPTION HEADINGS — all white (H1–H6) ── */
.vbx-sp-desc .woocommerce-Tabs-panel h1,
.vbx-sp-desc .woocommerce-Tabs-panel h2,
.vbx-sp-desc .woocommerce-Tabs-panel h3,
.vbx-sp-desc .woocommerce-Tabs-panel h4,
.vbx-sp-desc .woocommerce-Tabs-panel h5,
.vbx-sp-desc .woocommerce-Tabs-panel h6,
.vbx-sp-desc #tab-description h1,
.vbx-sp-desc #tab-description h2,
.vbx-sp-desc #tab-description h3,
.vbx-sp-desc #tab-description h4,
.vbx-sp-desc #tab-description h5,
.vbx-sp-desc #tab-description h6 {
color: #FFFFFF !important;
}
/* ── 3. PACKAGE / VARIATION CARDS — brighter ── */
/* Base card — lighter surface, more visible */
.vbd_variation_radio_item label {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 6px !important;
background: #14253c !important;
border: 1.5px solid rgba(255,255,255,.12) !important;
padding: 9px 12px !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .15s ease !important;
position: relative !important;
overflow: hidden !important;
min-height: 44px !important;
height: auto !important;
box-sizing: border-box !important;
}
/* Hover */
.vbd_variation_radio_item label:not(.vbx-checked):hover {
border-color: rgba(240,16,16,.55) !important;
background: #1b2f4a !important;
box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
transform: translateY(-1px) !important;
}
/* Selected — brighter fill */
.vbd_variation_radio_item input:checked + label,
.vbd_variation_radio_item label.vbx-checked {
background: linear-gradient(135deg, rgba(240,16,16,.20) 0%, rgba(240,16,16,.08) 100%) !important;
border-color: rgba(240,16,16,.85) !important;
border-width: 1.5px !important;
box-shadow: 0 0 0 1px rgba(240,16,16,.22), 0 6px 24px rgba(240,16,16,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
transition: background .2s, border-color .2s, box-shadow .2s;
transform: translateY(-1px) !important;
}
/* Package name — brighter text */
.vbx-var-name {
flex: 1;
min-width: 0;
font-size: 12px !important;
font-weight: 700 !important;
color: rgba(225,238,250,.95) !important;
line-height: 1.35 !important;
word-break: break-word;
letter-spacing: .01em !important;
}
/* BDT price — brighter orange */
.vbx-var-bdt {
font-size: 13.5px !important;
font-weight: 800 !important;
color: #ff5c5c !important;
white-space: nowrap;
letter-spacing: -.01em !important;
}
/* USD — brighter */
.vbx-var-usd {
font-size: 10.5px !important;
font-weight: 600 !important;
color: rgba(170,195,220,.85) !important;
white-space: nowrap;
letter-spacing: .01em;
}
/* ============================================================
END FINAL ADJUSTMENTS v2.2
============================================================ */
/* ============================================================
MOBILE VIEW FIX v2.3
Hero header overlap + spacing/position corrections
============================================================ */
/* Desktop hero solid color — keep margin-top so it clears header */
.vbx-hero {
background: #0e1d33 !important;
border-bottom: 1px solid rgba(255,255,255,.07) !important;
margin-top: 0 !important;
position: relative !important;
overflow: hidden !important;
padding: 28px 0 !important;
isolation: auto !important;
box-shadow: none !important;
}
/* Mobile: content outer must clear the fixed header fully */
@media (max-width: 1024px) {
.vbd_content_outer {
padding-top: 60px !important;
}
/* Hero starts clean below header — no negative overlap */
.vbx-hero {
margin-top: 0 !important;
padding: 18px 0 !important;
}
/* Hero inner — stack image + text cleanly, no cramping */
.vbx-hero-inner {
gap: 16px !important;
align-items: flex-start !important;
}
.vbx-hero-img-box {
width: 96px !important;
height: 96px !important;
border-radius: 14px !important;
}
.vbx-hero-title {
font-size: 19px !important;
line-height: 1.25 !important;
}
.vbx-hero-desc {
font-size: 13px !important;
line-height: 1.6 !important;
}
/* Container side padding so cards don't touch edges */
.vbx-sp-wrap .vbd_container,
.vbx-hero .vbd_container {
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Body: single column stack */
.vbx-sp-body {
flex-direction: column !important;
gap: 16px !important;
padding: 18px 0 36px !important;
}
.vbx-sp-left { width: 100% !important; }
.vbx-sp-right {
width: 100% !important;
position: static !important;
padding-top: 0 !important;
}
}
@media (max-width: 600px) {
.vbd_content_outer {
padding-top: 56px !important;
}
.vbx-hero {
margin-top: 0 !important;
padding: 16px 0 !important;
}
/* Hero image + text side by side but compact */
.vbx-hero-inner {
gap: 14px !important;
}
.vbx-hero-img-box {
width: 84px !important;
height: 84px !important;
border-radius: 12px !important;
}
.vbx-hero-title {
font-size: 17px !important;
margin-bottom: 8px !important;
}
.vbx-hero-desc {
font-size: 12.5px !important;
}
/* Badges wrap nicely */
.vbx-hero-badges {
gap: 6px !important;
margin: 8px 0 10px !important;
}
.vbx-badge {
font-size: 11px !important;
padding: 4px 10px !important;
}
/* Package cards — 2 column, proper gap */
.vbd_variation_radios {
gap: 8px !important;
}
.vbd_variation_radio_item {
width: calc(50% - 4px) !important;
}
.vbd_variation_radio_item label {
padding: 10px 11px !important;
min-height: 46px !important;
}
.vbx-var-name { font-size: 11px !important; }
.vbx-var-bdt { font-size: 12px !important; }
.vbx-var-usd { font-size: 10px !important; }
/* Pick label */
.vbx-pick-label { margin: 4px 0 12px !important; }
/* Order card full width, comfortable padding */
.vbx-order-card { border-radius: 12px !important; }
}
/* ============================================================
END MOBILE VIEW FIX v2.3
============================================================ */
/* ============================================================
MOBILE HEADER + HERO — FINAL FIX v2.4
Header height লক করে content padding exact মেলানো,
পাশাপাশি hero premium polish
============================================================ */
@media (max-width: 1024px) {
/* Header — fixed exact height, no extra padding */
.vbd_main_header {
padding: 0 !important;
height: 60px !important;
}
.vbd_main_header .vbd_row {
min-height: 60px !important;
height: 60px !important;
padding: 0 !important;
}
/* Content clears exactly the 60px header */
.vbd_content_outer {
padding-top: 60px !important;
}
body.admin-bar .vbd_content_outer {
padding-top: 106px !important; /* 60 header + 46 wp admin bar mobile */
}
/* Hero — clean start, premium spacing */
.vbx-hero {
margin-top: 0 !important;
padding: 22px 0 !important;
background: #0e1d33 !important;
}
.vbx-hero-inner {
gap: 16px !important;
align-items: center !important;
}
/* Product image — premium card look */
.vbx-hero-img-box {
width: 92px !important;
height: 92px !important;
border-radius: 16px !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.10),
0 8px 28px rgba(0,0,0,.5) !important;
}
}
@media (max-width: 600px) {
.vbd_main_header {
height: 58px !important;
}
.vbd_main_header .vbd_row {
min-height: 58px !important;
height: 58px !important;
}
.vbd_content_outer {
padding-top: 58px !important;
}
body.admin-bar .vbd_content_outer {
padding-top: 104px !important;
}
/* ── HERO — Premium mobile layout ── */
.vbx-hero {
padding: 20px 0 !important;
}
.vbx-hero-inner {
gap: 14px !important;
align-items: center !important;
}
/* Image — fixed nice size, premium border */
.vbx-hero-img-box {
width: 88px !important;
height: 88px !important;
border-radius: 14px !important;
flex-shrink: 0 !important;
}
/* Title — readable, balanced size */
.vbx-hero-title {
font-size: 17px !important;
font-weight: 900 !important;
line-height: 1.3 !important;
margin: 0 0 9px !important;
letter-spacing: .02em !important;
}
/* Badges — neat row */
.vbx-hero-badges {
gap: 6px !important;
margin: 0 0 10px !important;
}
.vbx-badge {
font-size: 10.5px !important;
font-weight: 700 !important;
padding: 4px 10px !important;
}
/* Description — comfortable reading */
.vbx-hero-desc {
font-size: 13px !important;
line-height: 1.65 !important;
color: rgba(205,220,235,.85) !important;
}
.vbx-desc-toggle {
font-size: 12px !important;
}
}
/* Very small screens — image stacks on top for breathing room */
@media (max-width: 400px) {
.vbx-hero-inner {
gap: 12px !important;
}
.vbx-hero-img-box {
width: 76px !important;
height: 76px !important;
}
.vbx-hero-title {
font-size: 16px !important;
}
}
/* ============================================================
END MOBILE HEADER + HERO FIX v2.4
============================================================ */
/* ============================================================
HERO DESCRIPTION — 2-LINE CLAMP + READ MORE v2.5
Desktop: 25-word short text
Mobile: 2-line clamp, then Read more
============================================================ */
/* Wrapper holds both short + full text spans */
/* By default (desktop, collapsed): show short, hide full */
.vbx-desc-collapsed #vbx-desc-short { display: inline; }
.vbx-desc-collapsed #vbx-desc-full { display: none; }
/* Expanded: show full, hide short */
#vbx-desc-wrap:not(.vbx-desc-collapsed) #vbx-desc-short { display: none; }
#vbx-desc-wrap:not(.vbx-desc-collapsed) #vbx-desc-full { display: inline; }
/* Read more / less button — block, own line, clean */
.vbx-desc-toggle:hover {
opacity: .85 !important;
background: none !important;
box-shadow: none !important;
transform: none !important;
color: var(--primary-light) !important;
}
/* ── Mobile: clamp short text to 2 lines ── */
@media (max-width: 600px) {
/* In collapsed state, the SHORT text is clamped to 2 lines */
.vbx-desc-collapsed #vbx-desc-short {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
line-height: 1.6 !important;
max-height: calc(1.6em * 2) !important;
}
.vbx-hero-desc {
font-size: 13px !important;
}
.vbx-desc-toggle {
font-size: 12px !important;
margin-top: 3px !important;
}
}
/* Slightly larger phones — clamp to 2 lines too */
@media (max-width: 480px) {
.vbx-desc-collapsed #vbx-desc-short {
-webkit-line-clamp: 2 !important;
}
}
/* ============================================================
END HERO DESCRIPTION CLAMP v2.5
============================================================ */
/* ============================================================
READ MORE BUTTON — POSITION FIX v2.6
Desktop: inline at end of text (no awkward gap)
Mobile: tight under 2-line clamp
============================================================ */
/* Desktop default — keep text inline, button right after */
#vbx-desc-wrap {
display: inline !important;
}
.vbx-desc-collapsed #vbx-desc-short,
#vbx-desc-wrap:not(.vbx-desc-collapsed) #vbx-desc-full {
display: inline !important;
}
/* Button sits inline right after the text — no top margin gap */
.vbx-desc-toggle {
background: none !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
color: var(--primary-color) !important;
font-size: 12.5px !important;
font-weight: 700 !important;
cursor: pointer !important;
padding: 0 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
transform: none !important;
display: inline !important;
border-radius: 0 !important;
margin-top: 0 !important;
margin-left: 4px !important;
vertical-align: baseline !important;
white-space: nowrap !important;
}
/* ── Mobile: 2-line clamp, button tight below ── */
@media (max-width: 600px) {
/* Wrap becomes block so clamp works */
#vbx-desc-wrap {
display: block !important;
}
.vbx-desc-collapsed #vbx-desc-short {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
line-height: 1.6 !important;
}
#vbx-desc-wrap:not(.vbx-desc-collapsed) #vbx-desc-full {
display: block !important;
}
/* Button: own line, tight margin, no left indent */
.vbx-desc-toggle {
display: inline-block !important;
margin-top: 2px !important;
margin-left: 0 !important;
}
}
/* ============================================================
END READ MORE BUTTON FIX v2.6
============================================================ */
/* ============================================================
ORDER FIELDS — WIDTH + SMOOTH POLISH v2.7
Player ID / Zone ID input fields full width
============================================================ */
/* Input fields — full width inside card, comfortable padding */
.vbx-order-summary .ppom-field-wrapper {
margin: 0;
padding: 16px 20px 0 !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
.vbx-order-summary .ppom-field-wrapper input,
.vbx-order-summary input[type="text"],
.vbx-order-summary input[type="number"],
.vbx-order-body .mvimo-input,
.vbx-order-body .mvimo-phone {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 12px 15px !important;
}
/* IMO card fields — match full width */
.vbx-order-body .mvimo-card {
margin: 0;
padding: 14px 20px;
border-radius: 0;
border: none;
border-bottom: 1px solid var(--border-subtle);
background: transparent;
box-shadow: none;
padding-left: 18px !important;
padding-right: 18px !important;
}
.vbx-order-body .mvimo-row,
.vbx-order-body .mvimo-codewrap,
.vbx-order-body .mvimo-select {
width: 100% !important;
box-sizing: border-box !important;
}
/* Mobile — even wider, less side padding so fields breathe */
@media (max-width: 600px) {
.vbx-order-summary .ppom-field-wrapper {
padding-left: 16px !important;
padding-right: 16px !important;
}
.vbx-order-body .mvimo-card {
padding-left: 16px !important;
padding-right: 16px !important;
}
.vbx-order-summary .ppom-field-wrapper input,
.vbx-order-summary input[type="text"],
.vbx-order-summary input[type="number"],
.vbx-order-body .mvimo-input {
padding: 13px 14px !important;
font-size: 15px !important;
}
}
/* ============================================================
END ORDER FIELDS WIDTH v2.7
============================================================ */
/* ============================================================
VARIATION STATES v2.8
1. Disabled (Enabled না) → সম্পূর্ণ hide
2. Out of Stock → blur (visible কিন্তু non-clickable)
============================================================ */
/* ── Disabled variations — সম্পূর্ণ লুকানো ── */
.vbd_variation_radio_item.vbd_variation_hidden {
display: none !important;
}
/* ── Out of Stock — blur + non-interactive (visible থাকবে) ── */
.vbd_variation_radio_item.vbd_variation_disable label {
opacity: .4 !important;
cursor: not-allowed !important;
pointer-events: none !important;
filter: grayscale(.4) !important;
position: relative !important;
}
/* Out of stock variations — price লুকিয়ে "Out of Stock" badge ভাব */
.vbd_variation_radio_item.vbd_variation_disable label .vbx-var-bdt,
.vbd_variation_radio_item.vbd_variation_disable label .vbx-var-usd {
opacity: .5 !important;
}
/* ============================================================
END VARIATION STATES v2.8
============================================================ */
/* ============================================================
DESCRIPTION TABLE — PREMIUM CLEAN BORDERS v2.9
WP editor টেবিলের অসম border ঠিক করে consistent premium look
============================================================ */
/* Wrapper — horizontal scroll on small screens */
.vbx-sp-desc .woocommerce-Tabs-panel table,
.vbx-sp-desc #tab-description table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
margin: 18px 0 22px !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 12px !important;
overflow: hidden !important;
background: #0e1d33 !important;
box-shadow: 0 6px 24px rgba(0,0,0,.25) !important;
}
/* All cells — consistent border via right + bottom only */
/* Last column — no right border (avoids double edge) */
/* Last row cells — no bottom border (border-radius clean) */
/* Header row — premium gradient, bold white */
/* Zebra striping — subtle, premium */
.vbx-sp-desc .woocommerce-Tabs-panel table tbody tr:nth-child(even),
.vbx-sp-desc #tab-description table tbody tr:nth-child(even) {
background: rgba(255,255,255,.018) !important;
}
/* Row hover — subtle highlight */
.vbx-sp-desc .woocommerce-Tabs-panel table tbody tr:hover,
.vbx-sp-desc #tab-description table tbody tr:hover {
background: rgba(240,16,16,.05) !important;
}
/* First-column emphasis (যদি label column থাকে) */
.vbx-sp-desc .woocommerce-Tabs-panel table td:first-child,
.vbx-sp-desc #tab-description table td:first-child {
color: rgba(215,228,242,.92) !important;
font-weight: 600 !important;
}
/* Links inside table */
.vbx-sp-desc .woocommerce-Tabs-panel table a {
color: #ff5c5c !important;
}
/* Strip any inline border attribute styling from WP editor */
.vbx-sp-desc .woocommerce-Tabs-panel table[border],
.vbx-sp-desc #tab-description table[border] {
border: 1px solid rgba(255,255,255,.10) !important;
}
/* ── Table scroll wrapper — JS দিয়ে প্রতিটা table এতে wrap হয় ── */
/* wrapper-এর ভেতরে table-এর নিজস্ব margin বাদ (wrapper handle করে) */
/* thin scrollbar styling */
.vbx-sp-desc .vbx-table-scroll::-webkit-scrollbar {
height: 6px !important;
}
.vbx-sp-desc .vbx-table-scroll::-webkit-scrollbar-track {
background: rgba(255,255,255,.04) !important;
border-radius: 10px !important;
}
.vbx-sp-desc .vbx-table-scroll::-webkit-scrollbar-thumb {
background: rgba(240,16,16,.4) !important;
border-radius: 10px !important;
}
/* ── Mobile — table min-width রাখে যাতে squeeze না হয়ে scroll হয় ── */
@media (max-width: 768px) {
.vbx-sp-desc .vbx-table-scroll > table,
.vbx-sp-desc .woocommerce-Tabs-panel table,
.vbx-sp-desc #tab-description table {
min-width: 520px !important;
width: max-content !important;
max-width: none !important;
}
.vbx-sp-desc .vbx-table-scroll > table th,
.vbx-sp-desc .vbx-table-scroll > table td,
.vbx-sp-desc .woocommerce-Tabs-panel table th,
.vbx-sp-desc .woocommerce-Tabs-panel table td,
.vbx-sp-desc #tab-description table th,
.vbx-sp-desc #tab-description table td {
padding: 11px 14px !important;
font-size: 12.5px !important;
white-space: nowrap !important;
}
}
/* ============================================================
END DESCRIPTION TABLE v2.9
============================================================ */
/* ============================================================
DESCRIPTION TABLE — BORDERS MORE VISIBLE v3.0
চারপাশ ও ভেতরের border আরো স্পষ্ট
============================================================ */
/* Outer table border — আরো clear */
.vbx-sp-desc .woocommerce-Tabs-panel table,
.vbx-sp-desc #tab-description table,
.vbx-sp-desc .woocommerce-Tabs-panel table[border],
.vbx-sp-desc #tab-description table[border] {
border: 1.5px solid rgba(255,255,255,.22) !important;
}
/* Inner cell borders — আরো visible */
.vbx-sp-desc .woocommerce-Tabs-panel table th,
.vbx-sp-desc .woocommerce-Tabs-panel table td,
.vbx-sp-desc #tab-description table th,
.vbx-sp-desc #tab-description table td {
padding: 13px 16px !important;
border: none !important;
border-right: 1px solid rgba(255,255,255,.16) !important;
border-bottom: 1px solid rgba(255,255,255,.16) !important;
font-size: 13.5px !important;
color: rgba(195,212,232,.85) !important;
text-align: left !important;
vertical-align: middle !important;
line-height: 1.5 !important;
width: auto !important;
}
/* Last column — no right border */
.vbx-sp-desc .woocommerce-Tabs-panel table th:last-child,
.vbx-sp-desc .woocommerce-Tabs-panel table td:last-child,
.vbx-sp-desc #tab-description table th:last-child,
.vbx-sp-desc #tab-description table td:last-child {
border-right: none !important;
}
/* Last row — no bottom border */
.vbx-sp-desc .woocommerce-Tabs-panel table tr:last-child td,
.vbx-sp-desc #tab-description table tr:last-child td {
border-bottom: none !important;
}
/* Header bottom border — strong divider */
.vbx-sp-desc .woocommerce-Tabs-panel table thead th,
.vbx-sp-desc #tab-description table thead th,
.vbx-sp-desc .woocommerce-Tabs-panel table tr:first-child th,
.vbx-sp-desc #tab-description table tr:first-child th {
background: linear-gradient(180deg, #1a2940 0%, #15233a 100%) !important;
color: #FFFFFF !important;
font-weight: 800 !important;
font-size: 13.5px !important;
text-align: center !important;
letter-spacing: .02em !important;
border-bottom: 1.5px solid rgba(255,255,255,.26) !important;
padding: 14px 16px !important;
border-right: 1px solid rgba(255,255,255,.16) !important;
}
.vbx-sp-desc .woocommerce-Tabs-panel table thead th:last-child,
.vbx-sp-desc #tab-description table thead th:last-child,
.vbx-sp-desc .woocommerce-Tabs-panel table tr:first-child th:last-child,
.vbx-sp-desc #tab-description table tr:first-child th:last-child {
border-right: none !important;
}
/* ============================================================
END TABLE BORDERS v3.0
============================================================ */
/* ============================================================
TABLE HEADER-BODY JOIN FIX v3.1
thead ও tbody আলাদা হয়ে যাওয়া ঠিক করে
============================================================ */
/* thead আর tbody এর মাঝে কোনো gap থাকবে না */
/* thead একদম body-র সাথে লাগানো */
.vbx-sp-desc .woocommerce-Tabs-panel table thead,
.vbx-sp-desc #tab-description table thead,
.vbx-sp-desc .woocommerce-Tabs-panel table tbody,
.vbx-sp-desc #tab-description table tbody {
margin: 0 !important;
padding: 0 !important;
}
/* header row-এর নিচে কোনো extra space নয় */
.vbx-sp-desc .woocommerce-Tabs-panel table thead tr,
.vbx-sp-desc #tab-description table thead tr,
.vbx-sp-desc .woocommerce-Tabs-panel table tbody tr,
.vbx-sp-desc #tab-description table tbody tr {
margin: 0 !important;
}
/* wrapper-এর margin table-এ যায়, ভেতরে নয় */
.vbx-sp-desc .vbx-table-scroll > table {
margin: 0 !important;
}
/* যদি দুটো পরপর table থাকে (header table + body table আলাদা) — জোড়া লাগাও */
/* border-collapse এ গেলে outer border আবার সেট করো (radius বাদ) */
.vbx-sp-desc .woocommerce-Tabs-panel table,
.vbx-sp-desc #tab-description table,
.vbx-sp-desc .vbx-table-scroll > table {
border-collapse: collapse !important;
border-spacing: 0 !important;
margin: 0 !important;
border: 1.5px solid rgba(255,255,255,.22) !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* ============================================================
END TABLE HEADER-BODY JOIN v3.1
============================================================ */
/* ============================================================
DESCRIPTION TABLE — FINAL CLEAN OVERRIDE v3.2
thead-tbody join + clean borders, একটাই source of truth
আগের সব table rule এই block override করে
============================================================ */
/* Wrapper — scroll only, কোনো border/radius/margin নয় (table নিজে handle করে) */
.vbx-sp-desc .vbx-table-scroll {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
margin: 18px 0 22px !important;
border-radius: 0 !important;
border: none !important;
background: transparent !important;
}
/* Table — single solid unit, collapse করে thead+tbody যুক্ত */
.vbx-sp-desc .woocommerce-Tabs-panel table,
.vbx-sp-desc #tab-description table,
.vbx-sp-desc .vbx-table-scroll > table,
.vbx-sp-desc .woocommerce-Tabs-panel table[border],
.vbx-sp-desc #tab-description table[border] {
width: 100% !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
margin: 0 !important;
background: #0e1d33 !important;
border: 1.5px solid rgba(255,255,255,.22) !important;
border-radius: 0 !important;
overflow: visible !important;
box-shadow: none !important;
}
/* thead / tbody — কোনো gap বা আলাদা spacing নয় */
.vbx-sp-desc table thead,
.vbx-sp-desc table tbody,
.vbx-sp-desc table thead tr,
.vbx-sp-desc table tbody tr {
margin: 0 !important;
border-spacing: 0 !important;
background: transparent !important;
}
/* সব cell — consistent border */
.vbx-sp-desc .woocommerce-Tabs-panel table th,
.vbx-sp-desc .woocommerce-Tabs-panel table td,
.vbx-sp-desc #tab-description table th,
.vbx-sp-desc #tab-description table td,
.vbx-sp-desc .vbx-table-scroll > table th,
.vbx-sp-desc .vbx-table-scroll > table td {
padding: 13px 16px !important;
border: 1px solid rgba(255,255,255,.16) !important;
font-size: 13.5px !important;
color: rgba(195,212,232,.85) !important;
text-align: left !important;
vertical-align: middle !important;
line-height: 1.5 !important;
}
/* Header row — premium, body-র সাথে যুক্ত (কোনো gap নয়) */
.vbx-sp-desc table thead th,
.vbx-sp-desc table tr:first-child th {
background: linear-gradient(180deg, #1a2940 0%, #15233a 100%) !important;
color: #FFFFFF !important;
font-weight: 800 !important;
font-size: 13.5px !important;
text-align: center !important;
letter-spacing: .02em !important;
border: 1px solid rgba(255,255,255,.22) !important;
padding: 14px 16px !important;
}
/* Zebra + hover */
.vbx-sp-desc table tbody tr:nth-child(even) {
background: rgba(255,255,255,.018) !important;
}
.vbx-sp-desc table tbody tr:hover {
background: rgba(240,16,16,.05) !important;
}
/* First column emphasis */
.vbx-sp-desc table td:first-child {
color: rgba(215,228,242,.92) !important;
font-weight: 600 !important;
}
/* Links */
.vbx-sp-desc table a { color: #ff5c5c !important; }
/* Mobile — scroll, nowrap */
@media (max-width: 768px) {
.vbx-sp-desc .vbx-table-scroll > table,
.vbx-sp-desc .woocommerce-Tabs-panel table,
.vbx-sp-desc #tab-description table {
min-width: 520px !important;
width: max-content !important;
}
.vbx-sp-desc table th,
.vbx-sp-desc table td {
padding: 11px 14px !important;
font-size: 12.5px !important;
white-space: nowrap !important;
}
}
/* ============================================================
END DESCRIPTION TABLE v3.2
============================================================ */
/* ── পরপর দুটো table (header table + body table আলাদা হলে) যুক্ত করা ── */
.vbx-sp-desc .vbx-table-scroll + .vbx-table-scroll {
margin-top: -22px !important;
border-top: none !important;
}
.vbx-sp-desc .vbx-table-scroll + .vbx-table-scroll > table {
border-top: none !important;
}
/* ============================================================
BLOG ARCHIVE PAGE (/blog/) — হোম পেজের dark grid design v4.0
============================================================ */
.vbx-blog-archive {
padding: 40px 0 70px !important;
background: var(--bg-body) !important;
}
/* Archive header */
.vbx-blog-archive-head {
text-align: center !important;
margin-bottom: 40px !important;
}
.vbx-blog-archive-title {
font-size: 32px !important;
font-weight: 800 !important;
color: #FFFFFF !important;
margin: 0 0 8px !important;
letter-spacing: .01em !important;
}
.vbx-blog-archive-sub {
font-size: 14px !important;
color: rgba(150,175,205,.75) !important;
}
/* Grid — হোম পেজের মতো ৪ কলাম */
.vbx-blog-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 22px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
box-sizing: border-box !important;
}
@media (max-width: 1100px) { .vbx-blog-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 820px) { .vbx-blog-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) { .vbx-blog-grid { grid-template-columns: 1fr !important; } }
/* Card — dark, premium */
.vbx-blog-card {
background: var(--bg-card, #14253c) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 14px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.vbx-blog-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
border-color: rgba(240,16,16,.35) !important;
}
/* Image */
.vbx-blog-img-wrap {
position: relative !important;
display: block !important;
overflow: hidden !important;
width: 100% !important;
}
.vbx-blog-img-wrap img {
width: 100% !important;
height: 180px !important;
object-fit: cover !important;
display: block !important;
transition: transform .3s ease !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
.vbx-blog-card:hover .vbx-blog-img-wrap img {
transform: scale(1.05) !important;
}
/* Category badge */
.vbx-blog-cat {
position: absolute !important;
top: 12px !important;
right: 12px !important;
background: #f01010 !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 800 !important;
padding: 4px 11px !important;
border-radius: 20px !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
box-shadow: 0 2px 10px rgba(240,16,16,.4) !important;
}
/* Body */
.vbx-blog-body {
padding: 16px 16px 18px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
background: transparent !important;
}
.vbx-blog-title {
font-size: 14.5px !important;
font-weight: 700 !important;
line-height: 1.45 !important;
margin: 0 0 8px !important;
color: var(--text-body) !important;
}
.vbx-blog-title a {
color: #E1EEFA !important;
text-decoration: none !important;
transition: color .15s ease !important;
}
.vbx-blog-title a:hover {
color: #ff4a4a !important;
}
.vbx-blog-excerpt {
font-size: 12.5px !important;
color: rgba(140,165,195,.85) !important;
line-height: 1.6 !important;
margin: 0 0 12px !important;
flex: 1 !important;
}
/* Meta row */
.vbx-blog-meta {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 11px !important;
color: rgba(130,155,185,.7) !important;
margin-bottom: 12px !important;
}
.vbx-blog-meta-author { color: #ff4a4a !important; font-weight: 600 !important; }
.vbx-blog-meta-dot { opacity: .5 !important; }
/* Read more */
.vbx-blog-readmore {
display: inline-block !important;
background: linear-gradient(135deg, #f43333, #f01010) !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 9px 18px !important;
border-radius: 8px !important;
text-decoration: none !important;
transition: transform .15s ease, box-shadow .15s ease !important;
width: fit-content !important;
box-shadow: 0 4px 14px rgba(240,16,16,.3) !important;
}
.vbx-blog-readmore:hover {
opacity: .85 !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 7px 20px rgba(240,16,16,.45) !important;
}
/* Pagination */
.vbx-blog-pagination .page-numbers:hover {
border-color: rgba(240,16,16,.5) !important;
color: #fff !important;
background: #1b2f4a !important;
}
/* Empty state */
.vbx-blog-empty {
text-align: center !important;
padding: 80px 20px !important;
color: rgba(150,175,205,.7) !important;
font-size: 16px !important;
}
/* Mobile header */
@media (max-width: 600px) {
.vbx-blog-archive { padding: 28px 0 50px !important; }
.vbx-blog-archive-title { font-size: 24px !important; }
.vbx-blog-archive-sub { font-size: 12.5px !important; }
.vbx-blog-grid { gap: 16px !important; }
}
/* ============================================================
END BLOG ARCHIVE PAGE v4.0
============================================================ */
/* ============================================================
BLOG PAGINATION — POLISH v4.1
hover/current state সুন্দর করা
============================================================ */
.vbx-blog-pagination {
margin-top: 48px !important;
display: flex !important;
justify-content: center !important;
}
.vbx-blog-pagination ul {
display: flex !important;
gap: 9px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
}
.vbx-blog-pagination ul li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: none !important;
}
.vbx-blog-pagination ul li::before { content: none !important; }
/* সব pagination button base */
.vbx-blog-pagination .page-numbers {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 42px !important;
height: 42px !important;
padding: 0 14px !important;
background: #14253c !important;
border: 1.5px solid rgba(255,255,255,.10) !important;
border-radius: 10px !important;
color: rgba(200,215,235,.85) !important;
font-size: 13.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: transform .15s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
line-height: 1 !important;
box-sizing: border-box !important;
}
/* Hover — শুধু clickable (a tag) এ */
a.page-numbers:hover {
border-color: rgba(240,16,16,.6) !important;
color: #fff !important;
background: #1b2f4a !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
}
/* Current page — orange gradient, no hover lift */
/* Prev / Next — একটু চওড়া */
.vbx-blog-pagination .prev.page-numbers,
.vbx-blog-pagination .next.page-numbers {
padding: 0 18px !important;
font-weight: 700 !important;
color: rgba(220,232,245,.9) !important;
}
.vbx-blog-pagination .prev.page-numbers:hover,
.vbx-blog-pagination .next.page-numbers:hover {
background: linear-gradient(135deg, #f43333, #f01010) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: 0 6px 18px rgba(240,16,16,.4) !important;
}
/* Dots (…) */
.vbx-blog-pagination .dots {
background: transparent !important;
border: none !important;
color: rgba(150,175,205,.6) !important;
min-width: auto !important;
padding: 0 4px !important;
}
.vbx-blog-pagination .dots:hover {
transform: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* Mobile */
@media (max-width: 600px) {
.vbx-blog-pagination { margin-top: 32px !important; }
.vbx-blog-pagination ul { gap: 6px !important; }
.vbx-blog-pagination .page-numbers {
min-width: 38px !important;
height: 38px !important;
font-size: 12.5px !important;
padding: 0 10px !important;
}
.vbx-blog-pagination .prev.page-numbers,
.vbx-blog-pagination .next.page-numbers {
padding: 0 13px !important;
}
}
/* ============================================================
END BLOG PAGINATION POLISH v4.1
============================================================ */
/* ============================================================
BLOG GRID 5-COLUMN + PAGINATION HOVER FIX v4.2
============================================================ */
/* ── প্রতি লাইনে ৫টা card ── */
.vbx-blog-archive .vbx-blog-grid,
.vbx-blog-grid {
grid-template-columns: repeat(5, 1fr) !important;
gap: 20px !important;
}
@media (max-width: 1300px) { .vbx-blog-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 1050px) { .vbx-blog-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 760px) { .vbx-blog-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 500px) { .vbx-blog-grid { grid-template-columns: 1fr !important; } }
/* image একটু ছোট যাতে ৫ কলামে balanced দেখায় */
.vbx-blog-archive .vbx-blog-img-wrap img {
height: 160px !important;
}
/* ── Pagination hover — li wrapper এর কোনো bg/border নয় ── */
.vbx-blog-pagination ul li,
.vbx-blog-pagination ul li:hover {
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* li এর ভেতরে hover effect শুধু button-এ থাকবে, li তে নয় */
.vbx-blog-pagination li:hover > .page-numbers:not(:hover):not(.current) {
background: #14253c !important;
border-color: rgba(255,255,255,.10) !important;
color: rgba(200,215,235,.85) !important;
transform: none !important;
box-shadow: none !important;
}
/* ============================================================
END BLOG GRID 5-COL + PAGINATION FIX v4.2
============================================================ */
/* ============================================================
BLOG PAGINATION — CONTAINER BACKGROUND REMOVE v4.3
1 2 Next এর পেছনের box/border সরানো
============================================================ */
/* pagination wrapper, nav, ul — সব transparent, কোনো box নয় */
.vbx-blog-pagination,
.vbx-blog-pagination nav,
.vbx-blog-pagination ul.page-numbers,
.vbx-blog-pagination ul,
nav.pagination,
.pagination .nav-links {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* theme-এর general ul.page-numbers যদি blog context-এ leak করে */
.vbx-blog-archive ul.page-numbers,
.vbx-blog-archive nav {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* শুধু আসল button গুলোতেই background থাকবে */
.vbx-blog-pagination ul.page-numbers {
display: flex !important;
justify-content: center !important;
gap: 9px !important;
margin: 0 !important;
}
/* ============================================================
END PAGINATION CONTAINER FIX v4.3
============================================================ */
/* ============================================================
BLOG PAGINATION — HOVER BACKGROUND FULL KILL v4.4
container + li + nav-links সব level এ hover background বন্ধ
============================================================ */
/* সব container — hover সহ সব state এ transparent */
.vbx-blog-pagination,
.vbx-blog-pagination:hover,
.vbx-blog-pagination nav,
.vbx-blog-pagination nav:hover,
.vbx-blog-pagination .nav-links,
.vbx-blog-pagination .nav-links:hover,
.vbx-blog-pagination ul,
.vbx-blog-pagination ul:hover,
.vbx-blog-pagination ul.page-numbers,
.vbx-blog-pagination ul.page-numbers:hover {
background: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* প্রতিটা li — hover সহ সব state এ transparent (কোনো box নয়) */
.vbx-blog-pagination li,
.vbx-blog-pagination ul li,
.vbx-blog-pagination ul.page-numbers li,
.vbx-blog-pagination li:hover,
.vbx-blog-pagination ul li:hover,
.vbx-blog-pagination ul.page-numbers li:hover,
.vbx-blog-pagination li:focus,
.vbx-blog-pagination li:active {
background: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
outline: none !important;
}
/* current button এর glow shadow কমাও যাতে নিচে box মনে না হয় */
.vbx-blog-pagination .page-numbers.current {
background: linear-gradient(135deg, #f43333, #f01010) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(240,16,16,.3) !important;
cursor: default !important;
}
/* ============================================================
END PAGINATION HOVER KILL v4.4
============================================================ */
/* ============================================================
SINGLE BLOG POST — DARK THEME v5.0
সাদা single post পেজকে থিমের dark vibe দেওয়া
============================================================ */
/* পুরো single post wrapper */
.single-post .vbd_main_content,
.single .vbd_main_content {
background: var(--bg-body) !important;
padding-top: 30px !important;
padding-bottom: 50px !important;
}
/* ── Search bar উপরে ── */
.vbd_single_post_search input[type="text"],
.vbd_single_post_search input[type="search"] {
background: var(--bg-card, #14253c) !important;
border: 1px solid rgba(255,255,255,.10) !important;
color: #fff !important;
border-radius: 10px !important;
}
.vbd_single_post_search input::placeholder {
color: rgba(255,255,255,.35) !important;
}
/* ── Content area — dark card ── */
.vbd_single_post_content_area_inner {
background: var(--bg-card, #14253c) !important;
border-radius: 14px !important;
padding: 32px 30px !important;
color: rgba(205,218,235,.88) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
}
/* Post title */
.vbd_single_post_title,
.vbd_single_post_content_area_inner h1.entry-title,
.vbd_single_post_content_area_inner .entry-title {
color: #FFFFFF !important;
font-weight: 800 !important;
}
/* Meta row (author, date, time, comments) */
ul.vbd_single_post_meta li,
ul.vbd_single_post_meta li a {
color: rgba(160,185,210,.8) !important;
border-right-color: rgba(255,255,255,.12) !important;
}
ul.vbd_single_post_meta li a:hover {
color: var(--primary-color) !important;
}
ul.vbd_single_post_meta li i,
ul.vbd_single_post_meta li svg {
color: var(--primary-color) !important;
}
/* Body text — সব paragraph, span, li */
.vbd_single_post_content_area_inner,
.vbd_single_post_content_area_inner p,
.vbd_single_post_content_area_inner span,
.vbd_single_post_content_area_inner li,
.vbd_single_post_content_area_inner td,
.vbd_single_post_content_area_inner div {
color: rgba(205,218,235,.88) !important;
}
/* Headings ভেতরে */
.vbd_single_post_content_area_inner h1,
.vbd_single_post_content_area_inner h2,
.vbd_single_post_content_area_inner h3,
.vbd_single_post_content_area_inner h4,
.vbd_single_post_content_area_inner h5,
.vbd_single_post_content_area_inner h6 {
color: #FFFFFF !important;
font-weight: 700 !important;
}
/* strong / bold */
.vbd_single_post_content_area_inner strong,
.vbd_single_post_content_area_inner b {
color: #fff !important;
}
/* Links — dark bg তে readable orange */
.vbd_single_post_content_area_inner a {
color: #ff5c5c !important;
}
.vbd_single_post_content_area_inner a:hover {
color: #FFBD7A !important;
}
/* List bullets/numbers */
.vbd_single_post_content_area_inner ul li::marker,
.vbd_single_post_content_area_inner ol li::marker {
color: var(--primary-color) !important;
}
/* Images — rounded */
.vbd_single_post_content_area_inner img {
border-radius: 10px !important;
max-width: 100% !important;
height: auto !important;
}
/* Blockquote */
.vbd_single_post_content_area_inner blockquote {
background: rgba(255,255,255,.03) !important;
border-left: 3px solid var(--primary-color) !important;
color: rgba(205,218,235,.9) !important;
padding: 14px 18px !important;
border-radius: 0 8px 8px 0 !important;
margin: 18px 0 !important;
}
/* Tables ভেতরে (content table) */
.vbd_single_post_content_area_inner table {
border-collapse: collapse !important;
width: 100% !important;
border: 1px solid rgba(255,255,255,.18) !important;
margin: 18px 0 !important;
}
.vbd_single_post_content_area_inner table th,
.vbd_single_post_content_area_inner table td {
border: 1px solid rgba(255,255,255,.14) !important;
padding: 10px 14px !important;
color: rgba(205,218,235,.88) !important;
}
.vbd_single_post_content_area_inner table th {
background: rgba(255,255,255,.04) !important;
color: #fff !important;
}
/* ── Prev/Next post navigation ── */
.vbd_single_post_content_area nav.navigation a {
background: linear-gradient(135deg, #f43333, #f01010) !important;
color: #fff !important;
border-radius: 8px !important;
box-shadow: 0 4px 14px rgba(240,16,16,.3) !important;
}
.vbd_single_post_content_area nav.navigation a:hover {
transform: translateY(-2px) !important;
box-shadow: 0 7px 20px rgba(240,16,16,.45) !important;
}
/* ── Sidebar ── */
/* FB comments area dark bg */
.fb-comments,
.fb-comments span,
.fb-comments iframe {
background: transparent !important;
}
/* ── Mobile ── */
@media (max-width: 768px) {
.vbd_single_post_content_area_inner {
padding: 22px 18px !important;
}
.vbd_single_post_title {
font-size: 22px !important;
}
}
/* ============================================================
END SINGLE BLOG POST DARK v5.0
============================================================ */
/* ============================================================
SINGLE POST LAYOUT — SIDEBAR পাশে (desktop) v5.1
content area + sidebar side-by-side, mobile এ stack
============================================================ */
/* Wrapper — flex row, search full width তারপর content+sidebar */
.vbd_single_post_wrap.vbd_row {
display: flex !important;
flex-flow: row wrap !important;
align-items: flex-start !important;
}
/* Search — full width উপরে */
.vbd_single_post_search {
width: 100% !important;
padding-left: 15px;
padding-right: 15px;
margin-top: 30px;
margin-bottom: 28px !important;
flex: 0 0 100% !important;
box-sizing: border-box !important;
}
/* Desktop layout — content 68%, sidebar 32% পাশাপাশি */
@media (min-width: 993px) {
.vbd_single_post_content_area {
width: 68% !important;
flex: 0 0 68% !important;
max-width: 68% !important;
box-sizing: border-box !important;
margin-top: 25px !important;
}
.vbd_single_post_sidebar {
width: 32% !important;
flex: 0 0 32% !important;
max-width: 32% !important;
box-sizing: border-box !important;
margin-top: 25px !important;
}
/* Sidebar sticky যাতে scroll করলে সাথে আসে */
.vbd_single_post_sidebar_inner {
position: sticky !important;
top: 80px !important;
margin-top: 0 !important;
}
}
/* ── Mobile/Tablet — stack (sidebar নিচে) ── */
@media (max-width: 992px) {
.vbd_single_post_content_area,
.vbd_single_post_sidebar {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.vbd_single_post_sidebar {
margin-top: 24px !important;
}
}
/* ── Facebook widget — dark container ── */
.vbd_single_post_sidebar_fb_widget {
background: var(--bg-card, #14253c) !important;
border-radius: 12px !important;
overflow: hidden !important;
padding: 6px !important;
margin-bottom: 22px !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
.vbd_single_post_sidebar_fb_widget iframe {
width: 100% !important;
border-radius: 8px !important;
display: block !important;
}
/* Sidebar related posts heading থাকলে */
/* Related post cards — dark (পুনঃনিশ্চিত) */
/* ============================================================
END SINGLE POST LAYOUT v5.1
============================================================ */
/* ============================================================
RELATED POSTS SIDEBAR — single clean block
============================================================ */
.vbd_single_related_post_wrap { display:flex; flex-direction:column; gap:14px; }
.vbd_single_related_post_wrap .vbd_post_item {
background:transparent !important; border:none !important;
padding:0 !important; margin:0 !important; width:100% !important;
}
.vbd_single_related_post_wrap .vbd_post_item_inner {
display:flex; flex-direction:column;
background:#14253c !important; color:rgba(205,218,235,.88) !important;
border:1px solid rgba(255,255,255,.08) !important; border-radius:12px !important;
padding:18px 20px !important; box-shadow:none !important;
transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vbd_single_related_post_wrap .vbd_post_item_inner:hover {
transform:translateY(-2px); border-color:rgba(240,16,16,.3) !important;
box-shadow:0 8px 24px rgba(0,0,0,.3) !important;
}
/* spacing — markup order: title, excerpt, readmore, footer */
.vbd_single_related_post_wrap .vbd_post_item_title { margin:0 0 8px !important; }
.vbd_single_related_post_wrap .vbd_post_item_readmore { margin:0 0 12px !important; padding:0 !important; }
.vbd_single_related_post_wrap .vbd_post_item_footer { margin:0 !important; padding:0 0 0 10px !important; border:none !important; background:none !important; }
.vbd_single_related_post_wrap .vbd_post_item_title a {
color:#EAF2FB !important; font-size:14.5px !important; font-weight:700 !important;
line-height:1.45 !important; text-decoration:none !important;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
transition:color .18s ease;
}
.vbd_single_related_post_wrap .vbd_post_item_title a:hover { color:#ff5c5c !important; }
.vbd_single_related_post_wrap .vbd_post_item_excerpt {
margin: 0 0 12px !important;
color: rgba(155,178,202,.78) !important;
font-size: 12.5px !important;
line-height: 1.6 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vbd_single_related_post_wrap .vbd_post_item_readmore a {
display:inline-block; color:#ff5c5c !important; font-size:12px !important;
font-weight:700 !important; text-decoration:none !important; background:none !important; padding:0 !important;
}
.vbd_single_related_post_wrap .vbd_post_item_readmore a:hover { color:#FFBD7A !important; }
.vbd_single_related_post_wrap .vbd_post_item_footer ul {
display:flex; align-items:center; list-style:none !important; margin:0 !important; padding:0 !important;
}
.vbd_single_related_post_wrap .vbd_post_item_footer ul li {
position:relative; display:inline-flex; align-items:center;
font-size:11px !important; font-weight:500 !important; margin:0 !important; padding:0 !important; border:none !important;
}
.vbd_single_related_post_wrap .vbd_post_item_footer ul li::before { content:none !important; }
.vbd_single_related_post_wrap .vbd_post_item_footer ul li:first-child { color:#ff4a4a !important; font-weight:600 !important; margin-right:18px !important; }
.vbd_single_related_post_wrap .vbd_post_item_footer ul li:last-child { color:rgba(140,165,195,.7) !important; }
.vbd_single_related_post_wrap .vbd_post_item_footer ul li:not(:last-child)::after {
content:""; background:rgba(255,255,255,.3); width:4px; height:4px;
position:absolute; right:-11px; top:50%; transform:translateY(-50%); border-radius:50%;
}
/* ============================================================ */
/* ============================================================
MV HOT ITEMS POPUP — প্লাগিন থেকে merge করা (theme color সহ)
Shortcodes: [mv_hot_categories] / [mv_hot_items]
============================================================ */
/* ── Wrapper ── */
.mv-hot-wrapper{
text-align:center;
position:relative;
padding-top:25px;
padding-bottom:35px;
}
/* collapsed — ২ লাইন + ৩য় লাইনের মাথা */
.mv-hot-wrapper.mv-hot-has-more:not(.mv-hot-expanded) .mv-hot-grid{
max-height:750px;
overflow:hidden;
}
@media (min-width:768px) and (max-width:1199px){
.mv-hot-wrapper.mv-hot-has-more:not(.mv-hot-expanded) .mv-hot-grid{ max-height:740px; }
}
@media (min-width:1200px){
.mv-hot-wrapper.mv-hot-has-more:not(.mv-hot-expanded) .mv-hot-grid{ max-height:650px; }
}
/* fade overlay — theme body bg (#031B23) এর সাথে mix */
.mv-hot-wrapper.mv-hot-has-more:not(.mv-hot-expanded) .mv-hot-grid::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:90px;
pointer-events:none;
z-index:1;
background:linear-gradient(to bottom, rgba(3,27,35,0) 0%, rgba(3,27,35,.64) 60%, rgba(3,27,35,1) 100%);
}
/* hint cards */
.mv-hot-wrapper.mv-hot-has-more:not(.mv-hot-expanded) .mv-hot-card-more{
opacity:.6;
transform:translateY(4px);
pointer-events:none;
transition:opacity .3s ease, transform .3s ease;
}
.mv-hot-wrapper.mv-hot-expanded .mv-hot-grid{ max-height:none; overflow:visible; }
.mv-hot-wrapper.mv-hot-expanded .mv-hot-card-more{ opacity:1; transform:none; pointer-events:auto; }
/* ── Title ── */
.mv-hot-title{
font-size:26px;
font-weight:700;
margin-bottom:20px;
text-transform:uppercase;
color:#ffffff;
text-align:left;
}
/* ── View More button ── */
.mv-hot-view-more{
position:absolute;
left:50%;
bottom:40px;
transform:translateX(-50%);
z-index:10;
margin:0;
padding:12px 26px;
border-radius:999px;
border:1px solid var(--primary, #f01010);
background:rgba(5,11,18,.9);
color:#ffffff;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow:0 5px 15px rgba(240,16,16,.19);
transition:background .3s ease, color .3s ease, box-shadow .3s ease, transform .2s ease;
animation:mvHotViewMoreFloat 1.8s ease-in-out infinite;
}
.mv-hot-view-more:hover{
background:linear-gradient(90deg, #f01010, #ff0000);
color:#ffffff;
box-shadow:0 12px 30px rgba(240,16,16,.22);
transform:translateX(-50%) translateY(-1px);
}
@keyframes mvHotViewMoreFloat{
0%{ transform:translateX(-50%) translateY(0); }
50%{ transform:translateX(-50%) translateY(-4px); }
100%{ transform:translateX(-50%) translateY(0); }
}
@media (max-width:600px){
.mv-hot-view-more{ padding:10px 20px; font-size:11px; bottom:40px; }
}
/* ── Outer grid ── */
.mv-hot-grid{
display:grid;
gap:8px;
max-width:1260px;
margin:0 auto;
grid-template-columns:repeat(3, minmax(0, 1fr));
position:relative;
padding-top:4px;
}
@media (min-width:768px) and (max-width:1199px){
.mv-hot-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (min-width:1200px){
.mv-hot-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}
/* ── Card ── */
.mv-hot-card{
position:relative;
width:100%;
overflow:hidden;
border-radius:10px;
background:var(--product-card-bg);
cursor:pointer;
border:1px solid rgba(255,255,255,.07);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mv-hot-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0,0,0,.45);
border-color:rgba(240,16,16,.3);
}
.mv-hot-card-thumb{
width:100%;
aspect-ratio:7 / 8;
overflow:hidden;
}
.mv-hot-card-thumb img{
width:100%;
height:100% !important;
object-fit:cover;
display:block;
transition:transform .5s ease;
}
.mv-hot-card:hover .mv-hot-card-thumb img{ transform:scale(1.04); }
/* glow bar */
.mv-hot-card::after{
content:"";
position:absolute;
bottom:0; left:0;
width:100%;
height:4px;
background:linear-gradient(90deg, #f01010, #ff0000, #f01010);
opacity:0;
transform:scaleX(0);
transition:transform .4s ease, opacity .4s ease;
}
.mv-hot-card:hover::after{ opacity:1; transform:scaleX(1); }
/* title */
.mv-hot-card-title{
padding:12px 8px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
color:#ffffff;
background:var(--product-card-bg);
text-align:center;
transition:color .3s ease;
line-height:1.35;
}
.mv-hot-card:hover .mv-hot-card-title{ color:var(--primary, #f01010); }
@media (max-width:1199px){ .mv-hot-card-title{ font-size:12px; padding:10px 6px; } }
@media (max-width:768px){ .mv-hot-card-title{ font-size:12px; padding:10px 6px; } }
@media (max-width:480px){ .mv-hot-card-title{ font-size:11px; padding:8px 5px; } }
.mv-hot-card-hidden{ display:none; }
/* ── Popup modal ── */
.mv-hot-items-modal{
position:fixed;
inset:0;
display:none;
z-index:9999;
align-items:center;
justify-content:center;
padding:5px;
box-sizing:border-box;
}
.mv-hot-items-modal.is-open{ display:flex; }
.mv-hot-items-modal-bg{
position:absolute;
inset:0;
background:rgba(0,0,0,.6);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.mv-hot-items-modal-inner{
position:relative;
width:100%;
max-width:1200px;
max-height:90vh;
background:var(--bg-body, #031B23);
border-radius:15px;
padding:18px;
box-sizing:border-box;
box-shadow:0 18px 45px rgba(0,0,0,.9);
border:1px solid rgba(255,255,255,.1);
overflow:visible;
}
.mv-hot-items-modal-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:16px;
}
.mv-hot-items-modal-title{
margin:0;
font-size:18px;
font-weight:700;
color:#ffffff;
text-align:left;
}
.mv-hot-items-modal-body{
max-height:calc(90vh - 80px);
overflow:auto;
}
.mv-hot-items-close{
position:absolute;
top:-16px; right:-16px;
width:34px; height:34px;
border-radius:50%;
border:2px solid var(--bg-body, #031B23);
background:var(--primary, #f01010);
color:#ffffff;
font-size:20px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 12px rgba(0,0,0,.5);
z-index:10;
padding:0;
transition:background .2s ease, transform .2s ease;
}
.mv-hot-items-close:hover{ background:#ff0000; transform:rotate(90deg); }
@media (max-width:600px){
.mv-hot-items-close{ top:-12px; right:-12px; width:30px; height:30px; font-size:18px; }
.mv-hot-items-modal-inner{ padding:14px; }
}
/* popup product grid */
.mv-hot-items-products .products{
margin:0;
padding:0;
list-style:none;
display:grid !important;
gap:8px;
grid-template-columns:repeat(3, minmax(0, 1fr));
}
@media (min-width:768px) and (max-width:1199px){
.mv-hot-items-products .products{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (min-width:1200px){
.mv-hot-items-products .products{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}
.mv-hot-items-products .products li.product{ margin:0 !important; }
.mv-hot-items-loading{ color:#ffffff; text-align:center; margin:30px 0; }
/* ============================================================
END MV HOT ITEMS POPUP
============================================================ */
/* ============================================================
MV HOT ITEMS — GRID REINFORCEMENT (theme conflict override)
============================================================ */
.mv-hot-wrapper .mv-hot-grid{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:8px !important;
max-width:1260px !important;
margin:0 auto !important;
list-style:none !important;
padding-left:0 !important;
}
@media (min-width:768px) and (max-width:1199px){
.mv-hot-wrapper .mv-hot-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width:1200px){
.mv-hot-wrapper .mv-hot-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)) !important; }
}
.mv-hot-wrapper .mv-hot-card{
display:block !important;
width:100% !important;
float:none !important;
margin:0 !important;
position:relative !important;
background:var(--product-card-bg) !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:12px !important;
overflow:hidden !important;
box-shadow:0 3px 12px rgba(0,0,0,.25) !important;
transition:transform .3s ease, box-shadow .3s ease !important;
text-decoration:none !important;
color:inherit !important;
}
/* anchor card hover/focus — underline বা link color যেন না আসে */
.mv-hot-wrapper a.mv-hot-card:hover,
.mv-hot-wrapper a.mv-hot-card:focus{
text-decoration:none !important;
}
/* আগের hover — শুধু lift + shadow, border পরিবর্তন নয় */
.mv-hot-wrapper .mv-hot-card:hover{
transform:translateY(-2px) !important;
box-shadow:0 8px 24px rgba(0,0,0,.4) !important;
}
.mv-hot-wrapper .mv-hot-card-thumb{
width:100% !important;
aspect-ratio:7 / 8 !important;
overflow:hidden !important;
position:relative !important;
}
.mv-hot-wrapper .mv-hot-card-thumb img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block !important;
transition:transform .5s ease !important;
}
.mv-hot-wrapper .mv-hot-card:hover .mv-hot-card-thumb img{
transform:scale(1.04) !important;
}
/* Title bar — brighter navy */
.mv-hot-wrapper .mv-hot-card-title{
display:block !important;
background:var(--product-card-bg) !important;
color:#ffffff !important;
text-align:center !important;
padding:13px 10px !important;
font-size:12px !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.03em !important;
line-height:1.35 !important;
transition:color .3s ease !important;
}
.mv-hot-wrapper .mv-hot-card:hover .mv-hot-card-title{
color:var(--primary, #f01010) !important;
}
/* accent bar — hover এ নিচে orange line (আগের মতো) */
.mv-hot-wrapper .mv-hot-card::after{
content:"" !important;
position:absolute !important;
bottom:0 !important; left:0 !important;
width:100% !important;
height:4px !important;
background:linear-gradient(90deg, #f01010, #ff0000, #f01010) !important;
opacity:0 !important;
transform:scaleX(0) !important;
transition:transform .4s ease, opacity .4s ease !important;
z-index:3 !important;
}
.mv-hot-wrapper .mv-hot-card:hover::after{
opacity:1 !important;
transform:scaleX(1) !important;
}
/* ============================================================ */
/* ============================================================
VOUCHERBD — PREMIUM ORDER RECEIVED / THANK YOU PAGE
WooCommerce default thankyou পেজ — card-based premium UI
(template override ছাড়া, শুধু CSS)
============================================================ */
/* "Thank you" banner — dashed border বাদ, premium gradient banner (compact) */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order p.woocommerce-thankyou-order-received{
background: linear-gradient(135deg, rgba(240,16,16,.15), rgba(240,16,16,.04));
border: 1px solid rgba(255,74,74,.35);
border-radius: 12px;
padding: 16px 20px;
text-align: center;
font-size: 16px;
font-weight: 700;
color: #ff4a4a;
margin-bottom: 16px;
position: relative;
}
.woocommerce-order p.woocommerce-thankyou-order-received::before{
content: ""; /* check-circle (Font Awesome) */
font-family: "Font Awesome 5 Free";
font-weight: 900;
display: block;
font-size: 28px;
color: #ff4a4a;
margin-bottom: 6px;
}
/* Order overview — লম্বা লিস্ট বাদ, পরিষ্কার card grid */
ul.woocommerce-order-overview.woocommerce-thankyou-order-details{
list-style: none !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important;
gap: 8px !important;
margin: 0 0 16px !important;
padding: 0 !important;
border: none !important;
}
ul.woocommerce-order-overview li{
background: var(--product-card-bg) !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 10px !important;
padding: 10px 10px !important;
text-align: center !important;
flex: none !important;
margin: 0 !important;
width: auto !important;
float: none !important;
display: block !important;
font-size: 9.5px !important;
letter-spacing: .04em !important;
color: var(--text-muted) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
line-height: 1.3 !important;
}
ul.woocommerce-order-overview li strong{
display: block !important;
margin-top: 4px !important;
font-size: 13px !important;
color: #ffffff !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 700 !important;
word-break: break-word !important;
}
/* Order details + customer details — premium cards (compact) */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details{
background: var(--product-card-bg);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 14px;
}
.woocommerce-order .woocommerce-order-details h2,
.woocommerce-order .woocommerce-customer-details h2,
.woocommerce-order .woocommerce-column__title{
font-size: 15px;
font-weight: 700;
color: #ffffff;
margin: 0 0 12px;
text-transform: uppercase;
letter-spacing: .03em;
}
/* Order details table */
.woocommerce-order table.woocommerce-table--order-details{
width: 100%;
border-collapse: collapse;
}
.woocommerce-order table.woocommerce-table--order-details th,
.woocommerce-order table.woocommerce-table--order-details td{
padding: 12px 10px;
border-bottom: 1px solid rgba(255,255,255,.07);
color: #eaf6ff;
font-size: 14px;
}
.woocommerce-order table.woocommerce-table--order-details thead th{
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
letter-spacing: .04em;
}
.woocommerce-order table.woocommerce-table--order-details tfoot th{
color: var(--text-muted);
font-weight: 600;
text-align: left;
}
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td{
font-size: 18px;
color: #ff4a4a;
font-weight: 700;
border-bottom: none;
padding-top: 14px;
}
.woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td .woocommerce-Price-amount{
color: #ff4a4a;
}
.woocommerce-order .woocommerce-table--order-details .product-name a{
color: #eaf6ff;
text-decoration: none;
}
/* Customer / billing address */
.woocommerce-order .woocommerce-customer-details address{
border: 1px solid rgba(255,255,255,.07);
border-radius: 10px;
padding: 16px;
color: #eaf6ff;
font-size: 14px;
line-height: 1.7;
font-style: normal;
}
/* mobile */
@media (max-width: 600px){
ul.woocommerce-order-overview.woocommerce-thankyou-order-details{
grid-template-columns: repeat(2, 1fr) !important;
}
.woocommerce-order p.woocommerce-thankyou-order-received{ font-size: 15px; padding: 14px 16px; }
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details{ padding: 14px; }
}
/* TAKE SCREENSHOT button — floating (fixed), scroll করলেও এক জায়গায় থাকে */
.vbd-screenshot-wrap{
position: fixed;
left: 22px;
bottom: 26px;
z-index: 99990;
margin: 0;
text-align: left;
}
.vbd-screenshot-btn{
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--primary);
color: #ffffff;
border: none;
border-radius: 50px;
padding: 13px 24px;
font-size: 14px;
font-weight: 700;
letter-spacing: .03em;
cursor: pointer;
box-shadow: 0 8px 24px rgba(240,16,16,.4);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.vbd-screenshot-btn:hover{
background: var(--primary-hover, #c50d0d);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(240,16,16,.5);
}
.vbd-screenshot-btn:active{ transform: translateY(0); }
.vbd-screenshot-btn:disabled{ opacity: .8; cursor: default; transform: none; }
/* মোবাইলে একটু ছোট + চ্যাট বাটনের সাথে যাতে overlap না হয় */
@media (max-width: 600px){
.vbd-screenshot-wrap{ left: 14px; bottom: 18px; }
.vbd-screenshot-btn{ padding: 11px 18px; font-size: 12.5px; }
.vbd-screenshot-btn span{ display: inline; }
}
/* ============================================================
VOUCHERBD — PREMIUM ORDERS LIST + VIEW ORDER PAGE
/my-account/orders/ ও /my-account/view-order/xxxx/
theme dark-navy + orange, card-based premium UI
============================================================ */
/* ---- Orders LIST table (/my-account/orders/) ---- */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table{
width: 100%;
border-collapse: separate;
border-spacing: 0 8px;
background: transparent;
border: none;
margin: 0;
}
.woocommerce-account table.woocommerce-orders-table thead th{
background: transparent;
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
padding: 6px 14px;
border: none;
text-align: left;
}
.woocommerce-account table.woocommerce-orders-table tbody tr{
background: var(--product-card-bg);
}
.woocommerce-account table.woocommerce-orders-table tbody td{
background: var(--product-card-bg);
border: none;
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
padding: 16px 14px;
color: #eaf6ff;
font-size: 14px;
vertical-align: middle;
transition: background .18s ease;
}
/* row এর প্রথম/শেষ cell এ rounded corner (card feel) */
.woocommerce-account table.woocommerce-orders-table tbody td:first-child{
border-left: 3px solid rgba(255,255,255,.06);
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
transition: background .18s ease, border-color .18s ease;
}
.woocommerce-account table.woocommerce-orders-table tbody td:last-child{
border-right: 1px solid rgba(255,255,255,.06);
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
/* hover — accent বাম border + হালকা bg (premium) */
.woocommerce-account table.woocommerce-orders-table tbody tr:hover td{
background: #123247;
}
.woocommerce-account table.woocommerce-orders-table tbody tr:hover td:first-child{
border-left-color: var(--primary);
}
.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a{
color: #ffffff;
font-weight: 700;
text-decoration: none;
transition: color .15s ease;
}
.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a:hover{
color: #ff4a4a;
}
.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount{
color: #ff4a4a;
font-weight: 700;
font-size: 15px;
}
/* order status — premium look + subtle dot indicator */
.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status{
font-weight: 700;
font-size: 13px;
color: #eaf6ff;
}
.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status::before{
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #ff4a4a;
margin-right: 7px;
vertical-align: middle;
}
/* action buttons */
.woocommerce-account table.woocommerce-orders-table .woocommerce-button.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button.button{
background: var(--primary) !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
padding: 8px 16px !important;
font-size: 12px !important;
font-weight: 700 !important;
transition: background .15s ease, transform .15s ease !important;
}
.woocommerce-account table.woocommerce-orders-table .woocommerce-button.button:hover{
background: var(--primary-hover, #c50d0d) !important;
transform: translateY(-1px);
}
.woocommerce-account table.woocommerce-orders-table .woocommerce-button.button.view{
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.14) !important;
}
.woocommerce-account table.woocommerce-orders-table .woocommerce-button.button.view:hover{
background: rgba(240,16,16,.15) !important;
border-color: rgba(255,74,74,.45) !important;
}
/* mobile: orders table → stacked cards */
@media (max-width: 768px){
.woocommerce-account table.woocommerce-orders-table thead{ display: none; }
.woocommerce-account table.woocommerce-orders-table tbody tr{
display: block;
background: var(--product-card-bg);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
margin-bottom: 12px;
padding: 6px 4px;
}
.woocommerce-account table.woocommerce-orders-table tbody td{
display: flex;
justify-content: space-between;
align-items: center;
border: none !important;
border-radius: 0 !important;
padding: 8px 14px;
text-align: right;
}
.woocommerce-account table.woocommerce-orders-table tbody td::before{
content: attr(data-title);
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
text-align: left;
}
.woocommerce-account table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions{
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px;
}
.woocommerce-account table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before{
display: none;
}
/* মোবাইলে status cell এ dot নয়, label দেখাই (desktop dot override) */
.woocommerce-account table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-status::before{
content: attr(data-title);
display: inline;
width: auto;
height: auto;
border-radius: 0;
background: transparent;
margin-right: 0;
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
}
/* ---- VIEW ORDER page (/my-account/view-order/xxxx/) ---- */
/* status intro banner */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order p,
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notice{
background: var(--product-card-bg);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
padding: 14px 18px;
color: #eaf6ff;
font-size: 14px;
margin-bottom: 16px;
}
/* order status steps (woocommerce-order-overview এর মত thankyou তে style করা আছে — এখানেও কাজ করবে) */
/* view-order details table — thankyou এর woocommerce-table--order-details style এখানেও apply হয় */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-details,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table.order_details{
width: 100%;
border-collapse: collapse;
background: var(--product-card-bg);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details th,
.woocommerce-account .woocommerce-MyAccount-content table.order_details td{
padding: 13px 16px;
border-bottom: 1px solid rgba(255,255,255,.06);
color: #eaf6ff;
font-size: 14px;
text-align: left;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details thead th{
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
letter-spacing: .04em;
background: rgba(255,255,255,.03);
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot th{
color: var(--text-muted);
font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td{
font-size: 18px;
color: #ff4a4a;
font-weight: 700;
border-bottom: none;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td .woocommerce-Price-amount{
color: #ff4a4a;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details .product-name a{
color: #eaf6ff;
text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details .product-name a:hover{
color: #ff4a4a;
}
/* customer / billing address blocks (view-order) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details{
background: var(--product-card-bg);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
padding: 18px;
margin-bottom: 16px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title{
font-size: 15px;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
letter-spacing: .03em;
margin: 0 0 12px;
padding-left: 11px;
border-left: 3px solid var(--primary);
line-height: 1.2;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address{
border: 1px solid rgba(255,255,255,.07);
border-radius: 10px;
padding: 14px 16px;
color: #eaf6ff;
font-size: 14px;
line-height: 1.7;
font-style: normal;
}
/* ============================================================ */
/* ============================================================
VOUCHERBD RECENTLY VIEWED + NEW ARRIVAL (theme-merged)
মূল plugin: "vbd-recently-viewed" (v2.1.1) এর CSS — theme এ যুক্ত।
সব selector .vrv-* / .vna- prefixed — theme এর সাথে conflict নেই।
============================================================ */
.vrv-head{
display:flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px;
margin-bottom: 12px;
}
/* title বাকি জায়গা নেয়, actions ডানে ঠেলে দেয় */
.vrv-head .vrv-title{
flex: 1 1 auto !important;
margin:0 !important;
}
/* Clear All + ‹ › সবসময় ডানে, এক লাইনে */
.vrv-head .vrv-actions{
margin-left: auto !important;
flex: 0 0 auto !important;
flex-wrap: nowrap !important;
justify-content: flex-end !important;
}
.vrv-title{
margin:0;
font-size: 22px;
font-weight: 700;
color:#eaf6ff;
letter-spacing: .2px;
}
.vrv-actions{ display:flex; align-items:center; gap:9px; }
.vrv-clear{
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.05);
color:#cdd9e3;
border-radius: 9px;
padding: 7px 12px;
cursor:pointer;
font-size: 13px;
font-weight: 500;
display:flex;
align-items:center;
gap:7px;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.vrv-clear:hover{
background: rgba(240,16,16,.12);
border-color: rgba(255,74,74,.45);
color:#ffb380;
}
.vrv-nav{
width:32px; height:32px;
border-radius: 9px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.05);
color:#cdd9e3;
cursor:pointer;
font-size: 17px;
display:flex; align-items:center; justify-content:center;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.vrv-nav:hover{
background: rgba(240,16,16,.12);
border-color: rgba(255,74,74,.45);
color:#ffb380;
}
.vrv-nav:active{ transform: scale(.92); }
/* Desktop tile size — 8 per row, premium reference look (slimmer) */
.vrv-tile{
display:flex;
align-items:center;
gap:8px;
padding: 7px 9px;
/* 8 per row: (100% - 7 gaps) / 8 ; gap=10px → 7*10=70px */
min-width: calc((100% - 70px) / 8);
max-width: calc((100% - 70px) / 8);
border-radius: 11px;
background: var(--product-card-bg);
border: 1px solid rgba(255,255,255,.05);
color:#f1f6fb;
text-decoration:none;
scroll-snap-align: start;
box-sizing: border-box;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
/* hover — specificity বাড়ানো (.vrv-row prefix) + !important, theme এর a:hover override করতে */
.vrv-row .vrv-tile:hover,
.vna-wrap[data-vna="1"] .vrv-tile:hover{
background: #1d4763 !important;
border-color: rgba(255,74,74,.5) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 18px rgba(0,0,0,.4) !important;
z-index: 5;
}
/* hover এ icon সামান্য বড় (premium feel) */
.vrv-row .vrv-tile:hover .vrv-tile-icon,
.vna-wrap[data-vna="1"] .vrv-tile:hover .vrv-tile-icon{
transform: scale(1.03);
box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
.vrv-tile-icon{
width:36px; height:36px;
border-radius: 9px;
overflow:hidden;
background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
display:flex; align-items:center; justify-content:center;
flex:0 0 36px;
box-shadow: 0 2px 7px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
transition: transform .18s ease, box-shadow .18s ease;
}
.vrv-tile-img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:9px; }
.vrv-fallback{
font-weight:800;
opacity:.9;
color:#ff4a4a;
font-size: 14px;
}
/* name — clean WHITE text, smaller, uniform Title Case, 2-line wrap */
.vrv-tile, .vrv-tile:hover, .vrv-tile:focus,
.vrv-row .vrv-tile .vrv-tile-name{
color:#ffffff;
}
.vrv-tile-name{
font-size: 9.5px;
font-weight: 600;
line-height: 1.15;
margin: 0;
color:#ffffff !important; /* HOT ITEM card title এর মতো সাদা (theme orange link-color override) */
letter-spacing: .1px;
text-transform: capitalize; /* FREE FIRE → Free Fire — সব নাম uniform */
transition: color .3s ease;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 100%;
word-break: break-word;
}
/* hover এ অরেঞ্জ — HOT ITEM card title এর মতোই */
.vrv-row .vrv-tile:hover .vrv-tile-name,
.vna-wrap[data-vna="1"] .vrv-tile:hover .vrv-tile-name{
color: var(--primary, #f01010) !important;
}
.vrv-row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 12px; }
/* Hide horizontal scrollbar (keep scroll functional) */
.vrv-row {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 8px 2px 10px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.vrv-row::-webkit-scrollbar {
height: 9px;
display: none;
}
/* Premium reveal — 200ms fade-in
- Recently Viewed: hidden by default, shown only when .vrv-ready
- New Arrival: should NOT be hidden (shows with page load) */
/* Recently Viewed ONLY: start hidden (no flash for new users) */
.vrv-wrap[data-vrv="1"]{
opacity: 0;
visibility: hidden;
transform: translateY(6px);
max-height: 0;
overflow: hidden;
pointer-events: none;
transition:
opacity 200ms ease,
transform 200ms ease,
max-height 260ms ease,
visibility 0s linear 200ms;
}
/* loading state remains hidden */
.vrv-wrap.vrv-loading{
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(6px) !important;
max-height: 0 !important;
pointer-events: none !important;
}
/* when ready: fade in */
.vrv-wrap.vrv-ready{
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
max-height: 320px !important;
pointer-events: auto !important;
transition:
opacity 200ms ease,
transform 200ms ease,
max-height 260ms ease,
visibility 0s;
}
@media (min-width: 992px){
.vrv-wrap.vrv-ready{
max-height: 340px !important;
}
}
/* New Arrival: always visible like other page content (no hide/show) */
.vna-wrap[data-vna="1"]{
opacity: 1;
visibility: visible;
transform: none;
max-height: none;
overflow: visible;
pointer-events: auto;
}
/* marquee smoothness: snap/smooth-behavior বন্ধ (rAF scroll-এর সাথে conflict এড়াতে) */
.vna-wrap[data-vna="1"] .vrv-row{
scroll-snap-type: none;
scroll-behavior: auto;
overflow: hidden; /* transform marquee — clone করা অংশ container এর বাইরে লুকানো থাকে */
flex-wrap: nowrap;
-ms-overflow-style: none;
scrollbar-width: none;
}
.vna-wrap[data-vna="1"] .vrv-row::-webkit-scrollbar{
display: none; /* Chrome/Safari scrollbar লুকাই */
width: 0;
height: 0;
}
/* New Arrival tiles — FIXED width (container-এ সংকুচিত হবে না),
না হলে scrollWidth = clientWidth হয়ে marquee আটকে যায় */
.vna-wrap[data-vna="1"] .vrv-tile{
scroll-snap-align: none;
min-width: 185px !important;
max-width: 185px !important;
flex: 0 0 185px !important;
}
@media (max-width: 767px){
.vna-wrap[data-vna="1"] .vrv-tile{
min-width: 160px !important;
max-width: 160px !important;
flex: 0 0 160px !important;
}
}
/* Tablet (768–991px): 5 per row, compact */
@media (min-width: 768px) and (max-width: 991px){
.vrv-tile{
/* 5 per row: (100% - 4 gaps) / 5 ; gap=10px → 4*10=40px */
min-width: calc((100% - 40px) / 5);
max-width: calc((100% - 40px) / 5);
padding: 7px 9px;
gap: 7px;
}
.vrv-tile-icon{
width: 32px; height: 32px; flex: 0 0 32px;
}
.vrv-tile-name{ font-size: 9.5px; }
}
/* Mobile (≤767px): 3 full + 1 partial */
@media (max-width: 767px){
.vrv-head{
gap: 8px;
margin-bottom: 10px;
flex-wrap: nowrap;
}
.vrv-title{
font-size: 18px;
line-height: 1.15;
}
.vrv-actions{
gap: 8px;
}
.vrv-clear{
padding: 6px 9px;
border-radius: 9px;
font-size: 12px;
gap: 6px;
}
.vrv-clear .vrv-ico{
font-size: 13px;
line-height: 1;
}
.vrv-nav{
width: 30px;
height: 30px;
border-radius: 9px;
font-size: 16px;
}
.vrv-row{
gap: 8px;
padding-bottom: 4px;
padding-right: 24px;
}
.vrv-tile{
min-width: 30.5vw;
max-width: 30.5vw;
padding: 7px 8px;
border-radius: 10px;
gap: 7px;
}
.vrv-tile-icon{
width: 32px;
height: 32px;
border-radius: 8px;
flex: 0 0 32px;
}
.vrv-tile-name{
font-size: 9px;
max-width: none;
-webkit-line-clamp: 2;
line-height: 1.15;
}
}
/* Even smaller phones (<=380px) */
@media (max-width: 380px){
.vrv-tile{
min-width: 31vw;
max-width: 31vw;
}
.vrv-tile-name{ font-size: 8.5px; -webkit-line-clamp: 2; }
}
@media (max-width: 420px){
.vrv-clear-text{ display:none; }
}
/* ============================================================ */
/* ── Premium Orders page (My Account → Orders): theme-matched cards + status badge ── */
.vbx-orders{ display:flex; flex-direction:column; gap:12px; margin:0; }
.vbx-order{ position:relative; display:flex; align-items:center; gap:16px; background:var(--product-card-bg); border:1px solid var(--border-soft); border-radius:var(--vbx-br); padding:16px 18px; overflow:hidden; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.vbx-order::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .2s ease; }
.vbx-order:hover{ transform:translateY(-2px); border-color:var(--primary-border); box-shadow:0 8px 22px rgba(0,0,0,.32); }
.vbx-order:hover::before{ background:var(--primary); }
.vbx-order__main{ flex:1 1 auto; min-width:0; }
.vbx-order__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vbx-order__num{ color:#ffffff !important; font-weight:700; font-size:15px; text-decoration:none; transition:color .15s ease; }
.vbx-order__num:hover{ color:var(--primary-light) !important; }
.vbx-order__meta{ color:var(--text-muted); font-size:12.5px; margin-top:5px; }
.vbx-order__dot{ margin:0 4px; opacity:.55; }
.vbx-order__side{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.vbx-order__total{ color:var(--primary-light); font-weight:700; font-size:16px; line-height:1; text-align:right; white-space:nowrap; }
.vbx-order__total small{ display:block; color:var(--text-muted); font-size:10px; font-weight:500; margin-top:4px; letter-spacing:.3px; text-transform:uppercase; }
.vbx-order__total .woocommerce-Price-amount{ color:var(--primary-light); }
.vbx-order__actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.vbx-order__btn{ display:inline-block; padding:9px 18px; border-radius:9px; font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; background:rgba(255,255,255,.07); border:1px solid var(--border-soft); color:#ffffff !important; transition:background .15s ease, border-color .15s ease, transform .15s ease; }
.vbx-order__btn:hover{ background:rgba(240,16,16,.15); border-color:var(--primary-border); transform:translateY(-1px); }
.vbx-order__btn--pay{ background:var(--btn-gradient); border-color:transparent; box-shadow:var(--btn-shadow); }
.vbx-order__btn--pay:hover{ background:var(--btn-gradient); }
.vbx-os{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.4; white-space:nowrap; color:var(--text-muted); background:rgba(255,255,255,.06); border:1px solid var(--border-soft); }
.vbx-os::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.vbx-os--completed{ color:#34D399; background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.30); }
.vbx-os--processing{ color:#60A5FA; background:rgba(96,165,250,.12); border-color:rgba(96,165,250,.30); }
.vbx-os--pending, .vbx-os--pending-payment{ color:#FBBF24; background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.30); }
.vbx-os--on-hold{ color:#ff4a4a; background:rgba(240,16,16,.12); border-color:rgba(240,16,16,.30); }
.vbx-os--cancelled, .vbx-os--failed{ color:#F87171; background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.30); }
.vbx-os--refunded{ color:#9CA3AF; background:rgba(156,163,175,.12); border-color:rgba(156,163,175,.30); }
.vbx-orders__pagination{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px; }
.vbx-page-spacer{ flex:1; }
.vbx-page-btn{ display:inline-block; padding:9px 18px; border-radius:9px; font-size:12px; font-weight:700; text-decoration:none; background:rgba(255,255,255,.07); border:1px solid var(--border-soft); color:#ffffff !important; transition:background .15s ease, border-color .15s ease; }
.vbx-page-btn:hover{ background:rgba(240,16,16,.15); border-color:var(--primary-border); }
.vbx-page-btn--next{ margin-left:auto; }
@media (max-width:768px){
.vbx-order{ flex-direction:column; align-items:stretch; gap:12px; }
.vbx-order__side{ justify-content:space-between; }
.vbx-order__total{ text-align:left; }
.vbx-order__actions{ justify-content:flex-start; }
}
/* ── Premium single Order View header (replaces yellow sentence) ── */
.woocommerce-account .woocommerce-MyAccount-content .vbx-vo-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--border-soft); }
.vbx-vo-left{ min-width:0; }
.vbx-vo-num{ display:block; color:#ffffff; font-weight:800; font-size:24px; letter-spacing:.5px; line-height:1.1; }
.vbx-vo-date{ color:var(--text-muted); font-size:13px; margin:8px 0 0; }
.vbx-vo-head .vbx-os{ font-size:12px; padding:5px 13px; }
.vbx-vo-updates-title{ font-size:15px; font-weight:700; color:#ffffff; text-transform:uppercase; letter-spacing:.03em; margin:0 0 12px; }
/* ── Premium "Pay for order" summary table (order-pay page uses a plain .shop_table) ── */
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table){ width:100% !important; margin:0 !important; padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) thead th{ font-size:13px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.06em !important; color:var(--text-muted) !important; padding:14px 20px 12px !important; border-bottom:1px solid var(--border-soft) !important; text-align:left !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) thead th.product-quantity{ text-align:center !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) thead th.product-total{ text-align:right !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tbody td{ padding:16px 20px !important; font-size:14px !important; border-bottom:1px solid var(--border-subtle) !important; color:#c5d2e0 !important; vertical-align:top !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tbody td.product-name{ font-weight:600 !important; color:#ffffff !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tbody td.product-quantity{ text-align:center !important; white-space:nowrap !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tbody td.product-total{ text-align:right !important; font-weight:700 !important; color:var(--primary-light) !important; white-space:nowrap !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tbody td.product-name .wc-item-meta{ margin:6px 0 0 !important; padding:0 !important; list-style:none !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tbody td.product-name .wc-item-meta li{ display:flex; flex-wrap:wrap; gap:4px; font-size:12px !important; font-weight:400 !important; color:var(--text-muted) !important; margin:2px 0 !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tbody td.product-name .wc-item-meta li strong{ color:#cfe0e6 !important; font-weight:600 !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tbody td.product-name .wc-item-meta li p{ margin:0 !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tfoot th{ padding:11px 20px !important; text-align:left !important; font-size:14px !important; font-weight:600 !important; color:var(--text-body) !important; border:none !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tfoot td{ padding:11px 20px !important; text-align:right !important; font-size:14px !important; font-weight:600 !important; color:#eaf6ff !important; border:none !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tfoot td .woocommerce-Price-amount{ color:var(--primary-light) !important; font-weight:700 !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tfoot tr:last-child th{ font-size:15px !important; font-weight:800 !important; color:#ffffff !important; text-transform:uppercase !important; border-top:1px solid var(--border-subtle) !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tfoot tr:last-child td{ font-size:18px !important; font-weight:800 !important; border-top:1px solid var(--border-subtle) !important; }
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tfoot tr:last-child td .woocommerce-Price-amount{ color:var(--primary-light) !important; }
@media (max-width:600px){
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) thead th,
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tbody td,
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tfoot th,
#order_review table.shop_table:not(.woocommerce-checkout-review-order-table) tfoot td{ padding-left:14px !important; padding-right:14px !important; }
}
/* ── Unified product-card badge: top-right corner, image-এর rounded corner-এ মিশে (flush tab) ── */
.vbx-cardbadge{ position:absolute; top:0; right:0; left:auto; bottom:auto; z-index:5; display:inline-flex; align-items:center; gap:5px; padding:7px 12px 7px 13px; border-radius:0 10px 0 14px; font-family:var(--font-lato); font-size:11px; font-weight:700; letter-spacing:.3px; line-height:1; white-space:nowrap; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.20); }
.vbx-cardbadge .vbx-cb-ic{ width:12px; height:12px; flex:0 0 auto; }
.vbx-cb-sale{ background:linear-gradient(135deg,#ff5c5c,#f01010 55%,#c50d0d); }
.vbx-cb-auto{ background:rgba(8,16,18,.72); border:1px solid rgba(255,255,255,.18); box-shadow:0 2px 8px rgba(0,0,0,.28); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.vbx-cb-auto .vbx-cb-ic, .vbx-cb-auto svg{ color:#f43333; }
.vbx-cb-sold{ background:linear-gradient(135deg,#3a4250,#1c2230); color:#e8edf5; }
.mv-hot-items-products li.product .vbx-cardbadge{ top:0 !important; right:0 !important; left:auto !important; bottom:auto !important; }
@media (max-width:600px){ .vbx-cardbadge{ font-size:10px; padding:6px 10px 6px 11px; border-radius:0 10px 0 12px; } .vbx-cardbadge .vbx-cb-ic{ width:11px; height:11px; } }
/* ── PPOM select fields (e.g. Server) on single product: match the PPOM input style + custom arrow ── */
.vbx-order-summary .ppom-field-wrapper select{
display: block !important;
width: 100% !important;
background-color: #0a1628 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A90A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 12px 12px !important;
border: 1.5px solid rgba(255,255,255,.14) !important;
border-radius: 9px !important;
color: #fff !important;
font-size: 14px !important;
line-height: 1.3 !important;
padding: 12px 40px 12px 15px !important;
height: auto !important;
box-shadow: none !important;
box-sizing: border-box !important;
cursor: pointer !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
transition: border-color .2s, box-shadow .2s !important;
}
.vbx-order-summary .ppom-field-wrapper select:focus{
border-color: #f01010 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(240,16,16,.15) !important;
background-color: #0c1c2e !important;
}
.vbx-order-summary .ppom-field-wrapper select option{
background: #0a1628 !important;
color: #fff !important;
}
@media (max-width:600px){
.vbx-order-summary .ppom-field-wrapper select{ padding:13px 38px 13px 14px !important; font-size:15px !important; }
}
/* ── Redeem to Wallet button: comfortable padding (was too thin / চিকন) ── */
.mv-wallet-voucher-redeem-form button.button,
.mv-wv-redeem-page .mv-wallet-voucher-redeem-form button[type="submit"]{
padding: 12px 28px !important;
}
/* ============================================================
Account details (edit-account) — premium compact, theme-matched
2-column names, themed inputs, password panel, eye toggle
============================================================ */
.woocommerce-EditAccountForm{ display:flex; flex-wrap:wrap; gap:13px 16px; align-items:flex-start; }
.woocommerce-EditAccountForm > p,
.woocommerce-EditAccountForm > fieldset{ width:100%; margin:0 !important; }
.woocommerce-EditAccountForm > .form-row-first,
.woocommerce-EditAccountForm > .woocommerce-form-row--first,
.woocommerce-EditAccountForm > .form-row-last,
.woocommerce-EditAccountForm > .woocommerce-form-row--last{ width:calc(50% - 8px); }
/* Labels */
.woocommerce-EditAccountForm label{ display:block; font-size:11.5px !important; font-weight:600 !important; color:#c5d2e0 !important; margin-bottom:6px !important; }
.woocommerce-EditAccountForm label .required{ color:#FF6B6B !important; border:none !important; text-decoration:none !important; }
/* Inputs */
.woocommerce-EditAccountForm input.woocommerce-Input,
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"]{
width:100% !important;
background:#0a1628 !important;
border:1.5px solid rgba(255,255,255,.14) !important;
border-radius:10px !important;
color:#fff !important;
font-size:13.5px !important;
line-height:1.3 !important;
padding:11px 14px !important;
height:auto !important;
box-shadow:none !important;
box-sizing:border-box !important;
transition:border-color .2s, box-shadow .2s !important;
}
.woocommerce-EditAccountForm input.woocommerce-Input:focus,
.woocommerce-EditAccountForm input[type="text"]:focus,
.woocommerce-EditAccountForm input[type="email"]:focus,
.woocommerce-EditAccountForm input[type="password"]:focus{
border-color:#f01010 !important;
outline:none !important;
box-shadow:0 0 0 3px rgba(240,16,16,.15) !important;
background:#0c1c2e !important;
}
.woocommerce-EditAccountForm input::placeholder{ color:rgba(255,255,255,.25) !important; }
/* Display-name helper line */
.woocommerce-EditAccountForm em{ display:block; font-size:11.5px !important; font-style:italic !important; font-weight:400 !important; color:#7A90A8 !important; margin-top:6px !important; }
.woocommerce-EditAccountForm > p > span{ display:block; }
/* Password change panel */
.woocommerce-EditAccountForm fieldset{
padding:16px 18px 4px !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:14px !important;
background:rgba(255,255,255,.02) !important;
}
.woocommerce-EditAccountForm fieldset legend{
display:block !important;
float:none !important;
width:100% !important;
font-size:13px !important;
font-weight:700 !important;
color:#ffffff !important;
text-transform:uppercase !important;
letter-spacing:.05em !important;
padding:0 0 11px 0 !important;
margin:0 0 14px 0 !important;
border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.woocommerce-EditAccountForm fieldset .woocommerce-form-row,
.woocommerce-EditAccountForm fieldset .form-row{ width:100% !important; margin:0 0 13px 0 !important; }
/* Password show/hide toggle → eye icon inside the input (no stray white box) */
.woocommerce-EditAccountForm .password-input{ position:relative !important; display:block !important; width:100% !important; }
.woocommerce-EditAccountForm .password-input input{ padding-right:42px !important; }
.woocommerce-EditAccountForm .show-password-input{
position:absolute !important;
right:13px !important;
top:50% !important;
transform:translateY(-50%) !important;
width:20px !important;
height:20px !important;
margin:0 !important;
padding:0 !important;
background-color:transparent !important;
border:none !important;
cursor:pointer !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237A90A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:20px 20px !important;
}
.woocommerce-EditAccountForm .show-password-input::after{ content:none !important; }
.woocommerce-EditAccountForm .show-password-input.display-password{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FF8533' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}
/* Save changes button */
.woocommerce-EditAccountForm button.woocommerce-Button,
.woocommerce-EditAccountForm button[type="submit"]{ padding:12px 28px !important; }
/* Mobile: names stack */
@media (max-width:600px){
.woocommerce-EditAccountForm > .form-row-first,
.woocommerce-EditAccountForm > .woocommerce-form-row--first,
.woocommerce-EditAccountForm > .form-row-last,
.woocommerce-EditAccountForm > .woocommerce-form-row--last{ width:100%; }
.woocommerce-EditAccountForm fieldset{ padding:14px 14px 2px !important; }
}
/* ============================================================
Blog grid responsive fix — mobile = 2 columns
The 5-column base rule (.vbx-blog-archive .vbx-blog-grid) outranks its own
.vbx-blog-grid media queries by specificity, so reductions never applied
(every screen showed 5 columns). Re-assert at matching specificity, last in
source order, so they win cleanly. Desktop stays 5, mobile becomes 2.
============================================================ */
@media (max-width: 1300px){
.vbx-blog-archive .vbx-blog-grid,
.vbx-blog-grid{ grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 1050px){
.vbx-blog-archive .vbx-blog-grid,
.vbx-blog-grid{ grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px){
.vbx-blog-archive .vbx-blog-grid,
.vbx-blog-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}
/* ============================================================
Blog card compact (mobile) — shorter, balanced cards
Smaller image, clamped title/excerpt, tighter spacing. ≤768px only.
============================================================ */
@media (max-width: 768px){
.vbx-blog-img-wrap img{ height: 130px !important; }
.vbx-blog-body{ padding: 12px 13px 13px !important; }
.vbx-blog-title{
font-size: 13.5px !important; line-height: 1.35 !important; margin: 0 0 6px !important;
display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important;
}
.vbx-blog-excerpt{
font-size: 11.5px !important; line-height: 1.5 !important; margin: 0 0 10px !important; flex: 0 0 auto !important;
display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
}
.vbx-blog-meta{ font-size: 10px !important; gap: 5px !important; margin-bottom: 10px !important; }
.vbx-blog-readmore{ font-size: 11.5px !important; padding: 7px 14px !important; margin-top: auto !important; }
.vbx-blog-cat{ font-size: 9px !important; padding: 3px 9px !important; top: 10px !important; right: 10px !important; }
}
/* ============================================================
Shop loop product title — match homepage hot-card title
Opaque strip (covers the hover image-zoom bleed) + proper mobile padding,
so the title isn't thin and the text no longer slips under the zooming image.
============================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
position: relative !important;
z-index: 2 !important;
background: var(--product-card-bg) !important;
line-height: 1.35 !important;
}
@media (max-width: 768px){
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-size: 12px !important;
padding: 10px 6px !important;
font-weight: 700 !important;
}
}
@media (max-width: 480px){
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-size: 11px !important;
padding: 8px 5px !important;
}
}
/* ============================================================
Order View — Actions row (Pay / Cancel) buttons
WooCommerce order-details tfoot-এর ডিফল্ট বাটন: গায়ে-গায়ে লেগে থাকা
+ সাইজ ফিক্স; Orders list-এর বাটন স্টাইলের সাথে মেলানো।
============================================================ */
.woocommerce-order-details .shop_table a.woocommerce-button.button{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:9px 20px !important;
border-radius:8px !important;
font-size:13px !important;
font-weight:600 !important;
line-height:1 !important;
text-transform:none !important;
text-decoration:none !important;
background:transparent !important;
border:1px solid var(--border-soft) !important;
color:#fff !important;
box-shadow:none !important;
transition:all .2s ease !important;
margin:2px 0 2px 10px !important;
}
.woocommerce-order-details .shop_table a.woocommerce-button.button:hover{
border-color:var(--primary-border) !important;
background:var(--primary-glow) !important;
color:var(--primary-light) !important;
}
.woocommerce-order-details .shop_table a.woocommerce-button.button.pay{
background:var(--btn-gradient) !important;
border:1px solid transparent !important;
color:#fff !important;
box-shadow:var(--btn-shadow) !important;
}
.woocommerce-order-details .shop_table a.woocommerce-button.button.pay:hover{
filter:brightness(1.1);
color:#fff !important;
}
@media (max-width:600px){
.woocommerce-order-details .shop_table a.woocommerce-button.button{
padding:8px 16px !important;
font-size:12px !important;
margin:3px 0 3px 8px !important;
}
}
/* ============================================================
Orders — empty state (no orders yet)
============================================================ */
.vbx-orders-empty{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:70px 20px;
}
.vbx-orders-empty__icon{
display:flex;
align-items:center;
justify-content:center;
width:72px;
height:72px;
border-radius:20px;
background:var(--primary-glow);
border:1px solid var(--primary-border);
color:var(--primary-light);
margin-bottom:18px;
}
.vbx-orders-empty__icon svg{ width:34px; height:34px; }
.vbx-orders-empty__title{
margin:0 0 8px;
font-size:20px;
font-weight:800;
color:#fff;
}
.vbx-orders-empty__text{
margin:0 0 22px;
font-size:13.5px;
color:var(--text-muted);
max-width:340px;
line-height:1.6;
}
.vbx-orders-empty__btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 28px;
border-radius:10px;
background:var(--btn-gradient);
box-shadow:var(--btn-shadow);
color:#fff !important;
font-size:13.5px;
font-weight:700;
text-decoration:none !important;
transition:filter .2s ease, transform .2s ease;
}
.vbx-orders-empty__btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }
@media (max-width:600px){
.vbx-orders-empty{ padding:48px 14px; }
}
/* ============================================================
Cart — empty state, theme-matched (premium)
body.vbx-cart-empty আসে functions.php থেকে (cart খালি হলে)।
:has() rule টা AJAX-এ শেষ item remove হলে modern browser-এ কভার দেয়।
============================================================ */
body.vbx-cart-empty.woocommerce-cart .entry-content .woocommerce{
background: transparent !important;
border-radius: 0 !important;
}
.woocommerce-cart .entry-content .woocommerce:has(.wc-empty-cart-message),
.woocommerce-cart .entry-content .woocommerce:has(.cart-empty){
background: transparent !important;
border-radius: 0 !important;
}
/* message → centered premium block with icon chip */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .wc-empty-cart-message .woocommerce-info,
.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 56px 20px 6px !important;
margin: 0 !important;
color: #fff !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner svg{ display:none !important; }
.woocommerce-cart .cart-empty.woocommerce-info::before,
.woocommerce-cart .wc-empty-cart-message .woocommerce-info::before,
.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner::before{
content: "\f07a";
font-family: "Font Awesome 5 Free";
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 20px;
background: var(--primary-glow);
border: 1px solid var(--primary-border);
color: var(--primary-light);
font-size: 28px;
margin-bottom: 18px;
}
.woocommerce-cart .cart-empty.woocommerce-info::after,
.woocommerce-cart .wc-empty-cart-message .woocommerce-info::after,
.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner::after{
content: "Looks like you haven’t added anything yet.";
display: block;
margin-top: 8px;
font-size: 13.5px;
font-weight: 400;
color: var(--text-muted);
line-height: 1.6;
}
/* Return to shop → gradient premium button, centered */
.woocommerce-cart .return-to-shop{
display: flex !important;
justify-content: center !important;
padding: 16px 20px 56px !important;
margin: 0 !important;
}
.woocommerce-cart .return-to-shop .button{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 12px 28px !important;
border-radius: 10px !important;
background: var(--btn-gradient) !important;
box-shadow: var(--btn-shadow) !important;
color: #fff !important;
font-size: 13.5px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-decoration: none !important;
text-transform: none !important;
border: none !important;
transition: filter .2s ease, transform .2s ease !important;
}
.woocommerce-cart .return-to-shop .button:hover{
filter: brightness(1.1);
transform: translateY(-1px);
color: #fff !important;
}
@media (max-width:600px){
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .wc-empty-cart-message .woocommerce-info,
.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner{ padding: 44px 14px 4px !important; }
.woocommerce-cart .return-to-shop{ padding: 14px 14px 44px !important; }
}