/*
Theme Name: Hello Elementor Child - ToolsInstant
Template: hello-elementor
Version: 1.0.0
*/

/* =====================================================
   1) CSS Variables (Design Tokens)
   ===================================================== */

:root {
  /* Typography */
  --ti-font: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid type scale */
  --ti-text: clamp(15px, 0.45vw + 14px, 17px);
  --ti-small: clamp(13px, 0.35vw + 12px, 14px);
  --ti-h1: clamp(34px, 2.2vw + 18px, 46px);
  --ti-h2: clamp(26px, 1.5vw + 16px, 34px);
  --ti-h3: clamp(20px, 1.0vw + 14px, 26px);
  --ti-h4: clamp(18px, 0.6vw + 14px, 20px);

  /* Line heights */
  --ti-lh-body: 1.6;
  --ti-lh-heading: 1.25;

  /* Font weights - reduced heaviness */
  --ti-fw-regular: 400;
  --ti-fw-medium: 500;
  --ti-fw-semi: 600;
  --ti-fw-bold: 700;

  /* Brand colors */
  --ti-primary: #4F46E5;
  --ti-secondary: #2DD4BF;
  --ti-accent: #1AFFD1;
  --ti-yellow: #FBBF24;

  /* Neutral palette */
  --ti-text-color: #0F172A;
  --ti-muted-color: #475569;
  --ti-bg: #F8FAFC;
  --ti-card: #FFFFFF;
  --ti-border: #E5E7EB;

  /* Border radius */
  --ti-radius-sm: 10px;
  --ti-radius-md: 14px;
  --ti-radius-lg: 16px;
  --ti-radius-xl: 18px;

  /* Shadows */
  --ti-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.04);
  --ti-shadow-md: 0 10px 25px rgba(15, 23, 42, 0.08);
  --ti-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12);
  --ti-shadow-btn: 0 10px 25px rgba(15, 23, 42, 0.08);
  --ti-shadow-btn-hover: 0 18px 40px rgba(15, 23, 42, 0.12);

  /* Focus ring */
  --ti-focus: 0 0 0 3px rgba(79, 70, 229, 0.15);

  /* Header dimensions */
  --ti-header-h: 74px;
  --ti-search-row-h: 58px;
  --ti-mega-w: min(1280px, calc(100vw - 32px));
}

/* =====================================================
   2) Base Typography
   ===================================================== */

html,
body {
  font-family: var(--ti-font);
  font-size: var(--ti-text);
  line-height: var(--ti-lh-body);
  color: var(--ti-text-color);
  font-weight: var(--ti-fw-regular);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
li,
dd,
dt,
blockquote,
.elementor-widget-text-editor,
.elementor-text-editor {
  font-size: var(--ti-text);
  line-height: var(--ti-lh-body);
  font-weight: var(--ti-fw-regular);
}

.ti-muted,
small {
  color: var(--ti-muted-color);
}

small {
  font-size: var(--ti-small);
  line-height: 1.45;
}

/* Links */
a {
  color: var(--ti-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: all 0.2s ease;
}

a:hover {
  text-decoration-thickness: 0.12em;
}

/* Headings - clean and balanced */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ti-font);
  color: var(--ti-text-color);
  line-height: var(--ti-lh-heading);
  margin: 0 0 0.55em;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--ti-h1);
  font-weight: var(--ti-fw-bold);
}

h2 {
  font-size: var(--ti-h2);
  font-weight: var(--ti-fw-bold);
}

h3 {
  font-size: var(--ti-h3);
  font-weight: var(--ti-fw-semi);
}

h4 {
  font-size: var(--ti-h4);
  font-weight: var(--ti-fw-semi);
}

strong,
b {
  font-weight: var(--ti-fw-semi);
}

.elementor-heading-title {
  margin: 0;
  letter-spacing: -0.02em;
}

/* Result helper classes */
.ti-result {
  font-weight: var(--ti-fw-bold);
  letter-spacing: -0.02em;
}

.ti-result--accent {
  color: var(--ti-accent);
}

.ti-result--yellow {
  color: var(--ti-yellow);
}

/* =====================================================
   3) Container & Layout
   ===================================================== */

.ti-container {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
}

@media (max-width: 767px) {
  .ti-container {
    width: min(1280px, calc(100% - 32px));
  }
}

/* Skip link accessibility */
.ti-skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  background: #fff;
  padding: 10px 14px;
  border-radius: var(--ti-radius-sm);
  z-index: 999999;
  box-shadow: var(--ti-shadow-md);
}

.ti-skip-link:focus {
  left: 12px;
}

/* =====================================================
   4) Button System
   ===================================================== */

button,
input[type="button"],
input[type="submit"],
.wp-element-button,
.wp-block-button__link,
.elementor-button,
.ti-btn {
  font-family: var(--ti-font);
  font-weight: var(--ti-fw-semi);
  font-size: var(--ti-text);
  letter-spacing: 0;
  line-height: 1.2;
  border-radius: var(--ti-radius-md);
  padding: 12px 18px;
  box-shadow: var(--ti-shadow-btn);
  transition: transform 0.14s ease, box-shadow 0.16s ease, filter 0.16s ease, background-color 0.16s ease;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Remove underline on button links */
.elementor-button,
.wp-block-button__link,
.ti-btn {
  text-decoration: none !important;
}

/* Primary button */
.ti-btn--primary,
.elementor-button,
.wp-element-button,
.wp-block-button__link {
  background: var(--ti-primary);
  color: #fff;
}

.ti-btn--primary:hover,
.elementor-button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
  box-shadow: var(--ti-shadow-btn-hover);
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.ti-btn--primary:active,
.elementor-button:active,
.wp-element-button:active,
.wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: var(--ti-shadow-btn);
  filter: brightness(0.98);
}

/* Focus state */
button:focus,
button:focus-visible,
input[type="submit"]:focus,
input[type="submit"]:focus-visible,
.elementor-button:focus,
.elementor-button:focus-visible,
.ti-btn:focus,
.ti-btn:focus-visible {
  outline: none;
  box-shadow: var(--ti-shadow-btn), var(--ti-focus);
}

/* Secondary button */
.ti-btn--secondary {
  background: transparent;
  color: var(--ti-text-color);
  border: 1px solid rgba(45, 212, 191, 0.4);
  box-shadow: none;
}

.ti-btn--secondary:hover {
  border-color: rgba(45, 212, 191, 0.7);
  box-shadow: var(--ti-shadow-sm);
  transform: translateY(-1px);
}

/* Ghost button */
.ti-btn--ghost {
  background: transparent;
  color: var(--ti-text-color);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: none;
}

.ti-btn--ghost:hover {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(15, 23, 42, 0.03);
  transform: translateY(-1px);
}

/* Accent button */
.ti-btn--accent {
  background: var(--ti-accent);
  color: #062a27;
  font-weight: var(--ti-fw-bold);
  box-shadow: 0 12px 30px rgba(26, 255, 209, 0.18);
}

.ti-btn--accent:hover {
  box-shadow: 0 18px 44px rgba(26, 255, 209, 0.24);
  filter: brightness(1.02);
}

/* Yellow button */
.ti-btn--yellow {
  background: var(--ti-yellow);
  color: #1f2937;
  box-shadow: 0 12px 28px rgba(251, 191, 36, 0.20);
}

.ti-btn--yellow:hover {
  box-shadow: 0 18px 44px rgba(251, 191, 36, 0.26);
}

/* Disabled state */
button:disabled,
input[type="submit"]:disabled,
.elementor-button:disabled,
.ti-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Button sizes */
.ti-btn--sm {
  padding: 10px 14px;
  font-size: var(--ti-small);
}

.ti-btn--lg {
  padding: 14px 22px;
  font-size: clamp(16px, 0.5vw + 14px, 18px);
}

/* =====================================================
   5) Form Elements
   ===================================================== */

input,
select,
textarea {
  font-family: var(--ti-font);
  font-size: var(--ti-text);
  line-height: 1.35;
  font-weight: var(--ti-fw-regular);
}

.elementor-form .elementor-button {
  width: auto;
}

/* =====================================================
   6) Header
   ===================================================== */

.ti-header {
  position: sticky;
  top: 0;
  z-index: 9;
}

.ti-header-bar {
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.ti-header-inner {
  min-height: var(--ti-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}

/* Brand */
.ti-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ti-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
}

.ti-logo:hover {
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.ti-logo img {
  height: 50px;
  width: auto;
}

.ti-logo-text {
  font-weight: var(--ti-fw-bold);
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--ti-text-color);
}

/* Desktop navigation */
.ti-nav-desktop {
  display: block;
}

.ti-topnav {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.ti-topnav > li {
  position: relative;
}

.ti-topnav > li > a {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--ti-radius-md);
  font-size: 14px;
  font-weight: var(--ti-fw-semi);
  color: rgba(15, 23, 42, 0.86);
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ti-topnav > li > a:hover {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.10);
  color: var(--ti-primary);
}

.ti-topnav > li:first-child > a {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.18);
}

/* Header actions */
.ti-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ti-cta.elementor-button {
  padding: 12px 16px;
  border-radius: var(--ti-radius-lg);
  white-space: nowrap;
  box-shadow: 0 16px 38px rgba(79, 70, 229, 0.18);
  font-weight: var(--ti-fw-semi);
}

.ti-cta.elementor-button:hover {
  box-shadow: 0 22px 52px rgba(79, 70, 229, 0.22);
}

/* Mobile toggle */
.ti-nav-toggle {
  width: 44px;
  height: 44px;
  border-radius: var(--ti-radius-md);
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--ti-shadow-md);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ti-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.95);
}

.ti-burger {
  width: 18px;
  height: 2px;
  background: var(--ti-text-color);
  position: relative;
  border-radius: 10px;
}

.ti-burger:before,
.ti-burger:after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ti-text-color);
  border-radius: 10px;
}

.ti-burger:before {
  top: -6px;
}

.ti-burger:after {
  top: 6px;
}
/* =====================================================
   7) Search Row - Premium Design with AJAX
   ===================================================== */

.ti-search-row {
  background: rgba(248, 250, 252, 0.86);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.ti-search-row .ti-container {
  display: flex;
  justify-content: center;
}

.ti-search-row-form {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 0;
  position: relative;
}

.ti-search-row-input {
  flex: 1;
  height: 52px;
  border-radius: var(--ti-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.95);
  padding: 0 52px 0 18px;
  font-weight: var(--ti-fw-regular);
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
  color: var(--ti-text-color);
}

.ti-search-row-input::placeholder {
  color: rgba(15, 23, 42, 0.45);
  font-weight: var(--ti-fw-regular);
}

.ti-search-row-input:focus {
  outline: none;
  border-color: rgba(79, 70, 229, 0.35);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(79, 70, 229, 0.12);
  background: #FFFFFF;
}

/* Search icon (right side) */
.ti-search-row-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(15, 23, 42, 0.45);
  font-size: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ti-search-row-btn:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  transition: all 0.2s ease;
}

