@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 310 80% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 310 80% 50%;
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 310 80% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 310 80% 50%;
  }
}
 
@layer base {
  * {
    border-color: hsl(var(--border));
  }
  html, body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgb(236, 72, 153);stop-opacity:1" /><stop offset="50%" style="stop-color:rgb(139, 92, 246);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(251, 211, 141);stop-opacity:1" /></linearGradient></defs><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" fill="none" stroke="url(%23grad1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="12" cy="13" r="4" fill="url(%23grad1)"></circle></svg>') 4 4, auto;
  }
  body.clicking {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="yellow" stroke="orange"/></svg>') 16 16, auto;
  }
  button, a[role="button"], [aria-label*="close" i], [aria-label*="exit" i], [aria-label*="menu" i] {
    cursor: default;
  }
  a, [role="link"], .cursor-pointer {
     cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%23EC4899" stroke="white" stroke-width="1.5"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>') 16 16, pointer;
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
  .parallax-bg {
      background-image: url('https://horizons-cdn.hostinger.com/542c11f5-7bb2-4222-aa64-feccddb4da4f/bd5e94138070d07d708c2a0e368591bb.jpg');
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }
  .portal-font, .form-font {
    font-family: 'Montserrat', sans-serif;
  }
  button:active, a:active {
    transform: scale(0.95);
    transition: transform 0.2s;
  }
  .admin-page h1, .admin-page h2, .admin-page h3, .admin-page h4, .admin-page h5, .admin-page h6,
  .admin-page p, .admin-page span, .admin-page div, .admin-page label, .admin-page td, .admin-page th, .admin-page button,
  .admin-dialog h1, .admin-dialog h2, .admin-dialog h3, .admin-dialog h4, .admin-dialog h5, .admin-dialog h6,
  .admin-dialog p, .admin-dialog span, .admin-dialog div, .admin-dialog label, .admin-dialog button {
    color: black;
    font-weight: bold;
  }
}

@layer components {
  .gradient-text {
    @apply bg-gradient-to-r from-pink-500 via-purple-500 to-yellow-500 text-transparent bg-clip-text;
  }
  .pulse-glow {
    box-shadow: 0 0 15px 2px theme('colors.pink.400'), 0 0 25px 5px theme('colors.pink.500/70');
    animation: pulse-glow-animation 2s infinite ease-in-out;
  }
  .call-to-action-button {
    @apply bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold transition-all duration-300 transform hover:scale-105;
  }
  .modal-background {
    background-color: #da73d5;
  }
  .border-gradient-outer {
    @apply relative bg-clip-padding border border-transparent;
  }
  .border-gradient-outer::before {
    content: '';
    @apply absolute inset-0 z-[-1] m-[-0.1rem] rounded-[inherit] bg-gradient-to-r from-pink-500 via-blue-300 to-yellow-300;
  }
  .page-title {
    padding-top: 120px;
  }
  .book-now-btn, .inquire-btn {
    display: block;
  }
  .marquee-trust {
    animation: marquee-animation 19.5s linear infinite; /* 1.5s per item * 13 items */
  }
  .mask-gradient {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }
  .chat-glow-animation {
    animation: chat-glow 3s infinite ease-in-out;
  }
  .admin-gradient-bg {
    @apply bg-gradient-to-br from-[#f0aecf] via-[#bde4e7] to-[#fbd67d];
  }
  .admin-dialog {
    @apply admin-gradient-bg;
  }
  .admin-dialog input, .admin-dialog textarea {
    @apply bg-white/80 border-gray-400;
  }
  @media (max-width: 768px) {
    body.menu-open .book-now-btn,
    body.menu-open .inquire-btn {
      display: none;
    }
    .page-title.about-title, .page-title.packages-title {
      padding-top: 100px;
    }
    .page-title.explore-title, .page-title.contact-title {
        padding-top: 80px;
    }
    .hero-title-mobile {
      padding-top: 2rem;
    }
  }
}

@keyframes pulse-glow-animation {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 15px 2px theme('colors.pink.400'), 0 0 25px 5px theme('colors.pink.500/70');
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 25px 5px theme('colors.pink.300'), 0 0 40px 10px theme('colors.pink.400/70');
  }
}

@keyframes chat-glow {
  0%, 100% {
    box-shadow: 0 0 8px 2px #ec4899, 0 0 12px 4px #93c5fd, 0 0 16px 6px #fcd34d;
    opacity: 0.7;
  }
  50% {
    box-shadow: 0 0 16px 4px #ec4899, 0 0 24px 8px #93c5fd, 0 0 32px 12px #fcd34d;
    opacity: 1;
  }
}

@keyframes marquee-animation {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-25%); }
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.5rem !important;
  color: theme('colors.pink.500');
}

.swiper-pagination-bullet-active {
    background: theme('colors.pink.500') !important;
}

.pac-container {
    @apply rounded-md shadow-lg bg-white border border-gray-200 z-[9999];
}

.pac-item {
    @apply p-2 cursor-pointer hover:bg-gray-100 border-b border-gray-100;
}

.pac-item:last-child {
    @apply border-b-0;
}

.pac-item-query {
    @apply font-semibold text-gray-800;
}

.pac-icon {
    @apply mr-2 text-gray-500;
}

.pac-icon-marker {
  display: none;
}

@media print {
    .print-container {
        padding-top: 1in;
        padding-bottom: 1in;
    }
    body {
        margin: 0;
    }
}