/* PapaCupom - Estilo Moderno do Modal de Cupom (versão final)
   Ajustes: recortes laterais com cor do fundo (#f4f7f6), espaçamento no header,
   destaque do código, botão estilizado e toast de cópia.
*/

/* Container principal */
.coupon-shaped .modal-content {
    border: none !important;
    border-radius: 24px !important;
    overflow: hidden;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.30) !important;
    background: #ffffff;
    position: relative;
}

/* Header - remover borda e dar espaçamento */
.coupon-shaped .modal-header {
    border: none !important;
    padding: 24px 28px 8px !important;
    text-align: center;
}

/* Melhorar título/topo do modal */
.coupon-shaped .modal-header .h4,
.coupon-shaped .modal-header h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* Recortes laterais (efeito "ticket") - Desktop */
@media (min-width: 768px) {
    .coupon-shaped .modal-content::before,
    .coupon-shaped .modal-content::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 44px;
        height: 44px;
        background: #f4f7f6 !important; /* cor do fundo do site - ajuste se necessário */
        border-radius: 50%;
        z-index: 10;
        transform: translateY(-50%);
        box-shadow: inset 0 0 10px rgba(0,0,0,0.04);
    }
    .coupon-shaped .modal-content::before { left: -22px; }
    .coupon-shaped .modal-content::after  { right: -22px; }
}

/* Corpo do modal */
.coupon-shaped .modal-body {
    padding: 38px 36px !important;
    text-align: center;
    color: #333;
}

/* Logo / imagem da loja */
.coupon-shaped .coupon-image img,
.coupon-shaped .store-image img {
    max-width: 220px;
    max-height: 92px;
    object-fit: contain;
    display: block;
    margin: 0 auto 6px;
}

/* Espaçamento extra entre logo e código */
.coupon-shaped .modal-body .logo-wrap { margin-bottom: 8px; }

/* Campo do Código do Cupom - destaque central */
.coupon-shaped .coupon-code-modal {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 22px auto !important;
    padding: 18px 20px !important;
    font-family: 'Courier New', Courier, monospace;
    font-size: 30px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    color: #22a48a !important;
    background: linear-gradient(180deg,#f7fffb,#f0fdfa) !important;
    border: 3px dashed #22a48a !important;
    border-radius: 12px !important;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-user-select: all;
    user-select: all;
}

/* Hover e foco melhorados */
.coupon-shaped .coupon-code-modal:hover,
.coupon-shaped .coupon-code-modal:focus {
    background: #e8fff7 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34,164,138,0.08);
    outline: none;
}

/* Texto de instrução abaixo do código */
.coupon-shaped .coupon-code-copied {
    margin-top: 10px;
    font-size: 12px;
    color: #8b8b8b;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* A mensagem after-copy (inicialmente escondida) */
.coupon-shaped .coupon-code-copied.after-copy {
    display: none;
    color: #2f8f75;
    font-weight: 700;
}

/* Botão de ação principal */
.coupon-shaped .apply-btn,
.coupon-shaped .modal-footer .btn,
.coupon-shaped .sale-act-btn {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 34px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    box-shadow: 0 12px 26px rgba(255,71,87,0.18) !important;
    cursor: pointer;
}

/* Pequenos controles / feedback (joinha etc) */
.coupon-shaped .coupon-works {
    margin-top: 12px;
    display:flex;
    align-items:center;
    gap:12px;
    justify-content:center;
}

/* Rodapé interno do modal (share) */
.coupon-shaped .modal-body.modal-body-share {
    padding: 18px 28px 28px !important;
    border-top: 1px solid #f0f0f0;
}

/* Toast de confirmação de cópia */
.papacupom-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.88);
    color: #fff;
    padding: 12px 22px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 14px;
    z-index: 11000;
    display: none;
    pointer-events: none;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

/* Mobile adjustments */
@media (max-width: 780px) {
    .coupon-shaped .modal-content {
        border-radius: 14px !important;
        margin: 0 14px;
    }
    .coupon-shaped .modal-body {
        padding: 18px !important;
    }
    .coupon-shaped .coupon-code-modal {
        font-size: 20px !important;
        max-width: 320px;
        padding: 14px !important;
    }
    .coupon-shaped .modal-content::before,
    .coupon-shaped .modal-content::after { display: none; }
}

/* Ajuste para títulos longos no topo do modal */
.coupon-shaped .modal-header .h4, 
.coupon-shaped .modal-header h4 {
    padding: 0 45px !important; /* Dá espaço para o botão de fechar (X) não atropelar o texto */
    line-height: 1.4 !important;
    font-size: 18px !important; /* Tamanho ideal para leitura */
    display: block;
    width: 100%;
}