/**
 * Helix custom.css – felülírások a textarea UTÁN (index.php → add_css).
 * Lista alján: custom-css-late (default.php), J2Store menü CSS után.
 * Textarea tisztított tartalom: css/helix-admin-custom-css.css
 */

/* MD teljesítmény (2026-07-02): a blokkoló @import ELTÁVOLÍTVA.
   A Metropolis betűt az index.php tölti globálisan, NEM render-blokkolóan
   (media="print" onload trükk). Így megszűnik a láncolt, blokkoló CSS-kérés. */

/* Safety: never show hardcoded custom-menu-title (footer / stray menus). */
.custom-menu-title {
  display: none !important;
}

/* Hide giant grey “Termékcsoportok” ghost / background text leftovers */
.sp-module-content .custom-menu-title,
.moduletable .custom-menu-title,
#sp-bottom .custom-menu-title,
#sp-footer .custom-menu-title,
.j2store-sidebar-filters-container .custom-menu-title {
  display: none !important;
  font-size: 0 !important;
  color: transparent !important;
  background: none !important;
  text-indent: -9999px !important;
}

/* Footer menus: DB module title is wrongly "Termékcsoportok";
   INFORMÁCIÓK / TERMÉKEK / KEZELÉS labels come from page builder. */
#sp-bottom .sp-module > .sp-module-title,
#sp-bottom1 .sp-module > .sp-module-title,
#sp-bottom2 .sp-module > .sp-module-title,
#sp-bottom3 .sp-module > .sp-module-title,
#sp-bottom4 .sp-module > .sp-module-title,
#sp-footer .sp-module > .sp-module-title,
#sp-bottom .moduletable > h3,
#sp-footer .moduletable > h3 {
  display: none !important;
}

/* ===== Fejléc – Termékcsoportok → css/md-categories-nav.css ===== */
/* A sticky dropdown + mobil offcanvas stílusok a dedikált fájlban vannak. */
#sp-menu-left {
  /* Ne lógjon fehér hasáb a tartalomba zárt állapotban */
  background: transparent !important;
  overflow: visible !important;
}

/* ===== Terméknév színek – textarea .product-title { color:#333 } felülírása ===== */

/* Lista */
.j2store-product-list .md-pl-title-block h2.product-title,
.j2store-product-list .md-pl-title-block h2.product-title a,
.j2store-product-list .md-pl-title-block .product-title a .md-pl-sr-line,
.j2store-product-list .md-pl-title-block .product-title a .md-pl-sr-line-inner,
#sp-main-body .j2store-product-list.bs4 .md-pl-title-block h2.product-title,
#sp-main-body .j2store-product-list.bs4 .md-pl-title-block h2.product-title a {
  color: #6b7585 !important;
}

@media (min-width: 992px) {
  #sp-main-body .j2store-product-list.bs4 .md-pl-title-block h2.product-title,
  #sp-main-body .j2store-product-list.bs4 .md-pl-title-block h2.product-title a {
    color: #3d4654 !important;
  }
}

/* Termékoldal */
body.j2store-single-product-view .j2store-single-product.detail h2.product-title,
body.j2store-single-product-view .j2store-single-product.detail .product-title,
body.j2store-single-product-view #sp-main-body .j2store-single-product.detail h2.product-title,
#sp-main-body .j2store-single-product.detail h2.product-title,
#sp-main-body .j2store-single-product.detail .product-title {
  color: #3d4654 !important;
}

/* ===== Kosár mobil – helix textarea 25% oszlopszélesség kikapcsolva (md-cart.css) ===== */
/*
@media (max-width: 576px) {
  .j2store-cart-table td:nth-child(1) {
    width: 25% !important;
  }
}
*/

/* ===== Termékoldal „Megjegyzés" (textarea opció) UI javítás =====
 * A Helix custom_css paraméter (inline <style>) a <select> opciókkal együtt
 * a megjegyzés <textarea>-t is dropdown-szabállyal stílusozza: legördülő-nyíl
 * háttérkép, szögletes sarok, jobb oldali 30px padding, appearance:none.
 * Magas specifikussággal felülírjuk, hogy tiszta, lekerekített, teljes
 * szélességű megjegyzés mezőt kapjunk (nyíl nélkül). Csak vizuális. */
