#content .page-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
      }

      #content .page-title-text {
          margin: 0;
      }

      #content .application-helper-note {
          display: flex;
          align-items: center;
          gap: 14px;
          width: 100%;
          padding: 8px 12px;
          border: 1px solid #f7c97a;
          border-left: 6px solid #ef8f00;
          border-radius: 12px;
          background: linear-gradient(135deg, #fff8e8 0%, #fff1cc 100%);
          box-shadow: 0 10px 22px rgba(239, 143, 0, 0.12);
      }

      #content .helper-note-badge {
          flex: 0 0 auto;
          padding: 8px 12px;
          border-radius: 999px;
          background: #c94f00;
          color: #fff;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.3px;
          text-transform: uppercase;
      }

      #content .helper-note-content {
          color: #8a3d00;
          font-size: 15px;
          line-height: 1.6;
          font-weight: 600;
      }

      #content .helper-note-content p {
          margin: 0;
      }

      #content .page-head .form-group {
          margin: 0;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      #content .page-head label {
          margin: 0;
      }

      #content .page-head select {
          min-width: 160px;
      }

      #content .section-head-border {
          margin: 8px 0 16px;
      }

      @media (max-width: 767px) {
          #content .application-helper-note {
              align-items: flex-start;
              flex-direction: column;
              gap: 10px;
          }
      }


      .sup_text_required {
          color: #dc2626;
          font-size: 11px;
          font-weight: 700;
          vertical-align: super;
          line-height: 0;
      }

      .nopadding {
          padding: 0 !important;
          margin: 0 !important;
      }

      label {
          font-size: 12px !important;
          font-weight: 600;
          color: #1e293b;
          margin-bottom: 4px;
      }

      .label-orange {
          color: #f57c00 !important;
          font-weight: 700;
      }

      .panel-base {
          border-radius: 14px !important;
          border: 1px solid #e2e8f0 !important;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
          overflow: hidden;
          transition: box-shadow 0.3s ease;
      }

      .panel-base:hover {
          box-shadow: 0 6px 28px rgba(0, 0, 0, 0.07) !important;
      }

      .panel-base>.panel-heading {
          background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%) !important;
          color: #fff !important;
          padding: 12px 15px !important;;
          border-bottom: none !important;
      }

      .panel-base>.panel-heading h3 {
          margin: 0;
          font-size: 12px;
          font-weight: 700;
          color: #fff;
          letter-spacing: 0.3px;
      }

      .panel-base>.panel-body {
          padding: 22px 18px !important;
      }

      .panel-default-inner {
          border-radius: 12px !important;
          border: 1px solid #e2e8f0 !important;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
      }

      .panel-default-inner>.panel-heading {
          background: linear-gradient(135deg, #f1f5f9 0%, #e9eef3 100%) !important;
          padding: 10px 10px !important;
          border-bottom: 1px solid #e2e8f0 !important;
          border-radius: 12px 12px 0 0 !important;
      }

      .panel-default-inner>.panel-heading h3 {
          margin: 0;
          font-size: 14px;
          font-weight: 700;
          color: #1e293b;
      }

      .index-column {
          display: flex;
          align-items: flex-start;
          justify-content: center;
          padding-top: 6px;
      }

      .index-number {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
          color: #fff;
          font-size: 15px;
          font-weight: 800;
          box-shadow: 0 4px 10px rgba(30, 58, 95, 0.25);
      }

      hr.section-head-border {
          border: 0;
          height: 2px;
          background: linear-gradient(90deg, #1e3a5f, transparent);
          opacity: 0.2;
          margin: 6px 0 14px;
      }

      .edit-repeater {
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 10px;
          padding: 12px 8px;
          margin-bottom: 10px;
          transition: all 0.2s ease;
      }

      .edit-repeater:hover {
          background: #f1f5f9;
          border-color: #cbd5e1;
      }

      #inflammable-goods-repeater,
      #institution-details-inspection-repeater>div[style*="border"] {
          background: #f8fafc;
          border-radius: 10px;
          padding: 14px 8px;
          margin-bottom: 8px;
          transition: all 0.2s ease;
      }

      .btn-add-new {
          background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
          border: none !important;
          border-radius: 8px !important;
          font-weight: 700 !important;
          font-size: 12px !important;
          padding: 6px 14px !important;
          color: #fff !important;
          box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
          transition: all 0.2s ease !important;
      }

      .btn-add-new:hover {
          transform: translateY(-1px);
          box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35) !important;
      }

      .delete-row,
      .delete-row-institution-details-inspection,
      .remove-row,
      .remove-row-institution-details-inspection {
          background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
          border: none !important;
          border-radius: 8px !important;
          color: #fff !important;
          font-weight: 700 !important;
          padding: 6px 12px !important;
          box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
          transition: all 0.2s ease !important;
      }

      .delete-row:hover,
      .delete-row-institution-details-inspection:hover,
      .remove-row:hover,
      .remove-row-institution-details-inspection:hover {
          transform: translateY(-1px);
          box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35) !important;
      }

      .proprietor-block-head {
          font-size: 14px;
          font-weight: 700;
          color: #1e293b;
          margin: 18px 0 12px;
          padding: 10px 14px;
          background: linear-gradient(135deg, #f1f5f9 0%, #e9eef3 100%);
          border-radius: 8px;
          border-left: 4px solid #2d5a8e;
      }

      .payment-showcase {
          display: inline-block;
          min-width: 360px;
          margin-left: 10px;
          padding: 12px 16px;
          text-align: left;
          vertical-align: middle;
          border: 1px solid #a9d0e2;
          border-radius: 4px;
          background: #cfe8f4;
      }

      .payment-showcase-title {
          margin: 0 0 8px;
          color: #1f5e82;
          font-size: 18px;
          font-weight: 700;
          line-height: 1.2;
      }

      .payment-showcase-title i {
          margin-right: 6px;
      }

      .payment-showcase-btn {
          display: inline-flex;
          align-items: center;
          justify-content: flex-start;
          gap: 6px;
          min-width: 120px;
          height: 34px;
          border: 0;
          border-radius: 3px;
          padding: 0 12px;
          background: #2f4764;
          color: #ffffff;
          font-size: 23px;
          font-weight: 600;
          line-height: 1;
          box-shadow: none;
      }

      .payment-showcase-btn:hover,
      .payment-showcase-btn:focus {
          background: #263c55;
          color: #ffffff;
      }

      .payment-showcase-btn[disabled] {
          opacity: 0.55;
          cursor: not-allowed;
          box-shadow: none;
      }

      /* Form Nav Action Area */
      #form-nav {
          margin-top: 18px;
          padding: 12px;
          border-top: 1px solid #dbe4ee;
      }

      .action-buttons-wrapper {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          align-items: center;
          justify-content: flex-end;
          padding: 10px 12px;
          border: 1px solid #e2e8f0;
          border-radius: 10px;
          background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      }

      .action-buttons-row {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          gap: 10px;
          align-items: center;
          justify-content: flex-start;
      }

      .action-buttons-row .btn {
          width: auto;
          flex: 0 0 auto;
          white-space: nowrap;
      }

      .fee_helper_text {
          width: 100%;
          margin: 0;
          padding: 11px 16px;
          border: 1px solid #abd8ee;
          border-radius: 8px;
          background: #d9f0fb;
          color: #17638b;
          font-size: 14px;
          line-height: 1.45;
      }

      .action-buttons-wrapper .btn {
          min-height: 40px;
          border-radius: 8px;
          font-weight: 700;
          letter-spacing: 0.1px;
          padding: 8px 14px;
      }

      #reset-application-form {
          background: #ffffff;
          border: 1px solid #cbd5e1;
          color: #0f172a;
      }

      #draft-btn {
          background: #1d3f66;
          border-color: #1d3f66;
          color: #ffffff;
      }

      #btnSubmit {
          background: #2f9e44;
          border-color: #2f9e44;
          color: #ffffff;
      }

      #btnSubmit:hover:not(:disabled),
      #btnSubmit:focus:not(:disabled) {
          background: #27873a;
          border-color: #27873a;
      }

      .payment-primary-btn {
          background: linear-gradient(135deg, #6d7be0 0%, #6b4fb3 100%);
          border: none;
          min-height: 40px;
          padding: 8px 18px;
          border-radius: 8px;
          color: white;
          font-weight: 700;
          font-size: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: inline-flex;
          align-items: center;
          gap: 7px;
          box-shadow: 0 4px 12px rgba(82, 99, 219, 0.28);
      }

      .payment-primary-btn i {
          font-size: 17px;
      }

      .payment-primary-btn:hover:not(:disabled) {
          transform: translateY(-1px);
          box-shadow: 0 6px 16px rgba(82, 99, 219, 0.35);
          background: linear-gradient(135deg, #6171db 0%, #5f46a6 100%);
      }

      .payment-primary-btn:active:not(:disabled) {
          transform: translateY(0);
      }

      .payment-primary-btn:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          background: linear-gradient(135deg, #999 0%, #666 100%);
      }

      .payment-primary-btn.btn-danger-pay {
          background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
      }

      .payment-primary-btn.btn-danger-pay:hover:not(:disabled) {
          background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
      }

      /* Payment Info Badge */
      .payment-info-badge {
          background: #eef8ff;
          border-left: 3px solid #2f9ed8;
          padding: 8px 12px;
          border-radius: 6px;
          font-size: 13px;
          color: #0f5f85;
          display: inline-flex;
          align-items: center;
          gap: 6px;
      }

      .payment-info-badge i {
          color: #2f9ed8;
          font-size: 13px;
      }

      @media (max-width: 768px) {
          .action-buttons-wrapper {
              margin-top: 12px;
          }

          .action-buttons-row {
              width: 100%;
              flex-wrap: wrap;
              justify-content: flex-start;
          }

          .payment-wrapper {
              width: 100%;
          }

          .fee_helper_text,
          .payment-primary-btn,
          .payment-info-badge {
              width: 100%;
          }

          .action-buttons-wrapper .btn {
              width: 100%;
          }

          .action-buttons-row .btn {
              width: auto;
              flex: 0 0 auto;
          }
      }

      /* Loading state for payment button */
      .payment-primary-btn.loading {
          pointer-events: none;
          opacity: 0.7;
      }

      .payment-primary-btn.loading i:first-child {
          animation: spin 1s linear infinite;
      }

      @keyframes spin {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }



          .area-type-cards {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 6px;
    }

    .area-type-card {
        flex: 1;
        min-width: 160px;
        max-width: 220px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border: 2px solid #d0dce0;
        border-radius: 8px;
        cursor: pointer;
        transition: all .2s;
        background: #fafcfd;
        user-select: none;
    }

    .area-type-card:hover {
        border-color: #8aa9b2;
        background: #eef3f5;
    }

    .area-type-card.active {
        border-color: #2a3f45;
        background: #e8f0f2;
        box-shadow: 0 0 0 1px #2a3f45;
    }

    .area-type-card .area-type-radio {
        display: none;
    }

    .area-type-card .area-type-icon {
        font-size: 22px;
        line-height: 1;
    }

    .area-type-card .area-type-label {
        font-size: 14px;
        font-weight: 600;
        color: #2a3f45;
    }

    .flow-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        padding: 8px 12px;
        background: #f7fafb;
        border: 1px solid #dfe8ed;
        border-radius: 6px;
        margin-bottom: 14px;
    }

    .flow-breadcrumb .flow-step {
        font-size: 13px;
        font-weight: 600;
        color: #3c565b;
        padding: 2px 8px;
        background: #fff;
        border: 1px solid #d0dce0;
        border-radius: 4px;
    }

    .flow-breadcrumb .flow-step.active {
        border-color: #2a3f45;
        background: #2a3f45;
        color: #fff;
    }

    .flow-breadcrumb .flow-arrow {
        color: #8aa9b2;
        font-size: 14px;
        font-weight: 700;
    }

    .area-type-selector-row {
        margin-bottom: 6px;
    }

    .location-fields-row {
        margin-top: 6px;
    }

    .inflammable-row-card {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
        margin-bottom: 6px;
        background: #fff;
        border: 1px solid #e0e7ea;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        transition: box-shadow .15s;
    }
    .inflammable-row-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    }
    .inflammable-row-card .drag-handle {
        flex: 0 0 20px;
        font-size: 16px;
        line-height: 28px;
        color: #8aa9b2;
        cursor: grab;
        user-select: none;
        text-align: center;
        margin-top: 2px;
    }
    .inflammable-row-card .drag-handle:active {
        cursor: grabbing;
    }
    .inflammable-row-card .field-group {
        flex: 1;
        min-width: 0;
    }
    .inflammable-row-card .field-group .form-group {
        margin-bottom: 0;
    }
    .inflammable-row-card .field-group .qty-unit-row {
        display: flex;
        gap: 8px;
    }
    .inflammable-row-card .field-group .qty-unit-row > div {
        flex: 1;
        min-width: 0;
    }
    .inflammable-row-card .delete-btn-col {
        flex: 0 0 auto;
        padding-top: 2px;
    }
    .inflammable-row-card .delete-btn-col .btn {
        white-space: nowrap;
    }
    .inflammable-row-card .qty-input-wrap .form-control {
        text-align: right;
    }

    /* 🔥 Inflammable Goods - Single Row Flex Layout */
    .inflammable-row-card .ifg-row-inner {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .inflammable-row-card .ifg-row-inner .ifg-field-product {
        flex: 1;
        min-width: 0;
    }
    .inflammable-row-card .ifg-row-inner .ifg-field-qty {
        flex: 0 0 100px;
    }
    .inflammable-row-card .ifg-row-inner .ifg-field-unit {
        flex: 0 0 120px;
    }
    .inflammable-row-card .ifg-row-inner .ifg-field-delete {
        flex: 0 0 auto;
    }
    .inflammable-row-card .ifg-row-inner .ifg-field-qty input {
        text-align: right;
    }

    .inflammable-add-row-area {
        margin-top: 8px;
        text-align: center;
    }

    .building-section-divider {
        border-top: 1px dashed #d0dce0;
        margin: 14px 0 10px;
    }
    .building-subsection-label {
        font-size: 13px;
        font-weight: 700;
        color: #2a3f45;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .building-subsection-label i {
        color: #5f7d85;
        font-size: 14px;
    }

    .radio-pill-group {
        display: flex;
        gap: 4px;
    }
    .radio-pill-group .radio-pill {
        position: relative;
        flex: 1;
    }
    .radio-pill-group .radio-pill input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .radio-pill-group .radio-pill label {
        display: block;
        text-align: center;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 600;
        border: 1.5px solid #d0dce0;
        border-radius: 6px;
        cursor: pointer;
        background: #fafcfd;
        color: #3c565b;
        transition: all .15s;
        margin-bottom: 0;
    }
    .radio-pill-group .radio-pill input:checked + label {
        border-color: #2a3f45;
        background: #e8f0f2;
        color: #1a2a2e;
    }
    .radio-pill-group .radio-pill label:hover {
        border-color: #8aa9b2;
        background: #eef3f5;
    }

    .conditional-field-highlight {
        border-left: 3px solid #17a2b8;
        padding-left: 10px;
        margin-bottom: 8px;
    }
    .conditional-field-highlight .form-group {
        margin-bottom: 0;
    }

    .section-legend {
        font-size: 12px;
        color: #8aa9b2;
        margin-top: -4px;
        margin-bottom: 8px;
    }
    .section-legend sup { color: #dc3545; }

    .field-tooltip {
        cursor: help;
        color: #5f7d85;
        font-size: 12px;
        margin-left: 3px;
    }

    /* ============================================================
       COMPACT INSTITUTION DETAILS INSPECTION REPEATER
       ============================================================ */
    .institution_details_inspection {
        padding: 6px !important;
    }

    .institution_details_inspection > div[style*="border"] {
        padding: 8px 10px !important;
        margin-bottom: 6px !important;
    }

    .institution_details_inspection .row.dynamic-row {
        margin-bottom: 0;
        padding: 10px;
    }

    .institution_details_inspection .row.dynamic-row > [class*="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }

    .institution_details_inspection .row.dynamic-row .form-group {
        margin-bottom: 4px;
    }

    .institution_details_inspection .form-control,
    .institution_details_inspection .select2-container .select2-selection--single {
        height: 28px !important;
        min-height: 28px !important;
        font-size: 11px !important;
        padding: 2px 6px !important;
        line-height: 1.3 !important;
    }

    .institution_details_inspection .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 26px !important;
        font-size: 11px !important;
        padding-left: 6px !important;
        padding-right: 20px !important;
    }

    .institution_details_inspection .select2-container .select2-selection--single .select2-selection__arrow {
        height: 26px !important;
    }

    .institution_details_inspection label {
        font-size: 11px !important;
        margin-bottom: 2px !important;
        line-height: 1.2;
    }

    .institution_details_inspection .building-section-divider {
        margin: 6px 0 4px !important;
        padding-top: 0 !important;
    }

    .institution_details_inspection .radio-pill-group .radio-pill label {
        padding: 2px 6px !important;
        font-size: 11px !important;
    }

    .institution_details_inspection .conditional-field-highlight {
        padding-left: 6px !important;
        margin-bottom: 2px !important;
    }

    .institution_details_inspection .sup_text_required,
    .institution_details_inspection sup.text-danger,
    .institution_details_inspection sup.sup_text_required {
        font-size: 10px !important;
    }

    .institution_details_inspection .btn-sm {
        padding: 3px 8px !important;
        font-size: 11px !important;
        min-height: auto !important;
    }

    .institution_details_inspection .small.text-danger {
        font-size: 10px !important;
        margin-top: 1px !important;
        margin-bottom: 0 !important;
    }

    .institution_details_inspection .form-control-sm {
        height: 28px !important;
        min-height: 28px !important;
        font-size: 11px !important;
        padding: 2px 6px !important;
    }

    .institution_details_inspection br {
        display: none;
    }

    .institution_details_inspection .panel-default-inner>.panel-body {
        padding: 12px 10px !important;
    }

    .institution_details_inspection .panel-default-inner>.panel-heading {
        padding: 6px 10px !important;
    }

    .institution_details_inspection .panel-default-inner>.panel-heading h3 {
        font-size: 12px !important;
    }

    .institution_details_inspection .text-right[style*="margin-top"] {
        margin-top: 4px !important;
    }

    .institution_details_inspection .fa-info-circle.field-tooltip {
        font-size: 11px !important;
    }

      .chauhaddi-section-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 20px 22px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        margin-bottom: 16px;
    }
 
    .chauhaddi-section-card .section-divider {
        border: none;
        border-top: 1px solid #e8ecf0;
        margin: 16px 0;
    }
 
    .chauhaddi-section-card .chauhaddi-block-title {
        font-size: 13.5px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 2px;
    }
 
    .chauhaddi-section-card .chauhaddi-block-sub {
        font-size: 12px;
        color: #94a3b8;
        margin-bottom: 14px;
    }
 
    .dir-label-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        margin-bottom: 6px;
        width: fit-content;
    }
 
    .dir-north { background: #dbeafe; color: #1d4ed8; }
    .dir-south { background: #fee2e2; color: #b91c1c; }
    .dir-east  { background: #dcfce7; color: #15803d; }
    .dir-west  { background: #fef9c3; color: #a16207; }
 
    .mb-10 { margin-bottom: 10px; }