@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Inter:wght@400;600;700;800&display=swap');

:root {
  --color-primary: #002546;
  --color-primary-container: #0d3b66;
  --color-secondary: #a33e00;
  --color-secondary-container: #fd6c1a;
  --color-tertiary: #002a24;
  --color-tertiary-container: #00423a;
  --color-tertiary-fixed: #79f7e3;
  --color-surface: #f9f9ff;
  --color-surface-low: #f0f3ff;
  --color-surface-high: #dee8ff;
  --color-surface-highest: #d8e3fb;
  --color-surface-lowest: #ffffff;
  --color-on-surface: #111c2d;
  --color-on-surface-variant: #42474f;
  --color-outline: #737780;
  --color-outline-variant: #c3c6d0;
}

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: 'Tajawal', sans-serif !important;
}

/* Latin codes, container IDs, and numbers */
.font-latin, [dir="ltr"], input[type="tel"], input[type="email"], .tabular-nums {
  font-family: 'Inter', sans-serif !important;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

/* 3D Flip Card Animation System */
.flip-card-wrapper {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card-wrapper:hover .flip-card-inner,
.flip-card-wrapper.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0.75rem;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Smooth modal transitions */
#quote-modal.hidden {
  display: none;
}

#quote-modal:not(.hidden) {
  display: flex;
}

/* =========================================
   WhatsApp Floating Button - CSS Only Style
   ========================================= */

/* Base Button Styles */
.whatsapp-float {
    width: 48px;
    height: 48px;
    background-color: #25d366; /* WhatsApp Green */
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    animation: whatsapp-pulse 2s infinite;
    flex-shrink: 0;
}

/* Hover Effect */
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    background-color: #1da851;
    animation: none;
}

/* WhatsApp Icon (Inline Official SVG) */
.whatsapp-float::before {
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Pulse Animation */
@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}