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

@layer base {
  html {
    font-family: "Nunito", system-ui, sans-serif;
  }
}

html {
    font-family: "Nunito", system-ui, sans-serif;
    font-size:16px;
    color:#253D4E;
}

.swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }

.swiper-pagination .swiper-pagination-bullet{
    background: transparent;
    border: 1px solid #7e7e7e;
    width:15px; height:15px;
}
.swiper-pagination .swiper-pagination-bullet-active{
    background: #F5108B;
    border: 1px solid #F5108B;
}
.swiper-button-prev{background:#f2f3f4;color:#253D4E !important;}
.swiper-button-next{background:#f2f3f4;color:#253D4E !important;}
:root {
  --swiper-navigation-size: 18px !important;
}

.zoom-img {
    cursor: zoom-in;
}
.img-zoom-container {
    position: relative;
    overflow: hidden;
}
.img-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: none;
}
.img-zoom-result {
    border: 1px solid #d4d4d4;
    background-color: white;
}

#content p{margin-bottom:12px;}

.notification {
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease-out;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: 320px;
    word-break: break-word;
}

.notification.success {
    background: linear-gradient(135deg, #10B981, #059669);
    border-left: 4px solid #047857;
}

.notification.error {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border-left: 4px solid #B91C1C;
}

.notification.info {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    border-left: 4px solid #1D4ED8;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}