/* Base display utilities */
[x-cloak] { 
    display: none !important; 
}


/* swiper */

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
  }

  .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--swiper-theme-color);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
  }

    /* Bikin pergerakan linear (kecepatan konstan) */
    .logo-swiper .swiper-wrapper {
      transition-timing-function: linear !important;
    }



/* ============================================ */
/* MAGIC FORM - FLASH MESSAGES / ALERTS CSS   */
/* ============================================ */

/* Flash Messages Container */
#genericForm_forms_flash,
[id$="_forms_flash"] {
  margin-bottom: 1rem;
}

/* Success Alert */
#genericForm_forms_flash .alert-success,
[id$="_forms_flash"] .alert-success {
  background-color: #ecfdf5;
  border: 1px solid #10b981;
  color: #065f46;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: slideDown 0.3s ease-out;
}

/* Error/Danger Alert */
#genericForm_forms_flash .alert-danger,
#genericForm_forms_flash .alert-error,
[id$="_forms_flash"] .alert-danger,
[id$="_forms_flash"] .alert-error {
  background-color: #fef2f2;
  border: 1px solid #ef4444;
  color: #991b1b;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: slideDown 0.3s ease-out;
}

/* Warning Alert */
#genericForm_forms_flash .alert-warning,
[id$="_forms_flash"] .alert-warning {
  background-color: #fffbeb;
  border: 1px solid #f59e0b;
  color: #92400e;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: slideDown 0.3s ease-out;
}

/* Info Alert */
#genericForm_forms_flash .alert-info,
[id$="_forms_flash"] .alert-info {
  background-color: #eff6ff;
  border: 1px solid #0F57A6;
  color: #1e3a8a;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  animation: slideDown 0.3s ease-out;
}

/* Alert Text */
.alert-success p,
.alert-danger p,
.alert-error p,
.alert-warning p,
.alert-info p {
  margin: 0;
  line-height: 1.5;
  font-size: 0.875rem;
}

/* Alert Strong Text */
.alert-success strong,
.alert-danger strong,
.alert-error strong,
.alert-warning strong,
.alert-info strong {
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

/* Close Button (Optional) */
.alert .close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  margin-left: auto;
  padding: 0;
}

.alert .close:hover {
  opacity: 1;
}

/* Animation */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Out Animation (for auto-dismiss) */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.alert.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

/* Icon Styles (if using icons) */
.alert::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.alert-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}

.alert-danger::before,
.alert-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}

.alert-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f59e0b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E");
}

.alert-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230F57A6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}

/* Responsive */
@media (max-width: 640px) {
  .alert {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
  }
  
  .alert::before {
    width: 18px;
    height: 18px;
  }
}

/* ============================================ */
/* TAILWIND CSS UTILITY CLASSES VERSION        */
/* (Alternative - if using Tailwind)           */
/* ============================================ */

/* You can also use these Tailwind classes directly in HTML:

Success:
<div class="bg-green-50 border border-green-500 text-green-900 px-4 py-3 rounded-xl mb-4 flex items-start gap-3 animate-fade-in">

Error:
<div class="bg-red-50 border border-red-500 text-red-900 px-4 py-3 rounded-xl mb-4 flex items-start gap-3 animate-fade-in">

Warning:
<div class="bg-yellow-50 border border-yellow-500 text-yellow-900 px-4 py-3 rounded-xl mb-4 flex items-start gap-3 animate-fade-in">

Info:
<div class="bg-blue-50 border border-blue-500 text-blue-900 px-4 py-3 rounded-xl mb-4 flex items-start gap-3 animate-fade-in">

*/