


 

        /* expert form card – distinct class names (different from previous) */
        .expert-card {
      
            width: 100%;
            background: #ffffff;
            border-radius: 12px;
             box-shadow: 0 20px 40px -10px rgba(0, 20, 30, 0.11);
       padding: 1rem 1.5rem;
            transition: all 0.2s;
            border: 1px solid rgba(0, 0, 0, 0.15);
        }

        .expert-title {
         
           font-weight: 600;
  margin-bottom: 1.8rem;
  letter-spacing: -0.02em;
  border-left: 6px solid #023e83;
  padding-left: 1rem;
        }

        /* form row utilities */
        .expert-row {
            display: flex;
            flex-wrap: wrap;
              gap: 10px;
           
            align-items: flex-end;
        }

        .expert-field {
            flex: 1 1 calc(50% - 1rem);
            min-width: 200px;
            display: flex;
            flex-direction: column;
     
        }

        .expert-field-full {
            flex: 1 1 100%;
        }

        .expert-label {
            font-weight: 600;
            font-size: 0.85rem;
        
            text-transform: uppercase;
            letter-spacing: 0.3px;
            display: flex;
            align-items: center;
            gap: 0.2rem;
        }

        .expert-label .star {
            color: #c7452e;
            font-size: 1.2rem;
            line-height: 1;
        }

        .expert-input, .expert-select, .expert-textarea {
            background: #f9fcff;
            border: 1.5px solid #dce7ed;
            padding: 4px 13px;
            font-size: 0.95rem;
            outline: none;
            width: 100%;
            color: #103e4d;
            transition: 0.2s;
        }

        .expert-input:focus, .expert-select:focus, .expert-textarea:focus {
            border-color: #023e83;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(46, 139, 159, 0.1);
        }

        .expert-input::placeholder {
            color: #90a9b7;
            font-weight: 300;
            font-size: 0.9rem;
        }

        /* small hint like mobile placeholder example */
        .expert-hint {
            font-size: 0.7rem;
            color: #90a9b7;
            margin-left: 0.5rem;
        }

        /* domain checkbox group */
        .expert-domain-group {
            background: #f0f8fd;
            border-radius: 24px;
            padding: 1.4rem 1.8rem;
            margin: 0.5rem 0 1.5rem;
            border-left: 6px solid #023e83;
        }

        .expert-domain-title {
            font-weight: 600;

            margin-bottom: 1.1rem;
            font-size: 1rem;
        }

        .expert-checkbox-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem 2.5rem;
            align-items: center;
        }

        .expert-checkbox-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;

            font-size: 0.95rem;
        }

        .expert-checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #023e83;
        }

        /* experience row (year, month, status) */
        .expert-experience-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem 1.5rem;
            background: #f3faff;
            border-radius: 26px;
            padding: 1.5rem 2rem;
            margin: 1.2rem 0 1.8rem;
            align-items: flex-end;
            border: 1px solid #c5dde8;
        }

        .expert-exp-item {
            flex: 1 1 130px;
        }

        .expert-exp-label {
            font-weight: 600;
            font-size: 0.8rem;
          
            margin-bottom: 0.2rem;
            text-transform: uppercase;
        }

        .expert-select-sm, .expert-input-sm {
            background: white;
            border: 1.8px solid #cde0e8;
   
            padding: 4px 13px;
            width: 100%;
            font-size: 0.9rem;
        }

        /* available from */
        .expert-available-row {
            margin: 1.8rem 0 1.8rem;
            display: flex;
            align-items: top;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        .expert-available-label {
            font-weight: 600;
            
            min-width: 120px;
            font-size: 1rem;
        }

        .expert-date-wrapper {
            flex: 1 1 250px;
        }

        /* project textarea */
        .expert-project-block {
            background: #f0f7fb;
            border-radius: 26px;
            padding: 1.5rem 2rem;
            margin: 0rem 0 20px;
        }

        .expert-project-label {
            font-weight: 600;

            font-size: 1rem;
            margin-bottom: 1rem;
        }

        .expert-textarea {
         
            resize: vertical;
            min-height: 100px;
            background: white;
        }

        .expert-char-counter {
            text-align: right;
            font-size: 0.75rem;
            color: #023e83;
            margin-top: 0.3rem;
        }

        /* recaptcha row */
        .expert-recaptcha-wrapper {
          
            display: flex;
            flex-direction: column;
  
        }

        .expert-recaptcha-terms {
            font-size: 0.7rem;
            color: #023e83;
        }

        .expert-submit-btn {
          background-color: #e61e2d;

  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.2s,
    transform 0.1s;
  box-shadow: 0 6px 14px rgba(247, 116, 116, 0.35);

  align-self: flex-start;
  margin-top: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);

  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: #fff !important;
  text-align: center;
  padding: 12px 36px;

  text-transform: uppercase;
        }

        .expert-submit-btn:hover {
          background-color: #cf1b28;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(247, 116, 116, 0.35);
}
        /* error styling */
        .expert-error {
            color: #c73a2b;
            font-size: 0.75rem;
            font-weight: 500;
         
            min-height: 1.2rem;
        }

        .expert-input.error, .expert-select.error, .expert-textarea.error {
            border-color: #c73a2b;
            background: #fff6f5;
        }

        hr {
            border: 1px solid #d4e7f0;
            margin: 1.5rem 0 1rem;
        }
   