.tzq-custom-box {
background: var(--tzq-bg-primary);
border-radius: var(--tzq-radius-md);
padding: var(--tzq-spacing-xl);
margin-bottom: var(--tzq-spacing-lg);
box-shadow: var(--tzq-shadow-md);
border: 1px solid var(--tzq-primary-light);
}
.tzq-box-primary {
background: var(--tzq-primary);
color: white;
}
.tzq-box-success {
background: var(--tzq-success);
color: white;
}
.tzq-box-warning {
background: var(--tzq-warning);
color: var(--tzq-text-primary);
}
.tzq-box-info {
background: var(--tzq-info);
color: white;
}
.tzq-box-title {
font-family: var(--tzq-font-heading);
font-size: var(--tzq-text-2xl);
font-weight: 700;
margin-bottom: var(--tzq-spacing-md);
color: inherit;
}
.tzq-box-content {
font-size: var(--tzq-text-base);
line-height: 1.7;
color: inherit;
}
.tzq-custom-list {
margin-bottom: var(--tzq-spacing-lg);
}
.tzq-list-title {
font-family: var(--tzq-font-heading);
font-size: var(--tzq-text-2xl);
font-weight: 700;
margin-bottom: var(--tzq-spacing-md);
color: var(--tzq-text-primary);
}
.tzq-checklist,
.tzq-ordered-list,
.tzq-unordered-list {
list-style: none;
padding: 0;
margin: 0;
}
.tzq-checklist li,
.tzq-ordered-list li,
.tzq-unordered-list li {
padding: var(--tzq-spacing-sm) 0;
padding-left: var(--tzq-spacing-lg);
position: relative;
line-height: 1.7;
color: var(--tzq-text-primary);
}
.tzq-checklist li {
padding-left: calc(var(--tzq-spacing-lg) + 1.5rem);
}
.tzq-checklist .tzq-check-icon {
position: absolute;
left: 0;
color: var(--tzq-success);
font-weight: bold;
font-size: 1.2rem;
}
.tzq-ordered-list {
counter-reset: list-counter;
}
.tzq-ordered-list li {
counter-increment: list-counter;
padding-left: calc(var(--tzq-spacing-lg) + 2rem);
}
.tzq-ordered-list li::before {
content: counter(list-counter) ".";
position: absolute;
left: 0;
font-weight: 700;
color: var(--tzq-primary);
}
.tzq-unordered-list li::before {
content: "•";
position: absolute;
left: 0;
font-weight: bold;
color: var(--tzq-primary);
font-size: 1.5rem;
line-height: 1.2;
}
.tzq-custom-grid {
margin-bottom: var(--tzq-spacing-lg);
}
.tzq-grid-title {
font-family: var(--tzq-font-heading);
font-size: var(--tzq-text-2xl);
font-weight: 700;
margin-bottom: var(--tzq-spacing-md);
color: var(--tzq-text-primary);
}
.tzq-grid-content {
display: grid;
gap: var(--tzq-spacing-lg);
}
.tzq-grid-2-cols {
grid-template-columns: repeat(2, 1fr);
}
.tzq-grid-3-cols {
grid-template-columns: repeat(3, 1fr);
}
.tzq-grid-4-cols {
grid-template-columns: repeat(4, 1fr);
}
.tzq-custom-cards {
margin-bottom: var(--tzq-spacing-lg);
}
.tzq-cards-title {
font-family: var(--tzq-font-heading);
font-size: var(--tzq-text-2xl);
font-weight: 700;
margin-bottom: var(--tzq-spacing-md);
color: var(--tzq-text-primary);
}
.tzq-cards-grid {
display: grid;
gap: var(--tzq-spacing-lg);
}
.tzq-cards-2-cols {
grid-template-columns: repeat(2, 1fr);
}
.tzq-cards-3-cols {
grid-template-columns: repeat(3, 1fr);
}
.tzq-cards-4-cols {
grid-template-columns: repeat(4, 1fr);
}
.tzq-card-item {
background: var(--tzq-bg-primary);
border-radius: var(--tzq-radius-md);
padding: var(--tzq-spacing-xl);
box-shadow: var(--tzq-shadow-md);
border: 1px solid var(--tzq-primary-light);
transition: all var(--tzq-transition-base);
}
.tzq-card-item:hover {
transform: translateY(-4px);
box-shadow: var(--tzq-shadow-lg);
}