/*
  Standard terms block.
  Editor / catalog markup:

    <secao>
      <h3>Título</h3>
      <p>Texto</p>
      <p>Texto</p>
    </secao>

  Legacy rows still use <div class="terms-section"><h5>…</h5>.
  Both wrappers share the same look so CSS stays in this file.
*/

secao,
.terms-section {
    display: block;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(27, 46, 75, 0.5);
    border-radius: 10px;
    border-left: 4px solid #009688;
}

secao > h3,
.terms-section > h3,
.terms-section > h5 {
    color: #009688;
    font-weight: 600;
    margin: 0 0 15px;
    font-size: 1.1rem;
}

secao > h3 i,
.terms-section > h3 i,
.terms-section > h5 i {
    margin-right: 8px;
}

secao p,
.terms-section p {
    line-height: 1.6;
    color: #c1c3d1;
    margin-bottom: 10px;
}

secao p:last-child,
.terms-section p:last-child {
    margin-bottom: 0;
}

secao ul,
secao ol,
.terms-section ul,
.terms-section ol {
    margin-bottom: 0;
    padding-left: 20px;
}

secao li,
.terms-section li {
    color: #c1c3d1;
    margin-bottom: 8px;
    line-height: 1.5;
}

secao li:last-child,
.terms-section li:last-child {
    margin-bottom: 0;
}

secao.terms-section-update,
.terms-section.terms-section-update {
    border-left-color: #e6a817;
}

secao.terms-section-update > h3,
secao.terms-section-update p,
secao.terms-section-update li,
.terms-section.terms-section-update > h3,
.terms-section.terms-section-update > h5,
.terms-section.terms-section-update p,
.terms-section.terms-section-update li {
    font-weight: 700;
    font-style: italic;
}

.dark secao,
.dark .terms-section {
    background: rgba(27, 46, 75, 0.3);
}

.dark secao > h3,
.dark .terms-section > h3,
.dark .terms-section > h5 {
    color: #00d4aa;
}

.dark secao p,
.dark secao li,
.dark .terms-section p,
.dark .terms-section li {
    color: #e0e6ed;
}

html[data-theme="light"] secao,
html[data-theme="light"] .terms-section {
    background: #f6f8fc;
    border-color: #e6eaf2;
}

html[data-theme="light"] secao > h3,
html[data-theme="light"] .terms-section > h3,
html[data-theme="light"] .terms-section > h5 {
    color: #009688;
}

html[data-theme="light"] secao p,
html[data-theme="light"] secao li,
html[data-theme="light"] secao ul,
html[data-theme="light"] .terms-section p,
html[data-theme="light"] .terms-section li,
html[data-theme="light"] .terms-section ul {
    color: #152033;
}

.terms-preview secao,
.terms-preview .terms-section,
.module-terms-preview-box secao,
.module-terms-preview-box .terms-section {
    background: rgba(255, 255, 255, 0.85);
    border-left-color: #009688;
}

.terms-preview secao > h3,
.terms-preview .terms-section > h3,
.terms-preview .terms-section > h5 {
    color: #009688;
}

.terms-preview secao p,
.terms-preview secao li,
.terms-preview .terms-section p,
.terms-preview .terms-section li {
    color: #333;
}

/* Visible outline while editing in TinyMCE */
.mce-content-body secao {
    display: block;
    margin: 14px 0;
    padding: 14px 16px 12px;
    background: #f4f6fb;
    border: 1px dashed #009688;
    border-left: 4px solid #009688;
    border-radius: 8px;
}

.mce-content-body secao > h3 {
    color: #009688;
    font-size: 1.1rem;
    margin: 0 0 10px;
}

.mce-content-body secao.terms-section-update {
    border-color: #e6a817;
    border-left-color: #e6a817;
    background: #fff8e1;
}

.mce-content-body secao.terms-section-update > h3,
.mce-content-body secao.terms-section-update p {
    font-weight: 700;
    font-style: italic;
}