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

/* ==========================================================================
   DESIGN (4).MD OVERRIDE STYLE SYSTEM FOR ZONAUANG.ONLINE (CALENDLY LIGHT STYLE)
   REFINED FOR READABILITY, CONTRAST, NAVBAR LINK SYNC, AND LOGO ANIMATION
   ========================================================================== */

:root {
  /* Calendly Design Tokens */
  --color-ink-navy: #0b3558;
  --color-signal-blue: #006bff;
  --color-slate-gray: #476788;
  --color-mist-gray: #a6bbd1;
  --color-cloud: #f8f9fb;
  --color-paper: #ffffff;
  --color-pebble: #f0f3f8;
  --color-hairline: #d4e0ed;
  --color-carbon: #0a0a0a;
  --color-coral-magenta: #e55cff;
  --color-sky-cyan: #0099ff;
  --color-deep-cobalt: #004eba;

  /* Override Existing Framework Custom Properties for Light Theme */
  --color-dark-primary: #f8f9fb !important;
  --color-dark-surface: #ffffff !important;
  --color-dark-border: #d4e0ed !important;
  --color-purple-accent: rgba(0, 107, 255, 0.08) !important;
  --color-pink-accent: rgba(229, 92, 255, 0.08) !important;
  
  --tw-body-bg: #f8f9fb !important;
  --tw-body-color: #476788 !important;
  
  --tw-menu-bg: #ffffff !important;
  --tw-menu-item-color: #476788 !important;
  --tw-menu-item-active-color: #006bff !important;
  --tw-menu-item-hover-color: #0b3558 !important;
  
  --tw-ring-color: rgba(0, 107, 255, 0.5) !important;
  --tw-ring-offset-color: transparent !important;
}

