/* Premium Enhancement V2 - non-destructive */
:root {
  --color-primary: #1F3A5F;
  --color-accent: #C8A24A;
  --color-bg: #F5F5F5;
  --color-text: #2B2B2B;
  --color-white: #FFFFFF;

  --p-primary: var(--color-primary);
  --p-primary-strong: #162B47;
  --p-accent: var(--color-accent);
  --p-accent-strong: #A68436;
  --p-surface: var(--color-white);
  --p-surface-soft: var(--color-bg);
  --p-text: var(--color-text);
  --p-muted: #6b7280;
  --p-border: #d6d9df;
  --p-shadow-sm: 0 10px 24px -16px rgba(15, 23, 42, 0.18);
  --p-shadow-md: 0 18px 40px -22px rgba(15, 23, 42, 0.24);
  --p-shadow-lg: 0 28px 60px -30px rgba(15, 23, 42, 0.32);

  /* Global color bridge */
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-accent);
  --bs-link-color: var(--p-primary);
  --bs-link-hover-color: var(--p-primary-strong);
  --bs-border-color: var(--p-border);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
}

html.dark {
  --p-surface: #0f172a;
  --p-surface-soft: #131d2d;
  --p-text: #e2e8f0;
  --p-muted: #a3b1c6;
  --p-border: #2d3f5f;
  --p-shadow-sm: 0 12px 28px -16px rgba(2, 8, 23, 0.5);
  --p-shadow-md: 0 20px 44px -20px rgba(2, 8, 23, 0.62);
  --p-shadow-lg: 0 30px 68px -28px rgba(2, 8, 23, 0.72);
}

html.dark .detail-btn-secondary,
html.dark .lang-btn,
html.dark .about-btn {
  color: #c7dcff !important;
  border-color: #4b6a9f !important;
}

html.dark .detail-btn-secondary:hover,
html.dark .lang-btn:hover,
html.dark .about-btn:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}

html.dark .sidebar-toggle-btn,
html.dark .floating-top {
  color: #dbe8ff !important;
  border-color: #3e557d !important;
}

html,
body {
  scroll-behavior: smooth;
}

body {
  color: var(--p-text);
  background-color: var(--p-surface-soft);
  background-image:
    radial-gradient(circle at 12% 2%, rgba(29, 78, 216, 0.07), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(13, 148, 136, 0.06), transparent 24%);
}

/* Unified global surfaces and borders */
.bg-primary { background-color: var(--p-primary) !important; }
.text-primary { color: var(--p-primary) !important; }
.border-primary { border-color: var(--p-primary) !important; }
.bg-light,
.bg-white {
  background-color: var(--p-surface) !important;
}

.dropdown-menu,
.modal-content,
.offcanvas,
.accordion-item,
.list-group-item {
  background-color: var(--p-surface);
  border-color: var(--p-border);
}

a {
  color: var(--p-primary);
  transition: color .22s ease;
}

a:hover {
  color: var(--p-primary-strong);
}

.section-title,
h1, h2, h3, h4, h5, h6 {
  color: var(--p-text);
}

.text-muted,
small,
.muted {
  color: var(--p-muted) !important;
}

body.premium-page-enter {
  animation: premiumPageIntro .7s cubic-bezier(.22, .61, .36, 1) both;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p, li, .accordion-body {
  line-height: 1.85;
}

section {
  position: relative;
  scroll-margin-top: 112px;
}

section::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.42), transparent);
  pointer-events: none;
}

/* Navbar premium polish */
.takaful-navbar {
  backdrop-filter: blur(12px);
  box-shadow: var(--p-shadow-sm) !important;
  background: color-mix(in srgb, var(--p-surface) 92%, transparent) !important;
}

.takaful-navbar .navbar-nav .nav-link {
  position: relative;
}

.takaful-navbar .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--p-primary), var(--p-accent));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

.takaful-navbar .navbar-nav .nav-link:hover::after,
.takaful-navbar .navbar-nav .nav-link.nav-link-active::after,
.takaful-navbar .navbar-nav .nav-link:focus-visible::after {
  transform: scaleX(1);
}


/* Unified Button System */
.btn,
.cta-btn,
.hero-btn,
.detail-btn,
.about-btn,
.info-pro-btn,
.lang-btn,
.sidebar-toggle-btn,
.floating-whatsapp,
.floating-top {
  border-radius: 0.5rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease;
  transform-origin: center;
}