.ti-search-row-btn:hover {
  background: rgba(79, 70, 229, 0.08);
}

.ti-search-row-btn:hover:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

.ti-search-row-input:focus ~ .ti-search-row-btn:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* AJAX Search Results Dropdown */
.ti-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--ti-radius-lg);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
  max-height: 480px;
  overflow-y: auto;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.ti-search-results.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Search results header */
.ti-search-results-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 13px;
  font-weight: var(--ti-fw-semi);
  color: rgba(15, 23, 42, 0.65);
  background: rgba(248, 250, 252, 0.5);
}

/* Search result items */
.ti-search-results-list {
  list-style: none;
  padding: 6px;
  margin: 0;
}

.ti-search-result-item {
  margin: 0;
}

.ti-search-result-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.15s ease;
  color: var(--ti-text-color);
}

.ti-search-result-link:hover {
  background: rgba(79, 70, 229, 0.06);
}

.ti-search-result-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(79, 70, 229, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ti-search-result-content {
  flex: 1;
  min-width: 0;
}

.ti-search-result-title {
  font-size: 15px;
  font-weight: var(--ti-fw-semi);
  color: var(--ti-text-color);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ti-search-result-desc {
  font-size: 13px;
  color: rgba(15, 23, 42, 0.65);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ti-search-result-category {
  font-size: 12px;
  font-weight: var(--ti-fw-semi);
  color: rgba(15, 23, 42, 0.50);
  background: rgba(15, 23, 42, 0.05);
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* No results state */
.ti-search-no-results {
  padding: 32px 18px;
  text-align: center;
  color: rgba(15, 23, 42, 0.50);
  font-size: 14px;
}

.ti-search-no-results-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 12px;
}

/* Loading state */
.ti-search-loading {
  padding: 24px 18px;
  text-align: center;
  color: rgba(15, 23, 42, 0.50);
  font-size: 14px;
}

.ti-search-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(79, 70, 229, 0.2);
  border-top-color: var(--ti-primary);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: ti-spin 0.8s linear infinite;
}

@keyframes ti-spin {
  to { transform: rotate(360deg); }
}

/* Keyboard navigation highlight */
.ti-search-result-link.is-active {
  background: rgba(79, 70, 229, 0.10);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .ti-search-row-form {
    max-width: 100%;
  }

  .ti-search-row-input {
    height: 48px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .ti-search-results {
    max-height: 60vh;
  }
}

/* Mobile search in drawer */
.ti-nav-mobile-search {
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 14px;
}

.ti-nav-mobile-search .ti-search-row-form {
  padding: 0;
}

.ti-nav-mobile-search .ti-search-row-input {
  height: 48px;
  font-size: 15px;
}

/* Scrollbar styling for search results */
.ti-search-results::-webkit-scrollbar {
  width: 8px;
}

.ti-search-results::-webkit-scrollbar-track {
  background: rgba(248, 250, 252, 0.5);
  border-radius: 0 var(--ti-radius-lg) var(--ti-radius-lg) 0;
}

.ti-search-results::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 10px;
}

.ti-search-results::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.25);
}


/* =====================================================
   8) Mega Menu
   ===================================================== */

.ti-has-mega {
  position: static;
}

.ti-mega {
  position: fixed;
  left: 50%;
  top: calc(var(--ti-header-h) + var(--ti-search-row-h));
  transform: translateX(-50%);
  width: var(--ti-mega-w);
  max-width: 1280px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--ti-radius-xl);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.20);
  backdrop-filter: blur(18px);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /*transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;*/
  z-index: 999999;
}

.ti-has-mega:hover .ti-mega,
.ti-has-mega.is-open .ti-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(6px);
}

.ti-mega-inner {
  display: grid;
  grid-template-columns: 0.95fr 2fr;
  gap: 14px;
}

/* Mega featured panel */
.ti-mega-featured {
  border-radius: var(--ti-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(79, 70, 229, 0.14), transparent 60%),
    radial-gradient(700px 240px at 80% 0%, rgba(26, 255, 209, 0.10), transparent 55%),
    rgba(248, 250, 252, 0.90);
  padding: 14px;
}

.ti-mega-kicker {
  display: inline-flex;
  font-size: 12.5px;
  font-weight: var(--ti-fw-bold);
  color: var(--ti-primary);
  background: rgba(79, 70, 229, 0.10);
  padding: 6px 10px;
  border-radius: 999px;
}

.ti-mega-featured h4 {
  margin: 10px 0 6px;
  font-weight: var(--ti-fw-semi);
}

.ti-mega-featured-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ti-mega-featured-list a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--ti-radius-md);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.78);
  color: var(--ti-text-color);
  text-decoration: none;
  font-weight: var(--ti-fw-semi);
  transition: all 0.2s ease;
}

.ti-mega-featured-list a:hover {
  border-color: rgba(26, 255, 209, 0.35);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

/* Mega columns */
.ti-mega-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ti-mega-col {
  border-radius: var(--ti-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.90);
  padding: 12px;
}

.ti-mega-col h5 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: var(--ti-fw-bold);
}

.ti-mega-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ti-mega-col a {
  color: var(--ti-text-color);
  text-decoration: none;
  font-weight: var(--ti-fw-medium);
  font-size: 13.5px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.ti-mega-col a:hover {
  background: rgba(45, 212, 191, 0.12);
}

/* =====================================================
   9) Mobile Navigation Drawer
   ===================================================== */

.ti-lock {
  overflow: hidden !important;
}

.ti-nav-panel {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 999999;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.ti-nav-panel.is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.ti-nav-panel-inner {
  position: absolute;
  right: 14px;
  top: 14px;
  width: min(420px, calc(100% - 28px));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--ti-radius-xl);
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.20);
  padding: 14px;
}

.ti-nav-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px 10px;
}

.ti-nav-title {
  font-weight: var(--ti-fw-bold);
  letter-spacing: -0.02em;
  font-size: 16px;
}

.ti-nav-close {
  width: 44px;
  height: 44px;
  border-radius: var(--ti-radius-md);
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.05);
  font-weight: var(--ti-fw-bold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ti-nav-close:hover {
  background: rgba(15, 23, 42, 0.08);
}

.ti-nav-mobile .ti-mobile-link {
  font-weight: var(--ti-fw-semi);
}

.ti-mobile-sublink {
  font-weight: var(--ti-fw-medium);
}

/* =========================================================
   ToolsInstant Footer (Refined & Premium)
   ========================================================= */

.ti-footer {
  margin-top: 100px;
  background: #FFFFFF;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* Footer Top */
.ti-footer-top {
  padding: 70px 0 50px;
  background: 
    radial-gradient(ellipse 1000px 300px at 20% 0%, rgba(79, 70, 229, 0.04), transparent 60%),
    radial-gradient(ellipse 1000px 300px at 80% 0%, rgba(26, 255, 209, 0.03), transparent 55%),
    #F8FAFC;
}

.ti-footer-top-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Footer Brand */
.ti-footer-brand {
  max-width: 520px;
}

.ti-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 20px;
}
.ti-footer-logo img{
    height:50px;
}


.ti-footer-tagline {
  font-size: 15px;
  color: var(--ti-muted-color);
  line-height: 1.7;
  margin: 0 0 28px;
}

.ti-footer-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.ti-footer-stat {
  padding: 18px;
  background: rgba(79, 70, 229, 0.04);
  border: 1px solid rgba(79, 70, 229, 0.10);
  border-radius: 14px;
}

.ti-footer-stat-number {
  font-size: 28px;
  font-weight: var(--ti-fw-bold);
  color: var(--ti-primary);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.ti-footer-stat-label {
  font-size: 13px;
  color: var(--ti-muted-color);
  font-weight: var(--ti-fw-medium);
}

.ti-footer-cta-row {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

/* Footer Social */
.ti-footer-social {
  display: flex;
  gap: 10px;
}

.ti-footer-social-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #FFFFFF;
  color: var(--ti-text-color);
  text-decoration: none;
  transition: all 0.2s ease;
}

.ti-footer-social-btn:hover {
  border-color: var(--ti-primary);
  background: rgba(79, 70, 229, 0.06);
  color: var(--ti-primary);
  transform: translateY(-2px);
}

/* Newsletter Card */
.ti-footer-newsletter {
  position: relative;
}

.ti-footer-newsletter-card {
  background: linear-gradient(135deg, var(--ti-primary) 0%, #3730A3 100%);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 20px 60px rgba(79, 70, 229, 0.20);
  position: relative;
  overflow: hidden;
}

.ti-footer-newsletter-card:before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(26, 255, 209, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ti-footer-newsletter-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 16px;
}

.ti-footer-newsletter-title {
  font-size: 24px;
  font-weight: var(--ti-fw-bold);
  color: #FFFFFF;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.ti-footer-newsletter-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 28px;
  line-height: 1.6;
}

.ti-footer-newsletter-form {
  position: relative;
  z-index: 1;
}

.ti-footer-newsletter-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.ti-footer-newsletter-input {
  flex: 1;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  padding: 0 18px;
  font-size: 15px;
  color: #FFFFFF;
  font-weight: var(--ti-fw-regular);
  transition: all 0.2s ease;
}

.ti-footer-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.ti-footer-newsletter-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.20);
}

.ti-footer-newsletter-btn {
  height: 52px;
  padding: 0 28px;
  border-radius: 14px;
  border: none;
  background: #FFFFFF;
  color: var(--ti-primary);
  font-size: 15px;
  font-weight: var(--ti-fw-semi);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ti-footer-newsletter-btn:hover {
  background: #F8FAFC;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.ti-footer-newsletter-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Footer Links Section */
.ti-footer-links {
  padding: 60px 0;
  background: #FFFFFF;
}

.ti-footer-links-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
}

.ti-footer-links-col {
  min-width: 0;
}

.ti-footer-links-title {
  font-size: 15px;
  font-weight: var(--ti-fw-bold);
  color: var(--ti-text-color);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.ti-footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ti-footer-links-list a {
  font-size: 14px;
  color: var(--ti-muted-color);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: var(--ti-fw-regular);
  display: inline-block;
}

.ti-footer-links-list a:hover {
  color: var(--ti-primary);
}

.ti-footer-links-more {
  color: var(--ti-primary) !important;
  font-weight: var(--ti-fw-semi) !important;
  margin-top: 6px;
}

/* Footer Bottom */
.ti-footer-bottom {
  padding: 28px 0;
  background: #F8FAFC;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ti-footer-bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.ti-footer-copyright p {
  margin: 0;
  font-size: 14px;
  color: var(--ti-muted-color);
  font-weight: var(--ti-fw-regular);
}

.ti-footer-tagline-small {
  font-size: 13px !important;
  color: rgba(15, 23, 42, 0.50) !important;
  margin-top: 4px !important;
}

.ti-footer-bottom-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.ti-footer-bottom-links a {
  font-size: 14px;
  color: var(--ti-muted-color);
  text-decoration: none;
  font-weight: var(--ti-fw-medium);
  transition: color 0.2s ease;
}

.ti-footer-bottom-links a:hover {
  color: var(--ti-primary);
}

/* Responsive */
@media (max-width: 1120px) {
  .ti-footer-links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .ti-footer-top-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ti-footer-newsletter-input-group {
    flex-direction: column;
  }

  .ti-footer-newsletter-btn {
    width: 100%;
  }

  .ti-footer-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .ti-footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .ti-footer-links-grid {
    grid-template-columns: 1fr;
  }

  .ti-footer-stats {
    grid-template-columns: 1fr;
  }

  .ti-footer-cta-row {
    flex-direction: column;
  }

  .ti-footer-cta-row .ti-btn {
    width: 100%;
  }
}
/* =====================================================
11) Responsive Design
===================================================== */

@media (max-width: 980px) {
.ti-nav-desktop {
display: none;
}
.ti-nav-toggle {
display: inline-flex;
}
.ti-search-row {
display: none;
}
.ti-mega {
display: none;
}
.ti-mega-cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (min-width: 981px) {
.ti-nav-panel {
display: none !important;
}
}
/* Screen reader only text */
.ti-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Single Calculators */
/* ============================================================
   TOOLSINSTANT - GODFATHER CALCULATOR STYLES
   Used by all calculators (EMI, SIP, BMI, etc.)
   ============================================================ */

:root {
  --ti-primary: #4F46E5;
  --ti-primary-dark: #3730A3;
  --ti-accent: #1AFFD1;
  --ti-text: #0F172A;
  --ti-text-light: #475569;
  --ti-text-muted: #64748B;
  --ti-border: rgba(15, 23, 42, 0.10);
  --ti-bg-gray: #F8FAFC;
  --ti-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --ti-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --ti-shadow-lg: 0 8px 32px rgba(79, 70, 229, 0.12);
}

.ti-godfather-calc {
  font-family: "Titillium Web", system-ui, -apple-system, sans-serif;
  color: var(--ti-text);
  line-height: 1.6;
}

/* Minimal Header */
.ti-calc-minimal-header {
  padding: 32px 20px;
  background: linear-gradient(180deg, var(--ti-bg-gray) 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--ti-border);
}

.ti-calc-header-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.ti-calc-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.ti-calc-mini-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(79, 70, 229, 0.10);
  color: var(--ti-primary);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}

.ti-calc-h1 {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ti-calc-subtitle {
  font-size: 17px;
  color: var(--ti-text-light);
  margin: 0;
  line-height: 1.6;
}

.ti-calc-nav-jump {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.ti-nav-link {
  padding: 10px 18px;
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ti-text);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.ti-nav-link:hover {
  border-color: var(--ti-primary);
  color: var(--ti-primary);
}

/* Main Calculator Section */
.ti-calc-main-section {
  padding: 50px 20px;
}

.ti-calc-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.ti-calc-container {
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 24px;
  padding: 42px;
  box-shadow: var(--ti-shadow-lg);
}

.ti-calc-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--ti-bg-gray);
  gap: 20px;
  flex-wrap: wrap;
}

.ti-calc-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 6px;
}

.ti-calc-desc {
  font-size: 16px;
  color: var(--ti-text-light);
  margin: 0;
}

.ti-calc-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ti-currency-select {
  height: 44px;
  padding: 0 16px;
  background: var(--ti-bg-gray);
  border: 1px solid var(--ti-border);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ti-primary);
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.ti-currency-select:hover,
.ti-currency-select:focus {
  border-color: var(--ti-primary);
  background: #FFFFFF;
}

.ti-reset-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  background: var(--ti-bg-gray);
  border: 1px solid var(--ti-border);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ti-text);
  cursor: pointer;
  transition: all 0.2s;
}

