/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .pi-msg-container{
    display:block;
    width:100%;
    clear:both;
    margin:20px auto;
    padding:10px 0;
    
}

.pi-msg-title{
    padding:10px;
    font-size: 16px;
    border:1px solid #ccc;
}

.pi-msg-body{
   padding:10px;
   border:1px solid #ccc;
}

.pi-free-prod-row{
    display: flex;
    width:100%;
}

.pi-free-prod-img{
    width:60px;
    margin-right:20px;
}

/* ==========================================================
   Shared base for template-1 to template-4
   ========================================================== */
.pi-msg-container.template-1,
.pi-msg-container.template-2,
.pi-msg-container.template-3,
.pi-msg-container.template-4 {
    position: relative;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.pi-msg-container.template-1 .pi-msg-title,
.pi-msg-container.template-2 .pi-msg-title,
.pi-msg-container.template-3 .pi-msg-title,
.pi-msg-container.template-4 .pi-msg-title {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 46px;
    padding: 8px 14px;
    border: 0;
    font-size: 16px;
    line-height: 1.3;
}

.pi-msg-container.template-1 .pi-msg-body,
.pi-msg-container.template-2 .pi-msg-body,
.pi-msg-container.template-3 .pi-msg-body,
.pi-msg-container.template-4 .pi-msg-body {
    border: 0;
    padding: 12px 16px;
}

/* ==========================================================
   Template 1 - Green with tag icon
   ========================================================== */
.pi-msg-container.template-1 {
    border: 2px solid #7fcf8a;
    background: linear-gradient(#d9f0dc 0, #d9f0dc 50px, #f6fcf7 50px);
}
.pi-msg-container.template-1 .pi-msg-title {
    background: transparent;
    color: #0f5a1e;
    font-weight: 700;
}
.pi-msg-container.template-1 .pi-msg-title::before {
    content: "";
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-right: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23208a3c' d='M2 12.2V4a2 2 0 0 1 2-2h8.2a2 2 0 0 1 1.4.6l8.8 8.8a2 2 0 0 1 0 2.8l-7.2 7.2a2 2 0 0 1-2.8 0L2.6 13.6A2 2 0 0 1 2 12.2Z'/><circle cx='7.5' cy='7.5' r='1.8' fill='%23d9f0dc'/></svg>") center/contain no-repeat;
}

/* ==========================================================
   Template 2 - Yellow with arrow ribbon
   ========================================================== */
.pi-msg-container.template-2 {
    border: 2px solid #fbc72e;
    background: linear-gradient(#fdeeba 0, #fdeeba 46px, #fffbf0 46px);
}
.pi-msg-container.template-2 .pi-msg-title {
    display: inline-flex;
    width: fit-content;
    max-width: 90%;
    padding: 8px 44px 8px 18px;
    background: #fbc72e;
    color: #1d1d1d;
    font-weight: 700;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}

/* ==========================================================
   Template 3 - Red / pink with gift icon
   ========================================================== */
.pi-msg-container.template-3 {
    border: 2px solid #f4525f;
    background: linear-gradient(#fde3e6 0, #fde3e6 46px, #fff6f7 46px);
}
.pi-msg-container.template-3 .pi-msg-title {
    background: transparent;
    color: #b8102a;
    font-weight: 700;
}
.pi-msg-container.template-3 .pi-msg-title::before {
    content: "";
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-right: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8344a'><path d='M12 8c-1-3-3.2-5-5-4.2C5 4.6 5.6 7 8 8h4Zm0 0c1-3 3.2-5 5-4.2 2 .8 1.4 3.2-1 4.2h-4Z'/><rect x='2' y='8' width='20' height='4' rx='1'/><rect x='3.5' y='13' width='7.5' height='9' rx='1'/><rect x='13' y='13' width='7.5' height='9' rx='1'/></svg>") center/contain no-repeat;
}

/* ==========================================================
   Template 4 - Purple dashed with % badge
   ========================================================== */
.pi-msg-container.template-4 {
    border: 2px dashed #6a4cc0;
    background: linear-gradient(#e9e3fb 0, #e9e3fb 46px, #f7f5ff 46px);
}
.pi-msg-container.template-4 .pi-msg-title {
    background: transparent;
    color: #2c1a78;
    font-weight: 700;
    padding-left: 0;
}
.pi-msg-container.template-4 .pi-msg-title::before {
    content: "";
    flex: 0 0 56px;
    align-self: stretch;
    width: 56px;
    margin-right: 16px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'><circle cx='7' cy='7' r='2.6' fill='white'/><circle cx='17' cy='17' r='2.6' fill='white'/><path d='M19 5 5 19'/></svg>") center/26px 26px no-repeat,
        #5b3fb0;
}

/* ==========================================================
   Shared free product row inside templates
   ========================================================== */
.pi-msg-container.template-1 .pi-free-prod-row,
.pi-msg-container.template-2 .pi-free-prod-row,
.pi-msg-container.template-3 .pi-free-prod-row,
.pi-msg-container.template-4 .pi-free-prod-row {
    align-items: center;
}
.pi-msg-container.template-1 .pi-free-prod-img img,
.pi-msg-container.template-2 .pi-free-prod-img img,
.pi-msg-container.template-3 .pi-free-prod-img img,
.pi-msg-container.template-4 .pi-free-prod-img img {
    display: block;
    max-width: 100%;
    height: auto;
    background: #eaeef2;
}

/* ==========================================================
   Mobile
   ========================================================== */
@media (max-width: 480px) {
    .pi-msg-container.template-1 .pi-msg-title,
    .pi-msg-container.template-2 .pi-msg-title,
    .pi-msg-container.template-3 .pi-msg-title,
    .pi-msg-container.template-4 .pi-msg-title {
        font-size: 14px;
    }
    .pi-msg-container.template-2 .pi-msg-title {
        max-width: 100%;
    }
}