#sp-main-body textarea[name^="product_option"],
.j2store-single-product textarea[name^="product_option"],
.j2store-single-product-view textarea[name^="product_option"] {
  border: 1px solid #d9e0e6 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  line-height: 1.5 !important;
  background-image: none !important;
  background-position: 0 0 !important;
  cursor: text !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 110px !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

#sp-main-body textarea[name^="product_option"]:hover,
.j2store-single-product textarea[name^="product_option"]:hover,
#sp-main-body textarea[name^="product_option"]:focus,
.j2store-single-product textarea[name^="product_option"]:focus {
  border-color: rgba(74, 109, 146, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(74, 109, 146, 0.12) !important;
  outline: none !important;
}

/* ===== Termékoldal opció-blokk (Megjegyzés kártya) teljes szélesség =====
 * A kosár-űrlap flex-oszlop gyermekei (opciók, ár-tükör, gombsor) egységesen
 * teljes oszlop-szélességet kapnak, hogy a Megjegyzés kártya ne legyen beljebb
 * húzva, hanem a kosár-blokkal megegyező teljes szélességű legyen. Csak vizuális. */
#sp-main-body .j2store-single-product.detail .j2store-addtocart-form {
  align-items: stretch !important;
}

#sp-main-body .j2store-single-product.detail .options,
#sp-main-body .j2store-single-product.detail #variable-options,
#sp-main-body .j2store-single-product.detail .options > .option {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* ===== MD egységes űrlap-UI – Profil szerkesztése (com_users) =====
 * A profil-szerkesztő űrlap ugyanazt a letisztult kártyás megjelenést kapja,
 * mint a profil cím-szerkesztő. Csak vizuális, a Joomla logika változatlan. */
.com-users-profile__edit .page-header h1,
.profile-edit .page-header h1 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}
#member-profile {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e7ebf2;
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
#member-profile fieldset {
  border: 0;
  margin: 0 0 8px;
  padding: 0;
  min-width: 0;
}
#member-profile legend {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  border: 0;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #e7ebf2;
}
#member-profile .control-group {
  margin-bottom: 14px;
}
#member-profile .control-label,
#member-profile .control-label label {
  display: block;
  font-weight: 700;
  font-size: 12.5px;
  color: #3a4256;
  margin: 0 0 6px;
}
#member-profile .controls {
  margin: 0;
}
#member-profile input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
#member-profile textarea,
#member-profile select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #cfd6e2;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
#member-profile input:focus,
#member-profile textarea:focus,
#member-profile select:focus {
  outline: none;
  border-color: #33406b;
  box-shadow: 0 0 0 3px rgba(51, 64, 107, .12);
}
#member-profile .com-users-profile__edit-submit {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #e7ebf2;
}
#member-profile .com-users-profile__edit-submit .controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#member-profile .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .2s, box-shadow .2s;
}
#member-profile .btn-primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 6px 14px rgba(22, 163, 74, .3);
}
#member-profile .btn-danger {
  background: #fdeceb;
  color: #b5322b;
  border-color: #f3c9c6;
}
#member-profile .btn:hover {
  filter: brightness(1.03);
  box-shadow: 0 8px 16px rgba(15, 23, 42, .1);
}
#member-profile .password-strength,
#member-profile .form-text,
#member-profile small {
  color: #8a93a3;
  font-size: 11.5px;
}