.ti-reset-btn:hover {
  background: var(--ti-primary);
  color: #FFFFFF;
  border-color: var(--ti-primary);
}

.ti-calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.ti-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Input Block - UPDATED with dual input */
.ti-input-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ti-input-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ti-label-icon {
  font-size: 20px;
  margin-right: 10px;
}

.ti-label-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ti-text);
  flex: 1;
}

.ti-label-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--ti-primary);
}

/* NEW: Direct Input Field */
.ti-input-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ti-direct-input {
  flex: 3;
  height: 48px;
  padding: 0 16px;
  background: #FFFFFF;
  border: 2px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  color: #4F46E5;
  text-align: center;
  transition: all 0.2s;
  min-width: 100px;
  max-width: 160px;
}

.ti-direct-input:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10);
}

.ti-direct-input::placeholder {
  color: var(--ti-text-muted);
  font-weight: 400;
}

.ti-slider-wrapper {
  flex: 7;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ti-slider {
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(to right, #4F46E5 0%, #E0E7FF 0%);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid rgba(79, 70, 229, 0.15);
}

.ti-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4F46E5;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.40);
  transition: all 0.2s;
  margin-top: -8px;
}
.ti-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: #E0E7FF;
}
.ti-slider::-moz-range-track {
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: #E0E7FF;
}
.ti-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.50);
}

.ti-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4F46E5;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.40);
}

.ti-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ti-text-muted);
  font-weight: 500;
}

.ti-calc-results {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ti-emi-hero {
  text-align: center;
  padding: 38px;
  background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-primary-dark) 100%);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.28);
}

.ti-emi-label {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.ti-emi-value {
  font-size: clamp(44px, 6vw, 58px);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.ti-emi-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.ti-action-row {
  display: flex;
  gap: 10px;
}

.ti-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.ti-btn-primary {
  background: var(--ti-primary);
  color: #FFFFFF;
}

.ti-btn-primary:hover {
  background: var(--ti-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.30);
}

.ti-btn-secondary {
  background: var(--ti-bg-gray);
  color: var(--ti-text);
  border: 1px solid var(--ti-border);
}

.ti-btn-secondary:hover {
  background: #FFFFFF;
  border-color: var(--ti-primary);
  color: var(--ti-primary);
  transform: translateY(-2px);
}

.ti-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ti-breakdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 18px;
  background: var(--ti-bg-gray);
  border: 1px solid var(--ti-border);
  border-radius: 14px;
  transition: all 0.2s;
}

.ti-breakdown-item:hover {
  background: #FFFFFF;
  box-shadow: var(--ti-shadow-sm);
  transform: translateY(-2px);
}

.ti-breakdown-icon {
  font-size: 36px;
  flex-shrink: 0;
}

.ti-breakdown-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ti-breakdown-label {
  font-size: 13px;
  color: var(--ti-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ti-breakdown-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ti-text);
}

.ti-chart-section {
  padding: 32px;
  background: var(--ti-bg-gray);
  border-radius: 18px;
  margin-top: 10px;
}

.ti-chart-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 24px;
  text-align: center;
}

.ti-chart-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.ti-chart-canvas {
  max-width: 320px;
  width: 100%;
}

.ti-chart-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.ti-stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ti-stat-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ti-stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ti-stat-label {
  font-size: 14px;
  color: var(--ti-text-light);
  font-weight: 500;
}

.ti-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ti-text);
}

.ti-section {
  padding: 72px 20px;
}

.ti-section-gray {
  background: var(--ti-bg-gray);
}

.ti-section-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

.ti-section-title {
  font-size: clamp(30px, 3.5vw, 38px);
  font-weight: 700;
  color: var(--ti-text);
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

.ti-section-intro {
  text-align: center;
  font-size: 18px;
  color: var(--ti-text-light);
  margin: 0 0 50px;
}

.ti-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.ti-step-card {
  padding: 32px 26px;
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 16px;
  text-align: center;
  transition: all 0.2s;
}

.ti-step-card:hover {
  box-shadow: var(--ti-shadow-md);
  transform: translateY(-4px);
}

.ti-step-num {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-primary-dark) 100%);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28);
}

.ti-step-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ti-text);
  margin: 0 0 12px;
}

.ti-step-text {
  font-size: 16px;
  color: var(--ti-text-light);
  line-height: 1.7;
  margin: 0;
}

.ti-formula-card {
  background: #FFFFFF;
  border: 2px solid var(--ti-primary);
  border-radius: 20px;
  padding: 38px;
  box-shadow: var(--ti-shadow-md);
  margin: 32px 0;
}

.ti-formula-box {
  text-align: center;
  padding: 26px;
  background: rgba(79, 70, 229, 0.05);
  border-radius: 14px;
  margin-bottom: 30px;
}

.ti-formula-eq {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--ti-primary);
  font-family: 'Courier New', monospace;
}

.ti-formula-legend {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ti-legend-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--ti-bg-gray);
  border-radius: 10px;
}

.ti-legend-var {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ti-primary);
  color: #FFFFFF;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.ti-legend-text {
  font-size: 17px;
  color: var(--ti-text-light);
}

.ti-example-box {
  background: var(--ti-bg-gray);
  border-radius: 14px;
  padding: 26px;
  margin-top: 26px;
}

.ti-example-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ti-text);
  margin: 0 0 18px;
}

.ti-example-box p {
  margin: 10px 0;
  font-size: 17px;
  color: var(--ti-text-light);
}

.ti-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

.ti-benefit-card {
  padding: 32px 28px;
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 16px;
  text-align: center;
  transition: all 0.2s;
}

.ti-benefit-card:hover {
  border-color: var(--ti-primary);
  box-shadow: var(--ti-shadow-lg);
  transform: translateY(-4px);
}

.ti-benefit-icon {
  font-size: 50px;
  margin-bottom: 18px;
  display: block;
}

.ti-benefit-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ti-text);
  margin: 0 0 12px;
}

.ti-benefit-desc {
  font-size: 16px;
  color: var(--ti-text-light);
  line-height: 1.7;
  margin: 0;
}

