/* ============================================================
   ENERJIMARKET — UI fixes (loaded after style.css so it wins)
   ============================================================ */

/* --- Product detail: price must not sit behind the "Bir kliklə al" button --- */
.main-bottom {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.main-bottom .pro_detail_prices {
  flex: 0 0 auto !important;
  min-width: auto !important;
  padding-right: 8px;
}
.main-bottom .buy_click {
  width: auto !important;
  flex: 1 1 160px !important;
}
.main-bottom .pro_detail_busket_btn {
  flex: 0 0 auto !important;
}

/* --- Checkout delivery address block: clean, aligned vertical layout --- */
#delivery_details {
  flex-direction: column !important;
  gap: 14px !important;
  padding: 20px !important;
}
#delivery_details > select,
#delivery_details > .form-item,
#delivery_details > textarea {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  box-sizing: border-box;
  margin: 0;
}
#delivery_details select {
  height: 48px;
  padding: 0 40px 0 16px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background-color: #fff;
  color: #34202f;
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
#delivery_details .form-item {
  position: relative;
  display: block;
}
#delivery_details .form-item input {
  width: 100%;
  height: 48px;
  padding: 0 46px 0 16px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  box-sizing: border-box;
}
#delivery_details .form-item .icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}
#delivery_details textarea {
  width: 100%;
  min-height: 90px;
  padding: 12px 16px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
#delivery_details select:focus,
#delivery_details .form-item input:focus,
#delivery_details textarea:focus {
  outline: none;
  border-color: #1472e2;
}

/* --- Profile person-type radios: visible selected state --- */
.profile_tab_item .check_mark {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.2s;
}
.profile_tab_item.active .check_mark {
  border-color: #1472e2;
  background: #1472e2;
}
.profile_tab_item .check_mark_small {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s;
}
.profile_tab_item.active .check_mark_small {
  opacity: 1;
  transform: scale(1);
}
.profile_tab_item.active p {
  color: #1472e2;
  font-weight: 600;
}

/* Native radios show a clear checked state everywhere */
input[type="radio"] {
  accent-color: #1472e2;
}

/* --- Profile: "Emaili təsdiq et" as a button, hidden once verified --- */
.confirm-email a {
  display: inline-block;
  padding: 9px 18px;
  background: #1472e2;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.confirm-email a:hover {
  background: #1059b8;
}
.confirm-email p {
  display: none;
}
.confirm-email.confirmed a {
  display: none;
}
.confirm-email.confirmed p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #22a06b;
  font-weight: 600;
}

/* --- Header compare/favorite count badge --- */
.nav-right .mainLink-item {
  position: relative;
}
.nav-right .mainLink-item .nav-count {
  position: absolute;
  top: -6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #ea5b0c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  box-shadow: 0 0 0 2px #fff;
}

/* --- Password show/hide eye icon (register + login modals) --- */
.register-container .register form .password .show_password_btn .show-eye,
.login-container .login form .password .show_password_btn .show-eye {
  display: block;
}
.register-container .register form .password .show_password_btn .hidden-eye,
.login-container .login form .password .show_password_btn .hidden-eye {
  display: none;
}
.password.show-pass .show_password_btn .show-eye {
  display: none !important;
}
.password.show-pass .show_password_btn .hidden-eye {
  display: block !important;
}
.password {
  position: relative;
}
.password .show_password_btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  z-index: 2;
}
.password input[name="password"],
.password input[type="password"],
.password input[type="text"] {
  padding-right: 46px;
}

/* --- Product detail: quantity (ədəd) input --- */
.detail-quantity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 8px;
}
.detail-quantity label {
  font-weight: 600;
  color: #34202f;
  font-size: 15px;
  margin: 0;
}
.detail-quantity input {
  width: 96px;
  height: 44px;
  padding: 8px 12px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  font-size: 16px;
  text-align: center;
  background: #fff;
}
.detail-quantity input:focus {
  outline: none;
  border-color: #1d6fa5;
}