/* --- Global Typography & Font Setup (Targeted to avoid breaking font-icons) --- */
body, html, p, span, a, li, input, select, textarea, button, label, td, th {
  font-family: "Inter", sans-serif !important;
  letter-spacing: normal;
  text-shadow: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Base Body Styles */
body, html {
  background-color: #f8f9fb !important;
  background-image: none !important;
  color: #476788 !important;
}

/* High-emphasis Display Headings */
h1, .text-4xl, .text-5xl, .text-6xl {
  font-size: 3rem !important;
  line-height: 1.2 !important;
  color: #0b3558 !important;
}

/* --- Base Layout Backgrounds (Light/Cool Marble Canvas) --- */
main, 
section, 
.bg-gray-950, 
.bg-slate-950, 
.bg-neutral-950,
.bg-black,
[class*="bg-opacity-"],
[class*="backdrop-blur-"] {
  background-color: #f8f9fb !important; /* Cloud background */
  background-image: none !important;
}

header, 
footer,
nav,
.navbar,
.bg-gray-900,
.bg-slate-900,
.bg-neutral-900 {
  background-color: #ffffff !important;
  border-bottom: 1px solid #d4e0ed !important;
}

/* Cards & Elevated Panels (Paper Level 1) */
.card, 
.bg-gray-800, 
.bg-slate-800, 
.bg-neutral-800,
.bg-gray-900\/50, 
.bg-slate-900\/50, 
.bg-neutral-900\/50,
[class*="sidebar"],
[class*="navigation"] {
  background-color: #ffffff !important; /* Paper surface */
  border: 1px solid #d4e0ed !important; /* Hairline border */
  box-shadow: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, 
              rgba(71, 103, 136, 0.03) 0px 8px 15px 0px, 
              rgba(71, 103, 136, 0.08) 0px 30px 50px 0px !important; /* Blue-tinted shadow */
  border-radius: 24px !important;
}

/* Product Cards */
[class*="product-card"], 
.bg-primary\/10 {
  background-color: #ffffff !important;
  border: 1px solid #d4e0ed !important;
  border-radius: 16px !important;
}

/* --- Borders --- */
hr,
border,
[class*="border-"] {
  border-color: #d4e0ed !important;
}

/* --- Navigation Links Sync & Readability (Beranda, Harga, Layanan, etc.) --- */
header a, nav a,
[class*="nav-link"],
.menu-item {
  color: #476788 !important; /* Default: Slate Gray */
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

header a:hover, nav a:hover,
[class*="nav-link"]:hover,
.menu-item:hover {
  color: #006bff !important; /* Hover: Signal Blue */
}

/* Active links */
header a[class*="active"], nav a[class*="active"],
header a.active, nav a.active,
[class*="nav-link"].active,
.menu-item.active {
  color: #006bff !important; /* Active: Signal Blue */
  font-weight: 600 !important;
}

/* Dropdown menus & lists */
[class*="dropdown-menu"] a,
[class*="select-options"] div,
[class*="dropdown-item"] {
  color: #0b3558 !important; /* Ink Navy */
  background-color: #ffffff !important;
}

[class*="dropdown-menu"] a:hover,
[class*="dropdown-item"]:hover {
  color: #006bff !important;
  background-color: #f0f3f8 !important; /* Pebble hover wash */
}

/* --- Typography Contrast Adjustments --- */

/* Primary Headings and High-Emphasis labels */
h1, h2, h3, h4, h5, h6,
.text-slate-900, .text-slate-800, .text-slate-700,
.text-gray-900, .text-gray-800, .text-gray-700,
.text-zinc-900, .text-zinc-800, .text-zinc-700,
.text-neutral-900, .text-neutral-800, .text-neutral-700 {
  color: #0b3558 !important; /* Ink Navy */
}

/* Muted / Inactive Text */
.text-slate-300, .text-gray-300, .text-zinc-300, .text-neutral-300,
.text-slate-400, .text-gray-400, .text-zinc-400, .text-neutral-400 {
  color: #a6bbd1 !important; /* Mist Gray */
}

/* Base Body and secondary labels */
p,
span,
.text-slate-500, .text-slate-600,
.text-gray-500, .text-gray-600,
.text-zinc-500, .text-zinc-600,
.text-neutral-500, .text-neutral-600 {
  color: #476788 !important; /* Slate Gray */
}

/* OVERRIDE LIGHT TEXT UTILITIES TO BE DARK ON THE LIGHT CANVAS */
.text-white,
.text-slate-50, .text-slate-100, .text-slate-200,
.text-gray-50, .text-gray-100, .text-gray-200,
.text-zinc-50, .text-zinc-100, .text-zinc-200,
.text-neutral-50, .text-neutral-100, .text-neutral-200 {
  color: #0b3558 !important; /* Force high contrast dark color */
}

/* HOVER STATE OVERRIDES GLOBALLY TO PREVENT LIGHT TEXT IN HOVERS ON CANVAS */
[class*="hover:text-white"]:hover,
[class*="hover:text-slate-100"]:hover,
[class*="hover:text-slate-200"]:hover,
[class*="hover:text-gray-100"]:hover,
[class*="hover:text-gray-200"]:hover,
[class*="hover:text-zinc-100"]:hover,
[class*="hover:text-zinc-200"]:hover,
[class*="hover:text-neutral-100"]:hover,
[class*="hover:text-neutral-200"]:hover,
[class*="hover:text-purple-"]:hover,
[class*="hover:text-indigo-"]:hover,
[class*="hover:text-violet-"]:hover {
  color: #006bff !important; /* Switch hover to signal blue */
}

/* RESTORE WHITE TEXT FOR BUTTONS, BADGES, AND COLORED CONTAINERS */
.btn .text-white, .btn.text-white,
.btn-primary .text-white, .btn-primary.text-white,
.btn-secondary .text-white, .btn-secondary.text-white,
button .text-white, button.text-white,
[type="submit"] .text-white, [type="submit"].text-white,
.badge .text-white, .badge.text-white,
.bg-primary .text-white, .bg-primary.text-white,
.bg-purple-600 .text-white, .bg-purple-600.text-white,
.bg-purple-700 .text-white, .bg-purple-700.text-white,
.bg-indigo-600 .text-white, .bg-indigo-600.text-white,
.bg-indigo-700 .text-white, .bg-indigo-700.text-white,
.bg-violet-600 .text-white, .bg-violet-600.text-white,
.bg-violet-700 .text-white, .bg-violet-700.text-white,
.bg-brand .text-white, .bg-brand.text-white,
.bg-blue-600 .text-white, .bg-blue-600.text-white,
.bg-green-600 .text-white, .bg-green-600.text-white,
.bg-red-600 .text-white, .bg-red-600.text-white {
  color: #ffffff !important;
}

.btn:hover .text-white, .btn:hover.text-white,
button:hover .text-white, button:hover.text-white,
[type="submit"]:hover .text-white, [type="submit"]:hover.text-white,
.bg-primary:hover .text-white, .bg-primary:hover.text-white,
.bg-purple-600:hover .text-white, .bg-purple-600:hover.text-white {
  color: #ffffff !important;
}

.btn .text-slate-100, button .text-slate-100, [type="submit"] .text-slate-100,
.btn .text-gray-100, button .text-gray-100, [type="submit"] .text-gray-100 {
  color: #ffffff !important;
}

/* --- Buttons (Calendly Premium Style) --- */

/* 1. Primary CTA Button (Signal Blue, 8px Radius) */
.bg-purple-600, 
.bg-purple-700, 
.bg-indigo-600, 
.bg-indigo-700, 
.bg-violet-600, 
.bg-violet-700,
.bg-primary, 
.btn-primary, 
button[type="submit"],
.bg-gradient-to-r {
  background: #006bff !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px, 
              rgba(71, 103, 136, 0.03) 0px 8px 15px 0px, 
              rgba(71, 103, 136, 0.06) 0px 15px 30px 0px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
}

.bg-purple-600:hover, 
.bg-purple-700:hover, 
.bg-indigo-600:hover, 
.bg-indigo-700:hover, 
.bg-violet-600:hover, 
.bg-violet-700:hover,
.bg-primary:hover, 
.btn-primary:hover, 
button[type="submit"]:hover {
  background: #0056cc !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* 2. Secondary/Dark Button (Ink Navy, 8px Radius) */
.border-purple-600,
.border-indigo-600,
.border-violet-600,
.btn-secondary {
  border: none !important;
  background-color: #0b3558 !important;
  color: #ffffff !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  box-shadow: rgba(71, 103, 136, 0.04) 0px 4px 5px 0px !important;
  transition: all 0.2s ease !important;
}

.border-purple-600:hover,
.border-indigo-600:hover,
.border-violet-600:hover,
.btn-secondary:hover {
  background-color: #006bff !important;
  color: #ffffff !important;
}

/* 3. Outlined Buttons */
.btn-outline,
.border-slate-700,
.border-gray-700 {
  background-color: transparent !important;
  color: #0b3558 !important;
  border: 1px solid #d4e0ed !important;
  border-radius: 8px !important;
}

.btn-outline:hover,
.border-slate-700:hover,
.border-gray-700:hover {
  background-color: #f0f3f8 !important;
  color: #006bff !important;
}

/* --- Form Elements --- */
input, 
select, 
textarea {
  background-color: #f0f3f8 !important; /* Pebble */
  border: 1px solid #d4e0ed !important; /* Hairline */
  color: #0b3558 !important; /* Ink Navy */
  border-radius: 8px !important;
  padding: 10px 16px !important;
}

input::placeholder,
textarea::placeholder {
  color: #a6bbd1 !important; /* Mist Gray placeholder */
}

input:focus, 
select:focus, 
textarea:focus {
  outline: none !important;
  background-color: #ffffff !important;
  border-color: #006bff !important;
  box-shadow: 0 0 0 2px rgba(0, 107, 255, 0.15) !important;
}

/* --- Badges & Tags --- */
.badge,
[class*="badge-"] {
  background-color: #e6f0ff !important;
  border: 1px solid #d4e0ed !important;
  color: #004eba !important;
  border-radius: 9999px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
}

/* --- Toggle Buttons / Tabs (Monthly/Yearly Selector) --- */
[role="tablist"],
.tab-list,
.pricing-toggle {
  background-color: #f0f3f8 !important; /* Pebble */
  border-radius: 9999px !important;
  padding: 4px !important;
  border: 1px solid #d4e0ed !important;
}

[role="tab"],
.tab-button,
.pricing-toggle button {
  border-radius: 9999px !important;
  color: #476788 !important;
  font-weight: 500 !important;
  background-color: transparent !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

[role="tab"][aria-selected="true"],
.tab-button.active,
.pricing-toggle button.active,
[class*="active-tab"] {
  background-color: #ffffff !important;
  color: #0b3558 !important;
  box-shadow: rgba(71, 103, 136, 0.08) 0px 4px 10px 0px !important;
  font-weight: 600 !important;
}

/* --- Client Logos & Partnership Strip --- */
.logos-row img,
.partner-logos img {
  filter: grayscale(100%) brightness(1.1) contrast(0.8) !important;
  opacity: 0.7 !important;
}

/* --- Main Site Logo Visibility & Animations --- */
@keyframes logoEntrance {
  0% {
    opacity: 0;
    transform: translateX(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.logo img[src*="logo"],
img[class*="logo"],
header img[src*="logo"],
nav img[src*="logo"] {
  /* Dynamic Color Shift Logo to match Ink Navy #0b3558 */
  filter: brightness(0) saturate(100%) invert(15%) sepia(48%) saturate(1874%) hue-rotate(185deg) brightness(92%) contrast(98%) !important;
  
  /* Entrance animation on load */
  animation: logoEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.logo img[src*="logo"]:hover,
img[class*="logo"]:hover,
header img[src*="logo"]:hover,
nav img[src*="logo"]:hover {
  /* Premium micro-interaction on hover: zoom, slight tilt, shift color to signal blue */
  transform: scale(1.08) rotate(-2.5deg) !important;
  filter: brightness(0) saturate(100%) invert(29%) sepia(98%) saturate(2258%) hue-rotate(210deg) brightness(102%) contrast(105%) !important;
}

/* --- Generic Tables --- */
table {
  border-collapse: collapse !important;
  border: 1px solid #d4e0ed !important;
  background-color: #ffffff !important;
}

th {
  background-color: #f0f3f8 !important;
  color: #0b3558 !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #d4e0ed !important;
}

td {
  color: #476788 !important;
  border-bottom: 1px solid #d4e0ed !important;
}

/* --- SVGs and Icons Stability (Do not modify RemixIcon font family) --- */
i, [class^="ri-"], [class*=" ri-"] {
  font-family: 'remixicon' !important; /* Protect RemixIcon font */
  font-style: normal;
}

svg {
  color: inherit !important;
}