.ti-faq-container {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ti-faq-item {
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s;
}

.ti-faq-item:hover {
  box-shadow: var(--ti-shadow-sm);
}

.ti-faq-item[open] {
  border-color: var(--ti-primary);
  box-shadow: var(--ti-shadow-md);
}

.ti-faq-q {
  padding: 22px 26px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ti-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  transition: all 0.2s;
}

.ti-faq-q::-webkit-details-marker {
  display: none;
}

.ti-faq-q:after {
  content: "+";
  font-size: 30px;
  color: var(--ti-primary);
  font-weight: 300;
  flex-shrink: 0;
  transition: transform 0.2s;
  line-height: 1;
}

.ti-faq-item[open] .ti-faq-q {
  color: var(--ti-primary);
}

.ti-faq-item[open] .ti-faq-q:after {
  transform: rotate(45deg);
}

.ti-faq-a {
  padding: 0 26px 26px;
}

.ti-faq-a p {
  margin: 0;
  font-size: 17px;
  color: var(--ti-text-light);
  line-height: 1.8;
}

@media (max-width: 968px) {
  .ti-breakdown-grid {
    grid-template-columns: 1fr;
  }
  .ti-chart-stats {
    flex-direction: column;
    gap: 20px;
  }
  .ti-calc-title-row {
    flex-direction: column;
  }
  .ti-calc-nav-jump {
    width: 100%;
  }
  .ti-nav-link {
    flex: 1;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .ti-calc-container {
    padding: 26px;
  }
  .ti-action-row {
    flex-direction: column;
  }
  .ti-action-btn {
    width: 100%;
  }
  .ti-calc-top-bar {
    flex-direction: column;
  }
  .ti-calc-actions {
    width: 100%;
  }
  .ti-currency-select,
  .ti-reset-btn {
    flex: 1;
  }
  .ti-input-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .ti-direct-input {
    width: 100%;
  }
}
/* ============================================================
   BMI CALCULATOR SPECIFIC STYLES
   ============================================================ */

/* Gender Selection Buttons */
.ti-gender-buttons {
  display: flex;
  gap: 12px;
}

.ti-gender-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 2px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.2s;
}

.ti-gender-btn:hover {
  border-color: #4F46E5;
  color: #4F46E5;
}

.ti-gender-btn.active {
  background: linear-gradient(135deg, #4F46E5 0%, #3730A3 100%);
  border-color: #4F46E5;
  color: #FFFFFF;
}

.ti-gender-btn svg {
  flex-shrink: 0;
}

/* BMI Range Visual */
.ti-bmi-chart {
  margin-top: 24px;
  padding: 24px;
  background: var(--ti-bg-gray);
  border-radius: 16px;
}

.ti-bmi-range {
  position: relative;
  height: 32px;
  background: linear-gradient(to right, #3B82F6 0%, #3B82F6 25%, #10B981 25%, #10B981 50%, #F59E0B 50%, #F59E0B 75%, #EF4444 75%, #EF4444 100%);
  border-radius: 16px;
  margin-bottom: 20px;
}

.ti-bmi-marker {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 16px solid #0F172A;
  transform: translateX(-50%);
  transition: left 0.3s ease;
}

.ti-bmi-marker::after {
  content: '';
  position: absolute;
  top: -24px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: #0F172A;
  border-radius: 50%;
}

.ti-bmi-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.ti-bmi-label-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.ti-bmi-color {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.ti-bmi-label-item span {
  font-size: 13px;
  font-weight: 500;
  color: var(--ti-text-light);
  line-height: 1.4;
}

/* BMI Categories Cards */
.ti-bmi-categories {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ti-bmi-category-card {
  padding: 26px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: var(--ti-shadow-sm);
}

.ti-category-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ti-text);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ti-category-icon {
  font-size: 24px;
}

.ti-bmi-category-card p {
  margin: 8px 0;
  font-size: 16px;
  color: var(--ti-text-light);
  line-height: 1.7;
}

.ti-bmi-info {
  flex: 1;
  padding: 20px;
  background: rgba(79, 70, 229, 0.05);
  border-radius: 14px;
}

.ti-bmi-info p {
  margin: 0;
  font-size: 17px;
  color: var(--ti-text-light);
  line-height: 1.8;
}

/* Responsive */
@media (max-width: 768px) {
  .ti-gender-buttons {
    flex-direction: column;
  }
  
  .ti-bmi-labels {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ============================================================
   PERCENTAGE CALCULATOR SPECIFIC STYLES
   ============================================================ */

/* Tabs */
.ti-calc-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.ti-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--ti-bg-gray);
  border: 2px solid var(--ti-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.ti-tab:hover {
  border-color: var(--ti-primary);
  background: #FFFFFF;
}

.ti-tab.active {
  background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-primary-dark) 100%);
  border-color: var(--ti-primary);
}

.ti-tab-icon {
  font-size: 24px;
}

.ti-tab-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ti-text);
}

.ti-tab.active .ti-tab-text {
  color: #FFFFFF;
}

/* Tab Content */
.ti-tab-content {
  display: none;
}

.ti-tab-content.active {
  display: block;
}

/* Question Display */
.ti-calc-question {
  text-align: center;
  padding: 24px;
  background: var(--ti-bg-gray);
  border-radius: 16px;
  margin-bottom: 32px;
}.ti-question-title {
font-size: clamp(20px, 3vw, 26px);
font-weight: 600;
color: var(--ti-text);
margin: 0;
line-height: 1.4;
}
.ti-highlight {
color: var(--ti-primary);
font-weight: 700;
}
/* Compact Inputs */
.ti-calc-inputs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 32px;
}
.ti-input-compact {
display: flex;
flex-direction: column;
gap: 10px;
}
.ti-input-label-sm {
font-size: 15px;
font-weight: 600;
color: var(--ti-text);
}
.ti-input-field {
height: 56px;
padding: 0 20px;
background: #FFFFFF;
border: 2px solid var(--ti-border);
border-radius: 12px;
font-size: 20px;
font-weight: 600;
color: var(--ti-primary);
text-align: center;
transition: all 0.2s;
}
.ti-input-field:focus {
outline: none;
border-color: var(--ti-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10);
}
/* Result Box */
.ti-result-box {
text-align: center;
padding: 32px;
background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-primary-dark) 100%);
border-radius: 20px;
box-shadow: 0 10px 28px rgba(79, 70, 229, 0.28);
}
.ti-result-label {
font-size: 15px;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.ti-result-value {
font-size: clamp(44px, 6vw, 58px);
font-weight: 700;
color: #FFFFFF;
margin-bottom: 14px;
letter-spacing: -0.02em;
}
.ti-result-formula {
font-size: 17px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
/* Result Breakdown */
.ti-result-breakdown {
margin-top: 24px;
padding-top: 24px;
border-top: 2px solid rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
gap: 12px;
}
.ti-breakdown-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
}
.ti-breakdown-row strong {
font-size: 20px;
color: #FFFFFF;
font-weight: 700;
}
.ti-breakdown-total {
padding-top: 12px;
border-top: 2px solid rgba(255, 255, 255, 0.3);
font-size: 18px;
font-weight: 600;
}
/* Common Uses */
.ti-common-uses {
margin-top: 40px;
padding: 32px;
background: var(--ti-bg-gray);
border-radius: 18px;
}
.ti-uses-title {
font-size: 20px;
font-weight: 600;
color: var(--ti-text);
margin: 0 0 20px;
text-align: center;
}
.ti-uses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.ti-use-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: #FFFFFF;
border: 2px solid var(--ti-border);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
}
.ti-use-btn:hover {
border-color: var(--ti-primary);
background: var(--ti-primary);
color: #FFFFFF;
}
.ti-use-icon {
font-size: 24px;
flex-shrink: 0;
}
.ti-use-text {
font-size: 15px;
font-weight: 600;
color: var(--ti-text);
}
.ti-use-btn:hover .ti-use-text {
color: #FFFFFF;
}
/* Formulas Grid */
.ti-formulas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.ti-formula-desc {
font-size: 16px;
color: var(--ti-text-light);
line-height: 1.7;
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.ti-calc-tabs {
grid-template-columns: repeat(2, 1fr);
}
.ti-calc-inputs-grid {
grid-template-columns: 1fr;
}
.ti-uses-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
   AGE CALCULATOR SPECIFIC STYLES
   ============================================================ */

/* Date Input */
.ti-date-input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  background: #FFFFFF;
  border: 2px solid var(--ti-border);
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ti-text);
  transition: all 0.2s;
}

.ti-date-input:focus {
  outline: none;
  border-color: var(--ti-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10);
}

/* Quick Actions */
.ti-quick-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.ti-quick-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ti-bg-gray);
  border: 1px solid var(--ti-border);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ti-text);
  cursor: pointer;
  transition: all 0.2s;
}

.ti-quick-btn:hover {
  background: var(--ti-primary);
  color: #FFFFFF;
  border-color: var(--ti-primary);
}

/* Age Details */
.ti-age-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.ti-age-detail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--ti-bg-gray);
  border: 1px solid var(--ti-border);
  border-radius: 14px;
  transition: all 0.2s;
}

.ti-age-detail-item:hover {
  background: #FFFFFF;
  box-shadow: var(--ti-shadow-sm);
}

.ti-detail-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.ti-detail-content {
  flex: 1;
}

.ti-detail-label {
  font-size: 13px;
  color: var(--ti-text-muted);
  font-weight: 500;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ti-detail-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--ti-text);
}

/* Age Breakdown Section */
.ti-age-breakdown-section {
  margin-top: 40px;
  padding: 32px;
  background: var(--ti-bg-gray);
  border-radius: 18px;
}

.ti-breakdown-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 24px;
  text-align: center;
}