/* --- Product detail: similar products rendered as a card grid --- */
.similar-products {
  margin-top: 48px;
  padding-left: clamp(16px, 5vw, 80px);
  padding-right: clamp(16px, 5vw, 80px);
}
.similar-products > .title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: #34202f;
  margin-bottom: 8px;
}
.similar-products .product-boxes {
  margin-top: 24px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.similar-products .product-boxes .product-cart .cart-img {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.similar-products .product-boxes .product-cart .cart-img img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* --- Homepage "Xəbərlər" blog cards: equal size (swiper slides) --- */
.home-blog-slide .swiper-wrapper {
  align-items: stretch;
}
.home-blog-slide .blog-cart.swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
  background: #fafafa;
  border-radius: 14px;
  overflow: hidden;
}
.blog-cart .cart-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-cart .cart-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-cart .cart-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px;
}
.blog-cart .cart-body .blog-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  margin-bottom: auto;
}
.blog-cart .cart-body .cart-bottom {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --- Blog detail: contained hero image (no giant stretched poster) --- */
.blogs-detail-head {
  max-width: 1000px;
  margin: 0 auto 28px;
  border-radius: 16px;
  overflow: hidden;
  max-height: 480px;
}
.blogs-detail-head img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}
.blogs-detail-title {
  max-width: 1000px;
  margin: 0 auto 16px;
}
.blogs-detail-texts {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.7;
}

/* --- Category / catalog cards: cleaner, consistent, with hover --- */
.catalog-cart {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.catalog-cart:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(29, 111, 165, 0.12);
  border-color: #1d6fa5;
}
.catalog-cart .catalog-img {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #fafbfc;
}
.catalog-cart .catalog-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.catalog-cart .catalog-name {
  padding: 14px 16px;
  text-align: center;
  font-weight: 600;
  color: #34202f;
  min-height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* catalog sidebar category list: tighter, clearer active state */
.catalog-filter .category-item.active > .category-title > .category-link {
  color: #1d6fa5;
  font-weight: 700;
}
.catalog-filter .category-link {
  transition: color 0.15s ease;
}
.catalog-filter .category-link:hover {
  color: #1d6fa5;
}

/* ============================================================
   Product detail — VARIANT SELECTOR REDESIGN
   Turn the collapsed dropdowns into always-visible option chips
   (like size/colour pickers) so nothing is hidden. Options are
   auto-selected on load so price + stock + buy button show at once.
   ============================================================ */

/* group container: label on top, chips wrap below */
.detail-selects .select-item {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px;
  margin-bottom: 6px;
}

/* the "Rəng" / "Material" head becomes a plain group label (no box, no toggle) */
.detail-selects .select-item .select-head {
  width: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  justify-content: flex-start !important;
  gap: 6px;
  cursor: default !important;
  pointer-events: none; /* it no longer toggles anything */
}
.detail-selects .select-item .select-head p {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #34202f !important;
}
.detail-selects .select-item .select-head svg {
  display: none !important; /* chevron is meaningless now */
}

/* the option list is ALWAYS visible and lays out as wrapping chips */
.detail-selects .select-item .select-list {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  max-height: none !important;
  overflow: visible !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px;
  width: 100% !important;
  transition: none !important;
}

/* each chip wrapper: no borders, no full width */
.detail-selects .select-item .select-list .select-list-item {
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  position: relative;
}

/* hide the raw radio, style its label as a clickable chip */
.detail-selects .select-item .select-list .select-list-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
.detail-selects .select-item .select-list .select-list-item label {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 18px !important;
  border: 1.5px solid #d9d9d9;
  border-radius: 10px;
  background: #fff;
  color: #34202f !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
  user-select: none;
}
.detail-selects .select-item .select-list .select-list-item label:hover {
  border-color: #1472e2;
  color: #1472e2 !important;
}

/* SELECTED chip — filled blue (matches requested radio look) */
.detail-selects
  .select-item
  .select-list
  .select-list-item
  input[type="radio"]:checked
  + label {
  background: #1472e2 !important;
  border-color: #1472e2 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(20, 114, 226, 0.28);
}

/* a group the user left unselected gets a soft red hint */
.detail-selects .select-item.error-filter .select-head p {
  color: #e23b3b !important;
}
.detail-selects .select-item.error-filter .select-list .select-list-item label {
  border-color: #f3b4b4;
}

/* Selected-variant SKU line inside the price panel */
.main-bottom .variant-sku,
.product-stock .variant-sku {
  flex: 1 0 100% !important;
  margin: 0 0 4px;
  font-size: 13px;
  color: #6b6b6b;
}
.main-bottom .variant-sku span {
  font-weight: 600;
  color: #34202f;
}

/* ============================================================
   Accessibility — visible keyboard focus ring
   style.css globally sets outline:0 with no replacement, so
   keyboard users see nothing. Restore a clear focus-visible ring
   (only on keyboard focus, never on mouse click).
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
label:focus-visible,
.select-list-item input[type="radio"]:focus-visible + label {
  outline: 3px solid #1472e2 !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
/* skip-to-content style focus visibility for chips */
.detail-selects .select-item .select-list .select-list-item input[type="radio"]:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(20, 114, 226, 0.45);
}

