/* Public product documentation card, compatible with most WooCommerce themes. */
.mlm-documentation-card,
.woocommerce div.product .mlm-documentation-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #f9cfaa;
    border-radius: 20px;
    background: #fffafa;
    color: #23243a;
    padding: 15px 17px 15px 13px;
    margin: 12px 0 18px;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(174, 95, 35, 0.04);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mlm-documentation-card:hover,
.woocommerce div.product .mlm-documentation-card:hover {
    border-color: #ef9c5e;
    box-shadow: 0 10px 30px rgba(174, 95, 35, .1);
    color: #23243a;
    text-decoration: none;
    transform: translateY(-1px);
}
.mlm-documentation-card:focus-visible { outline: 3px solid #eb7d29; outline-offset: 3px; }
.mlm-documentation-icon {
    display: inline-flex;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    background: #f3eced;
    border-radius: 50%;
    color: #405578;
}
.mlm-documentation-icon svg { width: 21px; height: 21px; }
.mlm-documentation-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 3px; }
.mlm-documentation-kicker { color: #ad4b00; font-size: 12px; font-weight: 800; line-height: 1.25; letter-spacing: .04em; }
.mlm-documentation-title { color: #23243a; font-size: 17px; font-weight: 760; line-height: 1.3; }
.mlm-documentation-subtitle { color: #51566a; font-size: 13px; line-height: 1.45; }
.mlm-documentation-arrow {
    display: inline-flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #f7e4d5;
    border-radius: 50%;
    color: #ed7417;
    background: #fff;
    box-shadow: 0 3px 8px rgba(15, 17, 33, .04);
}
.mlm-documentation-arrow svg { width: 18px; height: 18px; }
@media (max-width: 520px) {
    .mlm-documentation-card, .woocommerce div.product .mlm-documentation-card { padding: 12px; gap: 10px; }
    .mlm-documentation-icon { flex-basis: 38px; width: 38px; height: 38px; }
    .mlm-documentation-arrow { flex-basis: 34px; width: 34px; height: 34px; }
    .mlm-documentation-kicker { font-size: 10px; }
    .mlm-documentation-title { font-size: 15px; }
    .mlm-documentation-subtitle { font-size: 12px; }
}

/* 3.0.24: ensure the card fills the purchase column in custom WooCommerce themes. */
body.single-product .mlm-documentation-card {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    flex-basis: 100%;
    float: none;
    clear: both;
    text-transform: none;
    cursor: pointer;
}
body.single-product .mlm-documentation-card .mlm-documentation-copy {
    text-align: left;
}
body.single-product .mlm-documentation-card .mlm-documentation-icon,
body.single-product .mlm-documentation-card .mlm-documentation-arrow {
    flex-shrink: 0;
}