/* ——— Container geral ——— */
.cs-cupons{width:100%;max-width:1140px;padding:0 15px;margin:0 auto 20px}

/* ——— Card do cupom ——— */
.descricao-container {position: relative;}

.descricao-cupom {
    font-size: 14px;margin: 8px 0 0;color: #666;overflow-wrap: break-word;
    word-break: break-word;max-width: 100%;line-height: 1.4;transition: all 0.3s ease;
}

.descricao-cupom.truncated {
    display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
    overflow: hidden;margin-bottom: 25px;
}

.ver-mais-btn {
    position: absolute;bottom: 0;right: 0;background: rgba(255, 255, 255, 0.9);
    border: none;color: #666;cursor: pointer;padding: 2px 6px;border-radius: 3px;
    font-size: 12px;transition: all 0.2s ease;backdrop-filter: blur(2px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ver-mais-btn:hover {color: #333;background: rgba(255, 255, 255, 0.95);}
.ver-mais-btn i {transition: transform 0.2s ease;}
.ver-mais-btn.expanded i {transform: rotate(180deg);}

.cupom{
    width:100%;max-width:968px;background:#fff;margin:20px auto;padding:20px 30px;
    border:1px solid #e1e1e1;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);
    display:flex;flex-direction:row;align-items:flex-start;gap:20px;min-height:190px;
    position:relative;animation:aparecer .6s ease forwards
}
@keyframes aparecer{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ——— Bloco do desconto ——— */
.area-desconto{
    display:flex;flex-direction:column;align-items:flex-start;font-size:32px;
    font-weight:700;color:#2c3e50;line-height:1;text-align:left;min-width:80px;margin-top:2px
}
.area-desconto span{display:block;font-size:inherit;font-weight:inherit;line-height:1;margin:0}
.area-desconto span:last-child{margin-top:-4px}
.area-desconto span {font-size: 32px !important;}
.area-desconto.texto-pequeno .numero {font-size: 24px !important;}
.area-desconto span:nth-child(2):not(:last-child) {margin-top: -4px;}
.area-desconto span:nth-child(3):last-child {margin-top: -4px;}
.area-desconto .simbolo{font-size:18px;font-weight:700;line-height:1;margin-bottom:2px;}
.area-desconto .numero{font-size:32px;font-weight:700;line-height:1;}
.area-desconto .rotulo{font-size:18px;font-weight:700;line-height:1;margin-top:-4px;}

/* ——— Informações do cupom ——— */
.info-cupom{
    display:flex;flex-direction:column;justify-content:center;flex:1;padding-right:165px;
    max-width:calc(100% - 165px);box-sizing:border-box;
}
.linha-topo{
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap
}
.nome-cupom{
    font-size:20px;margin:0;color:#2c3e50;flex:1 1 auto;min-width:0;
    overflow-wrap:break-word;word-break:break-word
}
.descricao-cupom{
    font-size:14px;margin:8px 0 0;color:#666;overflow-wrap:break-word;
    word-break:break-word;max-width:100%
}
.tipo-oferta{margin-top:5px;color:#27ae60;font-style:italic}

/* ——— Botões ——— */
.botao-copiar,.botao-oferta{
    position:absolute;right:30px;top:50%;transform:translateY(-50%);display:flex;
    align-items:center;gap:8px;border:none;padding:10px 18px;border-radius:6px;
    cursor:pointer;font-size:15px;font-weight:900;transition:background .3s ease;
    white-space:nowrap;z-index:2;pointer-events:auto
}
.botao-copiar{background:#2ecc71;color:#fff}
.botao-copiar:hover{background:#27ae60}
.botao-oferta{background:#3498db;color:#fff}
.botao-oferta:hover{background:#2980b9}

/* ——— Popup & overlay ——— */
.cs-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:99998;display:none}
.cs-popup{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;
    padding:15px;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.2);text-align:center;
    z-index:99999;width:400px;min-height:auto;height:auto;display:none;
    max-width:90vw;max-height:80vh;
}
.cs-popup .codigo{
    font-size:18px;font-weight:600;margin:10px 0;color:#222;background:#f2f2f2;
    padding:10px;border-radius:6px;border: 2px dashed #ccc;
}
.cs-popup button{
    background:#2ecc71;color:#fff;border:none;padding:10px 18px;border-radius:6px;
    cursor:pointer;font-size:15px;font-weight:700;margin-top:10px;
}
.cs-popup button:hover{background:#27ae60}

/* ——— Header do popup ——— */
.cs-popup-header{
    display:flex;flex-direction:column;align-items:center;margin-bottom:20px;
    padding:20px 0 0 0;border-bottom:none;position:relative;text-align:center;overflow:visible;
}

.cs-popup-titulo{
    font-size:25px;font-weight:600;color:#333;margin:0 0 15px 0;
    text-align:center;line-height:1.3;
}

.cs-popup-descricao{
    font-size:14px;color:#666;text-align:center;line-height:1.4;
    margin:10px 0 15px 0;padding:0 10px;
}

.cs-popup-close{
    position:absolute;top:8px;right:8px;background:none !important;border:none !important;
    font-size:18px;color:#000 !important;cursor:pointer;padding:4px;margin:0;
    line-height:1;width:auto;height:auto;z-index:10;font-family:Arial, sans-serif;
}

.cs-popup-close:hover{color:#666 !important;background:none !important;}

/* ——— Mockup ——— */
.mockup {
    background: #fff;border-radius: 10px;padding: 18px;margin: 15px 0 20px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);border: 2px solid #ddd;
}

.browser-header {
    display: flex;align-items: center;gap: 8px;margin: -18px -18px 16px -18px;
    padding: 12px 30px;background: #f8f9fa;border-radius: 10px 10px 0 0;
    border: none;border-bottom: 1px solid #eee;
}

.browser-dots {display: flex;gap: 6px;align-items: center;}

.dot {
    width: 10px;height: 10px;border-radius: 50%;background: #ff5f57;
}

.dot:nth-child(2) {background: #ffbd2e;}
.dot:nth-child(3) {background: #28ca42;}

.url-bar {
    flex: 1;height: 24px;background: white;border: 1px solid #ddd;border-radius: 4px;
    margin-left: 8px;display: flex;align-items: center;padding: 0 8px;
    font-size: 12px;color: #666;
}

.mockup img {
    width: 100%;max-height: 160px;object-fit: contain;border-radius: 6px;margin-top: 8px;
}

/* ——— WhatsApp Button ——— */
.btn-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);color: white;
    padding: 12px 24px;border: none;border-radius: 25px;font-size: 15px;
    font-weight: 600;cursor: pointer;margin-bottom: 18px;width: 100%;
    transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;
    gap: 8px;text-decoration: none;box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    animation: pulse-glow 2s infinite;
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #22c55e 0%, #16a085 100%);
    transform: translateY(-2px);box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);}
    50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);}
}

/* ——— Coupon Section ——— */
.coupon-section {display: flex;gap: 8px;margin-bottom: 14px;}

.coupon-section .codigo {flex: 0 0 70%;margin: 0;}

.coupon-section button {
    flex: 0 0 calc(30% - 8px);margin: 0;font-size: 13px;padding: 10px 8px;
    white-space: nowrap;width: calc(30% - 8px);min-width: calc(30% - 8px);
    max-width: calc(30% - 8px);overflow: hidden;
}

/* ——— Footer Actions ——— */
.footer-actions {
    display: flex;align-items: center;justify-content: space-between;
    margin-top: 15px;padding-top: 0;
}

.footer-btn {
    background: none !important;border: none !important;color: #999 !important;
    cursor: pointer;display: flex;align-items: center;gap: 4px;font-size: 12px !important;
    padding: 0 !important;margin: 0 !important;
}

.cs-popup button.copiado{background:#27ae60;transform:scale(0.98);}

/* ——— Responsivo (MOBILE) ——— */
@media(max-width:600px){
    .cupom{flex-direction:column;align-items:center;text-align:center;min-height:auto}
    .info-cupom{padding-right:0;max-width:100%;}
    .area-desconto{font-size:28px;align-items:center;margin-top:0}
    .linha-topo{flex-direction:column;gap:10px}
    .nome-cupom{font-size:18px}
    .botao-copiar,.botao-oferta{
        position:static;width:100%;font-size:17px;justify-content:center;
        margin-top:10px;transform:none
    }

    .cs-popup {
        width: 85% !important;max-width: 350px !important;padding: 20px 15px !important;
        margin: 0 auto !important;
    }

    .cs-popup-titulo{font-size:16px !important;margin:5px 0 6px 0;}

    .cs-popup-descricao{
        font-size:12px !important;margin:0 0 3px 0;padding:0 5px;line-height:1.3;
    }

    .cs-popup-header{padding:10px 0 0 0;margin-bottom:10px;}

    .cs-popup-close{
        top:-20px;right:-12px;width:26px;height:26px;font-size:14px;line-height:26px;
    }

    .mockup {padding: 8px;margin: 3px 0 6px 0;transform: scale(0.85);}

    .browser-header {margin: -8px -8px 12px -8px;padding: 8px 16px;font-size: 10px;}

    .url-bar {font-size: 10px;padding: 2px 6px;height: 20px;}

    .browser-dots {gap: 4px;}

    .dot {width: 8px;height: 8px;}

    .btn-whatsapp {
        margin-bottom: 12px !important;padding: 10px 20px !important;font-size: 14px !important;
    }

    .coupon-section {
        display: flex !important;gap: 8px !important;margin-bottom: 12px !important;
        align-items: stretch !important;flex-direction: row !important;
    }

    .coupon-section .codigo {
        flex: 1 !important;width: auto !important;min-width: 0 !important;
        font-size: 12px !important;padding: 8px 6px !important;display: flex !important;
        align-items: center !important;justify-content: center !important;
    }

    .coupon-section button {
        flex: 0 0 auto !important;width: auto !important;max-width: none !important;
        min-width: 80px !important;font-size: 11px !important;padding: 8px 10px !important;
        white-space: nowrap !important;
    }

    .cs-popup button.copiado {
        width: auto !important;max-width: none !important;flex: 0 0 auto !important;
    }

    .footer-actions {margin-top: 10px !important;}

    .footer-btn {font-size: 11px !important;padding: 8px 4px !important;}
}