/* ============================================================
   Cookie consent — compact, scroll-safe and always actionable
   ============================================================ */
.cookie-container {
  z-index: 10050 !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box;
  background: rgba(9, 54, 99, 0.2) !important;
  backdrop-filter: blur(2px);
}

.cookie-container .cookie {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  min-height: 0;
  padding: 28px 22px 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(9, 54, 99, 0.1);
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(9, 54, 99, 0.22);
  box-sizing: border-box;
}

.cookie-container .cookie-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding-right: 38px;
  min-width: 0;
}

.cookie-container .cookie-title {
  font-size: 20px !important;
  line-height: 27px !important;
  font-weight: 700 !important;
  color: #093663 !important;
  text-decoration: none;
}

.cookie-container .cookie-languge {
  flex: 0 0 auto;
  gap: 10px !important;
}

.cookie-container .cookie-content {
  min-height: 0;
  max-height: min(34dvh, 260px);
  margin-top: 16px !important;
  padding-right: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.cookie-container .cookie-content p {
  margin: 0;
  color: #3e4b59 !important;
  font-size: 15px !important;
  line-height: 23px !important;
}

.cookie-container .cookie-links {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-shrink: 0;
  gap: 10px !important;
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid #e9eef4;
  background: #fff;
}

.cookie-container .reject-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.cookie-container .cookie-links button,
.cookieModal-container .cookieModal_buttons button {
  min-height: 48px;
  margin: 0 !important;
  padding: 11px 16px !important;
  border-radius: 10px !important;
  font-family: inherit;
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 600 !important;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.cookie-container .accept-cookie:hover,
.cookieModal-container .acceptAll:hover,
.cookieModal-container .saveSetting:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(20, 114, 226, 0.22);
}

.cookie-container .cookie-links button:disabled,
.cookieModal-container .cookieModal_buttons button:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.cookie-container .closeCookie,
.cookieModal-container .closeCookieModal {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 4px !important;
  border-radius: 50%;
  background: #f2f6fa;
  cursor: pointer;
  z-index: 3;
}

.cookie-container .closeCookie {
  top: 14px !important;
  right: 16px !important;
}

.cookie-error {
  width: 100%;
  margin: 0 !important;
  color: #b42318;
  font-size: 13px;
  line-height: 19px;
}

.cookie-error[hidden] {
  display: none !important;
}

.cookieModal-container {
  z-index: 10060 !important;
  padding: 16px !important;
  box-sizing: border-box;
}

.cookieModal-container .cookieModal {
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
}

.cookieModal-container .cookieTabContent {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cookieModal-container .cookieModal_buttons {
  flex-shrink: 0;
  margin-top: 18px !important;
}

@media (max-width: 720px) {
  .cookie-container {
    padding: 0 !important;
  }

  .cookie-container .cookie {
    width: 100% !important;
    max-width: none !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0 !important;
  }

  .cookie-container .cookie-head {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 10px !important;
    padding-right: 44px;
  }

  .cookie-container .cookie-title {
    font-size: 18px !important;
    line-height: 25px !important;
  }

  .cookie-container .cookie-content {
    max-height: min(30dvh, 220px);
    margin-top: 14px !important;
  }

  .cookie-container .cookie-links {
    margin-top: 14px !important;
    padding-top: 14px;
  }

  .cookieModal-container {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .cookieModal-container .cookieModal {
    max-height: 94vh !important;
    max-height: 94dvh !important;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    border-radius: 20px 20px 0 0 !important;
  }
}

@media (max-width: 380px) {
  .cookie-container .reject-links,
  .cookieModal-container .cookieModal_buttons .button-grid {
    grid-template-columns: 1fr !important;
  }

  .cookie-container .cookie-links button,
  .cookieModal-container .cookieModal_buttons button {
    min-height: 46px;
  }
}