/* Seller Contact Buttons - Full Version */
.seller-contact-buttons {
    display: flex;
    flex-wrap: nowrap; /* Forces buttons to stay on one line */
    gap: 10px;
    margin-bottom: 0px;
    justify-content: center;
    width: 100%;
}

/* Main Button - Height Fix applied here */
.scb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    
    /* Fixed height ensures all buttons are identical regardless of content */
    height: 50px; 
    
    
    border-radius: 12px;
    background: transparent;
    border: 2px solid #e9ecef;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.25s ease;
    color: #495057;
    text-decoration: none;
    box-sizing: border-box; /* Ensures border is included in the 50px height */
    flex: 1; /* Makes buttons share the width equally */
    white-space: nowrap;
}

.scb-btn i {
    font-size: 1.2em;
}

.scb-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.06);
}

/* Button Colors (Outline Style) */
.scb-call {
    border-color: #4361ee;
    color: #4361ee;
}
.scb-call:hover { background-color: rgba(67, 97, 238, 0.05); }

.scb-whatsapp {
    border-color: #25D366;
    color: #25D366;
}
.scb-whatsapp:hover { background-color: rgba(37, 211, 102, 0.05); }

.scb-reveal {
    border-color: #6c757d;
    color: #6c757d;
}
.scb-reveal:hover { background-color: rgba(108, 117, 125, 0.05); }

/* Avatar Styling */
.seller-avatar {
    text-align: center;
    margin-top: 15px;
}

.seller-avatar img {
    border-radius: 12px;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Compact Version */
.seller-contact-buttons-compact {
    display: flex;
    gap: 8px;
    align-items: center;
    /*background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid #e9ecef;*/
    flex-wrap: wrap;
}

.scb-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: transparent;
    border: 2px solid #dee2e6;
    transition: 0.2s;
    cursor: pointer;
}

.scb-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.06);
}

.scb-mini-call { 
    border-color: #4361ee; 
    color: #4361ee; 
}
.scb-mini-call:hover { background-color: rgba(67, 97, 238, 0.05); }

.scb-mini-whatsapp { 
    border-color: #25D366; 
    color: #25D366; 
}
.scb-mini-whatsapp:hover { background-color: rgba(37, 211, 102, 0.05); }

.scb-mini-reveal { 
    border-color: #6c757d; 
    color: #6c757d; 
}
.scb-mini-reveal:hover { background-color: rgba(108, 117, 125, 0.05); }

.scb-mini-avatar {
    margin-left: 4px;
}

.scb-mini-avatar img {
    border-radius: 8px;
    width: 42px;
    height: 42px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Revealed number styling */
.scb-revealed {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: white;
    border-radius: 10px;
    font-weight: 600;
    color: #333;
    border: 1px solid #e9ecef;
    font-size: 14px;
    margin-left: 8px;
}

/* Mobile Optimization */
@media (max-width: 400px) {
    .seller-contact-buttons {
        gap: 8px;
        padding: 0;
    }
    
    .scb-btn {
        padding: 0 10px;
        font-size: 13px;
        gap: 5px;
        height: 46px;
    }
    
    .scb-btn i {
        font-size: 1.1em;
    }
    
    .seller-contact-buttons-compact {
        padding: 6px 10px;
    }
    
    .scb-mini {
        width: 38px;
        height: 38px;
    }
    
    .scb-mini-avatar img {
        width: 38px;
        height: 38px;
    }
}

.scb-btn, .scb-mini {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
    touch-action: manipulation; /* Optimizes for touch */
}