/* Sizes */
.btn,
.cta-btn,
.info-pro-btn,
.detail-btn,
.about-btn {
  padding: 0.625rem 1.25rem !important; /* medium */
  font-size: 1rem !important;
}

.lang-btn,
.sidebar-toggle-btn,
.floating-top {
  padding: 0.375rem 0.75rem !important; /* small */
  font-size: 0.875rem !important;
}

.hero-btn,
.detail-btn-primary,
.floating-whatsapp {
  padding: 0.75rem 1.5rem !important; /* large */
  font-size: 1.125rem !important;
}

/* Variants */
.cta-btn,
.hero-btn,
.info-pro-btn,
.detail-btn-primary {
  background: linear-gradient(135deg, var(--p-primary), var(--p-primary-strong)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--p-shadow-sm);
}

.floating-whatsapp {
  background: linear-gradient(135deg, var(--p-accent), var(--p-accent-strong)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--p-shadow-sm);
}

.detail-btn-secondary,
.lang-btn,
.about-btn {
  background: transparent !important;
  color: var(--p-primary) !important;
  border-color: color-mix(in srgb, var(--p-primary) 40%, var(--p-border)) !important;
}

.sidebar-toggle-btn,
.floating-top {
  color: var(--p-text) !important;
  border-color: var(--p-border) !important;
}

.floating-top {
  background: #111 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Interactions */
.btn:hover,
.cta-btn:hover,
.hero-btn:hover,
.detail-btn:hover,
.about-btn:hover,
.info-pro-btn:hover,
.lang-btn:hover,
.sidebar-toggle-btn:hover,
.floating-whatsapp:hover,
.floating-top:hover {
  transform: scale(1.05);
  box-shadow: var(--p-shadow-md);
  filter: saturate(1.08);
}

.btn:active,
.cta-btn:active,
.hero-btn:active,
.detail-btn:active,
.about-btn:active,
.info-pro-btn:active,
.lang-btn:active,
.sidebar-toggle-btn:active,
.floating-whatsapp:active,
.floating-top:active {
  transform: scale(0.95);
}

.detail-btn-secondary:hover,
.lang-btn:hover,
.about-btn:hover {
  background: var(--p-primary) !important;
  color: #fff !important;
  border-color: var(--p-primary) !important;
}

.sidebar-toggle-btn:hover,
.floating-top:hover {
  background: #1f1f1f !important;
  border-color: color-mix(in srgb, var(--p-primary) 40%, var(--p-border)) !important;
}

.cta-btn:hover,
.hero-btn:hover,
.info-pro-btn:hover,
.detail-btn-primary:hover {
  background: linear-gradient(135deg, var(--p-primary-strong), #1e3a8a) !important;
}

.floating-whatsapp:hover {
  background: linear-gradient(135deg, var(--p-accent-strong), #075e56) !important;
}

/* Beauty pass - May 2026 */
:root {
  --beauty-radius: 18px;
  --beauty-radius-lg: 26px;
  --beauty-border: rgba(31, 58, 95, 0.12);
  --beauty-soft-glow: 0 26px 46px -30px rgba(15, 23, 42, 0.38);
  --beauty-hover-glow: 0 30px 54px -28px rgba(15, 23, 42, 0.5);
}

body {
  background-image:
    radial-gradient(circle at 8% 0%, rgba(200, 162, 74, 0.13), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(31, 58, 95, 0.12), transparent 28%),
    linear-gradient(180deg, #f7f8fa 0%, #f3f5f8 48%, #f6f8fb 100%);
}

main > section:not(.hero-section),
.insurance-section,
.insurance-fluid,
.content-box,
.form-box {
  border-radius: var(--beauty-radius-lg);
}

.hero-content h1,
.section-title,
.detail-title {
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.section-subtitle,
.hero-content p,
.detail-description {
  color: color-mix(in srgb, var(--p-text) 72%, #5f6b7a);
}

.card,
.info-card,
.mission-card,
.news-card,
.insurance-type-card,
.detail-card,
.content-box,
.form-box,
.quote-form {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.9));
  border: 1px solid var(--beauty-border);
  box-shadow: var(--beauty-soft-glow);
  border-radius: var(--beauty-radius);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.card:hover,
.info-card:hover,
.mission-card:hover,
.news-card:hover,
.insurance-type-card:hover,
.detail-card:hover,
.content-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--beauty-hover-glow);
  border-color: rgba(31, 58, 95, 0.2);
}

.cta-btn,
.hero-btn,
.detail-btn-primary {
  border-radius: 999px !important;
  padding-inline: 1.4rem !important;
  box-shadow: 0 14px 28px -18px rgba(22, 43, 71, 0.65);
}

.cta-btn:hover,
.hero-btn:hover,
.detail-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
}

.detail-btn-secondary,
.lang-btn,
.about-btn {
  border-radius: 999px !important;
}

.form-control,
.form-select,
textarea.form-control {
  border-radius: 12px !important;
  border: 1px solid rgba(31, 58, 95, 0.18);
  background-color: rgba(255, 255, 255, 0.94);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(200, 162, 74, 0.72);
  box-shadow: 0 0 0 0.22rem rgba(200, 162, 74, 0.2);
}

.navbar-brand {
  border-radius: 16px;
}

.takaful-navbar {
  border-bottom: 1px solid rgba(31, 58, 95, 0.08) !important;
}

.insurance-type-thumb img,
.detail-image-side img,
.types-hero-media img {
  border-radius: 14px;
  border: 1px solid rgba(31, 58, 95, 0.12);
}

.detail-trust-strip article {
  border-radius: 16px;
  border: 1px solid rgba(31, 58, 95, 0.12);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.88));
  box-shadow: 0 16px 30px -24px rgba(15, 23, 42, 0.45);
}

