/*
Theme Name: Bricks
Theme URI: https://bricksbuilder.io/
Author: Bricks
Author URI: https://bricksbuilder.io/
Description: Visual website builder for WordPress.
Version: 2.1.4
License: GPLv2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bricks
*/
/* ============================================================
   Bricks → Settings → Custom Code → CSS  (вставити один раз, глобально)
   ============================================================ */

:root{
  --mb-ink:#241733;
  --mb-ink-soft:#5b4f73;
  --mb-violet:#2c1b4d;
  --mb-violet-deep:#160f28;
  --mb-gold:#d9a64e;
  --mb-gold-bright:#f0c873;
  --mb-line:#e8e1d3;
}

/* ---------- Маркований список ----------
   Клас mb-list додай на Rich Text елемент (на обгортку),
   сам <ul><li> створюється кнопкою "bulleted list" в тулбарі Rich Text */
.mb-list ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.mb-list ul li{
  position:relative;
  padding-inline-start:30px;
  font-size:1.05rem;
  line-height:1.85;
  color:var(--mb-ink);
}
.mb-list ul li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:6px;
  width:16px;
  height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 19,9 12,22 5,9' fill='%23d9a64e'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}
.mb-list ul li strong, .mb-list ul li b{
  color:var(--mb-violet);
  font-weight:800;
}

/* ---------- Нумерований список / кроки ----------
   Клас mb-steps додай на Rich Text елемент,
   <ol><li> створюється кнопкою "numbered list" в тулбарі */
.mb-steps ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:mb-step;
}
.mb-steps ol li{
  counter-increment:mb-step;
  position:relative;
  padding-inline-start:54px;
  padding-bottom:26px;
  font-size:1.02rem;
  line-height:1.8;
  color:var(--mb-ink);
}
.mb-steps ol li:last-child{ padding-bottom:0; }
.mb-steps ol li::before{
  content:counter(mb-step);
  position:absolute;
  inset-inline-start:0;
  top:0;
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--mb-violet), var(--mb-violet-deep));
  border:2px solid var(--mb-gold);
  color:var(--mb-gold-bright);
  font-weight:800;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mb-steps ol li:not(:last-child)::after{
  content:"";
  position:absolute;
  inset-inline-start:18px;
  top:38px;
  width:2px;
  height:calc(100% - 38px);
  background:linear-gradient(to bottom, var(--mb-gold), transparent);
}

/* ---------- FAQ — допоміжні класи на нативний Accordion (Nestable) ----------
   Це не повна обгортка, лише акцент на кожен Accordion Item (.mb-faq-item)
   решту (фон/бордер/паддінги/типографіку) дай через власні стилі елемента в Bricks */
.mb-faq-item{
  transition:border-color .25s ease, box-shadow .25s ease;
}
.mb-faq-item.brx-open{
  border-color:var(--mb-gold) !important;
  box-shadow:0 10px 28px rgba(44,27,77,.10);
}

/* ---------- Global content rhythm ---------- */
:root{
  --mb-content-link:#8a5a13;
  --mb-content-link-hover:#2c1b4d;
  --mb-content-flow:.95rem;
  --mb-content-flow-lg:1.55rem;
  --mb-content-list-gap:.55rem;
  --mb-h2-flow-before:clamp(28px, 4vw, 40px);
  --mb-h2-flow-after:clamp(20px, 3vw, 30px);
  --mb-h3-flow-before:clamp(22px, 3vw, 32px);
  --mb-h3-flow-after:clamp(16px, 2.4vw, 24px);
  --mb-list-flow-before:clamp(16px, 2.4vw, 24px);
  --mb-list-flow-after:clamp(12px, 2vw, 18px);
  --mb-button-flow:clamp(16px, 2.4vw, 24px);
  --mb-footer-gap:clamp(28px, 4vw, 40px);
  --mb-footer-gap-mobile:24px;
  --mb-button-hover-opacity:.86;
}

#brx-content{
  margin-block-end:var(--mb-footer-gap);
}

