/* Form Page Styles - matching 3PL page aesthetic */
    :root {
      --accent-dispatch: #ff5f13;
    }
    
    /* Hero Section */
    .page-title {
      position: relative;
      overflow: hidden;
      background-image: url('assets/img/dispatch-contract-bg.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 50vh;
    }
    
    .page-title::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #0e1d34 0%, #1a2f4e 100%);
      opacity: 0.85;
      z-index: 1;
    }
    
    .page-title::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(255,95,19,0.15) 0%, rgba(255,95,19,0) 70%);
      border-radius: 50%;
      z-index: 2;
    }
    
    .page-title .container {
      position: relative;
      z-index: 10;
    }
    
    /* Floating icons */
    .floating-icon {
      position: absolute;
      opacity: 0.1;
      pointer-events: none;
      z-index: 3;
      color: #ff5f13;
      filter: drop-shadow(0 0 20px rgba(255, 95, 19, 0.3));
      animation: floatIcon 15s ease-in-out infinite;
    }
    
    .floating-icon i {
      font-size: 80px;
    }
    
    .floating-icon-1 {
      top: 10%;
      left: 3%;
      animation: floatIcon 18s ease-in-out infinite;
    }
    
    .floating-icon-2 {
      top: 20%;
      right: 2%;
      animation: floatIcon 22s ease-in-out infinite reverse;
    }
    
    .floating-icon-3 {
      bottom: 15%;
      left: 5%;
      animation: floatIcon 20s ease-in-out infinite 2s;
    }
    
    .floating-icon-4 {
      bottom: 25%;
      right: 5%;
      animation: floatIcon 25s ease-in-out infinite 1s;
    }
    
    @keyframes floatIcon {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(20px, -15px) rotate(5deg); }
      50% { transform: translate(-15px, -25px) rotate(10deg); }
      75% { transform: translate(-25px, -10px) rotate(5deg); }
    }
    
    /* Badge styling */
    .badge-dispatch {
      background: rgba(255,95,19,0.15);
      color: #fff;
      padding: 8px 20px;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 600;
      display: inline-block;
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255,95,19,0.3);
      margin-bottom: 20px;
    }
    
    /* Form Container */
    .form-container {
      background: #fff;
      border-radius: 30px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.1);
      padding: 40px;
      margin-top: -80px;
      position: relative;
      z-index: 20;
      border: 1px solid rgba(255,95,19,0.1);
    }
    
    /* Section Titles */
    .form-section-title {
      margin-bottom: 30px;
      padding-bottom: 15px;
      border-bottom: 2px solid rgba(255,95,19,0.1);
    }
    
    .form-section-title h3 {
      font-size: 24px;
      font-weight: 700;
      color: #0e1d34;
      margin-bottom: 5px;
    }
    
    .form-section-title p {
      color: #6c757d;
      margin: 0;
      font-size: 14px;
    }
    
    /* Form Groups */
    .form-group {
      margin-bottom: 25px;
    }
    
    .form-label {
      font-weight: 600;
      color: #0e1d34;
      margin-bottom: 8px;
      font-size: 15px;
    }
    
    .form-label i {
      color: #ff5f13;
      margin-right: 5px;
    }
    
    .form-control, .form-select {
      border: 2px solid #e9ecef;
      border-radius: 12px;
      padding: 12px 15px;
      font-size: 15px;
      transition: 0.3s;
    }
    
    .form-control:focus, .form-select:focus {
      border-color: #ff5f13;
      box-shadow: 0 0 0 0.2rem rgba(255,95,19,0.1);
      outline: none;
    }
    
    textarea.form-control {
      resize: vertical;
      min-height: 100px;
    }
    
    /* Checkbox Group */
    .checkbox-group {
      background: #f8f9fc;
      border-radius: 12px;
      padding: 20px;
    }
    
    .form-check {
      margin-bottom: 15px;
      padding-left: 35px;
    }
    
    .form-check-input {
      width: 20px;
      height: 20px;
      margin-left: -35px;
      border: 2px solid #dee2e6;
    }
    
    .form-check-input:checked {
      background-color: #ff5f13;
      border-color: #ff5f13;
    }
    
    .form-check-label {
      font-weight: 500;
      color: #0e1d34;
    }
    
    .required {
      color: #dc3545;
      margin-left: 3px;
    }
    
    /* Submit Button */
    .btn-submit {
      background: #ff5f13;
      color: #fff;
      padding: 14px 40px;
      border-radius: 50px;
      font-weight: 600;
      transition: 0.3s;
      border: none;
      width: 100%;
      font-size: 16px;
    }
    
    .btn-submit:hover {
      background: #e65510;
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(255,95,19,0.2);
    }
    
    /* Agreement Summary / Info Box */
    .info-box {
      background: #fff3e6;
      border-radius: 15px;
      padding: 25px;
      margin-bottom: 30px;
      border-left: 4px solid #ff5f13;
    }
    
    .info-box h4 {
      color: #0e1d34;
      font-weight: 700;
      margin-bottom: 15px;
    }
    
    .info-box ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .info-box li {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      color: #495057;
    }
    
    .info-box li i {
      color: #ff5f13;
      font-size: 18px;
    }
    
    /* Alert styles */
    .alert-success-custom {
      background-color: #d4edda;
      border-color: #c3e6cb;
      color: #155724;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 25px;
      display: none;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .page-title h1 {
        font-size: 36px;
      }
      
      /* The parent section has inline padding: 100px 100px 100px, which
         eats up 200px of horizontal space on mobile (100px each side)
         before the form even starts. !important is required here since
         inline styles otherwise always win over stylesheet rules. */
      .contract-form-section {
        padding: 60px 15px 60px !important;
        margin-top: 40px !important;
      }
      
      .form-container {
        padding: 25px;
        margin-top: -40px;
      }
      
      .floating-icon i {
        font-size: 50px;
      }
    }

    @media (max-width: 480px) {
      .contract-form-section {
        padding: 50px 10px 50px !important;
      }

      .form-container {
        padding: 18px;
      }
    }