/**
 * Tip Box Component
 * Informational/tip callout boxes
 *
 * @package Bonusovekody
 * @since 2.0.0
 */

.tip-box {
    position: relative;
    max-width: var(--max-width, 500px);
    background-color: var(--background-color, #F3FDEC);
    border: 1px solid #D9F8C3;
    color: var(--text-color, #488122);
    padding: 12px;
    border-radius: 12px;
    font-size: 16px;
    margin-bottom: 12px;
}

.tip-box .tip-box__icon {
    position: absolute;
    top: 8px;
    left: 12px;
    width: 32px;
    height: auto;
    aspect-ratio: 1 / 1;
}

.tip-box .tip-box__icon path {
    fill: var(--text-color, #000);
}

.tip-box h1,
.tip-box h2,
.tip-box h3,
.tip-box h4,
.tip-box h5,
.tip-box h6 {
    color: var(--text-color, #000);
    margin-top: 0;
}

.tip-box > *:last-child,
.tip-box p:first-of-type,
.tip-box p:nth-last-child(2) {
    margin-bottom: 0;
    padding-bottom: 0;
}

.tip-box.tip-box--icon {
    padding-left: 65px;
}

.tip-box a {
    color: var(--text-color, #000);
    text-decoration: underline;
}

.tip-box a:hover {
    text-decoration: none;
}

/* Alignment utilities for tip-box */
.tip-box--align-left {
    margin-left: 0;
    margin-right: auto;
}

.tip-box--align-center {
    margin-left: auto;
    margin-right: auto;
}

.tip-box--align-right {
    margin-left: auto;
    margin-right: 0;
}