:root {
      --nissan-red:     #c3002f;
      --nissan-black:   #1a1a1a;
      --nissan-gray:    #6b6b6b;
      --nissan-light:   #f5f5f5;
      --nissan-border:  #e0e0e0;
      --cng-green:      #1f7a3c;
      --cng-green-bg:   #e8f5ed;
      --cng-green-mid:  #2e9e52;
      --petrol-red:     #d93025;
      --petrol-red-bg:  #fdecea;
      --white:          #ffffff;
      --card-radius:    12px;
      --font:           'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    }



    /* ─── Header / Nav ──────────────────────────────────── */
    .nissan-header {
      display: flex;
      align-items: center;
      padding: 14px 40px;
      border-bottom: 1px solid var(--nissan-border);
      background: #fff;
    }
    .nissan-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }
    .nissan-logo svg { width: 56px; height: 56px; }
    .nissan-logo-text {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--nissan-black);
      text-transform: uppercase;
    }

    /* ─── Main Container ────────────────────────────────── */
    .calculator-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 30px 40px 60px;
    }

    /* ─── Hero Section ──────────────────────────────────── */
    .calc-hero {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 25px;
    }
    .calc-hero-left { flex: 1; }
    .calc-title {
      font-size: 30px;
      font-weight: 700;
      color: var(--nissan-black);
      margin-bottom: 6px;
      letter-spacing: -0.4px;
		  font-family: 'nissan_brandbold';
    }
    .calc-subtitle {
      font-size: 13.5px;
      color: var(--nissan-gray);
      margin-bottom:15px;
    }
    .est-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.6px;
      color: var(--nissan-gray);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .est-amount {
      font-size: 54px;
     font-weight: 800;
      color: var(--cng-green);
      line-height: 1;
      letter-spacing: -1px;
      margin-bottom: 14px;
		    font-family: 'nissan_brandbold';
    }
    .est-monthly-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--cng-green-bg);
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 13.5px;
      color: var(--nissan-black);
    }
    .est-monthly-badge .badge-amount {
      font-weight: 700;
      color: var(--cng-green);
    }
    .est-monthly-badge svg { color: var(--cng-green); }


    .calc-hero-img {
      flex: 0 0 420px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .calc-hero-img img {
      width: 100%;
      max-width: 420px;
      object-fit: contain;
      filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
    }

 
    .calc-card {
      background: var(--white);
      border: 1.5px solid var(--nissan-border);
      border-radius: var(--card-radius);
      padding: 15px 32px;
      margin-bottom: 20px;
    }
    .card-section-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: var(--nissan-black);
      margin-bottom: 10px;
    }

    /* ─── Input Controls Grid ────────────────────────────── */
    .input-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .input-item {
      border: 1.5px solid var(--nissan-border);
      border-radius: 10px;
      padding:8px 15px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }
    .input-item.green-accent { border-color: var(--cng-green); }
    .input-item.red-accent   { border-color: var(--petrol-red); }

    .input-icon-label {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .icon-circle {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .icon-circle.green { background: var(--cng-green-bg); }
    .icon-circle.red   { background: var(--petrol-red-bg); }
    .icon-circle svg   { width: 17px; height: 17px; }

    .input-label {
      font-size: 12.5px;
      color: var(--nissan-gray);
      font-weight: 500;
    }

    .stepper {
      display: flex;
      align-items: center;
      gap: 0;
    }
    .stepper-btn {
      width: 25px;
      height: 25px;
      border: 1.5px solid var(--nissan-border);
      background: var(--white);
      border-radius: 6px;
      font-size: 18px;
      font-weight: 600;
      color: var(--nissan-black);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
      flex-shrink: 0;
      line-height: 1;
    }
    .stepper-btn:hover { background: var(--nissan-light); border-color: #bbb; }
    .stepper-val {
      flex: 1;
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      color: var(--nissan-black);
      border: none;
      outline: none;
      background: transparent;
      width: 60px;
      min-width: 0;
    }

    .stepper-val::-webkit-inner-spin-button,
    .stepper-val::-webkit-outer-spin-button { -webkit-appearance: none; }
    .stepper-val[type=number] { -moz-appearance: textfield; }

    .unit-label {
      font-size: 11px;
      color: var(--nissan-gray);
      margin-left: 4px;
      font-weight: 500;
    }

    .stepper-row {
      display: flex;
      align-items: center;
    }

  
    .savings-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }
    .savings-item {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 10px 0;
    }
    .savings-item + .savings-item {
      padding-left: 32px;
      border-left: 1.5px solid var(--nissan-border);
      margin-left: 32px;
    }
    .savings-icon-circle {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .savings-icon-circle.red   { background: var(--petrol-red-bg); }
    .savings-icon-circle.green { background: var(--cng-green-bg); }
    .savings-icon-circle svg { width: 24px; height: 24px; }

    .savings-info {}
    .savings-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--nissan-gray);
      margin-bottom: 4px;
    }
    .savings-amount {
      font-size: 28px;
      font-weight: 800;
		  font-family: 'nissan_brandbold';
      color: var(--cng-green);
      letter-spacing: -0.5px;
    }

    /* ─── Bottom Bar ─────────────────────────────────────── */
    .bottom-bar {
      display: flex;
      align-items: center;
      gap: 0;
      padding-top: 22px;
      border-top: 1.5px solid var(--nissan-border);
      margin-top: 4px;
    }
    .bottom-item {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
    }
    .bottom-item + .bottom-item {
      padding-left: 32px;
      border-left: 1.5px solid var(--nissan-border);
      margin-left: 32px;
    }
    .bottom-icon-circle {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--nissan-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .bottom-icon-circle svg { width: 22px; height: 22px; color: var(--nissan-gray); }

    .bottom-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--nissan-gray);
      margin-right: 10px;
    }
    .bottom-fuel-row {
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .fuel-entry {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: var(--nissan-gray);
    }
    .fuel-entry strong {
      font-size: 18px;
      font-weight: 800;
      color: var(--petrol-red);
    }
    .fuel-entry.cng strong { color: var(--cng-green); }
    .fuel-divider {
      width: 1.5px;
      height: 20px;
      background: var(--nissan-border);
    }
    .recovery-num {
      font-size: 28px;
      font-weight: 800;
      color: var(--nissan-black);
    }
    .recovery-unit {
      font-size: 14px;
      color: var(--nissan-gray);
      font-weight: 500;
    }

    /* ─── Disclaimer ─────────────────────────────────────── */
    .disclaimer {
      font-size: 11.5px;
      color: #999;
      margin-top: 14px;
    }

    /* ─── Responsive ─────────────────────────────────────── */
@media only screen and (max-width: 900px) {
      .input-grid { grid-template-columns: repeat(2, 1fr); }
      .calc-hero { flex-direction: column; }
      .calc-hero-img { flex: none; width: 100%; }
      .savings-grid { grid-template-columns: 1fr; }
      .savings-item + .savings-item { border-left: none; margin-left: 0; padding-left: 0; border-top: 1.5px solid var(--nissan-border); padding-top: 16px; margin-top: 16px; }
      .bottom-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
      .bottom-item + .bottom-item { border-left: none; padding-left: 0; margin-left: 0; border-top: 1.5px solid var(--nissan-border); padding-top: 16px; width: 100%; }
    }
@media only screen and (max-width: 767px) {
      .input-grid { grid-template-columns: repeat(2, 1fr); }
      .calculator-wrapper { padding: 20px 18px 40px; }
      .est-amount { font-size: 40px; }
      .calc-title { font-size: 22px; }
		.calc-card{padding: 10px 12px}	
		.icon-circle{height: 22px; width:22px;}	
		.input-item{padding: 8px 7px;}
	.input-label {font-size: 11.5px;}
	.stepper-val{font-size: 18px;}
	.bottom-icon-circle {
  width: 24px;
		height: 24px;}
	.bottom-item{flex-wrap: wrap;}
    }