@media (max-width: 991.98px) {
  main > section:not(.hero-section),
  .insurance-section,
  .insurance-fluid {
    border-radius: 18px;
    margin-inline: 0.45rem !important;
  }

  .hero-content h1,
  .section-title,
  .detail-title {
    line-height: 1.28;
  }

  .cta-btn,
  .hero-btn,
  .detail-btn,
  .about-btn {
    min-height: 44px;
  }
}
.feature-card,
.service-card,
.offer-card,
.info-card,
.stat-card,
.plan-card,
.mission-card,
.claim-step,
.news-card,
.service-media-card,
.strategy-card,
.pillar-card,
.detail-card,
.insurance-image-card,
.form-box {
  background: var(--p-surface);
  border: 1px solid color-mix(in srgb, var(--p-primary) 10%, var(--p-border));
  border-radius: 1rem;
  overflow: hidden;
  transition:
    transform .3s cubic-bezier(.2, .7, .2, 1),
    box-shadow .3s cubic-bezier(.2, .7, .2, 1),
    border-color .28s ease,
    background-color .28s ease;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}

.card:hover,
.card-item:hover,
.feature-card:hover,
.service-card:hover,
.offer-card:hover,
.info-card:hover,
.stat-card:hover,
.plan-card:hover,
.mission-card:hover,
.claim-step:hover,
.news-card:hover,
.service-media-card:hover,
.strategy-card:hover,
.pillar-card:hover,
.detail-card:hover,
.insurance-image-card:hover,
.form-box:hover {
  transform: translateY(-10px);
  box-shadow: var(--p-shadow-lg);
  border-color: color-mix(in srgb, var(--p-primary) 26%, var(--p-border));
}

/* Forms */
input,
textarea,
select {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--p-primary) !important;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.14) !important;
}

/* Tables */
table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

table th,
table td {
  border-color: var(--p-border) !important;
}

table tbody tr {
  transition: background-color .16s ease;
}

table tbody tr:hover {
  background: color-mix(in srgb, var(--p-primary) 7%, transparent);
}

/* Floating UX controls */
.premium-fab {
  position: fixed;
  inset-inline-start: 12px;
  bottom: 12px;
  z-index: 1200;
  display: flex;
  gap: 8px;
}

.premium-fab button {
  border: 1px solid var(--p-border);
  background: color-mix(in srgb, var(--p-surface) 88%, transparent);
  color: var(--p-text);
  border-radius: 999px;
  min-width: 38px;
  height: 38px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  box-shadow: var(--p-shadow-sm);
}

.premium-fab button:hover {
  transform: translateY(-1px);
  box-shadow: var(--p-shadow-md);
}