.ti-age-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.ti-breakdown-card {
  display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 16px;
background: #FFFFFF;
border: 1px solid var(--ti-border);
border-radius: 14px;
transition: all 0.2s;
}
.ti-breakdown-card:hover {
box-shadow: var(--ti-shadow-md);
transform: translateY(-4px);
}
.ti-breakdown-card-icon {
font-size: 36px;
margin-bottom: 12px;
}
.ti-breakdown-card-value {
font-size: 26px;
font-weight: 700;
color: var(--ti-primary);
margin-bottom: 6px;
}
.ti-breakdown-card-label {
font-size: 14px;
font-weight: 500;
color: var(--ti-text-muted);
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* Milestones Section */
.ti-milestones-section {
margin-top: 40px;
}
.ti-milestones-heading {
font-size: 22px;
font-weight: 700;
color: var(--ti-text);
margin: 0 0 24px;
text-align: center;
}
.ti-milestones-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.ti-milestone-card {
padding: 20px;
background: #FFFFFF;
border: 2px solid var(--ti-border);
border-radius: 14px;
transition: all 0.2s;
}
.ti-milestone-card.achieved {
border-color: #10B981;
background: rgba(16, 185, 129, 0.05);
}
.ti-milestone-card.upcoming {
border-color: #F59E0B;
background: rgba(245, 158, 11, 0.05);
}
.ti-milestone-status {
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
}
.ti-milestone-card.achieved .ti-milestone-status {
color: #10B981;
}
.ti-milestone-card.upcoming .ti-milestone-status {
color: #F59E0B;
}
.ti-milestone-title {
font-size: 18px;
font-weight: 700;
color: var(--ti-text);
margin-bottom: 6px;
}
.ti-milestone-date {
font-size: 15px;
color: var(--ti-text-light);
}
/* Age Facts */
.ti-age-facts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.ti-fact-card {
padding: 28px;
background: #FFFFFF;
border: 1px solid var(--ti-border);
border-radius: 16px;
text-align: center;
transition: all 0.2s;
}
.ti-fact-card:hover {
box-shadow: var(--ti-shadow-lg);
transform: translateY(-4px);
}
.ti-fact-icon {
font-size: 48px;
margin-bottom: 16px;
}
.ti-fact-title {
font-size: 19px;
font-weight: 600;
color: var(--ti-text);
margin: 0 0 12px;
}
.ti-fact-text {
font-size: 15px;
color: var(--ti-text-light);
line-height: 1.7;
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.ti-age-breakdown-grid {
grid-template-columns: repeat(2, 1fr);
}
.ti-quick-actions {
flex-direction: column;
}
}
/* ============================================================
   DISCOUNT CALCULATOR SPECIFIC STYLES
   ============================================================ */

/* Quick Discounts Section */
.ti-quick-discounts {
  margin-top: 40px;
  padding: 32px;
  background: var(--ti-bg-gray);
  border-radius: 18px;
}

.ti-quick-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ti-text);
  margin: 0 0 20px;
  text-align: center;
}

.ti-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.ti-quick-discount-btn {
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-primary-dark) 100%);
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
color: #FFFFFF;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.20);
}
.ti-quick-discount-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}
.ti-quick-discount-btn:active {
transform: translateY(-1px);
}
/* Discount Examples */
.ti-discount-examples {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.ti-example-card {
padding: 28px;
background: #FFFFFF;
border: 1px solid var(--ti-border);
border-radius: 16px;
transition: all 0.2s;
}
.ti-example-card:hover {
box-shadow: var(--ti-shadow-lg);
transform: translateY(-4px);
}
.ti-example-header {
margin-bottom: 18px;
}
.ti-example-badge {
display: inline-block;
padding: 6px 12px;
background: rgba(79, 70, 229, 0.10);
color: var(--ti-primary);
border-radius: 6px;
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
}
.ti-example-title {
font-size: 19px;
font-weight: 700;
color: var(--ti-text);
margin: 0;
}
.ti-example-text {
font-size: 15px;
color: var(--ti-text-light);
margin: 12px 0;
line-height: 1.6;
}
.ti-example-calc {
font-size: 15px;
color: var(--ti-text);
margin: 10px 0;
padding: 12px;
background: var(--ti-bg-gray);
border-radius: 8px;
font-family: 'Courier New', monospace;
}
.ti-example-result {
font-size: 16px;
color: var(--ti-primary);
font-weight: 600;
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px solid var(--ti-border);
}
/* Responsive */
@media (max-width: 768px) {
.ti-quick-grid {
grid-template-columns: repeat(2, 1fr);
}
.ti-discount-examples {
grid-template-columns: 1fr;
}
}
.ti-activity-select {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  background: #FFFFFF;
  border: 2px solid var(--ti-border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ti-text);
  cursor: pointer;
  transition: all 0.2s;
}

.ti-activity-select:focus {
  outline: none;
  border-color: var(--ti-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10);
}

/* Goal Buttons */
.ti-goal-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ti-goal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--ti-bg-gray);
  border: 2px solid var(--ti-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.ti-goal-btn:hover {
  border-color: var(--ti-primary);
  background: #FFFFFF;
}

.ti-goal-btn.active {
  background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-primary-dark) 100%);
  border-color: var(--ti-primary);
}

.ti-goal-icon {
  font-size: 28px;
}

.ti-goal-btn span:last-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--ti-text);
}

.ti-goal-btn.active span:last-child {
  color: #FFFFFF;
}

/* Calorie Goal Cards */
.ti-calorie-goals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.ti-calorie-goal-card {
  padding: 18px;
  background: var(--ti-bg-gray);
  border: 2px solid var(--ti-border);
  border-radius: 14px;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.ti-calorie-goal-card:hover {
  box-shadow: var(--ti-shadow-sm);
}

.ti-calorie-goal-card.ti-goal-active {
  border-color: var(--ti-primary);
  background: rgba(79, 70, 229, 0.05);
}

.ti-goal-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ti-goal-card-icon {
  font-size: 24px;
}

.ti-goal-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ti-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ti-goal-card-calories {
  font-size: 22px;
  font-weight: 700;
  color: var(--ti-primary);
  margin-bottom: 6px;
}

.ti-goal-card-desc {
  font-size: 13px;
  color: var(--ti-text-light);
}

/* BMR Info */
.ti-bmr-info {
  margin-top: 20px;
  padding: 18px;
  background: var(--ti-bg-gray);
  border-radius: 14px;
}

.ti-bmr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ti-bmr-label {
  font-size: 15px;
  color: var(--ti-text-light);
}

.ti-bmr-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ti-primary);
}

.ti-bmr-desc {
  font-size: 13px;
  color: var(--ti-text-muted);
  margin: 0;
}

/* Macro Section */
.ti-macro-section {
  margin-top: 40px;
  padding: 32px;
  background: var(--ti-bg-gray);
  border-radius: 18px;
}

.ti-macro-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 24px;
  text-align: center;
}

.ti-macro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.ti-macro-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 14px;
  transition: all 0.2s;
}

.ti-macro-card:hover {
  box-shadow: var(--ti-shadow-sm);
  transform: translateY(-2px);
}

.ti-macro-icon {
  font-size: 40px;
  flex-shrink: 0;
}

.ti-macro-content {
  flex: 1;
}

.ti-macro-label {
  font-size: 13px;
  color: var(--ti-text-muted);
  font-weight: 500;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ti-macro-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ti-primary);
  margin-bottom: 4px;
}

.ti-macro-calories {
  font-size: 14px;
  color: var(--ti-text-light);
}

/* Calorie Tips */
.ti-calorie-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.ti-tip-card {
  padding: 28px;
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 16px;
  transition: all 0.2s;
}

.ti-tip-card:hover {
  box-shadow: var(--ti-shadow-lg);
  transform: translateY(-4px);
}

.ti-tip-icon {
  font-size: 44px;
  margin-bottom: 16px;
  display: block;
}

.ti-tip-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--ti-text);
  margin: 0 0 12px;
}

.ti-tip-text {
  font-size: 15px;
  color: var(--ti-text-light);
  line-height: 1.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 968px) {
  .ti-calorie-goals {
    grid-template-columns: 1fr;
  }
  
  .ti-macro-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ti-goal-buttons {
    grid-template-columns: 1fr;
  }
}
/* RD Schedule */
.ti-rd-schedule {
  margin-top: 40px;
  padding: 28px;
  background: var(--ti-bg-gray);
  border-radius: 16px;
}

.ti-rd-schedule-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 20px;
  text-align: center;
}

.ti-rd-schedule-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.ti-schedule-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 12px;
}

.ti-schedule-label {
  font-size: 14px;
  color: var(--ti-text-muted);
  font-weight: 500;
}

.ti-schedule-item strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--ti-primary);
}

/* Comparison Grid */
.ti-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.ti-comparison-card {
  padding: 28px;
  background: #FFFFFF;
  border: 2px solid var(--ti-border);
  border-radius: 16px;
  transition: all 0.2s;
}

.ti-comparison-card:hover {
  box-shadow: var(--ti-shadow-lg);
  transform: translateY(-4px);
}

.ti-comparison-header {
  margin-bottom: 20px;
}

.ti-comparison-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 10px;
}

.ti-comparison-badge {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(79, 70, 229, 0.10);
  color: var(--ti-primary);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.ti-comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ti-comparison-list li {
  padding: 10px 0;
  font-size: 15px;
  color: var(--ti-text-light);
  line-height: 1.6;
  border-bottom: 1px solid var(--ti-border);
}

.ti-comparison-list li:last-child {
  border-bottom: none;
}

/* Responsive */
@media (max-width: 768px) {
  .ti-rd-schedule-summary {
    grid-template-columns: 1fr;
  }
}
/* Chart Full Width */
.ti-chart-full {
  display: block;
  width: 100%;
}

.ti-chart-full canvas {
  max-height: 400px;
}
/* Amortization Toggle */
.ti-amortization-toggle {
  margin-top: 32px;
  text-align: center;
}

.ti-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-primary-dark) 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.ti-toggle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
}

/* Amortization Section */
.ti-amortization-section {
  margin-top: 32px;
  padding: 32px;
  background: var(--ti-bg-gray);
  border-radius: 18px;
}

.ti-amortization-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 24px;
  text-align: center;
}

.ti-amortization-table-wrapper {
  overflow-x: auto;
}

.ti-amortization-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
}

.ti-amortization-table thead {
  background: var(--ti-primary);
  color: #FFFFFF;
}

.ti-amortization-table th {
  padding: 16px 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ti-amortization-table td {
  padding: 14px 12px;
  font-size: 15px;
  color: var(--ti-text);
  border-bottom: 1px solid var(--ti-border);
}

.ti-amortization-table tbody tr:hover {
  background: var(--ti-bg-gray);
}

.ti-amortization-table tbody tr:last-child td {
  border-bottom: none;
}

/* Responsive */
@media (max-width: 768px) {
  .ti-amortization-table {
    font-size: 13px;
  }
  
  .ti-amortization-table th,
  .ti-amortization-table td {
    padding: 10px 8px;
  }
}
/* Eligibility Section */
.ti-eligibility-section {
  margin-top: 40px;
  padding: 32px;
  background: var(--ti-bg-gray);
  border-radius: 18px;
}

.ti-eligibility-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 24px;
  text-align: center;
}

.ti-eligibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.ti-eligibility-card {
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 14px;
  text-align: center;
  transition: all 0.2s;
}

.ti-eligibility-card:hover {
  box-shadow: var(--ti-shadow-md);
  transform: translateY(-3px);
}

.ti-eligibility-label {
  font-size: 14px;
  color: var(--ti-text-muted);
  font-weight: 500;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ti-eligibility-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ti-primary);
  margin-bottom: 8px;
}

