/*
Theme Name: Pangja - Child
Theme URI: http://harutheme.com/pangja
Author: HaruTheme
Author URI: http://harutheme.com/
Description: This is child theme of Pangja
Template: pangja
Version: 1.0.0
*/

/*---------------------------------
    Write your css code from here
------------------------------------*/

/* Десният блок на хедъра: 2 реда
   Ред 1: контактите (Custom Text)
   Ред 2: количка + профил
*/
#haru-header .header-right .header-elements-right{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  row-gap:8px;
}

/* Контактите (custom text) на цял ред отгоре */
#haru-header .header-elements-right > .custom-text-wrap{
  flex:0 0 100%;
  display:flex;
  justify-content:flex-end;
}

/* --- Контакти: PNG икони + текст --- */
#haru-header .top-contact--img{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:22px;
  white-space:nowrap;
}

#haru-header .top-contact--img .top-contact__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#000;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}

/* ПОКАЖИ текста (ако някъде е бил скриван преди) */
#haru-header .top-contact--img .top-contact__text{
  display:inline !important;
}

/* Без рамка/кутия, само PNG */
#haru-header .top-contact--img .top-contact__icon{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:0 !important;
  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Размер на иконките (смени на 28/30 ако искаш по-големи) */
#haru-header .top-contact--img .top-contact__icon img{
  width:26px;
  height:26px;
  object-fit:contain;
  display:block;
}

/* Hover */
#haru-header .top-contact--img .top-contact__item:hover{
  opacity:.85;
}

/* Долният ред (количка + профил) да си стоят вдясно */
#haru-header .header-elements-right > .mini-cart-wrap,
#haru-header .header-elements-right > .user-account-wrap{
  flex:0 0 auto;
}

/* Ако на по-малък екран не събира: скрий текста под 991px (остават само иконите) */
@media (max-width: 991px){
  #haru-header .top-contact--img .top-contact__text{ display:none !important; }
  #haru-header .top-contact--img{ gap:14px; }
}
/* FIX: форсирай показването на PNG иконките в Custom Text (header) */
#haru-header .custom-text-wrap .top-contact__icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#haru-header .custom-text-wrap .top-contact__icon img{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:26px !important;   /* увеличи на 28/30 ако искаш */
  height:26px !important;
  max-width:none !important;
  max-height:none !important;
}
/* --- Replace CART + PROFILE icons with your PNGs --- */

/* CART (mini-cart) */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon i.header-icon{
  font-size:0 !important;            /* hide font icon glyph */
  width:32px !important;
  height:32px !important;
  display:inline-block !important;
  background: url("https://www.ideapoint.bg/wp-content/uploads/2026/02/Cart.png") center/contain no-repeat !important;
}

/* keep cart counter visible and positioned */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon .total{
  position: absolute;
  right: -6px;
  top: -6px;
}

/* PROFILE (user-account) - replace avatar with PNG */
#haru-header .user-account-wrap .header-icon{
  width:32px !important;
  height:32px !important;
  display:inline-block !important;
  background: url("https://www.ideapoint.bg/wp-content/uploads/2026/02/Profile.png") center/contain no-repeat !important;
}

/* hide the avatar image inside the profile link */
#haru-header .user-account-wrap .header-icon img{
  display:none !important;
}
/* Fix badge position for cart counter */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon{
  position: relative;
  display: inline-block;
}

#haru-header .mini-cart-wrap .widget_shopping_cart_icon i.header-icon{
  position: relative !important; /* so the badge anchors correctly */
}

/* Place the green "1" neatly on top-right of the cart icon */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon .total{
  position: absolute !important;
  right: -8px !important;
  top: -8px !important;
  transform: none !important;
}
/* === CART: replace icon + fix badge (span.total) === */

/* Container becomes the anchor for the badge */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon{
  position: relative !important;
  display: inline-block !important;
  line-height: 1 !important;
}

/* Replace the cart glyph with your PNG */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon i.header-icon{
  font-size: 0 !important; /* hide font icon */
  width: 32px !important;
  height: 32px !important;
  display: inline-block !important;
  background: url("https://www.ideapoint.bg/wp-content/uploads/2026/02/Cart.png") center/contain no-repeat !important;
  vertical-align: middle !important;
}