/* Page transition loader with company logo */
.premium-page-loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 8%, rgba(29, 78, 216, 0.28), transparent 34%),
    radial-gradient(circle at 86% 14%, rgba(13, 148, 136, 0.24), transparent 30%),
    rgba(8, 15, 32, 0.74);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.premium-page-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.premium-page-loader-card {
  min-width: 220px;
  max-width: min(92vw, 340px);
  border: 1px solid color-mix(in srgb, var(--p-primary) 16%, var(--p-border));
  border-radius: 18px;
  padding: 20px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: var(--p-shadow-lg);
}

html.dark .premium-page-loader-card {
  background: rgba(15, 23, 42, 0.96);
}

.premium-page-loader-logo {
  width: clamp(130px, 30vw, 190px);
  height: auto;
  display: block;
  margin: 0 auto 10px;
  animation: premiumLogoPulse .85s ease-in-out infinite;
}

.premium-page-loader-line {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--p-primary) 20%, transparent);
}

.premium-page-loader-line::before {
  content: "";
  display: block;
  width: 48%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--p-primary), var(--p-accent));
  animation: premiumLoaderLine .72s cubic-bezier(.22, .61, .36, 1) infinite;
}

/* Reveal animation utility */
.premium-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(3px);
  transition:
    opacity .78s cubic-bezier(.2, .7, .2, 1),
    transform .78s cubic-bezier(.2, .7, .2, 1),
    filter .78s cubic-bezier(.2, .7, .2, 1);
}

.premium-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Skeleton shimmer utility (for future dynamic areas) */
.premium-shimmer {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
  background-size: 400% 100%;
  animation: premiumShimmer 1.25s infinite;
}

@keyframes premiumShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@keyframes premiumPageIntro {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes premiumLogoPulse {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 2px 8px rgba(29, 78, 216, 0.18)); }
  50% { transform: translateY(-3px); filter: drop-shadow(0 8px 14px rgba(13, 148, 136, 0.22)); }
}

@keyframes premiumLoaderLine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(240%); }
}

/* Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(29, 78, 216, .45);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 2026 layout polish */
:root {
  --layout-max: 1320px;
  --section-gap-y: clamp(2.4rem, 4vw, 4rem);
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: var(--layout-max);
}

main {
  display: block;
}

main > section {
  margin-top: 0.85rem;
  margin-bottom: 0.85rem;
}

.section-padding,
.insurance-section,
.news-grid-section,
.news-featured,
.news-subscribe {
  padding-top: var(--section-gap-y) !important;
  padding-bottom: var(--section-gap-y) !important;
}

.section-head h2,
.section-title,
.detail-title,
.hero-title {
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.section-head p,
.section-subtitle,
.hero-subtitle,
.detail-description {
  max-width: 64ch;
}

.takaful-navbar {
  min-height: 80px;
}

.takaful-navbar .container-xxl {
  min-height: 80px;
}

.dropdown-menu {
  border-radius: 14px;
}

.news-card,
.detail-plus-card,
.detail-pricing-box,
.detail-final-cta {
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--p-primary) 14%, var(--p-border));
}

@media (max-width: 991.98px) {
  :root {
    --section-gap-y: clamp(1.8rem, 6vw, 2.6rem);
  }

  .takaful-navbar,
  .takaful-navbar .container-xxl {
    min-height: 72px;
  }
}

/* Global inner-pages polish pack */
body:not(.home-page) .section-title,
body:not(.home-page) h1,
body:not(.home-page) h2 {
  letter-spacing: -0.012em;
  line-height: 1.24;
}

body:not(.home-page) p,
body:not(.home-page) li {
  line-height: 1.82;
}

body:not(.home-page) .content-box,
body:not(.home-page) .form-box,
body:not(.home-page) .news-card,
body:not(.home-page) .insurance-type-card,
body:not(.home-page) .detail-plus-card {
  border-radius: 16px;
}

.global-quote-fab {
  position: fixed;
  right: 14px;
  bottom: 72px;
  z-index: 1150;
  min-height: 46px;
  padding: 0.58rem 0.98rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 164, 90, 0.5);
  background: linear-gradient(135deg, #1F2F3F, #C8A45A);
  color: #fff;
  font-weight: 800;
  font-size: 0.84rem;
  text-decoration: none;
  box-shadow: 0 16px 28px -18px rgba(12, 20, 38, 0.72);
}

.global-quote-fab:hover,
.global-quote-fab:focus {
  color: #fff;
  transform: translateY(-2px);
}