/* --- Sidebar Widget (The container for the inquiry form) --- */
.contact-widget-vendor-detail, .social-links-widget {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.contact-widget-vendor-detail h3, .social-links-widget h3 {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

/* Styles for the form inputs (text fields and textarea) */
.contact-widget-vendor-detail input, .contact-widget-vendor-detail textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* Styles for the form submission button */
.btn-primary-contact {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #28a745; /* Green color */
    color: white;
    text-align: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.05rem;
    transition: background-color 0.3s;
}

.btn-primary-contact:hover {
    background-color: #218838; /* Darker green on hover */
}

/* Highlight border for validation or focus */
.highlight-border {
    border: 3px solid #007bff !important; /* Blue highlight */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
    transition: border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

/* In assets/css/vendor-detail.css */
.contact-details {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
}

.contact-details p {
    margin: 5px 0;
    color: #555; /* Base color for text */
}

.contact-details .contact-link {
    color: #555; /* Match the surrounding text color */
    text-decoration: none; /* Remove underline */
    transition: color 0.2s;
}

.contact-details .contact-link:hover {
    color: #FA5754; /* Highlight color on hover */
    text-decoration: underline; /* Optional: Add underline on hover */
}