.ti-eligibility-note {
  font-size: 13px;
  color: var(--ti-text-light);
}
/* Cost Summary */
.ti-cost-summary {
  margin-top: 40px;
  padding: 32px;
  background: var(--ti-bg-gray);
  border-radius: 18px;
}

.ti-cost-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 24px;
  text-align: center;
}

.ti-cost-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ti-cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 1px solid var(--ti-border);
  border-radius: 12px;
  transition: all 0.2s;
}

.ti-cost-item:hover {
  box-shadow: var(--ti-shadow-sm);
}

.ti-cost-total {
  background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-primary-dark) 100%);
  border: none;
  padding: 20px;
}

.ti-cost-total .ti-cost-label,
.ti-cost-total .ti-cost-value {
  color: #FFFFFF;
}

.ti-cost-label {
  font-size: 15px;
  color: var(--ti-text-light);
  font-weight: 500;
}

.ti-cost-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ti-primary);
}

.ti-cost-total .ti-cost-value {
  font-size: 22px;
}
/* Frequency Select */
.ti-frequency-select {
width: 100%;
padding: 14px 16px;
font-size: 15px;
font-weight: 500;
color: var(--ti-text);
background: #FFFFFF;
border: 2px solid var(--ti-border);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234F46E5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}.ti-frequency-select:hover {
border-color: var(--ti-primary);
}.ti-frequency-select:focus {
outline: none;
border-color: var(--ti-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}/* Formula Card */
.ti-formula-card {
background: #FFFFFF;
border: 2px solid var(--ti-border);
border-radius: 18px;
padding: 40px;
margin-bottom: 32px;
}.ti-formula-box {
background: linear-gradient(135deg, #F8F9FF 0%, #F0F2FF 100%);
padding: 32px;
border-radius: 14px;
margin-bottom: 24px;
border-left: 4px solid var(--ti-primary);
}.ti-formula-label {
font-size: 14px;
font-weight: 600;
color: var(--ti-text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}.ti-formula-text {
font-size: 24px;
font-weight: 700;
color: var(--ti-primary);
font-family: 'Courier New', monospace;
}.ti-formula-note {
font-size: 14px;
color: var(--ti-text-light);
margin-top: 8px;
font-style: italic;
}.ti-formula-secondary {
background: linear-gradient(135deg, #FFF8F0 0%, #FFF4E8 100%);
border-left-color: #F59E0B;
}.ti-formula-secondary .ti-formula-text {
color: #F59E0B;
font-size: 18px;
}.ti-formula-legend {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}.ti-legend-item {
font-size: 15px;
color: var(--ti-text);
padding: 12px;
background: var(--ti-bg-gray);
border-radius: 8px;
}.ti-legend-item strong {
color: var(--ti-primary);
font-weight: 700;
margin-right: 6px;
}/* Formula Example */
.ti-formula-example {
background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
padding: 24px;
border-radius: 14px;
border-left: 4px solid #10B981;
}.ti-example-title {
font-size: 18px;
font-weight: 700;
color: #065F46;
margin: 0 0 12px;
}.ti-example-text,
.ti-example-calc,
.ti-example-result {
font-size: 15px;
color: #047857;
margin: 8px 0;
line-height: 1.6;
}.ti-example-calc {
font-family: 'Courier New', monospace;
background: rgba(255, 255, 255, 0.5);
padding: 12px;
border-radius: 8px;
}.ti-example-result strong {
font-size: 18px;
color: #065F46;
}/* Comparison Specific */
.ti-comparison-amount {
font-size: 36px;
font-weight: 700;
color: var(--ti-primary);
margin: 20px 0;
text-align: center;
}.ti-comparison-details {
display: flex;
flex-direction: column;
gap: 12px;
}.ti-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: var(--ti-bg-gray);
border-radius: 8px;
font-size: 14px;
}.ti-detail-row span {
color: var(--ti-text-light);
}.ti-detail-row strong {
color: var(--ti-text);
font-weight: 600;
}.ti-comparison-highlight {
border: 3px solid #F59E0B;
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2);
}.ti-comparison-highlight .ti-comparison-amount {
color: #F59E0B;
}.ti-badge-green {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}.ti-badge-blue {
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
color:#fff;
}.ti-badge-gold {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}.ti-frequency-note {
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
padding: 20px 24px;
border-radius: 14px;
border-left: 4px solid #F59E0B;
margin-top: 32px;
}.ti-frequency-note p {
margin: 0;
color: #92400E;
font-size: 16px;
line-height: 1.6;
}.ti-frequency-note strong {
color: #78350F;
font-weight: 700;
}/* Yearly Breakdown */
.ti-yearly-section {
margin-top: 40px;
}.ti-yearly-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 16px;
}.ti-yearly-heading {
font-size: 22px;
font-weight: 700;
color: var(--ti-text);
margin: 0;
}.ti-toggle-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--ti-bg-gray);
border: 2px solid var(--ti-border);
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: var(--ti-primary);
cursor: pointer;
transition: all 0.2s;
}.ti-toggle-btn:hover {
background: var(--ti-primary);
color: #FFFFFF;
border-color: var(--ti-primary);
}.ti-toggle-btn svg {
transition: transform 0.2s;
}.ti-toggle-btn:hover svg {
transform: translateY(2px);
}.ti-yearly-table-wrapper {
overflow-x: auto;
background: #FFFFFF;
border: 2px solid var(--ti-border);
border-radius: 14px;
padding: 20px;
}.ti-yearly-table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}.ti-yearly-table thead tr {
background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-primary-dark) 100%);
color: #FFFFFF;
}.ti-yearly-table th {
padding: 14px 16px;
text-align: left;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}.ti-yearly-table th:first-child {
border-top-left-radius: 10px;
}.ti-yearly-table th:last-child {
border-top-right-radius: 10px;
}.ti-yearly-table tbody tr {
border-bottom: 1px solid var(--ti-border);
transition: background 0.2s;
}.ti-yearly-table tbody tr:hover {
background: var(--ti-bg-gray);
}.ti-yearly-table tbody tr:last-child {
border-bottom: none;
}.ti-yearly-table td {
padding: 14px 16px;
font-size: 15px;
color: var(--ti-text);
}.ti-yearly-table td:first-child {
font-weight: 700;
color: var(--ti-primary);
}@media (max-width: 768px) {
.ti-formula-card {
padding: 24px;
}.ti-formula-box {
padding: 20px;
}.ti-formula-text {
font-size: 18px;
}.ti-formula-secondary .ti-formula-text {
font-size: 16px;
}.ti-comparison-amount {
font-size: 28px;
}.ti-yearly-header {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
   SIMPLE INTEREST CALCULATOR SPECIFIC STYLES
   ============================================================ */

/* Monthly Breakdown Section */
.ti-monthly-section {
  margin-top: 40px;
  padding: 32px;
  background: var(--ti-bg-gray);
  border-radius: 18px;
}

.ti-monthly-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 24px;
  text-align: center;
}

.ti-monthly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.ti-monthly-card {
  padding: 24px;
  background: #FFFFFF;
  border: 2px solid var(--ti-border);
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-monthly-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ti-shadow-md);
  border-color: var(--ti-primary);
}

.ti-monthly-label {
  font-size: 14px;
  color: var(--ti-text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.ti-monthly-value {
font-size: 32px;
font-weight: 700;
color: var(--ti-primary);
margin-bottom: 8px;
}
.ti-monthly-note {
font-size: 13px;
color: var(--ti-text-light);
font-style: italic;
}
@media (max-width: 768px) {
.ti-monthly-grid {
grid-template-columns: 1fr;
}
}
/* Retirement Section */
.ti-retirement-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  border-radius: 18px;
  border: 2px solid #BAE6FD;
}

.ti-retirement-heading {
  font-size: 22px;
  font-weight: 700;
  color: #075985;
  margin: 0 0 24px;
  text-align: center;
}

.ti-retirement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.ti-retirement-card {
  padding: 24px;
  background: #FFFFFF;
  border: 2px solid #7DD3FC;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-retirement-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.2);
  border-color: #0EA5E9;
}

.ti-retirement-highlight {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #F59E0B;
}

.ti-retirement-highlight:hover {
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}

.ti-retirement-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.ti-retirement-label {
  font-size: 14px;
  color: var(--ti-text-light);
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ti-retirement-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ti-primary);
}

.ti-retirement-highlight .ti-retirement-value {
  color: #D97706;
  font-size: 28px;
}

/* Tax Section */
.ti-tax-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
  border-radius: 18px;
  border: 2px solid #BBF7D0;
}

.ti-tax-heading {
  font-size: 22px;
  font-weight: 700;
  color: #065F46;
  margin: 0 0 24px;
  text-align: center;
}

.ti-tax-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.ti-tax-card {
  padding: 24px;
  background: #FFFFFF;
  border: 2px solid #86EFAC;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-tax-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2);
  border-color: #10B981;
}

.ti-tax-label {
  font-size: 14px;
  color: #047857;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ti-tax-value {
  font-size: 28px;
  font-weight: 700;
  color: #059669;
}

.ti-tax-note {
  background: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #10B981;
}

.ti-tax-note p {
  margin: 0;
  color: #065F46;
  font-size: 14px;
  line-height: 1.6;
}

.ti-tax-note strong {
  color: #047857;
  font-weight: 700;
}

@media (max-width: 768px) {
  .ti-retirement-grid,
  .ti-tax-grid {
    grid-template-columns: 1fr;
  }

  .ti-retirement-value {
    font-size: 20px;
  }

  .ti-retirement-highlight .ti-retirement-value {
    font-size: 24px;
  }

  .ti-tax-value {
    font-size: 24px;
  }
}
/* ============================================================
   SWP CALCULATOR SPECIFIC STYLES
   ============================================================ */

/* Sustainability Section */
.ti-sustainability-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-radius: 18px;
  border: 2px solid #FCD34D;
}

.ti-sustainability-heading {
  font-size: 22px;
  font-weight: 700;
  color: #92400E;
  margin: 0 0 24px;
  text-align: center;
}

.ti-sustainability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.ti-sustainability-card {
  padding: 24px;
  background: #FFFFFF;
  border: 2px solid #FBBF24;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-sustainability-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3);
  border-color: #F59E0B;
}

.ti-sustainability-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.ti-sustainability-label {
  font-size: 14px;
  color: #92400E;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ti-sustainability-value {
  font-size: 28px;
  font-weight: 700;
  color: #D97706;
  margin-bottom: 8px;
}

.ti-sustainability-note {
  font-size: 13px;
  color: #B45309;
  font-style: italic;
}

@media (max-width: 768px) {
  .ti-sustainability-grid {
    grid-template-columns: 1fr;
  }

  .ti-sustainability-value {
    font-size: 24px;
  }
}
/* ADD TO style.css only if you want slightly better layout for BMR page */
.ti-bmr-grid {
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
}

