/* =========================================================
   PLASTINDIA 2028 — Design System Bridge
   Maps PI28 reference theme onto the existing app
========================================================= */

:root {
  --pi-green: #119d60;
  --pi-green-soft: #18a66d;
  --pi-orange: #f89939;
  --pi-orange-deep: #ff7417;
  --pi-orange-mid: #ff861b;
  --pi-magenta: #ca346b;
  --pi-yellow: #eaa82b;
  --pi-sky: #1bc4c3;
  --pi-navy: #25235c;
  --pi-navy-deep: #11143b;
  --pi-navy-alt: #13154e;
  --pi-ink: #141418;
  --pi-muted: #6b7280;
  --pi-cream: #f3ebe6;
  --pi-mint: #f8faf8;
  --pi-gradient: linear-gradient(135deg, #7bbc54, #1f9a91);
  --pi-radius: 8px;
  --pi-radius-lg: 16px;
  --pi-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  --pi-font: "Manrope", "Plus Jakarta Sans", system-ui, sans-serif;
  --pi-font-display: "Manrope", sans-serif;
}

/* ---------- Global base ---------- */
html {
  scroll-behavior: smooth;
}

body.body,
body {
  font-family: var(--pi-font) !important;
  color: var(--pi-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.hs-line-1, .hs-line-2, .hs-line-3,
.section-title, .pi-section-title {
  font-family: var(--pi-font-display) !important;
  letter-spacing: -0.02em;
}

p, li, span, a, button, input, textarea, label {
  font-family: var(--pi-font) !important;
}

/* Preserve icon webfonts (footer/header icons) */
i.bi,
i[class^="bi-"],
i[class*=" bi-"],
.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  font-family: "bootstrap-icons" !important;
}

.fa-solid,
.fa-regular,
.fas,
.far,
i[class*="fa-solid"],
i[class*="fa-regular"] {
  font-family: "Font Awesome 6 Free" !important;
}

.fa-brands,
.fab,
i[class*="fa-brands"] {
  font-family: "Font Awesome 6 Brands" !important;
}

a {
  transition: color 0.25s ease;
}

a:hover {
  color: var(--pi-green);
}

/* Accent helpers */
.text-primary,
.link-hover,
.underline a:hover {
  color: var(--pi-green) !important;
}

.green { color: var(--pi-green) !important; }
.orange { color: var(--pi-orange) !important; }

/* ---------- Buttons (map Resonance + Bootstrap) ---------- */
.btn,
.btn-mod,
button.btn {
  border-radius: var(--pi-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

.btn-mod.btn-small,
.btn-mod.btn-medium,
.btn-mod.btn-large {
  padding: 14px 24px !important;
}

.btn-mod.btn-color,
.btn-mod.btn-w,
.btn.btn-primary,
.bg-primary {
  background: var(--pi-green) !important;
  border-color: var(--pi-green) !important;
  color: #fff !important;
}

.btn-mod.btn-color:hover,
.btn-mod.btn-w:hover,
.btn.btn-primary:hover {
  background: #0e8652 !important;
  border-color: #0e8652 !important;
  transform: translateY(-1px);
}

.btn-mod.btn-border,
.btn-outline-primary {
  border: 1px solid var(--pi-green) !important;
  color: var(--pi-green) !important;
  background: transparent !important;
}

.btn-mod.btn-border:hover {
  background: var(--pi-green) !important;
  color: #fff !important;
}

/* PI28 button aliases available app-wide */
.pi-btn {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: var(--pi-green);
  line-height: 1;
  display: inline-block;
  border-radius: var(--pi-radius);
  padding: 18px 28px;
  text-decoration: none;
}

.pi-btn:hover {
  color: #fff;
  filter: brightness(0.95);
}

.orange-btn { background: var(--pi-orange) !important; }
.magenta-btn { background: var(--pi-magenta) !important; }
.yellow-btn { background: var(--pi-yellow) !important; }
.sky-blue-btn { background: var(--pi-sky) !important; }

/* ---------- Header / main-nav (Resonance → PI28) ---------- */
.main-nav,
.main-nav.sticky,
.main-nav.transparent,
.main-nav.js-transparent,
.main-nav.dark {
  background: #fff !important;
  box-shadow: var(--pi-shadow) !important;
  border-bottom: 1px solid rgba(19, 21, 78, 0.06);
  color: #000 !important;
}

.main-nav .inner-nav ul > li > a,
.main-nav .desktop-nav a,
.main-nav .mn-has-sub {
  color: #000 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.main-nav .inner-nav ul > li > a:hover,
.main-nav .inner-nav ul > li > a.active,
.main-nav .mn-has-sub:hover {
  color: var(--pi-green) !important;
}

.main-nav .mobile-nav,
.main-nav .mobile-nav-icon {
  color: #111827 !important;
}

.main-nav .mn-sub,
.main-nav .mn-sub li a {
  background: #fff !important;
  color: #000 !important;
  border-radius: 0 !important;
  box-shadow: var(--pi-shadow);
  font-weight: 600 !important;
}

.main-nav .mn-sub li a:hover {
  color: var(--pi-green) !important;
  background: transparent !important;
}

/* Register CTA in header */
.main-nav .btn,
.header-register-btn,
.nibtn {
  background: var(--pi-magenta) !important;
  color: #fff !important;
  border-radius: var(--pi-radius) !important;
  border: 0 !important;
  font-weight: 700 !important;
}

.main-nav .btn:hover,
.header-register-btn:hover {
  background: #d92d90 !important;
  color: #fff !important;
}

/* ---------- Sections / spacing ---------- */
.page-section,
.small-section,
.home-section {
  font-family: var(--pi-font);
}

.page-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.section-title,
.hs-title-1,
.hs-line-1 {
  font-weight: 800 !important;
  color: var(--pi-ink) !important;
}

.section-heading,
.section-text {
  color: var(--pi-ink);
}

/* ---------- Cards ---------- */
.card,
.blog-item,
.news-item,
.post-prev-img,
.work-item,
.alt-features-item {
  border-radius: 12px !important;
  overflow: hidden;
}

.work-item,
.blog-item,
.alt-services-item {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.work-item:hover,
.blog-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select,
.form-control {
  border-radius: var(--pi-radius) !important;
  border: 1px solid #e3e5e8 !important;
  font-family: var(--pi-font) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--pi-green) !important;
  box-shadow: 0 0 0 3px rgba(17, 157, 96, 0.15) !important;
  outline: none !important;
}

/* ---------- Footer bridge (existing footers → PI28 palette) ---------- */
.footer,
.page-section.bg-dark-lighter,
.page-section.bg-dark,
footer,
.footer-4,
.pi-app-footer {
  background: var(--pi-navy-deep) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.footer a,
footer a,
.footer-4 a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.footer a:hover,
footer a:hover,
.footer-4 a:hover {
  color: #fff !important;
}

.footer h3,
.footer h4,
.footer h5,
footer h3,
footer h4,
footer h5 {
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 14px !important;
}

/* ---------- Accent backgrounds ---------- */
.bg-gray-lighter,
.bg-light {
  background: var(--pi-mint) !important;
}

.bg-dark,
.bg-dark-lighter {
  background: var(--pi-navy) !important;
}

/* ---------- Links / markers ---------- */
.mark,
.highlight,
.text-accent {
  color: var(--pi-orange) !important;
}

/* ---------- Toast / misc ---------- */
.Toastify__progress-bar--success {
  background: var(--pi-green) !important;
}

/* ---------- Desktop width container feel ---------- */
.desktop-width {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---------- Page top offset under fixed header ---------- */
.page#top > main,
#main {
  position: relative;
}

/* Soften Resonance dark sticky header flash */
.main-nav.small-height,
.main-nav.transparent.small-height {
  background: #fff !important;
}

/* ---------- Tables / data ---------- */
table th {
  background: var(--pi-navy) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

table td {
  font-family: var(--pi-font) !important;
}

/* ---------- Skeleton / loading ---------- */
.react-loading-skeleton {
  --base-color: #eef2f0;
  --highlight-color: #f8faf8;
}

/**/

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .page-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .pi-btn {
    font-size: 14px;
    padding: 16px 25px;
  }
}