/* Place the green counter neatly on the top-right of the icon */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon span.total{
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 9999 !important;
}

/* Optional: make the badge a bit smaller so it doesn't push layout */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon span.total{
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  font-size: 12px !important;
  text-align: center !important;
}
/* Align cart + profile icons on the same baseline */
#haru-header .header-elements-right > .mini-cart-wrap,
#haru-header .header-elements-right > .user-account-wrap{
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle !important;
}

/* Ensure the clickable area of profile is same height as cart */
#haru-header .user-account-wrap .header-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:32px !important;
  height:32px !important;
  line-height:32px !important;
}

/* Remove extra line-height effects around the cart container */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon{
  vertical-align:middle !important;
}
/* Nudge cart icon up to align with profile */
#haru-header .header-elements-right > .mini-cart-wrap{
  position: relative !important;
  top: -2px !important;   /* пробвай -2px ако е много */
}
/* === ALIGN CART with PROFILE in header (and hide subtotal text) === */

/* 1) Скрий текста/цената до количката, за да не бута надолу */
#haru-header .mini-cart-wrap .sub-total-text{
  display:none !important;
}

/* 2) Направи двата елемента (количка + профил) еднакви по височина и центрирани */
#haru-header .header-elements-right > .mini-cart-wrap,
#haru-header .header-elements-right > .user-account-wrap{
  display:inline-flex !important;
  align-items:center !important;
  height:32px !important;
  line-height:32px !important;
  margin:0 !important;
  padding:0 !important;
  vertical-align:middle !important;
}

/* 3) Центрирай самата иконка на количката в този ред */
#haru-header .mini-cart-wrap .widget_shopping_cart_icon{
  display:inline-flex !important;
  align-items:center !important;
  height:32px !important;
  line-height:32px !important;
}

/* 4) Центрирай линка на профила (дори да е background image) */
#haru-header .user-account-wrap .header-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:32px !important;
  height:32px !important;
  line-height:32px !important;
}
#haru-header .header-elements-right > .mini-cart-wrap,
#haru-header .header-elements-right > .user-account-wrap{
  margin-left: 0 !important;
}
/* FIX: подравни количката към профила */
#haru-header .header-elements-right > .mini-cart-wrap{
  align-self: center !important;
  position: relative !important;
  top: -2px !important;   /* пробвай -2px ако стане много */
  margin-right: 12px !important;  /* разстояние до профила */
}

/* профилът да е "референтен" (стабилна височина) */
#haru-header .header-elements-right > .user-account-wrap{
  align-self: center !important;
  position: relative !important;
  top: 0 !important;
}


/* Menu to the left (like the example) */
#haru-header .header-center{
  justify-content: flex-start !important;
}

#haru-header .header-center .header-navigation{
  width: 100% !important;
}

#haru-header #header-primary-menu .haru-main-menu{
  justify-content: flex-start !important;  /* ако е flex */
  text-align: left !important;            /* ако е inline-block */
}

/* ONLY the line image -> full width */
#haru-footer-main .footer-line,
#haru-footer-main .footer-line .vc_figure,
/* Make the footer line image appear thicker (2x) */

#haru-footer-main .footer-line .vc_single_image-wrapper{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

#haru-footer-main .footer-line img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 3 text blocks in one row (footer) */
#haru-footer-main .footer-links-row .wpb_wrapper{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:40px !important;       /* разстояние между линковете */
  flex-wrap:nowrap !important;
}

/* махни излишни маржове от p */
#haru-footer-main .footer-links-row .wpb_text_column p{
  margin:0 !important;
}

/* да не се чупят на нов ред */
#haru-footer-main .footer-links-row a{
  display:inline-block !important;
  white-space:nowrap !important;
}

/* Force dropdown to open to the right */
#haru-header .haru-main-menu li.menu-item-has-children > .sub-menu{
  left: 0 !important;
  right: auto !important;
}

/* Ако има 2ро ниво (submenu на submenu) */
#haru-header .haru-main-menu .sub-menu li.menu-item-has-children > .sub-menu{
  left: 100% !important;
  right: auto !important;
}