@media (max-width: 968px) {
  .ti-bmr-grid {
    grid-template-columns: 1fr;
  }
}

/* Optional: make goal cards feel more clickable */
.ti-calorie-goal-card:focus {
  outline: none;
  box-shadow: var(--ti-shadow-sm), 0 0 0 3px rgba(79, 70, 229, 0.12);
}
<details class="ti-faq-item">
          <summary class="ti-faq-q">What is TDEE and why does it matter?</summary>
          <div class="ti-faq-a">
            <p>TDEE (Total Daily Energy Expenditure) is total calories your body burns per day including BMR, exercise, daily activities, and digestion. It's your maintenance calories. To lose weight: eat below TDEE (deficit). To gain muscle: eat above TDEE (surplus). To maintain: eat at TDEE. Knowing TDEE is foundation of any diet plan.</p>
          </div>
        </details>
    <details class="ti-faq-item">
      <summary class="ti-faq-q">How accurate is this TDEE calculator?</summary>
      <div class="ti-faq-a">
        <p>Uses Mifflin-St Jeor equation - most accurate formula validated by research. Accuracy ±5-10% for most people. Individual metabolism varies. Use as starting point, adjust based on real-world results. If not losing weight after 2 weeks, reduce calories by 100-200. If losing too fast (>1kg/week), add calories.</p>
      </div>
    </details>

    <details class="ti-faq-item">
      <summary class="ti-faq-q">What's the difference between BMR and TDEE?</summary>
      <div class="ti-faq-a">
        <p>BMR (Basal Metabolic Rate) = calories burned at complete rest (sleeping, breathing, organ function). TDEE = BMR × activity multiplier (includes exercise, walking, daily movement). Example: BMR 1,500 kcal, moderately active (1.55x) = TDEE 2,325 kcal. Never eat below BMR long-term - damages metabolism!</p>
      </div>
    </details>

    <details class="ti-faq-item">
      <summary class="ti-faq-q">How many calories should I eat to lose weight?</summary>
      <div class="ti-faq-a">
        <p>For safe weight loss: TDEE minus 250-500 kcal daily. 500 kcal deficit = 0.5kg loss/week (3,500 kcal = 0.5kg fat). Don't exceed 1kg/week loss - causes muscle loss, metabolic slowdown. Example: TDEE 2,400, eat 1,900-2,150 for fat loss. Combine with strength training to preserve muscle.</p>
      </div>
    </details>

    <details class="ti-faq-item">
      <summary class="ti-faq-q">What are macros and why do they matter?</summary>
      <div class="ti-faq-a">
        <p>Macros (macronutrients) = protein, carbs, fats. Not all calories equal! Protein: 4 kcal/g (muscle building, satiety). Carbs: 4 kcal/g (energy, performance). Fats: 9 kcal/g (hormones, health). Optimal ratio for most: 25% protein, 50% carbs, 25% fats. High protein preserves muscle during fat loss. Track macros, not just calories!</p>
      </div>
    </details>

    <details class="ti-faq-item">
      <summary class="ti-faq-q">Should I eat back calories burned from exercise?</summary>
      <div class="ti-faq-a">
        <p>No! Activity level already accounts for exercise. Fitness trackers overestimate calories burned by 20-30%. Eating back "burned" calories sabotages deficit. Exception: endurance athletes (marathon training, ultra-cycling) may need extra fuel. For general fitness, stick to calculated TDEE target regardless of daily exercise.</p>
      </div>
    </details>

    <details class="ti-faq-item">
      <summary class="ti-faq-q">Why am I not losing weight eating at a deficit?</summary>
      <div class="ti-faq-a">
        <p>Common reasons: (1) Underestimating food intake - weigh everything! (2) Overestimating activity level - be honest. (3) Not enough time - give it 3-4 weeks. (4) Water retention from high sodium, carbs, new exercise. (5) Metabolic adaptation - recalculate TDEE after 10kg loss. Solution: track accurately, be patient, adjust every 2-4 weeks.</p>
      </div>
    </details>

    <details class="ti-faq-item">
      <summary class="ti-faq-q">Can I build muscle and lose fat simultaneously?</summary>
      <div class="ti-faq-a">
        <p>Yes, but only for beginners (training <1 year) or returning after break. Called "body recomposition." Requires: slight calorie deficit (TDEE -200 to -300), high protein (2g/kg), progressive strength training 4×/week. Advanced lifters must choose: bulk (surplus + muscle gain + some fat) or cut (deficit + fat loss + preserve muscle). Can't optimize both simultaneously.</p>
      </div>
    </details>

  </div>
</div>
  </div>
</div>
````

🎨 ADD TO style.css (NEW STYLES NEEDED):
css/* ============================================================
   TDEE CALCULATOR SPECIFIC STYLES
   ============================================================ */

/* Gender Selection */
.ti-gender-group {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.ti-gender-btn {
  flex: 1;
  padding: 16px;
  background: #F3F4F6;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ti-text);
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ti-gender-btn:hover {
  background: #E0E7FF;
  border-color: var(--ti-primary);
}

.ti-gender-btn.active {
  background: var(--ti-primary);
  border-color: var(--ti-primary);
  color: #FFFFFF;
}

.ti-gender-btn svg {
  transition: all 0.3s;
}

.ti-gender-btn.active svg {
  stroke: #FFFFFF;
}

/* Macros Section */
.ti-macros-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-radius: 18px;
  border: 2px solid #FCD34D;
}

.ti-macros-heading {
  font-size: 22px;
  font-weight: 700;
  color: #92400E;
  margin: 0 0 24px;
  text-align: center;
}

.ti-macros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.ti-macro-card {
  padding: 24px;
  background: #FFFFFF;
  border: 2px solid #FBBF24;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-macro-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3);
  border-color: #F59E0B;
}

.ti-macro-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.ti-macro-label {
  font-size: 14px;
  color: #92400E;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.ti-macro-value {
  font-size: 32px;
  font-weight: 700;
  color: #D97706;
  margin-bottom: 8px;
}

.ti-macro-calories {
  font-size: 15px;
  color: #B45309;
  font-weight: 600;
  margin-bottom: 8px;
}

.ti-macro-note {
  font-size: 13px;
  color: #92400E;
  font-style: italic;
}

/* BMI Section */
.ti-bmi-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  border-radius: 18px;
  border: 2px solid #93C5FD;
}

.ti-bmi-heading {
  font-size: 22px;
  font-weight: 700;
  color: #1E40AF;
  margin: 0 0 24px;
  text-align: center;
}

.ti-bmi-display {
  text-align: center;
  margin-bottom: 32px;
}

.ti-bmi-value-large {
  font-size: 56px;
  font-weight: 700;
  color: #1E40AF;
  line-height: 1;
  margin-bottom: 12px;
}

.ti-bmi-category {
  font-size: 24px;
  font-weight: 600;
  color: #10B981;
  margin-bottom: 8px;
}

.ti-bmi-range {
  font-size: 16px;
  color: #1E40AF;
}

.ti-bmi-scale {
  position: relative;
  margin-top: 24px;
}

.ti-bmi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ti-bmi-segment {
  padding: 20px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.4;
}

.ti-bmi-underweight {
  background: #3B82F6;
}

.ti-bmi-normal {
  background: #10B981;
}

.ti-bmi-overweight {
  background: #F59E0B;
}

.ti-bmi-obese {
  background: #EF4444;
}

.ti-bmi-pointer {
  position: absolute;
  top: -12px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #1E40AF;
  transform: translateX(-50%);
  transition: left 0.3s;
}

/* Weekly Section */
.ti-weekly-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
  border-radius: 18px;
  border: 2px solid #D8B4FE;
}

.ti-weekly-heading {
  font-size: 22px;
  font-weight: 700;
  color: #6B21A8;
  margin: 0 0 24px;
  text-align: center;
}

.ti-weekly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.ti-weekly-card {
  padding: 24px;
  background: #FFFFFF;
  border: 2px solid #C084FC;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-weekly-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3);
  border-color: #A855F7;
}

.ti-weekly-label {
  font-size: 14px;
  color: #6B21A8;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ti-weekly-value {
  font-size: 28px;
  font-weight: 700;
  color: #7C3AED;
}

@media (max-width: 768px) {
  .ti-macros-grid,
  .ti-weekly-grid {
    grid-template-columns: 1fr;
  }

  .ti-bmi-value-large {
    font-size: 42px;
  }

  .ti-bmi-category {
    font-size: 20px;
  }

  .ti-bmi-segment {
    font-size: 11px;
    padding: 16px 8px;
  }}
  .ti-gender-group {
    display: flex;
    gap: 10px;
}
/* Body Fat Section */
.ti-bodyfat-section {
margin-top: 40px;
padding: 32px;
background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
border-radius: 18px;
border: 2px solid #C4B5FD;
}.ti-bodyfat-heading {
font-size: 22px;
font-weight: 700;
color: #5B21B6;
margin: 0 0 24px;
text-align: center;
}.ti-bodyfat-display {
text-align: center;
margin-bottom: 32px;
}.ti-bodyfat-value-large {
font-size: 56px;
font-weight: 700;
color: #7C3AED;
line-height: 1;
margin-bottom: 12px;
}.ti-bodyfat-category {
font-size: 24px;
font-weight: 600;
color: #10B981;
margin-bottom: 8px;
}.ti-bodyfat-range {
font-size: 16px;
color: #5B21B6;
}.ti-bodyfat-scale {
position: relative;
margin-top: 24px;
}.ti-bodyfat-bar {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}.ti-bodyfat-segment {
padding: 20px 12px;
text-align: center;
font-size: 13px;
font-weight: 600;
color: #FFFFFF;
line-height: 1.4;
}.ti-bf-essential {
background: #3B82F6;
}.ti-bf-athletes {
background: #10B981;
}.ti-bf-fitness {
background: #F59E0B;
}.ti-bf-average {
background: #EF4444;
}.ti-bf-obese {
background: #991B1B;
}.ti-bodyfat-pointer {
position: absolute;
top: -12px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 12px solid #5B21B6;
transform: translateX(-50%);
transition: left 0.3s;
}/* Ideal Section */
.ti-ideal-section {
margin-top: 40px;
padding: 32px;
background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
border-radius: 18px;
border: 2px solid #93C5FD;
}.ti-ideal-heading {
font-size: 22px;
font-weight: 700;
color: #1E40AF;
margin: 0 0 24px;
text-align: center;
}.ti-ideal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}.ti-ideal-card {
padding: 24px;
background: #FFFFFF;
border: 2px solid #60A5FA;
border-radius: 14px;
text-align: center;
transition: all 0.3s;
}.ti-ideal-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}.ti-ideal-highlight {
background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
border-color: #FBBF24;
}.ti-ideal-label {
font-size: 14px;
color: #1E40AF;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}.ti-ideal-value {
font-size: 32px;
font-weight: 700;
color: #2563EB;
}.ti-ideal-highlight .ti-ideal-value {
color: #D97706;
}/* Guide Section */
.ti-guide-section {
margin-top: 40px;
padding: 32px;
background: #F9FAFB;
border-radius: 18px;
border: 2px solid #E5E7EB;
}.ti-guide-heading {
font-size: 22px;
font-weight: 700;
color: var(--ti-text);
margin: 0 0 24px;
text-align: center;
}.ti-guide-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}.ti-guide-card {
padding: 24px;
background: #FFFFFF;
border: 2px solid #E5E7EB;
border-radius: 14px;
transition: all 0.3s;
}.ti-guide-card:hover {
border-color: var(--ti-primary);
box-shadow: var(--ti-shadow-md);
}.ti-guide-icon {
font-size: 36px;
margin-bottom: 12px;
text-align: center;
}.ti-guide-title {
font-size: 18px;
font-weight: 700;
color: var(--ti-text);
margin: 0 0 12px;
text-align: center;
}.ti-guide-text {
font-size: 14px;
color: var(--ti-text-light);
line-height: 1.6;
margin: 0;
text-align: center;
}/* Pink badge variant */
.ti-badge-pink {
background: #EC4899;
color: #FFFFFF;
}@media (max-width: 768px) {
.ti-bodyfat-value-large {
font-size: 42px;
}.ti-bodyfat-category {
font-size: 20px;
}.ti-bodyfat-segment {
font-size: 11px;
padding: 16px 8px;
}.ti-ideal-grid,
.ti-guide-grid {
grid-template-columns: 1fr;
}.ti-ideal-value {
font-size: 28px;
}
}
/* ============================================================
   IDEAL WEIGHT CALCULATOR SPECIFIC STYLES
   ============================================================ */

