/* ============================================================
 * Stripe Card — การ์ดแถบสีด้านซ้าย + พื้นหลังไล่ระดับ
 * ใช้ในเนื้อหา CKEditor ผ่าน class คงที่เท่านั้น (ห้ามใช้ inline style="--accent:...")
 * เพราะ GeneralHtmlSupport (client) และ HTMLPurifier (server, app/core/Sanitizer.php)
 * ไม่อนุญาต custom property / gradient ผ่าน style attribute ที่ผู้ใช้พิมพ์เอง
 *
 * วิธีใช้ในเนื้อหา:
 * <div class="stripe-card stripe-card--info">
 *   <p class="stripe-card__title">หัวข้อ</p>
 *   <p class="stripe-card__text">รายละเอียด</p>
 * </div>
 *
 * สีที่มีให้: --success --info --warning --error --premium
 * ============================================================ */

.stripe-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 16px 0;
    padding: 16px 20px 16px 22px;
    border-radius: 0 14px 14px 0;
    border: 1px solid #e2e5ea;
    border-left: none;
    overflow: hidden;
    background-color: #f7f8fa; /* fallback สำหรับเบราว์เซอร์ที่ไม่รู้จัก color-mix() */
}

.stripe-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
}

.stripe-card__title {
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    color: #191d24;
}

.stripe-card__text {
    margin: 0;
    font-size: 14px;
    color: #5b6472;
}

.stripe-card--success { background: linear-gradient(135deg, color-mix(in srgb, #16A374 16%, #fff) 0%, #fff 62%); }
.stripe-card--success::before { background: linear-gradient(180deg, #16A374, color-mix(in srgb, #16A374 65%, black)); }

.stripe-card--info { background: linear-gradient(135deg, color-mix(in srgb, #5B6EF5 16%, #fff) 0%, #fff 62%); }
.stripe-card--info::before { background: linear-gradient(180deg, #5B6EF5, color-mix(in srgb, #5B6EF5 65%, black)); }

.stripe-card--warning { background: linear-gradient(135deg, color-mix(in srgb, #E0982A 16%, #fff) 0%, #fff 62%); }
.stripe-card--warning::before { background: linear-gradient(180deg, #E0982A, color-mix(in srgb, #E0982A 65%, black)); }

.stripe-card--error { background: linear-gradient(135deg, color-mix(in srgb, #E24B6B 16%, #fff) 0%, #fff 62%); }
.stripe-card--error::before { background: linear-gradient(180deg, #E24B6B, color-mix(in srgb, #E24B6B 65%, black)); }

.stripe-card--premium { background: linear-gradient(135deg, color-mix(in srgb, #9B5DE5 16%, #fff) 0%, #fff 62%); }
.stripe-card--premium::before { background: linear-gradient(180deg, #9B5DE5, color-mix(in srgb, #9B5DE5 65%, black)); }