/* ============================================================
   danangmedia-floatbtns.css
   Zalo float button + Phone float button
   Load global qua danangmedia_enqueue_styles()
   ============================================================ */

/* ── Zalo Float Button ─────────────────────────────────── */
.dm-zalo-float {
    position: fixed;
    bottom: 82px;
    right: 20px;
    width: 52px;
    height: 52px;
    background: #0068FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,104,255,.45);
    z-index: 9980;
    transition: transform .3s, box-shadow .3s;
    animation: zalo-pulse 2.5s infinite;
}
.dm-zalo-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0,104,255,.65);
}
@keyframes zalo-pulse {
    0%,100% { box-shadow: 0 4px 16px rgba(0,104,255,.45), 0 0 0 0 rgba(0,104,255,.3); }
    50%      { box-shadow: 0 4px 16px rgba(0,104,255,.45), 0 0 0 12px rgba(0,104,255,0); }
}

/* ── Phone Float Button ────────────────────────────────── */
.dm-phone-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #E8401A, #F7931E);
    color: #fff;
    border-radius: 9999px;
    padding: 13px 20px 13px 15px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(232,64,26,.45);
    z-index: 9979;
    transition: transform .3s, box-shadow .3s;
    animation: phone-pulse 2s infinite;
    white-space: nowrap;
}
.dm-phone-float:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 32px rgba(232,64,26,.60);
    color: #fff;
}
.dm-phone-text { white-space: nowrap; }
@keyframes phone-pulse {
    0%,100% { box-shadow: 0 6px 24px rgba(232,64,26,.45), 0 0 0 0 rgba(232,64,26,.25); }
    50%      { box-shadow: 0 6px 24px rgba(232,64,26,.45), 0 0 0 14px rgba(232,64,26,0); }
}
@media (max-width: 768px) {
    /* Ẩn floating buttons trên mobile — CTA bar ở dưới đã có Gọi + Zalo
       Tránh chồng chéo 4 nút liên hệ cùng lúc */
    .dm-phone-float,
    .dm-zalo-float {
        display: none !important;
    }
}

/* ── Price & WC contact button styles ─────────────────── */
.dm-price-contact {
    color: #E8401A;
    font-weight: 700;
    font-size: 1rem;
}
.dm-price-prefix {
    font-size: .8em;
    color: #64748b;
    font-weight: 600;
}
.dm-price-suffix {
    font-size: .75em;
    color: #64748b;
    margin-left: 2px;
}
.dm-product-sku {
    font-size: .8rem;
    color: #94a3b8;
    margin: 4px 0;
}
.dm-quick-contact {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.dm-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    flex: 1;
    justify-content: center;
    min-width: 140px;
}
.dm-contact-btn:hover { transform: translateY(-2px); }
.dm-contact-btn--phone {
    background: linear-gradient(135deg, #E8401A, #F7931E);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(232,64,26,.35);
}
.dm-contact-btn--phone:hover {
    box-shadow: 0 6px 20px rgba(232,64,26,.5);
    color: #fff;
}
.dm-contact-btn--zalo {
    background: #0068FF;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,104,255,.3);
}
.dm-contact-btn--zalo:hover {
    box-shadow: 0 6px 20px rgba(0,104,255,.45);
    color: #fff;
}