#brx-content > .brxe-section:first-of-type{
  margin-block-end:var(--mb-footer-gap);
}

@media (max-width:1199px){
  #brx-content > .brxe-section:first-of-type{
    position:relative;
    isolation:isolate;
  }

  #brx-content > .brxe-section:first-of-type::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(0,0,0,.75);
    pointer-events:none;
  }

  #brx-content > .brxe-section:first-of-type > *{
    z-index:1;
  }
}

h1:not(:last-child) {
	margin-bottom: 20px;
}

#brx-content p,
#brx-content ul,
#brx-content ol,
#brx-content blockquote,
#brx-content figure,
#brx-content h2,
#brx-content h3,
#brx-content h4,
#brx-content h5,
#brx-content h6{
  margin-block:0;
}

#brx-content * + p,
#brx-content * + blockquote,
#brx-content * + figure{
  margin-block-start:var(--mb-content-flow);
}

#brx-content * + h4{
  margin-block-start:var(--mb-content-flow-lg);
}

#brx-content * + h2{
  margin-block-start:var(--mb-h2-flow-before);
}

#brx-content h2:not(:last-child){
  margin-block-end:var(--mb-h2-flow-after);
}

#brx-content * + h3{
  margin-block-start:var(--mb-h3-flow-before);
}

#brx-content h3:not(:last-child){
  margin-block-end:var(--mb-h3-flow-after);
}

#brx-content * + ul:not([class]),
#brx-content * + ol:not([class]){
  margin-block-start:var(--mb-list-flow-before);
}

#brx-content ul:not([class]):not(:last-child),
#brx-content ol:not([class]):not(:last-child){
  margin-block-end:var(--mb-list-flow-after);
}

#brx-content a:not([class]){
  color:var(--mb-content-link);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:.16em;
  transition:color .2s ease, text-decoration-color .2s ease;
}

#brx-content a:not([class]):hover,
#brx-content a:not([class]):focus-visible{
  color:var(--mb-content-link-hover);
}

#brx-content :has(> .brxe-button){
  margin-block:var(--mb-button-flow);
}

.brxe-button{
  transition:opacity .2s ease;
}

.brxe-button:hover,
.brxe-button:focus-visible{
  opacity:var(--mb-button-hover-opacity);
}

.melbet-table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-block:var(--mb-content-flow-lg);
  border:1px solid rgba(36,23,51,.12);
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 22px rgba(36,23,51,.06);
}

.melbet-table-scroll table{
  width:100%;
  min-width:640px;
  margin-block:0;
  border-collapse:collapse;
}

.melbet-table-scroll th,
.melbet-table-scroll td{
  padding:.75rem .875rem;
  vertical-align:top;
}

.melbet-table-scroll:focus{
  outline:2px solid var(--mb-gold);
  outline-offset:2px;
}

@media (max-width:767px){
  .melbet-table-scroll{
    border-radius:6px;
  }
}

#brx-content ul:not([class]),
#brx-content ol:not([class]){
  padding-inline-start:1.35em;
}

#brx-content ul:not([class]) > li,
#brx-content ol:not([class]) > li{
  padding-inline-start:.25em;
}

#brx-content ul:not([class]) > li + li,
#brx-content ol:not([class]) > li + li{
  margin-block-start:var(--mb-content-list-gap);
}

#brx-content ul:not([class]) > li::marker,
#brx-content ol:not([class]) > li::marker{
  color:var(--mb-gold);
  font-weight:800;
}

@media (max-width:767px){
  :root{
    --mb-h2-flow-before:24px;
    --mb-h2-flow-after:18px;
    --mb-h3-flow-before:20px;
    --mb-h3-flow-after:14px;
    --mb-list-flow-before:14px;
    --mb-list-flow-after:10px;
    --mb-button-flow:14px;
  }

  #brx-content,
  #brx-content > .brxe-section:first-of-type{
    margin-block-end:var(--mb-footer-gap-mobile);
  }

  #brx-content :is(.alignleft, .alignright, img[align]){
    float:none !important;
    margin-inline:auto !important;
  }
}