/*
Theme Name: WPUmroh
Theme URI: https://aksespedia.com/umroh/
Author: Badrudin
Author URI: https://wa.me/6282310923844
Description: Tema WordPress untuk travel umroh dan haji dengan manajemen paket, lead jamaah, affiliate, lisensi, serta pengaturan frontpage yang mudah dikustomisasi.
Version: 2.2.11
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: umroh-by-aksespedia
*/

.font-heading { font-family: 'Playfair Display', serif; }
.font-body { font-family: 'Poppins', sans-serif; }
.gradient-islamic { background: linear-gradient(135deg, var(--umroh-color-primary, #065f46) 0%, var(--umroh-color-secondary, #059669) 100%); }
.gradient-islamic-light { background: linear-gradient(135deg, var(--umroh-color-background, #d1fae5) 0%, var(--umroh-color-secondary, #a7f3d0) 100%); }
.card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(6, 95, 70, 0.25); }
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.slide-in { animation: slideIn 0.5s ease-out forwards; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.fadeIn { animation: fadeIn 0.6s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mosque-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}
body { box-sizing: border-box; background-color: var(--umroh-color-background, #f0fdf4) !important; color: var(--umroh-color-text, #0f172a); background-image: none !important; }

/* Color bridge: override class warna statis agar mengikuti token preset/custom */
.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-teal-600,
.text-teal-700,
.text-green-600 {
  color: var(--umroh-color-primary, #0f766e) !important;
}

.text-emerald-300,
.text-emerald-400,
.text-emerald-500,
.text-teal-300,
.text-teal-400,
.text-teal-500,
.text-green-300,
.text-green-400,
.text-green-500 {
  color: var(--umroh-color-secondary, #14b8a6) !important;
}

.text-emerald-50,
.text-emerald-100,
.text-teal-50,
.text-teal-100 {
  color: #ffffff !important;
}

.text-gray-600,
.text-gray-500,
.text-slate-500,
.text-slate-600 {
  color: var(--umroh-color-muted, #64748b) !important;
}

.bg-emerald-600,
.bg-emerald-700,
.bg-teal-600,
.bg-teal-700,
.bg-green-600,
.bg-green-700,
.button-primary,
.wp-element-button,
.umroh-login-wa-trigger,
.umroh-login-otp-submit {
  background-color: var(--umroh-color-primary, #0f766e) !important;
  border-color: var(--umroh-color-primary, #0f766e) !important;
  color: var(--umroh-color-on-primary, #ffffff) !important;
}

.bg-emerald-50,
.bg-emerald-100,
.bg-teal-50,
.bg-teal-100,
.bg-green-50,
.bg-green-100 {
  background-color: var(--umroh-color-primary-soft, #ecfdf5) !important;
}

.bg-amber-500,
.bg-yellow-500,
.bg-orange-500,
.text-amber-500,
.text-yellow-500,
.text-orange-500 {
  color: var(--umroh-color-accent, #f59e0b) !important;
}

.bg-amber-500,
.bg-yellow-500,
.bg-orange-500 {
  background-color: var(--umroh-color-accent, #f59e0b) !important;
  border-color: var(--umroh-color-accent, #f59e0b) !important;
}

.border-emerald-200,
.border-emerald-300,
.border-teal-200,
.border-teal-300,
.border-green-200,
.border-green-300 {
  border-color: var(--umroh-color-border, #dbe5e1) !important;
}

a:hover {
  color: var(--umroh-color-primary, #0f766e);
}

.hover\:text-emerald-400:hover,
.hover\:text-teal-400:hover,
.hover\:text-green-400:hover,
.hover\:text-emerald-500:hover,
.hover\:text-teal-500:hover,
.hover\:text-green-500:hover {
  color: var(--umroh-color-secondary, #14b8a6) !important;
}

.hover\:text-emerald-700:hover,
.hover\:text-teal-700:hover,
.hover\:text-green-700:hover {
  color: var(--umroh-color-primary, #0f766e) !important;
}

.bg-emerald-400\/20,
.bg-teal-400\/20,
.bg-green-400\/20 {
  background-color: color-mix(in srgb, var(--umroh-color-secondary, #14b8a6) 20%, transparent) !important;
}

/* Bridge untuk utilitas gradien Tailwind agar section tetap ikut custom color */
.from-emerald-900,
.from-emerald-800,
.from-emerald-700,
.from-emerald-600,
.from-emerald-500 {
  --tw-gradient-from: var(--umroh-color-primary, #0f766e) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: color-mix(in srgb, var(--umroh-color-primary, #0f766e) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-teal-900,
.via-teal-800,
.via-teal-700,
.via-teal-600,
.via-teal-500 {
  --tw-gradient-stops: var(--tw-gradient-from), color-mix(in srgb, var(--umroh-color-primary, #0f766e) 45%, var(--umroh-color-secondary, #14b8a6) 55%) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.to-emerald-900,
.to-emerald-800,
.to-emerald-700,
.to-teal-900,
.to-teal-800,
.to-teal-700,
.to-teal-600,
.to-green-900,
.to-green-800,
.to-green-700,
.to-green-600 {
  --tw-gradient-to: var(--umroh-color-secondary, #14b8a6) var(--tw-gradient-to-position) !important;
}

/* Refinement spesifik section testimoni */
#page-home .umroh-section-testi {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--umroh-color-primary, #0f766e) 82%, #001a16 18%) 0%,
    color-mix(in srgb, var(--umroh-color-primary, #0f766e) 45%, var(--umroh-color-secondary, #14b8a6) 55%) 52%,
    color-mix(in srgb, var(--umroh-color-secondary, #14b8a6) 88%, #002019 12%) 100%
  ) !important;
}

#page-home .umroh-section-testi .bg-white\/20 {
  background-color: color-mix(in srgb, var(--umroh-color-on-primary, #ffffff) 18%, transparent) !important;
}

#page-home .umroh-section-testi .bg-white\/10 {
  background-color: color-mix(in srgb, var(--umroh-color-on-primary, #ffffff) 12%, transparent) !important;
}

#page-home .umroh-section-testi .border-white\/20 {
  border-color: color-mix(in srgb, var(--umroh-color-on-primary, #ffffff) 22%, transparent) !important;
}

#page-home .umroh-section-testi .hover\:border-white\/40:hover {
  border-color: color-mix(in srgb, var(--umroh-color-on-primary, #ffffff) 44%, transparent) !important;
}

#page-home .umroh-section-testi .text-emerald-50,
#page-home .umroh-section-testi .text-white\/60,
#page-home .umroh-section-testi .text-white\/80,
#page-home .umroh-section-testi .text-white {
  color: var(--umroh-color-on-primary, #ffffff) !important;
}

#page-home .umroh-section-testi .umroh-testi-dot {
  background-color: color-mix(in srgb, var(--umroh-color-on-primary, #ffffff) 30%, transparent) !important;
}

#page-home .umroh-section-testi .umroh-testi-dot.is-active {
  background-color: var(--umroh-color-on-primary, #ffffff) !important;
}

/* Galeri dan Dokumentasi */
.umroh-video-embed {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #0f172a;
}

.umroh-video-embed::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.umroh-video-embed iframe,
.umroh-video-embed video,
.umroh-video-embed embed,
.umroh-video-embed object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.umroh-video-embed-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: #ffffff;
}

.umroh-video-embed-fallback a {
  color: #ffffff;
  text-decoration: underline;
}

.umroh-gallery-marquee {
  display: grid;
  gap: 16px;
}

.umroh-gallery-row {
  position: relative;
  overflow: hidden;
}

.umroh-gallery-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: umrohGalleryMarquee 42s linear infinite;
  will-change: transform;
}

.umroh-gallery-row--reverse .umroh-gallery-track {
  animation-direction: reverse;
}

.umroh-gallery-card {
  flex: 0 0 auto;
  width: min(330px, calc(100vw - 64px));
}

@keyframes umrohGalleryMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); }
}

@media (max-width: 767px) {
  .umroh-gallery-track {
    gap: 12px;
    animation-duration: 30s;
  }
  .umroh-gallery-card {
    width: min(270px, calc(100vw - 56px));
  }
}

.umroh-article-content { font-size: 1.1rem; line-height: 1.95; }
.umroh-article-content > * { margin-bottom: 1.1rem; }
.umroh-article-content h2,
.umroh-article-content h3,
.umroh-article-content h4 {
  font-family: 'Playfair Display', serif;
  color: #064e3b;
  line-height: 1.25;
  margin-top: 2.25rem;
  margin-bottom: 0.9rem;
  font-weight: 700;
}
.umroh-article-content h2 { font-size: 2rem; }
.umroh-article-content h3 { font-size: 1.6rem; }
.umroh-article-content h4 { font-size: 1.35rem; }
.umroh-article-content p { color: #111827; }
.umroh-article-content a { color: #047857; text-decoration: underline; text-decoration-thickness: 1px; }
.umroh-article-content ul,
.umroh-article-content ol { padding-left: 1.2rem; }
.umroh-article-content li { margin-bottom: 0.35rem; }
.umroh-article-content blockquote {
  border-left: 4px solid #10b981;
  background: #ecfdf5;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  color: #065f46;
}
.umroh-article-content img { border-radius: 1rem; }
.umroh-article-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.umroh-article-content table th,
.umroh-article-content table td { border: 1px solid #e5e7eb; padding: .55rem .65rem; }
.umroh-sharebar { display: inline-flex; gap: .45rem; }
.umroh-sharebtn {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #475569;
  transition: all .2s ease;
}
.umroh-sharebtn:hover { transform: translateY(-1px); }
.umroh-sharebtn--wa:hover { background: #ecfdf5; color: #047857; border-color: #6ee7b7; }
.umroh-sharebtn--tg:hover { background: #eff6ff; color: #0284c7; border-color: #93c5fd; }
.umroh-sharebtn--fb:hover { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }
.umroh-sharebtn--x:hover { background: #111827; color: #fff; border-color: #111827; }

/* Pastikan field Form Pendaftaran / Form Badal tetap terbaca (tidak putih) */
#registration-form #booking-form {
  color-scheme: light;
}

#registration-form #booking-form input[type="text"],
#registration-form #booking-form input[type="tel"],
#registration-form #booking-form input[type="email"],
#registration-form #booking-form textarea,
#registration-form #booking-form select {
  background-color: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-color: #d1d5db !important;
}

#registration-form #booking-form input::placeholder,
#registration-form #booking-form textarea::placeholder {
  color: #6b7280 !important;
  opacity: 1;
}

#registration-form #booking-form input:focus,
#registration-form #booking-form textarea:focus,
#registration-form #booking-form select:focus {
  outline: none;
  border-color: var(--umroh-color-primary, #0f766e) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--umroh-color-primary, #0f766e) 65%, #ffffff 35%);
}

@media (max-width: 767px) {
  .umroh-breadcrumb { display: none !important; }
  .umroh-article-content { font-size: 1rem; line-height: 1.85; }
  .umroh-article-content h2 { font-size: 1.6rem; }
  .umroh-article-content h3 { font-size: 1.35rem; }
  .umroh-article-content h4 { font-size: 1.15rem; }
  .umroh-sharebtn {
    width: 1.65rem;
    height: 1.65rem;
  }
}