/* Jelszó mező + "szem" megjelenítő gomb (input-group) – ne csússzon a mező alá */
#member-profile joomla-field-passwordview {
  display: block;
}
#member-profile .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}
#member-profile .input-group > input:not([type=hidden]):not([type=checkbox]):not([type=radio]) {
  width: auto;
  flex: 1 1 auto;
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#member-profile .input-group > .btn,
#member-profile .input-group > .input-group-text,
#member-profile .input-group > button,
#member-profile .input-group .input-group-append > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid #cfd6e2;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: #f6f8fc;
  color: #475569;
  cursor: pointer;
  transition: background .2s, color .2s;
}
#member-profile .input-group > .btn:hover,
#member-profile .input-group > button:hover {
  background: #eef2f9;
  color: #0f172a;
}
/* tartalék "szem" ikon, ha a Joomla ikonfont nem töltődik be */
#member-profile .input-group .icon-eye:empty::before,
#member-profile .input-group .icon-eye-slash:empty::before {
  content: "\f06e";
  font-family: "FontAwesome", "Font Awesome 6 Free";
  font-weight: 900;
}

@media (max-width: 600px) {
  #member-profile {
    padding: 18px 16px;
  }
}

/* ============================================================
   AJÁNLÓ / KEZDŐLAP – com_wrapper iframe TELJES SZÉLESSÉG
   Szűken csak a kezdőlap menüponton hat (itemid-101 VAGY a menüponton
   beállított "Oldal osztály" = md-ajanlo-full). A többi oldalt NEM érinti.
   Cél: a beágyazott /ajanlo/ landing a Helix konténer helyett a teljes
   sávszélességet töltse ki (a szekció-hátterek edge-to-edge legyenek).
   ============================================================ */
body.itemid-101 #sp-main-body,
body.md-ajanlo-full #sp-main-body {
  padding-left: 0;
  padding-right: 0;
}
body.itemid-101 #sp-main-body > .container,
body.md-ajanlo-full #sp-main-body > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
body.itemid-101 #sp-component,
body.md-ajanlo-full #sp-component {
  padding: 0;
}
body.itemid-101 .iframe-wrap,
body.itemid-101 .mod-wrapper,
body.itemid-101 .com-wrapper,
body.md-ajanlo-full .iframe-wrap,
body.md-ajanlo-full .mod-wrapper,
body.md-ajanlo-full .com-wrapper {
  width: 100%;
  max-width: 100%;
}
body.itemid-101 iframe.wrapper,
body.itemid-101 #sp-component iframe,
body.itemid-101 .iframe-wrap iframe,
body.itemid-101 .mod-wrapper iframe,
body.md-ajanlo-full iframe.wrapper,
body.md-ajanlo-full #sp-component iframe,
body.md-ajanlo-full .iframe-wrap iframe,
body.md-ajanlo-full .mod-wrapper iframe {
  width: 100% !important;
  min-width: 100%;
  border: 0;
  display: block;
}

/* Mixtea footer – SP Page Builder module 100, Facebook Icons Group.
   A célzott addon-azonosító miatt ez más közösségi ikonokat nem érint. */
#sppb-addon-1562850905415 .sppb-icons-group-list li#icon-15628509054151 a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1877f2 0%, #0f5fc2 100%) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(24, 119, 242, .28);
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}
#sppb-addon-1562850905415 .sppb-icons-group-list li#icon-15628509054151 a i {
  font-size: 22px;
  line-height: 1;
}
#sppb-addon-1562850905415 .sppb-icons-group-list li#icon-15628509054151 a:hover,
#sppb-addon-1562850905415 .sppb-icons-group-list li#icon-15628509054151 a:focus-visible {
  background: linear-gradient(135deg, #3188fb 0%, #0b57b5 100%) !important;
  color: #fff !important;
  box-shadow: 0 11px 24px rgba(24, 119, 242, .42);
  filter: saturate(1.08);
  transform: translateY(-3px) scale(1.05);
}
#sppb-addon-1562850905415 .sppb-icons-group-list li#icon-15628509054151 a:focus-visible {
  outline: 3px solid rgba(24, 119, 242, .35);
  outline-offset: 3px;
}
@media (max-width: 575.98px) {
  #sppb-addon-1562850905415 .sppb-icons-group-list li#icon-15628509054151 a {
    width: 42px !important;
    height: 42px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #sppb-addon-1562850905415 .sppb-icons-group-list li#icon-15628509054151 a {
    transition: none;
  }
}