/* Frame Note */
.ti-frame-note {
  margin-top: 8px;
  padding: 8px 12px;
  background: #F3F4F6;
  border-radius: 8px;
}

.ti-frame-note small {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.4;
}

/* Healthy Weight Range Section */
.ti-range-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  border-radius: 18px;
  border: 2px solid #6EE7B7;
}

.ti-range-heading {
  font-size: 22px;
  font-weight: 700;
  color: #065F46;
  margin: 0 0 24px;
  text-align: center;
}

.ti-range-display {
  text-align: center;
  margin-bottom: 32px;
}

.ti-range-value-large {
  font-size: 48px;
  font-weight: 700;
  color: #059669;
  line-height: 1;
  margin-bottom: 12px;
}

.ti-range-note {
  font-size: 16px;
  color: #047857;
}

.ti-range-visual {
  position: relative;
  margin-top: 48px;
}

.ti-range-bar {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ti-range-segment {
  padding: 20px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.4;
}

.ti-range-underweight {
  background: #3B82F6;
}

.ti-range-healthy {
  background: #10B981;
}

.ti-range-overweight {
  background: #EF4444;
}

.ti-range-marker {
  position: absolute;
  top: -40px;
  transform: translateX(-50%);
  transition: left 0.3s;
}

.ti-marker-label {
  background: #065F46;
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  margin-bottom: 4px;
}

.ti-marker-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #065F46;
  margin: 0 auto;
}

/* Formulas Section */
.ti-formulas-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
  border-radius: 18px;
  border: 2px solid #C4B5FD;
}

.ti-formulas-heading {
  font-size: 22px;
  font-weight: 700;
  color: #5B21B6;
  margin: 0 0 24px;
  text-align: center;
}

.ti-formulas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.ti-formula-card {
  padding: 24px;
  background: #FFFFFF;
  border: 2px solid #A78BFA;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-formula-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
  border-color: #7C3AED;
}

.ti-formula-name {
  font-size: 14px;
  color: #5B21B6;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ti-formula-value {
  font-size: 32px;
  font-weight: 700;
  color: #7C3AED;
  margin-bottom: 8px;
}

.ti-formula-note {
  font-size: 13px;
  color: #6B21A8;
  font-style: italic;
}

.ti-formula-average {
  text-align: center;
  font-size: 18px;
  color: #5B21B6;
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
}

.ti-formula-average span {
  font-size: 24px;
  font-weight: 700;
  color: #7C3AED;
  margin-left: 8px;
}

/* Timeline Section */
.ti-timeline-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-radius: 18px;
  border: 2px solid #FCD34D;
}

.ti-timeline-heading {
  font-size: 22px;
  font-weight: 700;
  color: #92400E;
  margin: 0 0 24px;
  text-align: center;
}

.ti-timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.ti-timeline-card {
  padding: 24px;
  background: #FFFFFF;
  border: 2px solid #FBBF24;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-timeline-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3);
}

.ti-timeline-highlight {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  border-color: #60A5FA;
}

.ti-timeline-label {
  font-size: 14px;
  color: #92400E;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ti-timeline-highlight .ti-timeline-label {
  color: #1E40AF;
}

.ti-timeline-value {
  font-size: 36px;
  font-weight: 700;
  color: #D97706;
  margin-bottom: 8px;
}

.ti-timeline-highlight .ti-timeline-value {
  color: #2563EB;
}

.ti-timeline-note {
  font-size: 13px;
  color: #B45309;
  font-style: italic;
}

.ti-timeline-highlight .ti-timeline-note {
  color: #1E40AF;
}

/* Formula Box */
.ti-formula-box {
  background: rgba(255, 255, 255, 0.5);
  padding: 16px;
  border-radius: 10px;
  margin: 16px 0;
}

.ti-formula-text {
  font-size: 14px;
  color: var(--ti-text);
  font-weight: 600;
  margin: 8px 0;
  font-family: 'Courier New', monospace;
}

/* Badge Variants */
.ti-badge-green {
  background: #10B981;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .ti-range-value-large {
    font-size: 36px;
  }

  .ti-range-segment {
    font-size: 12px;
    padding: 16px 8px;
  }

  .ti-formulas-grid,
  .ti-timeline-grid {
    grid-template-columns: 1fr;
  }

  .ti-formula-value {
    font-size: 28px;
  }

  .ti-timeline-value {
    font-size: 32px;
  }
}
/* ============================================================
   LEAN BODY MASS CALCULATOR SPECIFIC STYLES
   ============================================================ */

/* Input Note */
.ti-input-note {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(79, 70, 229, 0.05);
  border-radius: 8px;
}

.ti-input-note small {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.4;
}

/* LBM Formulas Section */
.ti-lbm-formulas {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
  border-radius: 18px;
  border: 2px solid #C4B5FD;
}

.ti-lbm-heading {
  font-size: 22px;
  font-weight: 700;
  color: #5B21B6;
  margin: 0 0 24px;
  text-align: center;
}

.ti-lbm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ti-lbm-card {
  padding: 24px;
  background: #FFFFFF;
  border: 2px solid #A78BFA;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-lbm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
  border-color: #7C3AED;
}

.ti-lbm-name {
  font-size: 14px;
  color: #5B21B6;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ti-lbm-value {
  font-size: 32px;
  font-weight: 700;
  color: #7C3AED;
  margin-bottom: 8px;
}

.ti-lbm-note {
  font-size: 13px;
  color: #6B21A8;
  font-style: italic;
}

.ti-lbm-average {
  text-align: center;
  font-size: 18px;
  color: #5B21B6;
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
}

.ti-lbm-average span {
  font-size: 24px;
  font-weight: 700;
  color: #7C3AED;
  margin-left: 8px;
}

/* Composition Section */
.ti-composition-section {
  margin-top: 40px;
  padding: 32px;
  background: var(--ti-bg-gray);
  border-radius: 18px;
}

.ti-composition-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--ti-text);
  margin: 0 0 24px;
  text-align: center;
}

.ti-composition-chart {
  max-width: 320px;
  margin: 0 auto 28px;
}

.ti-composition-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.ti-comp-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ti-comp-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ti-comp-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ti-comp-label {
  font-size: 14px;
  color: var(--ti-text-light);
  font-weight: 500;
}

.ti-comp-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ti-text);
}

/* LBM Categories */
.ti-lbm-categories {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  border-radius: 18px;
  border: 2px solid #6EE7B7;
}

.ti-lbm-cat-heading {
  font-size: 22px;
  font-weight: 700;
  color: #065F46;
  margin: 0 0 24px;
  text-align: center;
}

.ti-lbm-cat-display {
  text-align: center;
  margin-bottom: 32px;
}

.ti-lbm-cat-value {
  font-size: 36px;
  font-weight: 700;
  color: #059669;
  margin-bottom: 8px;
}

.ti-lbm-cat-desc {
  font-size: 16px;
  color: #047857;
}

.ti-lbm-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.ti-cat-item {
  padding: 16px;
  background: #FFFFFF;
  border: 2px solid #6EE7B7;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s;
}

.ti-cat-item:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.ti-cat-highlight {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10B981;
}

.ti-cat-label {
  font-size: 13px;
  color: #065F46;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ti-cat-range {
  font-size: 18px;
  font-weight: 700;
  color: #059669;
}

/* Goals Section */
.ti-goals-section {
  margin-top: 40px;
  padding: 32px;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  border-radius: 18px;
  border: 2px solid #93C5FD;
}

.ti-goals-heading {
  font-size: 22px;
  font-weight: 700;
  color: #1E40AF;
  margin: 0 0 24px;
  text-align: center;
}

.ti-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.ti-goal-card {
  padding: 20px;
  background: #FFFFFF;
  border: 2px solid #60A5FA;
  border-radius: 14px;
  text-align: center;
  transition: all 0.3s;
}

.ti-goal-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
  border-color: #2563EB;
}

.ti-goal-label {
  font-size: 13px;
  color: #1E40AF;
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ti-goal-value {
  font-size: 28px;
  font-weight: 700;
  color: #2563EB;
  margin-bottom: 6px;
}

.ti-goal-note {
  font-size: 12px;
  color: #3B82F6;
  font-style: italic;
}

@media (max-width: 768px) {
  .ti-lbm-grid {
    grid-template-columns: 1fr;
  }

  .ti-lbm-cat-grid {
    grid-template-columns: 1fr;
  }

  .ti-goals-grid {
    grid-template-columns: 1fr;
  }

  .ti-composition-stats {
    flex-direction: column;
    gap: 20px;
  }
}
/* ============================================================
   END CALCULATOR STYLES
   ============================================================ */