/*
* This file has been refactored to use the global variables
* defined in style/main.css.
*
* - Removed duplicated reset styles.
* - Removed local :root variables.
* - Converted all colors to use global variables.
*/

.contact-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 40px auto;
  direction: rtl;
  /* * Note: We should move this font-family to a global class like .ar
   * in main.css, but for now we'll leave it.
  */
  font-family: "Cairo", sans-serif; 
}

/* General Button Styling */
.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-white); /* Refactored */
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  min-width: 280px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* Remove default button styles */
.contact-btn a {
  text-decoration: none;
  color: inherit;
}

/* SVG icons */
.contact-btn img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1); /* makes SVG white */
}

/* Font Awesome icons — optional fallback */
.contact-btn i {
  font-size: 1.2rem;
  display: none; /* hidden since you’re using custom SVGs */
}

/* Individual Button Colors */
.contact-btn.email {
  background-color: var(--color-email-blue); /* Refactored */
}

.contact-btn.phone {
  background-color: var(--color-call); /* Refactored */
}

.contact-btn.whatsapp {
  background-color: var(--color-whatsapp); /* Refactored */
}

/* Hover Animation */
.contact-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Focus/Active for accessibility */
.contact-btn:active {
  transform: scale(0.98);
}

/* Responsive Layout */
@media (max-width: 600px) {
  .contact-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }

  .contact-btn {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}